create simple one page website with three section usable on desktop and mobile

roberto pulpo

acceptablesyntax.7z

Home >Computer Science homework help >create simple one page website with three section usable on desktop and mobile

AIST2220 02 HTML1-1.pdf

AIST 2220, Web Design

HTML Concepts

Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr

<web>ONE

Learning Outcomes

 Describe the concept of “Semantic Meaning” as applied to HTML

 Identify and use many of the most common elements used in HTML

 Explain how HTML handles “whitespace”

 Be able to link to other HTML pages using anchor elements

 Describe the difference between block and phrase elements

 Identify the HTML elements commonly used to structure a document

 Explain proper nesting of HTML elements

 Describe the nature and purpose of HTML element attributes

 Identify a variety of HTML special characters and symbols

<web>ONE

Key Concept – “Semantic Meaning”

• HTML “describes” a document structure

• Most HTML elements correspond to specific layout elements common to document formatting

• You want to use the “right” elements to properly describe your document • Even if using the “right” element does not change the formatting

• AND even if using it makes it have the wrong formatting

• We’ll be able to use CSS (Cascading Style Sheets) to make each element look exactly the way we want it to

<web>ONE

Key Elements – Headings : <h1> … <h6>

• Headings are numbered • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

• Headings represent different “levels” within a document • Think: Title  Chapter  Section • NOT necessarily sequential • Can have many of the same level of heading within

a single document

• <h1> is “big” and <h2> is “smaller” but do NOT use these simply to make bigger text • Again, CSS will be used for formatting

<web>ONE

Key Element – Paragraph : <p>

• Paragraphs are as you learned in grammar school…like paragraphs in an essay • Groups of related sentences • Related to a common concept or thought

• Each separate paragraph in a document belongs in a separate <p> element

• It puts some spacing at the top and bottom of the paragraph • But do NOT use a <p> element just to get spacing • <p> elements are only for honest-to-goodness paragraphs • If you need spacing, it can be added to other elements later…again using CSS

<p> This is a paragraph. It is only a paragraph.

</p> <p>

But it isn't the ONLY paragraph. ‘Cause THIS is a second paragraph. BOO YAH!

</p>

REMINDER All visible elements go INSIDE OF the <body>

<web>ONE

Key Concept – Ignored “Whitespace”

• Extra spaces and newlines (known as “whitespace”) in HTML code is completely ignored by a browser when it renders a page

• REALLY useful for helping us to format our HTML code • Can indent without inserting extra spaces in our web page

• Can add extra lines between sections

• Etc.

• Nice because the text on your page always “wraps” correctly according to the size of the browser (desktop vs. mobile, etc.)

• BUT can be a bit confusing if you are expecting to have lines in your page break at the same place they do in your HTML code

<web>ONE

Key Concept –“Whitespace” exception

• <pre> tag preserves whitespaces

<web>ONE

Key Element – Line Break : <br>

• If you DO need to force a line break at a specific location within a paragraph, you can use a <br> element

• This is a self-closing tag

• Do NOT “abuse” <br> elements • Generally only used inside of other elements

• Only to override default word wrapping

<p> My name is Herman Munster. My address is:<br> <br> 1313 Mockingbird Lane<br/> Mockingbird Heights, CA

</p>

My name is Herman Munster. My

address is:

1313 Mockingbird Lane

Mockingbird Heights, CA

<web>ONE

Key Element – Blockquote : <blockquote>

• Used to denote a quoted passage of text

• Indents the entire passage

• Remember, this is describing the semantic meaning of the text • Do not use it simply to indent text that is not

actually a quotation

<p> Abraham Lincoln once said:

</p> <blockquote>

Four score and seven years ago, our fathers...

</blockquote>

Abraham Lincoln once said

Four score and seven years ago

our fathers...

<web>ONE

Key Elements – Bold / Italic Phrase : <b> / <i>

• Used within other blocks of text (e.g., within a paragraph)

• <b> used to highlight a word or phrase in a bold font • Can also use <strong> element

• <i> used to highlight a word or phrase in an italicized font • Can also use <em> element

<p> Do you <i>really</i> not understand? I said <b>eat your broccoli</b>!

</p>

Do you really not understand? I said

eat your broccoli!

<web>ONE

Horizontal line <hr>

• An HR element shows a horizontal line on your web page

• It’s a self-closing tag • Can’t have any content

• Does not have an End tag

<h1> A heading

</h1> <hr> <p>

A paragraph. </p>

<web>ONE

Key Concept – Block vs. Inline(Phrase) Elements • Block Elements start and end with new line

on a page • E.g., paragraphs, headings, blockquotes, etc. • Each subsequent block is “stacked” under the

prior one

• Inline Elements are the elements that occupies the space needed to show them and allows other elements to be on their left or right sides • usually used to mark up words or phrases within

a block element • Do NOT necessarily start and end with new lines

Four score and seven years ago our fathers

brought forth on this continent, a new

nation, conceived in Liberty, and dedicated

to the proposition that all men are created

equal.

Now we are engaged in a great civil war,

testing whether that nation, or any nation so

conceived and so dedicated, can long

endure. We are met on a great battle-field of

that war. We have come to dedicate a

portion of that field, as a final resting place

for those who here gave their lives that that

nation might live. It is altogether fitting and

proper that we should do this.

BLOCK

PHRASE

<web>ONE

Key Concept – Proper Nesting (1)

• As noted, elements are often nested inside of one another

• Can be used to add additional semantic meaning or styling

<p>This is a <b><i>paragraph.</i></b></p>

• The word “paragraph” is: • Part of a paragraph,

• Displayed using a bold font, and

• Displayed using an italicized font

This is a paragraph.

<web>ONE

Key Concept – Proper Nesting (2)

• BE CAREFUL!!!!

• Remember elements contain other elements, forming a parent/child relationship

• Cannot close a parent element before closing it’s children

paragraph. </i>

</b> </p>

paragraph. </b>

</i> </p>

<web>ONE

Practice 1– Having the following content …

Introduction to Web Design

Course Description

Acquaints students with HTML, Cascading Style Sheets (CSS), and design concepts for creating web pages. Students will be exposed to common HTML tags, CSS rules and properties, appropriate format and page layout, adding and manipulating visuals and images, and creating web forms.

Instructor Information

Professor: Dr. Reza Rahaeimehr (Raha)

Office: GCC 2807, Georgia Cyber Center

Course Delivery

This is a face-to-face, hands-on course. This means we will hold face-to-face classes during the scheduled class periods and practice the materials in the classes right after learning each topic. Attendance to the lectures is mandatory!

<web>ONE

Practice 1– Create a page that looks like this

<web>ONE

Practice 1– the code

<web>ONE

Key Element – Anchor Tag : <a>

• THE most fundamental element of HTML • Puts the “hyper” in Hypertext

• Content of an anchor element is “clickable”

• Clicking the element causes the browser to navigate to a new: • Web page on your site

• Web page on another site

• Location on the current page (more on this later)

<a href="education.html">Education</a> Education

<web>ONE

Key Concept – Attributes

• Every tag has some Attributes

• Can be used to: • Uniquely identify an element

• Classify an element

• Changes the default setting of the element

• An element can have many attributes

• Added to the opening tag only

• (almost) Always follows convention: • attribute_name="attribute_value"

<a href="education.html"> Education

</a>

<web>ONE

Anchor Tag Attribute – href

• Hyperlink Reference attribute

• URL of the resource (page, image, video, etc.) to load when clicked

• MUST BE SPECIFIED to make a link “clickable”

• Commonly one of: • RELATIVE URL : e.g., <a href="education.html">

• Loads a resource on the current web site (more on this later)

• ABSOLUTE URL : e.g., <a href="http://www.augusta.edu"> • Loads a resource from another web site

• EMAIL URL : e.g., <a href="mailto:[email protected]"> • Creates a new email message and fills in the specified address

<web>ONE

Anchor Tag Attribute – target

• Controls where the link opens when clicked

• Leave it off to open the link in the current tab • Default…replaces the current page • Most commonly used when navigating between pages within a single site

• Set to “_blank” to open the link in a new tab • Most commonly used when navigating to a page on another web site • The _ (underscore) is important!!

<web>ONE

Key Element – Unordered List : <ul> + <li>

• A bulleted list

• Use when order does not matter

• <ul> is a “container” element

• <li> are “list items” inside of container

<ul> <li>John</li> <li>Paul</li> <li>George</li> <li>Ringo</li>

</ul>

• John

• Paul

• George

• Ringo

<web>ONE

Key Element – Ordered List : <ol> + <li>

• A numbered list

• Use when order or rank matters

• <ol> is a “container” element

• <li> are “list items” inside of container

<ol> <li>Green</li> <li>Blue</li> <li>Red</li> <li>Purple</li>

</ol>

1. Green

2. Blue

3. Red

4. Purple

<web>ONE

Key Concept – Nested Lists

• Use when you want to • Embed one list

• Inside another list • Just

• Like

• This…

• Nested list goes INSIDE of an <li> element

• Works for both ordered and unordered lists

</ul> </li>

</ul>

• Item 1

• Item 2

o Item 2a

o Item 2b

<web>ONE

Practice 2 – Having the following content …

List of states of the United States and their cities

Florida

Georgia

California

...

<web>ONE

Practice 2 – Create a page that looks like this

<web>ONE

Practice 2 – the code

<web>ONE

Practice 3 – Having the following content …

List of states of the United States and their cities

Florida

Tallahassee

Jacksonville

Georgia

Atlanta

Augusta

Evans

California

Sacramento

Los Angeles

San Diego

...

<web>ONE

Practice 3 – Create a page that looks like this

<web>ONE

Practice 3 – The Code

<web>ONE

Common Structural Elements (1)

• Commonly used to further subdivide the <body> of an HTML document

• <header>…</header> • Contains “visible” page headings • Title, banner image, etc.

• <nav>…</nav> • Contains the primary site navigation links

• <main>…</main> • Contains the main content

• <footer>…</footer> • Contains common page footer content

<body>

<nav>

<main>

<web>ONE

Common Structural Elements (2) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title Goes Here</title>

</head> <body> <header> ...

</header> <nav> ...

</nav> <main> ...

</main> <footer> ...

</footer> </body>

</html>

<nav>

<main>

<web>ONE

Key Elements – <div> and <span>

• A <div> element is a “generic” block element • Kind of like the <header> or <main> element

• Used to group together related content

• A <span> element is a “generic” phrase element • Likewise, kind of like an <i> or <b> element, but

• Used to add arbitrary style to a given phrase

• Both of these are used extensively, but

• Hang tight…really only useful when paired with CSS

<web>ONE

HTML “Special Characters” and Symbols

• Some characters are “special” because • They are used by HTML itself, or

• They are symbols not available on your keyboard

• If you want to show them on your web page, you insert them using a specific syntax: • &code;  Ampersand followed by a code followed by a semicolon

• The most commonly used are: < < (less than)

> > (greater than)

& & (ampersand)

  (non-breaking space)

™ ™ (trademark symbol)

® ® (registered symbol)

— — (em dash)

<web>ONE

Summary

Things we learned:

 The concept of “Semantic Meaning”

 A lot of HTML elements, including ones that define the basic structure of an HTML document

 How HTML handles “whitespace”

 How to link to other HTML pages using anchor elements

 Proper nesting of HTML elements

 How and why to add attributes to HTML elements

 A variety of HTML special characters and symbols

AIST2220 03 CSS.pdf

AIST 2220, Web Design

CSS Concepts

Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr

<web>ONE

Learning Outcomes

 Describe the purpose of Cascading Style Sheets (CSS)

 Describe the structure of a CSS rule block

 Explain the syntax, purpose and function of a CSS selector

 Explain the syntax, purpose and function of CSS declaration

 Identify the main ways of including CSS rules on a web page

 Add color to selected HTML elements

 Explain how CSS rules are interpreted by the browser

 Describe common types of CSS selector

<web>ONE

Overview of Cascading Style Sheets (1)

• KEY CONCEPT – STYLE IS SEPARATE FROM CONTENT

• HTML describes a document’s content • Each element has “default” styling

• CSS is used to add custom style to the document

• A “Style Sheet” is nothing new • A concept from the early days of print media

• A physical sheet of paper describing typography and spacing standards

• Later adopted in desktop publishing…e.g., MS Word paragraph styles

• CSS brings this concept to the web

<web>ONE

Overview of Cascading Style Sheets (2)

• CSS is a standard governed by the W3C • Supported by all browsers on all platforms • Currently at revision 3, or CSS3

• CSS is extremely flexible and powerful • E.g., http://www.csszengarden.com

• CSS style rules can be shared between many HTML pages • Maintain consistency of style between pages • Greatly eases web site maintenance

styles.css

index.html education.html contact.html…

http://www.csszengarden.com/

<web>ONE

Applying CSS Rules

• Basic Syntax:

header { background-color: blue; }

Selector Rule Block Declaration Declaration Property Declaration Value

<web>ONE

CSS Syntax Rules

• The rule block for a selector can contain multiple declarations

• Each separate declaration must end with a semi-colon

• Like HTML, whitespace is ignored

• Guidelines: • Group all declarations for a given selector into a

single block • Selector and opening curly-brace on first line • Separate line for each declaration • Indent declarations within block • Separate line for closing curly brace

body { background-color: black; color: white;

}

header { background-color: blue; color: white;

}

nav { background-color: yellow; color: black;

}

footer { background-color: blue; color: white;

}

<web>ONE

Ways of Including Styles

•External CSS!!!

• also • Embedded CSS

• Inline CSS

<web>ONE

External CSS

• All rules exist in separate CSS file(s)

• Every HTML page “links” to that file

• Use <link> element in <head> section of ALL of your HTML files

body { background-color: black; color: white;

}

header { background-color: blue; color: white;

} ...

mystyles.cssindex.html

<!DOCTYPE html> <html lang="en">

<head> <meta charset="utf-8"/> <title>Page Title Goes Here</title>

<header> ...

<web>ONE

Embedded CSS

• Rarely, you may wish to add CSS rules that are specific ONLY to one page

• If so, you can add CSS to a <style> element in the <head> section of your HTML file

• Styles can “override” rules in the main CSS file • IF placed below the <link> element

• More on this in a bit…

<!DOCTYPE html> <html lang="en">

<head> <meta charset="utf-8"/> <title>Page Title Goes Here</title> <link rel="stylesheet" href="mystyles.css"/>

<style> body {

background-color: red; color: white;

} </style>

</head> <body>

<header> ...

<web>ONE

Inline CSS

• You may also wish to apply unique styling to a single element on a single page

• CSS can be put inside style attribute for any HTML element

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Page Title Goes Here</title> <link rel="stylesheet"

href="mystyles.css"/> </head> <body> <header> <h1 style="color: yellow;"> Special Header Text...Woo Hoo!

</h1> </header> ...

<web>ONE

“Cascading” in CSS – Style Overrides

• Elements have default styles defined by each browser

• CSS rules can override these styles

• Follows “last rule applied” strategy

• So generally speaking, style rules will “cascade” as follows:

Browser Defaults

External CSS

Embedded CSS

Inline CSS

If defined after importing external CSS

<web>ONE

“Cascading” in CSS – Inherited Styles

• Many style rules also “inherited” from parent elements to child elements – Like font

• Property Types • Inherited properties, which by default are set to

the computed value of the parent element • Non-inherited properties, which by default are

set to the initial value of a property

• For example (based on the diagram): • body { font-size: 8px; }

Will set the font size for ALL elements inside of the <body> (<header>, <h1>, <main>, <div>, <p>, etc.)

• main { font-family: serif; } Will set the font family of the <main> element (including the <div> and <p>), but will NOT affect the <header> or <h1>

<body>

<main>

<div>

<p>

<h1>

<web>ONE

CSS Properties – color and background-color

• There are HUNDREDS of potential CSS properties that can alter the appearance of HTML elements

• The “color” property is the text- or foreground-color of an element

• The “background-color” property is the color of the background of a block or phrase element

p { color: green;

}

I am an example paragraph. My

text-color is green.

p { background-color: green;

}

I am an example paragraph.

My background-color is green.

<web>ONE

CSS Color Value Options – Pixels

• All computer screens are comprised of millions of dots called “pixels”

• Each independent pixel can display a separate color

• MOST screens actually have three separate “sub-pixels” • Red + Green + Blue

• By altering the intensity of each sub-pixel, a computer screen can render millions of different colors

<web>ONE

CSS Color Value Options – RGB Values

• In CSS, there are a number of ways to represent a color

• The three most common are RGB, HEX and Name

• An RGB color value provides a separate intensity for each of the three sub-pixels • Each separate value ranges from 0 to 255

• 0 is off and 255 is fully on (i.e., full intensity)

• Use form: rgb(rval,gval,bval); • Lowercase

background-color: rgb(0,0,0);

background-color: rgb(255,255,255);

background-color: rgb(255,0,0);

background-color: rgb(0,255,0);

background-color: rgb(0,255,255);

background-color: rgb(212,172,55);

<web>ONE

CSS Color Value Options – Hex Values

• A CSS Hex Value is simply an RGB value in a more compact form

• Decimal: digits from 0 to 9 • E.g., 14 = one ten + four ones

• Hexadecimal: digits from 0 to 15 • 10=a, 11=b, 12=c, 13=d, 14=e, 15=f • E.g., 3b = 3 sixteens + 11 ones = 59

• Color value is 3 Hexadecimal numbers • ff = 255, so “00 to ff” same as “0 to 255”

• Use form: #rrggbb;

background-color: #000000;

background-color: #FFFFFF;

background-color: #FF0000;

background-color: #00FF00;

background-color: #00FFFF;

background-color: #d4ac37;

<web>ONE

CSS Color Value Options – Named Colors

• Can also use a color “name”

• 17 “safe” color names • Look the same in all browsers

• See the chart on the right

• 140 total “standard” color names

https://www.w3schools.com/colors

color: green;

https://www.w3schools.com/colors

<web>ONE

CSS Selector Types

• The most critical step in defining and applying CSS rules is selecting the right element(s)

• There are a few types of CSS selector that we are concerned with • Element Name Selector

• Class Selector

• ID Selector

• Descendant Selector

• Grouped Selector

• A few others…we’ll cover at least one more in a future lesson

<web>ONE

Element Name Selector

• Selector is just the name of a type of HTML element • E.g., body, main, div, p, etc.

• So far, we’ve seen only this kind of selector

• In practice, this selector should be used VERY sparingly • Redefines the rules for ALL elements of a certain type

• Usually, pages have many instances of each element type

• Typically will want to be more specific when applying styles

p { color: green;

}

I am an example paragraph. My

text-color is green.

<web>ONE

Class Selector

• To be more specific, you can assign one or more elements on a page to belong to a “class” • Use class attribute on the HTML element(s) you wish to assign

• Can assign to multiple classes (each separated by a space)

• You can then select these elements in CSS using a “class selector” • Class name prefixed with a period / dot (i.e., .classname )

<div class="cooldivs"> ...

</div>

.cooldivs { background-color: #cc42f8;

}

index.html mystyles.css

<web>ONE

ID Selector

• Very similar to a class selector

• You can assign an “ID” to an element on a page • Use id attribute on the HTML element you wish to assign

• Id’s are usually unique

• Id is generally used to access the element in scripts

• You can then select that element in CSS using an “id selector” • ID name prefixed by number sign / pound / hashtag (i.e., #idname )

<p id="firstp"> ...

</p>

#firstp { color: rgb(48,48,192);

}

index.html mystyles.css

<web>ONE

Descendant Selector

• Sometimes useful to get more specific selectors without having to add id or class attributes to your HTML

• Can select elements ONLY inside of a specific “ancestor” element • Use format ancestor descendant

• Examples: nav a { ... } All <a> elements inside of the <nav> main p { ... } All <p> elements inside of the <main> .first a { ... } All <a> elements inside of elements of class “first”

<body>

<main>

<div>

<p>

<nav>

<a> <a>

<web>ONE

Grouped Selector

• Not really a selector, per se

• Really a shortcut to apply the same rules to multiple selectors

• Separate each selector by a comma

• Examples: header, footer { ... } Apply rules to both <header> and <footer>

nav a, footer a { ... } Apply rules to <a> elements inside of both <nav> and <footer>

h2, h3, .first { ... } Apply rules to <h2> and <h3> and any elements with a class of “first”

<web>ONE

Troubleshooting CSS Problems

• Check for typos!! – easily the most common error

• VALIDATE YOUR CSS!!!! • Can use https://jigsaw.w3.org/css-validator/ • Double-check your colons ( : ) and semicolons ( ; ) – easy to mix up • Check that you are not using equals signs ( = ) instead of colons ( : ) between

declaration properties and values – again a common error • Format your CSS properly to help check for errors with opening and closing braces

• If some CSS rules are applied and some aren’t: • Examine your CSS from top to bottom • Determine the first rule that is not applied • Often the error is in the rule above the rule that is not applied (missing semi-colon is

common)

https://jigsaw.w3.org/css-validator/

<web>ONE

Summary

Things we learned:

 The purpose of Cascading Style Sheets (CSS)

 CSS syntax, including rule blocks, selectors and declarations

 How to include CSS rules on a web page, including external, embedded, and inline

 How to add color to HTML elements

 How CSS rules are interpreted by the browser (the “cascade”)

 Common types of CSS selector, including element, class, id, descendant and grouped

AIST2220 04 Design.pdf

AIST 2220, Web Design

Design Principles

Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr

Outline • Visual Design Principles

• Organization and Navigation

• Page Layout

• Colors and Fonts

AIST 2220

Visual Design Principles

AIST 2220

• Repetition: Repeat visual elements for consistency

o Stick with a color scheme

o Use similar shapes for page components

• Contrast: Ensure different elements visually contrast

o Foreground vs. background

o Clear delineation between sections

Same rounded- rectangle for page sections, buttons

Content boxes contrast with background, each other

Text is light or dark depending on background color

Visual Design Principles

AIST 2220

• Proximity: Group related items together

o Should match HTML structure

o Use spacing to show groups

• Alignment: Align elements with each other

o Imagine a grid, rows and columns

o Makes pages look “neat”

Comic buttons grouped together

Page sections aligned vertically

Buttons aligned horizontally

Site navigation links, separated from header

Footer images grouped in a grid

Outline • Visual Design Principles

• Organization and Navigation

• Page Layout

• Colors and Fonts

AIST 2220

Site Organization

AIST 2220

• Based on logical structure of information

• How is your site’s content organized into sections?

• Example: A hotel website

Home

Room Types Reservations Amenities Business Services

Conference Rooms

Event Hosting

Organization Navigation • Design of navigation elements depends on organization

• Top-level categories = main navbar items

• Pages in categories = navigation menus (pop-up, drop-down)

AIST 2220

Home

Room Types Reservations Amenities Business Services

Conference Rooms

Event Hosting

Rooms Reservations Amenities Business

Conference Rooms

Event Hosting

Example: A News Site • https://ithacavoice.com/

AIST 2220

https://ithacavoice.com/

Pitfall: Shallow Hierarchy • Too many choices is confusing

• Long navigation bars are harder to read

AIST 2220

Home

About Us Contact Sofas Loveseats Tables Chairs Desks Office Chairs

Mattresses Dressers Bookshelves

About Loveseats Tables ChairsContact Sofas Desks Office Chairs Mattresses Dressers Bookshelves

Fixing a Shallow Hierarchy • How would you make this better?

AIST 2220

Home

About Us Contact Sofas Loveseats Tables Chairs Desks Office Chairs

Mattresses Dressers Bookshelves

Home

About Us Contact Products

Living Room

Sofas Loveseats

Dining Room

Tables Chairs

Office

Desks Office Chairs Bookshelves

Bedroom

Mattresses Dressers

Real-World Example • https://www.amazon.com/

• Amazon’s main menu: Too many choices

• I can’t keep track of all these departments and categories

AIST 2220

https://www.amazon.com/

Pitfall: Deep Hierarchy • Too many clicks, too many menu layers

• Problem?

o Users will get lost or frustrated

AIST 2220

Home

Syllabus Course

Content

Lectures

Week 1

Monday Wednesday

Week 2

Monday Wednesday

Week 3

Monday Wednesday

Etc.

Assignments

Selfie-Site

SS1 SS2 SS3 Etc.

Final Project

4 clicks just to get to a lecture video!

Outline • Visual Design Principles

• Organization and Navigation

• Page Layout

• Colors and Fonts

AIST 2220

Page Layout

AIST 2220

• Page organization: a subset of site organization

• First, decide on logical structure (just like with HTML tags)

• Then decide where to place each component “box” on the page

• Use a similar frame diagram

<nav>

<main>

<h1> (Title)

<h2> (Subtitle)

<div> (Welcome section)

<div> (Announcements section)

<div> (First announcement)

<h1>

<p>

<h1>

<h2>

<p>

Layout Considerations • Navigation element: horizontal, vertical, something else?

• Where does it go with respect to the header?

AIST 2220

Main Content

Header

AmenitiesRooms Reservations Business

Main Content

Header

Amenities

Rooms

Reservations

Business

Header

AmenitiesRooms Reservations Business

Layout Considerations • How is the content organized?

• Columns, sidebars, grid of images?

AIST 2220

Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum tincidunt rhoncus. Morbi facilisis felis sem, a dapibus lorem eleifend at.

Heading Etiam condimentum nisl massa, quis faucibus lectus hendrerit et. Phasellus eu augue congue tellus ullamcorper bibendum et ac libero.

Header

Navigation Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum tincidunt rhoncus.

Heading Morbi facilisis felis sem, a dapibus lorem eleifend at. Phasellus eu augue congue tellus ullamcorper bibendum et ac libero.

Header

Sidebar Etiam condimentum nisl massa, quis faucibus lectus hendrerit et.

Navigation

Text Line Width • In each page element, how wide will a line of text be?

• Lines longer than 75 characters are hard to read

• On large screens, paragraphs may expand wider than you think

AIST 2220

Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum imperdiet nisl, eu imperdiet metus dignissim vel. Fusce ante neque, viverra ac diam facilisis, maximus mollis ex. Phasellus porttitor turpis nec quam mattis tincidunt. Proin egestas egestas lectus eget luctus.

Heading Maecenas pellentesque porttitor lorem, vel luctus nulla sollicitudin quis. Mauris eleifend lacus ut accumsan feugiat. Maecenas posuere pellentesque lacus, eu vehicula arcu condimentum eu.

Heading Maecenas pellentesque porttitor lorem, vel luctus nulla sollicitudin quis. Mauris eleifend lacus ut accumsan feugiat. Maecenas posuere pellentesque lacus, eu vehicula arcu condimentum eu. Proin egestas egestas lectus eget luctus.

Worse: Better:

Text Block Size • How will you break your text content into sections, paragraphs?

• Avoid the dreaded “wall of text”

AIST 2220

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum imperdiet nisl, eu imperdiet metus dignissim vel. Fusce ante neque, viverra ac diam facilisis, maximus mollis ex. Phasellus porttitor turpis nec quam mattis tincidunt. Proin egestas egestas lectus eget luctus. Maecenas pellentesque porttitor lorem, vel luctus nulla sollicitudin quis. Mauris eleifend lacus ut accumsan feugiat. Maecenas posuere pellentesque lacus, eu vehicula arcu condimentum eu. Vivamus at augue eget leo vehicula porttitor ut in neque. Pellentesque ex turpis, accumsan eget ligula nec, semper venenatis elit. Vestibulum sodales orci ac tortor convallis.

Header

Navigation

Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum imperdiet nisl, eu imperdiet metus dignissim vel.

Fusce ante neque, viverra ac diam facilisis, maximus mollis ex. Phasellus porttitor turpis nec quam mattis tincidunt.

• Proin egestas egestas lectus eget luctus • Maecenas pellentesque porttitor lorem • Vel luctus nulla sollicitudin quis • Mauris eleifend lacus ut accumsan feugiat

Header

Navigation

Better:

Layouts and Screen Size • Wide range of screen sizes (phones, tablets, laptops, desktops)

• How wide do you expect your page to be? What if the screen is wider or narrower than that? How will that affect your layout?

AIST 2220

Option 1: Multiple Layouts • Redesign your layout for each screen size

• Can use fixed-size layout at each size

AIST 2220

Header

Amenities

Rooms

Reservations

Business

Header

AmenitiesRooms Reservations BusinessHeading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum tincidunt rhoncus. Morbi facilisis felis sem, a dapibus lorem eleifend at.

Heading Etiam condimentum nisl massa, quis faucibus lectus hendrerit et. Phasellus eu augue congue tellus ullamcorper bibendum et ac libero.

Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum tincidunt rhoncus.

Heading Morbi facilisis felis sem, a dapibus lorem eleifend at. Phasellus eu augue congue tellus ullamcorper bibendum et ac libero.

Header

Amenities

Rooms

Reservations

Business

Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Wide Narrow Phone

Option 2: Fluid Layout • Design layout with elements that can stretch and shrink

• Remember that long lines of text are hard to read

AIST 2220

Header

Amenities

Rooms Reservations

Business

Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum tincidunt rhoncus. Morbi facilisis felis sem, a dapibus lorem eleifend at. Fusce ante neque, viverra ac diam facilisis, maximus mollis ex.

Header

AmenitiesRooms Reservations Business

Heading Etiam condimentum nisl massa, quis faucibus lectus hendrerit et. Phasellus eu augue congue tellus ullamcorper bibendum et ac libero.

Maybe add a second column as it gets wider

Outline • Visual Design Principles

• Organization and Navigation

• Page Layout

• Colors and Fonts

AIST 2220

Color Schemes

AIST 2220

• Repetition: Don’t use too many colors

• Color Scheme: A set of colors with design roles

o Primary

o Secondary

o Accent

o Highlight

Using a Color Scheme

AIST 2220

• Primary color: major page elements (e.g. <main>)

• Secondary color: toolbars, buttons, etc.

• Accents: Should contrast with primary/secondary, use for text- shadow and borders on those elements

• Highlight: Use sparingly to make something stand out

Picking a Color Scheme

AIST 2220

• Colors in scheme should have relationships to each other

• Analogous: Next to each other on the color wheel

• Complementary: Opposite each other

• Triadic: Three colors equidistant on the wheel

Main color

Analogous

Complementary

Triadic

Color Scheme Resources • https://color.adobe.com/create/color-wheel

• https://www.canva.com/colors/color-wheel/

• https://htmlcolorcodes.com/color-picker/

• These let you pick a main color, then show you analogous, complementary, triadic, tetradic colors around it

• Also show you the hex codes for those colors, for your CSS

AIST 2220

https://color.adobe.com/create/color-wheel

https://www.canva.com/colors/color-wheel/

https://htmlcolorcodes.com/color-picker/

Color Choice Considerations

AIST 2220

• Primary color should match logo or banner image

• Text should be readable – text colors contrast with background colors

Fonts

AIST 2220

• Same principle as colors: Don’t use too many

• Pick a “Font Scheme”

o Heading font

o Body font

o Maybe a special font for the site title/logo

Heading font Body font

Font Categories

AIST 2220

• Serif: Has decorative strokes (“tails”) on ends of letters

o Elegant, traditional, readable

• Sans-serif: No decorations on ends of letters

o Clean, modern, easier to display at small sizes

Font Choice Considerations • Body font: Must be readable in large quantities

• Heading font: Should stand out, can be more decorative

AIST 2220

Which would you rather read?

Harrington Calibri

Calibri

Cambria

Fonts on the Web • Major restriction: Browser can only display a font that is

installed on the user’s computer

• font-face: Futura; only works if the person visiting your website has the Futura font installed

AIST 2220

Body font set to Perpetua Same website, computer without Perpetua

Fonts on the Web • Very few fonts are likely to be installed on all computers

• If you want your font selection to “work” most of the time, you only have 6 choices: o Arial

o Times New Roman

o Courier New

o Georgia

o Tahoma

o Verdana

AIST 2220

The Web Fonts Solution • CSS @font-face block: Tell browser to download

a font before displaying your web page

o Now the font is definitely installed

• Complications:

o You must host the font on your server (in WOFF and EOT file format)

o Font must be licensed for free use, not proprietary

AIST 2220

@font-face {

font-family: "myFont";

src: url("myFont.woff");

}

Web Fonts • To learn more: https://developer.mozilla.org/en-

US/docs/Learn/CSS/Styling_text/Web_fonts

• Google Fonts makes it easy: Google hosts the fonts and the CSS @font-face block, you just link to Google’s stylesheet

o Go to fonts.google.com, pick your font

o Google shows you the link to a stylesheet that provides that font

o Copy it into your <head>

AIST 2220

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts

Summary • Visual design principles: Repetition, contrast, proximity,

alignment

• Site organization: Hierarchy, navigation, depth considerations

• Page layout: Element sizes and shapes, adapting to different screen sizes

• Color schemes, color harmonies

• Font schemes and web fonts

AIST 2220

AIST2220 05 Images.pdf

AIST 2220, Web Design

Images

Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr

<web>ONE

Learning Outcomes

✓ Describe the nature of electronic images

✓ Compare and contrast the main types of images used on the Web

✓ Embed images into web pages using the HTML image element

✓ Configure images as hyperlinks

✓ Use CSS to add images to the background of HTML elements

✓ Use CSS to use images in unordered lists

✓ Add a favorites icon to a web page

<web>ONE

What is an Electronic Image?

• A computer screen is composed of millions of individual pixels

• An image is little more than a rectangular block of pixels

• A row image file is a set of meta- data and data for setting the colors of each individual pixel in that block

• This is known as a “Bitmap” file

... 48455A 5C576E 7A788C ...

<web>ONE

Bitmaps are Big

• Bitmap Files can get quite large

• For example, take a 1000x1000 pixel image • 1 Million Pixels (1 “Megapixel”)

• Each pixel is 3 “bytes”, so 3 “megabytes” total

• Even by today’s standards, that’s pretty big • Web pages may have many 10’s of images

• Web sites may have many 1000’s

• Each must be stored on the server…

• …transferred over the internet…

• …loaded into memory in browsers.

<web>ONE

Image “Compression” is Vital

• Image files must be made smaller to be useful on the web

• Files are “Compressed” • How? MATH!!

• Two basic types of compression

• “Lossy” • Relatively higher compression = smaller files • Cannot exactly recreate source bitmap = sacrifice image quality

• “Lossless” • Significantly lower compression = larger files • Can recreate the source bitmap exactly = perfect image quality

<web>ONE

Color Depth

• The human eye can see many millions of different colors

• Thus, “photo-realistic” images contain many millions of individual colors

• Another way of reducing image size is to reduce “color depth” • How many unique color possibilities that can be allowed per pixel

• 8-bit: 256 unique colors per image • Perfect for cartoons, logos, line art, etc.

• 24-bit: 16.7 million unique colors per image • “True color” – perfect for photos • Most screens can only display 24-bit images

• 30/36/48-bit: billions of unique colors per image • “Deep color” or “High Dynamic Range” (HDR) – most realistic

8-bit

24-bit

<web>ONE

Non-Rectangular Images – Transparency

• ALL electronic images are rectangular

• BUT, not all images are rectangular

• Images are made to appear irregularly shaped by making some pixels transparent

• Not all image formats support transparency

• Some image formats support “translucent” pixels • A color value – PLUS –

• An “alpha” value representing how “opaque” the color is

• Transparent images can be layered over other images

<web>ONE

Image Formats for the Web

• In practice today, there are three common image formats in use on the web

• All support compression

• Each uses different compression “algorithms” with different characteristics • CODEC = enCOde / DECode

<web>ONE

GIF

• “Graphics Interchange Format”

• Created by CompuServe in 1987

• First cross-platform image standard

• 8-bit : 256 unique colors per image

• Lossless compression

• Supports Transparency • But NOT translucency – a pixel is either a solid color or it is transparent

• Most useful for logos, clip-art, cartoons, etc.

• Supports primitive animation

<web>ONE

JPEG

• “Joint Photographic Experts Group”

• First standard for digital photographs

• Usually 24-bit : 16.7 million colors per image

• Lossy compression • Can control the amount of “loss”, i.e., the “quality” of the image • Can achieve file sizes 20% down to 2% of original, depending on quality

• Does NOT support transparency • Only rectangular images

• Does NOT support animation

• Still today the most common format for photographs

High Quality

Low Quality

<web>ONE

PNG

• “Portable Network Graphic”

• Designed specifically for the web

• Usually 24-bit : 16.7 million colors per image

• Lossless compression • Can achieve file sizes 10% to 70% of original, depending on type of image

• Supports transparent AND translucent pixels

• Does NOT support animation

• Great “compromise” format

• Especially good for irregular shaped photos or photos with text or lines

<web>ONE

Image “Optimization”

• The key is to have a “just right” image

• Image SIZE is the #1 determinant of image FILE size • Use an image editor to make the image EXACTLY as big as it needs to be to

display properly in your design

• Too big = wasted disk space, memory and bandwidth

• Too small = must scale up…can look AWFUL

• Choose the most appropriate image format • GIF : smallest, but low color depth (not recommended anymore)

• JPEG : small, good color depth, but no transparency

• PNG : larger than JPEG, good color depth, supports transparency

<web>ONE

File Names for Images

• As with all file names on the web: • Avoid mixed case – typically all lowercase letters

• Avoid spaces – typically use an underscore (“_”) between words

• Choose a descriptive (but not too long) file name

• Each image type must use the appropriate extension • GIF ➔ my_kitty.gif

• JPEG ➔ my_kitty.jpg – OR – my_kitty.jpeg

• PNG ➔ my_kitty.png

<web>ONE

The HTML Image Element (1)

• Used to insert an image directly into an HTML document • “Void” element, like <br/>; “inline” element like <i> • Can be placed anywhere in the <body>

• Required Attributes: • src attribute is the URL to the image file

• Like the href attribute for <a> element; can be absolute or relative URL

• alt attribute simply provides a description of the image for accessibility • Can be anything, but be descriptive • Also used by search engines when categorizing images on a page • The text will show to users if for any reason the image can not be loaded

<web>ONE

The HTML Image Element (2)

• Key Optional Attributes: • width attribute sets the width of the image : the number of pixels • height attribute sets the height of the image : the number of pixels

• We use STYLE attribute to set the width and the Height of a picture

• Be careful!! • These “scale” the image • Very easy to “stretch” or “squish” the image

• Be sure to preserve the correct “aspect ratio”

300

385 = 𝟏𝟒𝟒

185

<web>ONE

Images as Hyperlinks

• No Magic!!

• An <a> element around ANY element(s) makes it/them hyperlinks

• So, just add an <a> around the <img>. E.g.:

• Some older browsers can add an ugly blue border around an image • Remove it with a simple CSS block

a img { border-style: none; }

What’s this again??? A descendant selector:

“Select <img> elements inside of <a> elements”

<web>ONE

CSS Background Images (1)

• Used to place an image in the background of an HTML element

• Content of the element (and child elements) appears on top of the background image

<header> <h1>Cats Rule!</h1> <h2>(dogs drool)</h2> </header>

header { background-image: url(silly_cat.jpg); }

index.html mystyles.css

Cats Rule (dogs drool)

NO SPACE!!! OPEN AND

CLOSE PARENS!!

CSS url “data type” * Image URL between parens * URL is relative or absolute * Relative to CSS file location * OPTIONAL double-quotes

<web>ONE

CSS Background Images (2)

• By default, a background-images is “tiled” • i.e., it repeats itself both horizontally and vertically

• The background-image is only as tall as the HTML element • By default, HTML elements are only as tall as their content

• SO, a background-image on an empty element is INVISIBLE

• By default, a background image is “clipped” to the size of the element

• BUT, CSS is very flexible • All of these “default” behaviors can be changed

• We’ll learn about changing the width and height of block elements in a later lesson

<web>ONE

CSS background-repeat Property

• As noted, background images are “tiled” by default

• Can use the background-repeat property to change this

• Values are: repeat (default), no-repeat, repeat-x & repeat-y

background-repeat: no-repeat;background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y;

<web>ONE

Other CSS Background Image Properties (1)

• background-position Property • By default, a single background image (no-repeat) is positioned at the left-top

hand corner of the HTML element

• Change with background-position: [horizontal] [vertical];

• background-attachment Property • Can create a background that does not scroll with the

rest of the content (mostly used for a whole-page image)

[horizontal] [vertical]

left top

center middle

right bottom

X% (pct. from left) Y% (pct. from top)

Xpx (pixels from left) Ypx (pixels from top)

header { background-image: url(cat_logo.gif); background-repeat: no-repeat; background-position: right top; }

body { background-image: url(kitty_litter.jpg); background-attachment: fixed; }

Space!!

scroll or fixed

<web>ONE

Other CSS Background Image Properties (2)

• background-size Property • As with the <img> element, you can scale a background image • Change with background-size: [width] [height]; • [width] and [height] can be one of:

• auto (default : maintains original width or height) • #px (where # is the number of pixels for width or height) • #% (where # is the percent of the original width or height) • cover (image will resize to fully cover the element; may clip image) • contain (image will resize as large as possible while remaining fully visible)

• E.g.: background-size: 300px 150px;

background-size: 75% 75%;

background-size: cover;

<web>ONE

https://css-tricks.com/

• cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. contain , on the other hand, says to always show the whole image, even if that leaves a little space to the sides or bottom

<web>ONE

Custom List Markers (i.e., “bullets”)

• For an unordered list, you can use an image in place of a bullet

• Use the list-style-image CSS property • Cannot resize the image in CSS

• Must create a “tiny” image by resizing it in an image editor

<ul class="pawlist"> <li>Sylvester <li>Garfield <li>Felix <li>Heathcliff <li>Puss in Boots </ul>

.pawlist { list-style-image: url(paw.png); }

index.html mystyles.css

Sylvester

Garfield

Felix

Heathcliff

Puss in Boots

<web>ONE

Favorites Icon

• Image that commonly displays in the along-side the name of the page in a browser tab

• Also commonly displayed in a list of favorites or in the browser history

• Often a special image format (ICO) • Find icon generators online (e.g., https://www.favicon-generator.org/)

• Can also use a GIF or PNG directly

• Add another <link> element to your <head> element

• E.g.: <link rel="icon" href="augusta.ico" type="image/x-icon">

or <link rel="icon" href="augusta.png" type="image/png">

https://www.favicon-generator.org/

<web>ONE

Summary

Things we learned:

✓ All about electronic images

✓ The main types of images used on the Web

✓ The HTML <image> element

✓ How to make an image into a hyperlink

✓ How to add images to the background of HTML elements

✓ How to use images in place of bullets in a list

✓ How to add a favorites icon to a page

Slide 1: AIST 2220, Web Design
Slide 2: Learning Outcomes
Slide 3: What is an Electronic Image?
Slide 4: Bitmaps are Big
Slide 5: Image “Compression” is Vital
Slide 6: Color Depth
Slide 7: Non-Rectangular Images – Transparency
Slide 8: Image Formats for the Web
Slide 9: GIF
Slide 10: JPEG
Slide 11: PNG
Slide 12: Image “Optimization”
Slide 13: File Names for Images
Slide 14: The HTML Image Element (1)
Slide 15: The HTML Image Element (2)
Slide 16: Images as Hyperlinks
Slide 17: CSS Background Images (1)
Slide 18: CSS Background Images (2)
Slide 19: CSS background-repeat Property
Slide 20: Other CSS Background Image Properties (1)
Slide 21: Other CSS Background Image Properties (2)
Slide 22: https://css-tricks.com/
Slide 23: Custom List Markers (i.e., “bullets”)
Slide 24: Favorites Icon
Slide 25: Summary

AIST2220 06 More CSS.pdf

AIST 2220, Web Design

Adding Depth and Breadth to your CSS Knowledgebase

Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr

<web>ONE

Learning Outcomes

Choose and style text fonts using CSS

Configure paragraph styles using CSS

Describe the CSS Box Model

Configure border, padding, margin, width and height with CSS

Center content (or the entire page) with CSS

Add box and text shadows with CSS

Configure rounded corners with CSS

Add gradients and translucency to elements using CSS

<web>ONE

Length Units

• Absolut • they are not relative to anything else and are generally considered always to

be the same size.

• Relative • Relative length units are relative to something else. The benefit of using

relative units is that with some careful planning, you can make it so the size of text or other elements scales relative to everything else on the page.

<web>ONE

Common absolute length units

Unit Name Equivalent to

cm Centimeters 1cm = 37.8px = 25.2/64in

mm Millimeters 1mm = 1/10th of 1cm

in Inches 1in = 2.54cm = 96px

pt Points 1pt = 1/72nd of 1in

px Pixels 1px = 1/96th of 1in

Table reference: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

<web>ONE

Common relative length units

Table reference: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

% It is often used to define a size as relative to an element's parent object.

em Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.

rem Font size of the root element.

lh Line height of the element.

vw 1% of the viewport's width.

vh 1% of the viewport's height.

<web>ONE

All in the font-family

• Each font has a font-family name

• A Generic Font Name is a set of font-family’s that follow the same standard

• Some generic font names: • serif, e.g.:

Times New Roman, Georgia, Garamond

• sans-serif, e.g.: Arial, Calibri, Century Gothic, Helvetica

• monospace, e.g.: Consolas, Courier New, Lucida Console

• also: cursive, Math, system-ui, …

• Comma-separated values specify a sequence of “fallback” options

• Attempts to find and set font from left to right • The last fallback should be a generic name • Values with spaces must be surrounded by

double-quotes

body { font-family: Arial, Helvetica, sans-serif;

}

.code-sample { font-family: "Courier New", monospace;

}

<web>ONE

The font-size Property

• Configure the size of the text in an element

• Value can be a named value or numeric with units • Named is relative to default font size

• em and percent units are relative to the parent’s font size

Named Value em Units % units pt Units px Units

xx-small 0.5em 50% 6pt 8px

x-small 0.6em 60% 8pt 11px

small 0.75em 75% 10pt 13px

medium 1em 100% 12pt 16px

large 1.15em 115% 13.5pt 18px

x-large 1.5em 150% 18pt 24px

xx-large 2em 200% 24pt 30px

body { font-family: Arial, sans-serif; font-size: 11pt;

}

.code-sample { font-family: Consolas, monospace; font-size: 0.9em;

}

<web>ONE

Some other properties

• font-weight • normal or bold (absolute) • lighter or bolder (relative) • 100 to 900

• The greater number, the bolder • 400  Normal font size

• font-style • normal, italic, or oblique

• text-decoration • none, wavy, underline, overline, or

strikethrough

• multiple values separated by space

• letter-spacing • Spacing between letters • normal, #px, #pt, #em or #% (width) • Negative width to “condense” text

• font-variant • normal or small-caps

• text-transform • Alter capitalization • none, capitalize, uppercase,

lowercase

<web>ONE

Paragraph Style Properties

• Adjusts the text within any block element, not just <p>

• text-align • Alignment for a text-block • left, center, right or justify

• text-indent • Amount to indent the first line of a text-block • Numeric amount (px, pt, etc.) or percent

• line-height • Specifies the height of each line • normal, numeric amount (px, pt, etc.) or percent • Also a plain number as multiplier…e.g., 2 would mean “double-spaced”

.standard-paragraph { text-align: justify; text-indent: 30px; line-height: 1.25;

}

This is a standard paragraph on my

web page. I’ve applied the “standard-

paragraph” class to this element.

<web>ONE

• Every block element in HTML has: • Content

The text, images, other elements, etc. that are inside of that block element.

• Border A “line” surrounding the block (invisible by default because it has no width)

• Padding Space between the Content and Border

• Margin Space between this block and other blocks on the page (zero size default for most elements)

The CSS Box Model margin

border

padding

content

<web>ONE

Borders (1)

• Borders in CSS have: • border-width

• A numeric value (usually in px) specifying the size of the border

• border-style • One of: none, hidden, dotted, dashed, solid, double,

groove, ridge, inset or outset

• Not all will display as expected in all browsers

• border-color • Any of the standard CSS color values (hex, rgb, etc.)

• Can specify all three in a single line: • border: [width] [style] [color];

.standout-div { border-width: 3px; border-style: solid; border-color: #337272;

}

.standout-div { border: 3px solid #337272;

}

<web>ONE

Borders (2)

• Borders have four potentially independent sides • border-top, border-right, border-bottom, border-left

• Each can have completely different characteristics • So really 12 possible values (border-top-width, border-top-style, etc.)

• Typically we’ll use the shortcut method

nav a { text-decoration: none; border-top: 1px dashed black; border-bottom: 1px dashed black;

}

<web>ONE

Padding

• The area between the content and the border

• Typically specified as a size (px, em, etc)

• Has four potentially independent values • padding-top, padding-right, padding-bottom and padding-left

• However, can also leverage a shortcut method • padding: [value]; (single value for all four sides)

• padding: [top] [right] [bottom] [left];

• padding: [top&bottom] [right&left];

• padding: [top] [right&left] [bottom];

margin

border

padding

content

<web>ONE

Margin

• The area between block elements and • Other block elements, or

• The outside of the browser window

• Like padding, has four potentially independent values • margin-top, margin-right, margin-bottom and margin-left

• And like padding, can also leverage the shortcut method • margin: [value]; (single value for all four sides)

• margin: [top] [right] [bottom] [left];

• margin: [top&bottom] [right&left];

• margin: [top] [right&left] [bottom];

margin

border

padding

content

<web>ONE

Width and Height

• Recall that block elements are by default • As wide as their container • As tall as their content (automatic height)

• Often useful to control the width and/or the height of an element

• Can configure • width: Can be % of container (100% default) or numeric width (px, em, etc.) • height: Can be auto (default) or numeric height; can be percent only if its parent has a

specific height • min-width & min-height: insures size is at least the specified value(s) • max-width & max-height: insures size is no larger than the specified value(s)

• By default: Sets size of content area only • not including padding or border

• When we add box-sizing: border-box; to a CSS rule, the browser instead calculates the size of the element based on the content inside the element, including any padding and borders

margin

border

padding

contentheight

width

<web>ONE

Centering an Element

• Centering the content of a block element: text-align: center;

• Does NOT center the element itself

• If the element has width < 100% it will be left-aligned by default

• Can move the element left using margin-left, but how much??

• Setting both to “auto” will make both equal, effectively centering the element

Centered Heading Text

Text within a block element that has its width set to 50%.

Text within a block element that has its width set to 50% and margin-left set to a fixed amount.

Text within a block element that has its width set to 50% and margin-left and margin-right both set to “auto”.

margin-left ?? margin-right ??

margin-left: auto margin-right: auto

.centered-element { width: 50%; margin-left: auto; margin-right: auto;

}

<web>ONE

Tip: Centering All Page Content

• Centering every element on a page would be tedious

• Instead, use “wrap and center” strategy • Create a “container” or “wrapper” <div> • Place ALL content inside of the <div> • Select that <div> in CSS and center it • All content stays at 100% width

• 100% of the <div>, not 100% of the browser

</div> </body>

#wrapper { width: 1000px; margin: auto;

}

Possible Shortcut * Sets ALL margins to auto * For top & bottom, auto = 0

My Awesome Web Site New and improved with centered content

Linky 1 Linky 2 Linky 3

Bogus Heading Text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another Bogus Heading Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora

<header> ... EVERYTHING ELSE ...

</footer>

<web>ONE

Rounded Corners

• The corners of a visible block element are squared off by default • Visible = either background-color or border

• CSS allows for one or more corners to be rounded • border-radius: radius of “virtual” circle in the corner

• Value is the size (px, em, etc.)

• Really border-top-left-radius, border-top-right-radius, etc. • But … shortcuts • border-radius: [value];

• border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

<web>ONE

Box and Text Shadows

• Can add shadows to an element (appears outside of border) • box-shadow: [x-offset] [y-offset] [blur-radius] [color];

• x-offset & y-offset: +/- value (px) how far down or right the shadow extends

• blur-radius: value (px) how quickly shadow blends into background

• color: the color of the shadow itself

• Can also add shadows to the text of an element • Use the text-shadow CSS property

• Same exact values as box-shadow

Element with box-shadow

Element with text-shadow

.shady { box-shadow: 5px 5px 4px #333333; }

<web>ONE

Fun With Color – Opacity

• Can make an element that is layered over another “translucent”

• Transparent  Translucent  Opaque

• opacity property determines how “opaque” something is • Value from 0 (transparent) to 1 (opaque)

• Makes ENTIRE element translucent • Including the content (text, pictures, etc.)

.translucent-block { opacity: 0.5;

}

<web>ONE

Fun With Color – RGBA / Translucency

• Sometime you only want the background to be translucent

• Can set the background color to a translucent color, instead

• Use an RGBA color • rgba([red],[green],[blue],[alpha]);

• “A” is for alpha • Essentially the same as opacity

• Value from 0 (transparent) to 1 (opaque)

• But JUST for the color

Bummer!! I’m pretty visible now, aren’t I? NOT so scary. :(

.translucent-block { background-color: rgba(255,255,255,0.5);

}

<web>ONE

Fun With Color – Gradients

• A gradient is a colored background that blends smoothly from one color to another

• Some examples: • background: linear-gradient(to bottom, red, yellow);

• background: linear-gradient(to right, blue, green);

• background: radial-gradient(green, yellow);

• There are a LOT of options, though: • https://www.w3schools.com/css/css3_gradients.asp

https://www.w3schools.com/css/css3_gradients.asp

<web>ONE

Summary

Things we learned:

A LOT about text formatting, including fonts and other text styles

The CSS Box Model, including how to alter the border, padding, margin, width and height of any block element

How to center things with “auto” margins

How to add box and text shadows to elements

How to round one or more corners of a block element

How to add unique color effects to elements, including translucency and gradients

<web>ONE

Practice 1

<web>ONE

Practice 1

Horizontally Centered

2 0

0 p

AIST2220 07 CSS for Page Layout1.pdf

AIST 2220, Web Design

Making the Layout of your Pages a Bit Less “Normal”

Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr

<web>ONE

Learning Outcomes

✓Describe normal flow

✓Be able to “float” content out of normal flow

✓Describe and apply the clear and overflow CSS properties

✓Leverage floating elements as one means of constructing a multi- column layout

✓Describe and apply absolute and relative positioning

<web>ONE

Normal Flow

• Normally (i.e., by default), browsers display elements in the order in which they are coded

• Blocks are layered top-to-bottom

• Words within blocks flow left-to-right

• Text wraps at the edge of the content area

• Normally, browsers also display child element(s) nested inside of a parent element

• These default behaviors are called “Normal Flow”

This is a block element. Or really this is the text within a block element. It flows left to right and wraps at the boundary of the element. Specifically at the edge of the “content” area.

Additional block elements are stacked below and do so in the order in which they appear in the HTML source.

Even if the block COULD fit beside a prior block, it will not unless we “break” normal flow.

This is a parent element.

This is a child element. It is nested inside of the parent element. By default it will be as wide as the parent element (less any padding).

<web>ONE

Breaking Out of Normal Flow

• To achieve an appealing web design, you will likely need to override these defaults

• We will cover the following ways of doing this:

• “Floating” Elements

• Absolute and Fixed Positioning

• Relative Positioning

• We will point to the following: • CSS Flexbox layout

• CSS Grid layout

• Sticky positioning

<web>ONE

The CSS float Property

• “Floating” an element: • Removes it from normal flow

• Reinserts it to the left or right of its prior position

• Reflows (rewraps) the remainder of the document around the floated element

• Can be • float: left;

• float: right;

SECOND ELEMENT Just a regular element. Might be long. Might be short. Doesn’t matter. Just a regular element. Might be long. Might be short. Doesn’t matter. Just a regular element. Might be long. Might be short. Doesn’t matter. Just a regular element. Might be long. Might be short. Doesn’t matter. Just a regular element. Might be long. Might be short. Doesn’t matter. Just a regular element. Might be long. Might be short. Doesn’t matter. Just a regular element. Might be long. Might be short. Doesn’t matter.

FIRST ELEMENT Must have a width < 100% to see it actually “float”.

Float is often used to float images within a long container like this. Images are generally “inline” elements (well, actually “inline-block”). Floating them makes them behave as the same way as a true floating block element, though. Float is often used to float images within a long container like this. Images are generally “inline” elements (well, actually “inline-block”). Floating them makes them behave as the same way as a true floating block element, though. Float is often used to float images within a long container like this. Images are generally “inline” elements (well, actually “inline-block”). Floating them makes them behave as the same way as a true floating block element, though. Float is often used to float images within a long container like this. Images are generally “inline” elements (well, actually “inline-block”). Floating them makes them behave as the same way as a true floating block element, though.

<web>ONE

Floating Hazards – The clear Property

• CSS clear property insures that a block of text will be guaranteed to start below a floating image

• Can be: • clear: left;

• clear: right;

• clear: both;

GHOSTS Sometimes you have text that belongs with the floating element. And the text following it belongs below the image. Floating causes ALL text to flow up. Even subsequent block elements.

BALLOONS Presumably this section (including the heading) is supposed to be about balloons. Having it sit next to a

picture of ghost is just downright confusing. This is about balloons for crying out loud! It should NOT be next to ghosts. I mean. What kind of crazy junk is that? Ghosts and balloons seriously do NOT get along and certainly don’t belong together. Duh!! I sure wish HTML were smarter. It should just know what I want it to do and do it.

GHOSTS Sometimes you have text that belongs with the floating element. And the text following it belongs below the image. Floating causes ALL text to flow up. Even subsequent block elements.

BALLOONS Presumably this section (including the heading) is supposed to be about balloons. Having it sit next to a picture of ghost is just downright confusing. This is about balloons for crying out loud! It should NOT be next to ghosts. I mean. What kind of crazy junk is that? Ghosts and balloons seriously do NOT get along and certainly don’t belong together. Duh!! I sure wish HTML were smarter. It should just know what I want it to do and do it.

<web>ONE

Floating Hazards – The overflow Property

• Element height is determined by the height of its content, but ONLY content that is in normal flow (i.e., NOT floating elements)

• If a floating element is taller than the content of the element it is inside of, you end up with an the image “overflowing” the container

• You can “hack” the CSS overflow property to fix this

• Add rule to container element • overflow: auto;

• Causes browser to include floating content when calculating the height of an element

GHOSTS By default, the height of an element is dictated by the total height of all content that is in normal flow, NOT including floating content. This can cause unexpected results. Adding “overflow: auto;” to the element can fix the problem.

<web>ONE

More About the overflow Property

• That use for overflow truly is a “hack”

• Overflow is REALLY intended to designate how to handle content that is too large for an element with a specified height

• Actually has two values: overflow-x and overflow-y

• Usually set both with overflow

• Can be: • overflow: visible; (default)

• overflow: hidden;

• overflow: scroll;

• overflow: auto;

GHOSTS Here the content of this element can scroll independent of the rest of the page. It is a very common way of making elements of a web page behave in ways more commonly associated with desktop applications.

Of course the assumption here is that this text is very long. So this paragraph would just keep going, and going, and going, and going,

Ghosts

Balloons

Not Whales

<web>ONE

The Multi-Column “Hack” (1)

• Can add columns to your page using the float property

• For example, you may want to have left-hand navigation

• Can set width of nav element

• Can float nav element to the left

• Unfortunately this doesn’t quite achieve the desired effect

My Awesome Web Site New and improved with centered content

Linky 1 Linky 2 Linky 3

My Awesome Web Site New and improved with centered content

Bogus Heading Text Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Linky 1 Linky 2 Linky 3

<web>ONE

The Multi-Column “Hack” (2)

• Set left margin on “main”

• Closer, but can’t set height of nav

• So, set background of “wrapper” div to match color of nav

My Awesome Web Site New and improved with centered content

Linky 1 Linky 2 Linky 3

#wrapper { width: 1000px; background-color: orange; } nav { width: 200px; float: left; background-color: orange; } main { margin-left: 200px; }

<web>ONE

The CSS box-sizing Property

• WARNING (reminder) • The width & height of an element are actually the

width & height of the content area

• Border and padding are NOT included by default

• This can be quite confusing when setting up complex layouts

• Use box-sizing property to override this default behavior

• Can be: • box-sizing: content-box; (default)

• box-sizing: border-box;

margin

border

padding

contentheight

width

* { box-sizing: border-box; }

Universal Selector * Apply to ALL elements

<web>ONE

Advanced Layout: Absolute Positioning

• position: absolute • Removes element from normal flow

• Use top, left, bottom and/or right to place an element at an exact position

• The position is based on the nearest positioned ancestor of the element.

• The ancestor whose position attribute is not static

• If none, then the BROWSER will be the base

My Awesome Web Site New and improved with centered content

Linky 1 Linky 2 Linky 3

GHOSTLY AWESOMENESS

.ghost-image { position: absolute; top: 20px; left: 20px; }

top: 0px; left: 0px;

bottom: 0px; right: 0px;

<web>ONE

Advanced Layout: Absolute-ly Useful

• For example, IF a parent element has position: relative

• (even if you don’t actually move that element using top, left, etc.)

• THEN an absolutely positioned child element will be:

• Positioned based on the relatively positioned parent element

My Awesome Web Site New and improved with centered content

Linky 1 Linky 2 Linky 3

GHOSTLY AWESOMENESS

Bogus Heading Text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim

main h3 { text-align: right; } .ghost-image { position: absolute; top: 0px; left: 10px; }

<web>ONE

Advanced Layout: Fixed Positioning

• position: fixed; • The element is positioned relative to the viewport

• It always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

<web>ONE

Advanced Layout: Sicky Positioning

• position: sticky; • The element is positioned based on the user's scroll position.

• A sticky element toggles between relative and fixed, depending on the scroll position.

• It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

<web>ONE

Advanced Layout: z-index Property

• Elements that are children of parent elements are drawn as “layers” • (This is apparent when child elements are stacked on top of parent elements)

• Layering also occurs as elements are drawn from top to bottom • (NOT apparent because typically these elements don’t overlap)

• If you pull an element out of normal flow, it can “slide” under or over other stacked elements unexpectedly

• Use the z-index property to adjust an element’s position in the stack

• z-index: 1; (or higher) – “Bring to Front”

• z-index: -1; (or lower) – “Send to Back”

GHOSTLY AWESOMENESS

z-index: 1;

<web>ONE

(almost) Final Thoughts on Positioning

• In general, use positioning sparingly and deliberately • This is a web page, not a PowerPoint slide

• Avoid the temptation to just “place” elements on the page

• Try to embrace the “flow” of a document

<web>ONE

Bleeding Edge Layout: CSS Flexbox

• Flexbox is a one-dimensional layout system used to align and distribute space among items in a container.

• Draft CSS Specification

• Supported in latest versions of all modern browsers

• Very flexible way of defining how items flow within a container

• Similar to “floating” items in a container, but far more configurable

• https://drafts.csswg.org/css-flexbox-1/

• https://css-tricks.com/snippets/css/a-guide- to-flexbox/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<web>ONE

Flex Layout Common Properties

• flex-direction • flex-direction: column;

• flex-wrap • flex-wrap: wrap;

• justify-content • justify-content: space-around;

• align-items • align-items: center;

• align-content • align-content: space-between; • The align-content property is used to align the flex lines (effective when we have

more than one line)

The align-content property is used to align the flex lines.

<web>ONE

Bleeding Edge Layout: CSS Grid

• CSS Grid Layout is a two-dimensional layout system used to create complex grid-based layouts

• Draft CSS Specification

• Supported in latest versions of most modern browsers

• Incredibly useful way of laying out multiple columns on a page using fixed-width columns and variable- height rows (NO HACKS!!)

• https://drafts.csswg.org/css-grid/

• https://css-tricks.com/snippets/css/complete-guide-grid/

https://drafts.csswg.org/css-grid/

https://css-tricks.com/snippets/css/complete-guide-grid/

<web>ONE

Grid Layout example

• Set the display property to gird to change the content area of elements to a grid

• Using the grid-template-columns you can define the number and the size of your grid columns

• The gap property is used to define the gap between columns and rows

.gridExample{

display: grid;

grid-template-columns: auto auto auto;

gap:10px;

}

<web>ONE

Summary

Things we learned:

✓What “normal flow” is

✓How to “float” content out of normal flow

✓How to use the clear and overflow properties to fix layout issues introduced by floating elements

✓A “hackey” way to implement a multi-column layout

✓How to use absolute and relative positioning

Slide 1: AIST 2220, Web Design
Slide 2: Learning Outcomes
Slide 3: Normal Flow
Slide 4: Breaking Out of Normal Flow
Slide 6: The CSS float Property
Slide 7: Floating Hazards – The clear Property
Slide 8: Floating Hazards – The overflow Property
Slide 9: More About the overflow Property
Slide 10: The Multi-Column “Hack” (1)
Slide 11: The Multi-Column “Hack” (2)
Slide 12: The CSS box-sizing Property
Slide 13: Advanced Layout: Absolute Positioning
Slide 14: Advanced Layout: Absolute-ly Useful
Slide 15: Advanced Layout: Fixed Positioning
Slide 16: Advanced Layout: Sicky Positioning
Slide 17: Advanced Layout: z-index Property
Slide 18: (almost) Final Thoughts on Positioning
Slide 19: Bleeding Edge Layout: CSS Flexbox
Slide 20: Flex Layout Common Properties
Slide 21: Bleeding Edge Layout: CSS Grid
Slide 22: Grid Layout example
Slide 23: Summary

AIST2220 08 More on Links and Layout.pdf

AIST 2220, Web Design

A Deeper Dive into the Design and Operation of Navigational Elements

Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr

<web>ONE

Learning Outcomes

✓ Structure navigation as an unordered list

✓ Use CSS to create horizontal, vertical and fixed navigation

✓ Describe and use pseudo-selectors and pseudo-elements

✓ Create a basic drop-down menu using CSS

✓ Use “fragment identifiers” to navigate within a document

✓ Group images and captions using figure and figcaption

✓ Employ thumbnail image links

✓ Structure a “flowing” image gallery

<web>ONE

The CSS display Property

• Block elements • Start and end with a new line • Default to 100% width & auto height • CAN have explicit width and height

• Inline (aka “Phrase”) elements • Typically “words” within a block • Width & height are determined

automatically by the content

• With CSS display property, you can “magically” transform block elements into inline elements and vice-versa • display: none;

Hide an element and remove it from the document layout • display: block;

Change an inline element (e.g., <span>) to display as a block element • display: inline;

Change a block element (e.g., <div>) to display as an inline element • display: inline-block;

Elements are displayed as though they are inline elements, but they can have explicit width and height

<web>ONE

Home Experience Education Contact MeHome Experience Education Contact Me

CSS Pseudo-Classes – :hover & :active

• Append a Pseudo-Class to a selector to select based on conditions, e.g.: • State (mouse/touch events, focused, enabled, disabled, etc.) • Relative position on page / within element (more on this later)

• :hover selects an element when a mouse pointer is hovering over it • :active selects an element when it is being clicked or pressed • :focus selects an element that has the keyboard focus • Tons More: https://css-tricks.com/pseudo-class-selectors/ nav a:hover { border-top: 1px dashed black; border-bottom: 1px dashed black;

} nav a:active { background-color: white;

}

Home Experience Education Contact Me

[…click…]

https://css-tricks.com/pseudo-class-selectors/

<web>ONE

CSS Pseudo-Elements – ::before & ::after

• Append a Pseudo-Element to a selector to add content to an element • ::before allows you to insert content before (in front of) an element

• ::after allows you to append content after (following) an element

• Should set the content property inside of the selector

• Can do some REALLY cool things • https://css-tricks.com/pseudo-element-roundup/

nav a::before { content: "♫";

} nav a::after { content: "♪";

}

♫Home♪ ♫Experience♪ ♫Education♪ ♫Contact Me♪

What the What?!? Just a special character…copy & paste. Use “Character Map” app in Windows, or the “Edit / Special Characters” menu on a Mac.

https://css-tricks.com/pseudo-element-roundup/

<web>ONE

Some more CSS selector

Child selector (>) • Parent > Child { … }

<li>test</li> <li>sub

</ul> </li>

</ul> <nav>

nav > ul{ background-color:red;

}

Only the first ul is selected because it is the child of

the nav tag

Even though the ul tag is in the nav, it is not

selected.

<web>ONE

Some more CSS selector

Adjacent sibling selector (+) • Sibling + Sibling { … }

<h1>Test</h1> <p> paragraph 1</p> <p> paragraph 1</p> <p> paragraph 1</p> <p> paragraph 1</p>

h1 + p { background-color: red;

}

Only the first p is selected because it is the sibling of

an h1 tag

<web>ONE

Navigating the <nav>

• The navigation area of a site often consists of a list of links

• Semantically speaking, should use an unordered list element • <ul> with each link wrapped in an <li>

• Will (by default) create a bulleted list of links • BUT, CSS will allow us to take full control the layout of the navigation area

<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="experience.html">Experience</a></li> <li><a href="education.html">Education</a></li> <li><a href="contact.html">Contact Me</a></li>

</ul> </nav>

• Home • Experience • Education • Contact Me

<nav> <ul> <li><a href="index.html">Home</a> <li><a href="experience.html">Experience</a> <li><a href="education.html">Education</a> <li><a href="contact.html">Contact Me</a>

</ul> </nav>

<web>ONE

Navigating the <nav> – Vertical Navigation

• The <nav> is already “vertical”, but has bullets

• Can use CSS to: • Remove the bullets

• Remove the default <ul> margin (top & bottom)

• Remove the default <ul> padding (left)

nav ul { list-style-type: none; margin: 0; padding: 0;

}

Home Experience Education Contact Me

<web>ONE

Navigating the <nav> – Horizontal Navigation

• To switch to a horizontal nav, you simply need to tell the “block” list items to display as inline, instead • (And a little bit of tweaking, as desired)

• Choose display: inline-block instead if you want to give links a uniform width

• Add text-align: center to nav ul if you want the links to be centered

nav ul { list-style-type: none; margin: 0; padding: 0;

} nav li { display: inline; margin-right: 10px;

}

Home Experience Education Contact Me

<web>ONE

Navigating the <nav> – Fixed Navigation

• “Pin” the Logo and Navigation to the Top of the Page • Embed a logo image in the <nav> – float it to the left

• Set position: fixed for nav and set location – pulls out of normal flow, SO

• Also add top padding to the <main> (and a few other tweaks)

<nav> <img src="au-logo.png" alt="Site Logo"> <ul> <li><a href="index.html">Home</a> <li><a href="experience.html">Experience</a> <li><a href="education.html">Education</a> <li><a href="contact.html">Contact Me</a>

</ul> </nav>

Home Experience Education Contact Me

nav { position: fixed; top: 0; left: 0; right: 0; height: 80px; z-index: 1000;

} nav ul {

list-style-type: none; margin: 0; padding: 30px; font-size: 20px; line-height: 20px;

}

nav li { display: inline; margin: 0 10px;

} nav img {

float: left; height: 80px;

} main {

padding-top: 80px; }

<web>ONE

Home Experience Education Contact MeHome Experience Education Contact Me

Using CSS Pseudo-Classes – :hover

• Append a Pseudo-Class to a selector to select based on conditions, e.g.: • State (mouse/touch events, focused, enabled, disabled, etc.)

• Relative position on page / within element (more on this later)

nav a:hover { border-top: 1px dashed black; border-bottom: 1px dashed black;

} nav a:active { background-color: white;

}

Home Experience Education Contact Me

[…click…]

<web>ONE

Navigating the <nav> – Drop-Down Navigation

• Can create drop-down menus using CSS

• Sub-menus are written using a nested list

Home Experience▼ Education Contact Me

.dropdown { position: relative;

} .dropdown::after {

content: "▼"; } .dropdown ul {

padding: 0; margin: 0; display: none; position: absolute; z-index: 1001;

} .dropdown li {

display: block; margin: 0; padding: 10px;

} .dropdown:hover ul, .dropdown a:focus + ul {

display: block; }

<li><a href="index.html">Home</a> <li class="dropdown"><a href="experience.html">Experience</a>

<ul> <li><a href="professional.html">Professional</a> <li><a href="volunteer.html">Volunteer</a>

</ul> <li><a href="education.html">Education</a> <li><a href="contact.html">Contact Me</a>

</ul> </nav>

Professional

Volunteer

<web>ONE

AIST2220 09 Responsive Design for Mobile Sites.pdf

AIST 2220, Web Design

Take Your Web Page with you Wherever You Go

Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr

<web>ONE

Learning Outcomes

 Describe Print Design Considerations

 Describe Mobile Design Considerations

 Configure the Viewport Meta Element to Enable Responsive Design

 Understand and Leverage CSS Media Queries to Create a Responsive Design

 Apply Responsive Image Techniques

 Create Phone Specific Hyperlinks

<web>ONE

Designing for Print

• Pages that look good on screen may not work well when printed

• Best Practices May want to hide navigation elements

May want to set background colors to white and text colors to black

May need to alter text sizes to be more appropriate for print

May also specify specific places to insert page breaks

• Altering a page layout for print is one aspect of “responsive design” • Allow a single HTML file to be consumed OPTIMALLY in multiple ways

<web>ONE

Designing for Print – How To

• Add a CSS file specifically for print, either • Completely replacing the screen-based CSS or

• Overriding some styles in the screen-based CSS

• That “media” attribute…that’s REALLY important • The text inside is called a “media query”

• Loads the CSS only if the query evaluates to “true”

Two completely independent stylesheets

Second stylesheet contains rules that can “override” rules in the first stylesheet

<web>ONE

Designing for Mobile – Considerations

• Phones & tablets are different • Smaller screens

• though each device may have different sizes

• Used in outdoor environments • No mouse, only touch

• and other control differences

• No hover effects • Restricted network bandwidth • Lower performance

• Users have very different expectations for mobile site design • Viewing a desktop site generally requires significant zooming and panning • Want an experience designed specifically for mobile devices

<web>ONE

Designing for Mobile – Best Practices

• Use single-column layouts

• Generally avoid floating elements

• Optimize images to reduce size

• Remove extraneous content/images

• Redesign navigation elements for the small screen—consider dropdown

• Maximize text/background color contrast for outdoor readability

• Provide “Back to Top” hyperlink on long pages to minimize scrolling

<web>ONE

Designing for Mobile – Screen Resolution

• Mobile browsers can load different CSS based on the screen “resolution” • Width in pixels x Height in pixels

• Every device is different, though • Must “estimate” the type of device

being used based on a range • Also consider portrait vs. landscape

• NOTE: modern devices have “high-density” or “retina” displays with very high resolution • Still “pretend” to have low resolutions

when reporting size to the browser

Device Type Common Width x Height (reported)

Desk/Laptop 1920 x 1080, 1366 x 768

Tablet 768 x 1024, 800 x 1280

Phone 320 x 480, 375 x 667, 375 x 812 320 x 640, 360 x 640

<web>ONE

Responsive Design – Viewport Meta Element

• By default, the browser will not report the size of the device

• Must add a single <meta> element to the <head> of your HTML page to enable responsive design • Introduced by Apple for the iPhone (adopted by everyone)

• Don’t fret about the “meaning” of this element • (Just copy and paste it in)

<head> ... <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

</head>

<web>ONE

Responsive Design – Media Queries

• Basic concept: • Link to CSS for desktop device

• Link to additional CSS based on resolution • OVERRIDE desktop defaults for specific display sizes

• Media queries • Smaller than: only screen and (max-width: 480px)

• Bigger than: only screen and (min-width: 1000px)

• Between: only screen and (min-width: 481px) and (max-width: 800px)

<web>ONE

Responsive Design – Applying Media Queries

• Two ways to use media queries 1. In <link> element (selectively load a CSS file)

2. Embedded in CSS file (selective apply CSS declarations)

<head> ... <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles-mobile.css" media="only screen and (max-width: 480px)"> ...

</head>

... @media only screen and (max-width: 480px) {

/* Mobile-only selectors and declarations go here */ ...

}

AFTER the “default” stylesheet so that these styles can override the defaults

AFTER the “default” styles so that these styles can override the defaults

<web>ONE

Responsive Design – Common Mobile Tweaks

• Change “wrapper” width to consume entire width of screen #wrapper { width: 100%; }

• Hide certain elements using the display property .callout { display: none; }

• “Unfloat” elements as needed .portraitimage { float: none; }

• Override background images to load smaller ones header img { url(header-small.png); }

• Alter font size to be more finger friendly (just an example) body { font-size: larger; padding: 3px; }

<web>ONE

Phone-Specific Links

• As a reminder, special URL’s can be leveraged to • Dial a phone number, e.g., <a href="tel:706-555-1212">CALL ME</a>

• Compose a text message, e.g., <a href="sms:706-555-1212">TEXT ME</a>

• Fun way to hide the TEXT ME link in CSS • In main CSS file a[href^="sms"] { display: none; }

• In mobile CSS file a[href^="sms"] { display: inline; }

• FYI, the part of the selector in brackets is called an attribute value selector • Yes, there’s a LOT more CSS selector syntax than we’ll learn in this course 

<web>ONE

Summary

Things we learned:

 Some considerations for print and mobile web page design

 How to leverage responsive design techniques, including o Configuring the viewport meta element

o Using media queries to selectively apply CSS on different devices

 How to make images responsive, as well

 How to load the “right” image for the right device type

 How to create (and hide) links to call and text on a phone

AIST2220 10 Multimedia and Basic Animation.pdf

AIST 2220, Web Design

Adding some e-Motion and Interactivity to Your Pages

Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr

<web>ONE

Learning Outcomes

 Describe how multimedia is used on the Web

 List the major digital audio formats used on the Web

 Embed digital audio onto web pages

 List the major digital video formats used on the Web

 Embed digital video onto web pages

 Alter and animate elements using CSS

<web>ONE

Multimedia on the Web

• Traditionally, the web has been largely for static content • Mostly text and images

• Modern websites contain a variety of multimedia, including: • Audio

• Video

• Animations

• Interactive Demonstrations and Games

• Non-HTML Documents

<web>ONE

Multimedia on the Web – Options

• Helper Applications • Simply launch an external application installed on the user’s computer • Usually used to view file types that are not natively supported by the browser • Still widely used…e.g., when you download a .docx file, MS Word is launched

• Plug-In Applications • Instead of viewing the content in an external window, the content is executed by a

third-party application as part of the web page itself • Common examples include Adobe Acrobat Reader and Adobe Flash Player • No longer recommended due to security risks and dwindling browser support

• Native HTML Support • The growing list of natively supported multimedia types, including audio, video, and

animations, along with a wealth of possibilities using JavaScript

<web>ONE

Multimedia on the Web – Helper

• Launching a helper application is incredibly easy • Uses a standard <a> element – link to the document you want to open

• Depending on the user’s device, the document might be just saved in the user device or opened by an application

<a href="all-about-monkeys.pdf">All About Monkeys</a> <a href="brassmonkey.mp3">Listen to "Brass Monkey"</a>

<web>ONE

Multimedia on the Web –Plug-in

• Using a plug-in is more complicated • Uses the <object> element

<web>ONE

Audio on the Web – Formats

• Audio is saved (and usually compressed) into one of many formats

Format Description Compressed Browsers

wav Wave File (Windows Native Sound Format) No Not IE

mp3 MPEG-1 Audio Layer 3 (Stereo Audio Track from DVD Standard) Yes All

m4a MPEG-4 Audio (Audio Track from Blu-ray—AAC compression) Yes All

ogg Ogg Vorbis (Open Source Format) Yes Not IE / Safari

webm WebM, Google’s Open Source Format (audio actually Ogg Vorbis) Yes Not IE

<web>ONE

Audio on the Web – HTML <audio> Element

• HTML5 added native support for audio playback

• <audio> element is combined with one or more <source> elements • Second, third, etc. source elements are “fallbacks” if browser doesn’t support

• Provide a “download” link as a “fallback” if browser doesn’t support HTML5

• controls attribute optionally displays audio controls (NOTE: NO =“value”)

• Can also optionally set autoplay and loop attributes

• The type attribute is called a MIME-type—specific to each audio format

<audio controls> <source src="brassmonkey.ogg" type="audio/ogg"> <source src="brassmonkey.mp3" type="audio/mpeg"> <a href="brassmonkey.mp3">Download the Audio File</a>

</audio>

<web>ONE

Audio on the Web – Embed from Provider

• You can also embed audio from a 3rd party provider, e.g., • Soundcloud.com, Mixcloud.com, Bandcamp.com, Clyp.it, etc.

• Use an <iframe> or <embed> element • Iframe allows you to embed another page inside your page

• Embed opens the source as part of your page

• LOOKS horribly complicated, but it’s always just a copy + paste operation

<web>ONE

Video on the Web – Formats

• Like audio, video is saved (and always compressed) in many formats • And there are tens of them, some natively supported, some needing plug-ins

• Today, mostly standardized on m4v (H.264/AVC) and WebM

Format Description Open Source HTML5 Support

mov Apple’s Quicktime Format No No

avi Microsoft’s Early “Audio/Video Interleaved” Format No No

wmv Microsoft’s Windows Media Video Format No No

flv Flash Video Format No No

mpg MPEG-1 (DVD Standard) No No

mp4/ m4v MPEG-4 (Blu-ray Standard…also called AVC or H.264) No Yes

ogv Ogg Theora (Open Source Video Format) Yes Yes, except IE + Safari

webm WebM, Google’s Open Source Format Yes Yes

<web>ONE

Video on the Web – HTML <video> Element

• HTML5 added native support for video playback, as well

• <video> element is combined with one or more <source> elements • Second, third, etc. source elements are “fallbacks” if browser doesn’t support

• Provide a “download” link as a “fallback” if browser doesn’t support HTML5

• Should supply width and height attributes to set the size of the video window

• controls attribute optionally displays playback controls

• Use poster to show an image before playback starts

• Can also set autoplay and loop attributes

<video controls poster="funnymonkey.jpg" width="560" height="315"> <source src="funnymonkey.ogv" type="video/ogg"> <source src="funnymonkey.mp4" type="video/mp4"> <a href="funnymonkey.m4v">Download the Video File</a>

</video>

<web>ONE

Video on the Web – Embed from Provider

• As with audio, you can embed video from 3rd party providers, e.g., • YouTube.com, Vimeo.com, etc.

• Also uses an <iframe> element • Also always just a copy + paste operation

• Usually just hit a “share” or “embed” button to get the required HTML code

<web>ONE

CSS transform Property

• Use transform to alter an element—and its content—even in 3D • rotate() – rotate an element on its axis • scale() – make an element bigger or smaller • skew() – think rhombus or parallelogram • translate() – move an element from its original location • matrix()– shortcut to perform any/all of the above…gotta love math

• Can combine multiple transforms, separating each by a space

• MUCH More: https://css-tricks.com/almanac/properties/t/transform/

#monkeypic { transform: scale(1.3) rotate(20deg);

}

https://css-tricks.com/almanac/properties/t/transform/

<web>ONE

CSS transition Property

• Animate (smoothly) the change between CSS properties • Often done with mouse hover effects

• Can animate change in visibility, position, color, etc.

• transition: [property] [duration] [timing-function];

• Timing Function: one of ease, ease-in, ease-out or linear

• Can specify multiple transitions separated by commas

#monkeypic { transition: transform 1s linear;

} #monkeypic:hover { transition: transform 1s linear; transform: scale(1.3) rotate(20deg);

}

<web>ONE

Summary

Things we learned:

 How multimedia is used on the Web

 How the use external resources

 How to alter and animate elements using CSS transitions and transforms

AIST2220 11 HTML Tables.pdf

AIST 2220, Web Design

Add a little structure to your data

Slides mainly provided by Dr. Paul York Adopted and Edited by Dr. Reza Rahaeimehr

<web>ONE

Learning Outcomes

Describe the recommended use of a table on a web page

Configure a basic table with the table, table row, table header, and table cell elements.

Use CSS to style an HTML table

Describe the purpose of CSS3 structural pseudo-classes

Configure table sections with the thead, tbody, and tfoot elements.

<web>ONE

HTML Table Nature and Usage

• Tables are used on web pages to organize tabular information

• Composed of rows and columns – similar to a spreadsheet

• Each individual table cell is at the intersection of a specific row and column

<web>ONE

The Primary HTML Table Elements

• <table> Element • Represents an entire table • Contains all other table elements

• <caption> Element (optional) • Represents a descriptive caption for the table

• <tr> Element • Represents a table row • Groups together one or more table cells

• <td> or <th> Element • Represents a table cells • Generally contains text content • <td> for standard data cells • <th> for header cells

<web>ONE

HTML Table Example<table> <caption>Birthday List</caption> <tr> <td>Name</td> <td>Birthday</td>

</tr> <tr> <td>James</td> <td>11/08</td>

</tr> <tr> <td>Karen</td> <td>4/17</td>

</tr> <tr> <td>Sparky</td> <td>11/28</td>

</tr> </table>

Birthday List

Name Birthday

James 11/08

Karen 4/17

Sparky 11/28

<web>ONE

HTML Table Example 2 (using <th> element)

<table> <caption>Birthday List</caption> <tr> <th>Name</th> <th>Birthday</th>

</tr> <tr> <td>James</td> <td>11/08</td>

</tr> <tr> <td>Karen</td> <td>4/17</td>

</tr> <tr> <td>Sparky</td> <td>11/28</td>

</tr> </table>

Birthday List

Name Birthday

James 11/08

Karen 4/17

Sparky 11/28

<web>ONE

Colspan Attribute (<td>/<th>)

<table border="1"> <caption>Birthday List</caption> <tr> <th>Name</th> <th>Birthday</th>

</tr> <tr> <td colspan="2">November Days</td>

</tr> <tr> <td>James</td> <td>11/08</td>

</tr> <tr> <td>Sparky</td> <td>11/28</td>

</tr> </table>

Birthday List

Name Birthday

November Days

James 11/08

Sparky 11/28

<web>ONE

Rowspan Attribute (<td>/<th>)

<table border="1"> <caption>Birthday List</caption> <tr>

<th>Month</th> <th>Name</th> <th>Birthday</th>

</tr> <tr>

<th rowspan="2">Nov</th> <td>James</td> <td>11/08</td>

</tr> <tr>

<td>Sparky</td> <td>11/28</td>

</tr> </table>

Birthday List

Month Name Birthday

Nov James 11/08

Sparky 11/28

<web>ONE

Using CSS to Style a Table

CSS Property Usage text-align Align the content within a table cell

border-spacing Adjust the spacing between the cells of a table

border-collapse sets whether cells inside a <table> have shared (collapse) or separate

borders (separate)

vertical-align sets vertical alignment (top, middle, bottom)

width width

border Can bet set for table, tr, td, th , … seperately

caption-side Sets the position of the table caption

<web>ONE

Table Borders with CSS

HTML CSS

• We want to put borders around each cell • Both <td> and <th> cells

• By default each cell has margin • Top table on right exemplifies this

• Simply removing margin still results in double-borders on the inside of the table

• Use border-collapse to fix this

Name Birthday

James 11/08

Sparky 11/28

Name

James

Sparky

Birthday

11/08

11/28

<table> <tr> <th>Name</th> <th>Birthday</th>

</tr> <tr> <td>James</td> <td>11/08</td>

</tr> <tr> <td>Sparky</td> <td>11/28</td>

</tr> </table>

td, th { border: 2px solid black;

} table {

border-collapse: collapse; }

<web>ONE

CSS3 Structural Pseudo-classes

Pseudo-class Purpose

:first-of-type Applies to the first element of the specified type.

:first-child Applies to the first child of an element. (CSS2 selector)

:last-of-type Applies to the last element of the specified type.

:last-child Applies to the last child of an element

:nth-of-type(n) Applies to the “nth” element of the specified type.

Values: a number, odd, or even

<web>ONE

Table With Alternating Row Colors

HTML CSS

• We want to configure every other row to have a background-color

• Use the nth-of-type pseudo-selector • Select only the even or odd rows

Name Birthday

Karen 4/17

James 11/08

Sparky 11/28

<th>Name</th> <th>Birthday</th>

</tr> <tr>

<td>Karen</td> <td>4/17</td>

</tr> <tr>

<td>James</td> <td>11/08</td>

</tr> <tr>

<td>Sparky</td> <td>11/28</td>

</tr> </table>

td, th { border: 2px solid black;

} tr:nth-of-type(even) { background-color: yellow;

} table { border-collapse: collapse;

}

<web>ONE

Table Row Groups

• <thead> table header rows

• <tbody> table body rows

• <tfoot> table footer rows

<table border="1"> <caption>Work Schedule</caption> <thead> <tr> <th>Day</th> <th>Hours</th>

</tr> </thead> <tbody> <tr> <td>Monday</td> <td>4</td>

</tr> <tr> <td>Tuesday</td> <td>3</td>

</tr> </tbody> <tfoot> <tr> <td>Total</td> <td>7</td>

</tr> </tfoot>

</table>

<web>ONE

Summary

Things we learned:

What a table is and its purpose in web development

How to construct a table using the <table>, <tr>, <th> and <td> elements

How to style an HTML table with CSS

How to use CSS3 structural pseudo-classes

How to properly section a table using <thead>, <tbody>, and <tfoot> elements