komodo edit project › helping you find your folder laptop › delete what you don’t need ›...
TRANSCRIPT
![Page 1: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/1.jpg)
Colors and Images
![Page 2: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/2.jpg)
Logistics
![Page 3: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/3.jpg)
Tidying Up
Komodo Edit Project› Helping you find your folder
Laptop› Delete what you don’t need› Keep class “doodles” in a single “sandbox”
folder Isis
› Delete what you don’t need
![Page 4: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/4.jpg)
Structure and format
First page of every site is to be index.html
Works fine if you have then in different folders
Remember› Formatting of HTML and CSS› Validation of HTML and CSS
![Page 5: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/5.jpg)
Course Page Do NOT spread items across multiple
pages. More work for us. Will send you notes about problems I
found NEW REQUIREMENT for link<li> Project 1: <a href=“” target=“_blank”>short name</a> (author names)</li>
![Page 6: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/6.jpg)
Colors
![Page 7: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/7.jpg)
Colors – Paint (Subtractive Color Model)
Primaries: magenta, yellow, and cyanThis color system is called subtractive because:
each primary color absorbs (subtracts) a certain part of the color spectrum.every time a color is added, less light is reflected.When you mix all three primaries together, the entire spectrum of color is absorbed, and we’re left with black.
![Page 8: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/8.jpg)
Colors -- Computer Screen (Additive Color System)
Primaries: Red, Blue, GreenAdditive color systems start without light (black).Light sources combine to make a color.As colors are added, the resulting color is brighter.
![Page 9: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/9.jpg)
ColorsWe’ll be working with the additive color systemMix various amounts of red, green, and blue to create a color.Colors can be represented by
namean rgb (dec, dec, dec) valuehexadecimal (# hx hx hx) value.
![Page 10: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/10.jpg)
Colors (cont)
For RGB, each color is indicated by a number from 0-255
(0,0,0) = black(255,255,255) = white
For Hexadecimal (hex), each color is indicated by 6 values from 0 – F
#000000 = black#FFFFFF = white
![Page 11: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/11.jpg)
Hex...
Each two letters/numbers represent red, green, or blue in that order.Examples:
#FF0000 = red#00FF00 = green#0000FF = blue
#0F6480
#ADFAA5
#E01B4C
![Page 12: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/12.jpg)
Why Hexadecimal?
How do computers store information? Bits 1 and 0 Binary numbers are too hard to use Group them together in groups of 4 That’s hexademical!
![Page 13: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/13.jpg)
Color Shorthand
Sometimes you will see colors as#123
This is the same as#112233
Why? Still a pretty broad range of colorshttp://www.december.com/html/spec/color3hex1.html
![Page 14: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/14.jpg)
Helpful Color Links
A list of color namescolorpicker.com
![Page 15: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/15.jpg)
Identifying Colors
Eyedropper for Chrome Colorzilla for Firefox Colorpic
![Page 16: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/16.jpg)
Color Combinations
Paletton Adobe
![Page 17: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/17.jpg)
Gradients
Any place that you have a color Lots of different types Google it!
![Page 18: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/18.jpg)
Images
![Page 19: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/19.jpg)
Black and White Pictures
![Page 20: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/20.jpg)
Pictures are stored as pixelsMonochrome:
BLACK or WHITE
![Page 21: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/21.jpg)
What is needed?
Different levels of black and white
› Shades of gray
› Percentage of black
![Page 22: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/22.jpg)
ASCII Images
Instead of pixels, use characters
![Page 23: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/23.jpg)
Color Pictures
![Page 24: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/24.jpg)
What is a Color Pixel?
Red Green and Blue Each has a value from 0 to 255
Sound familiar?
![Page 25: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/25.jpg)
Formats
![Page 26: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/26.jpg)
Many Formats
jpeg or jpg, png, tif, gif, … Different encodings, different sizes but
they all will work› Actually different ways to COMPRESS them
Why compression?1000 red pixels in a row…
› That’s why they are different sizes But you MUST use the correct
extension name and capitalization
![Page 27: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/27.jpg)
How much fidelity?
Big difference in size is how many pixels were used (dpi)› Isis WILL run out of space
Don’t use more than you need!› Common dpi: 96, 300, Dimensions in pixels
(700, 2000, 4000, …)› Little pictures don’t need that much detail› Don’t always need HD!
Tools to change the fidelity› Use any program› Can do it on the web: phixr
![Page 28: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/28.jpg)
Images in HTML
![Page 29: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/29.jpg)
Images in HTML
Remember that HTML is just text Need to point to pictures Use the img tag
<img src=“where” alt=“what”> alt:
› screen reader › REQUIRED for this class and to validate
![Page 30: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/30.jpg)
Where are images used
Pictures Backgrounds Link displays List markers
![Page 31: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/31.jpg)
Where are pictures stored?
Can be any where on the web› src has full url<img src=“http://www.cs.unc.edu/cms/about-
us/sittersonsmall.jpg” alt=“Sitterson”>
Problems› Pictures change or disappear› You’re poaching on their resources
NOT PERMITTED FOR THIS CLASS
![Page 32: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/32.jpg)
Preferable: IN THE FOLDER
If you only have one or two, just another file› src just needs the file name› <img src=“sittersonsmall.jpg” alt=“Sitterson”>› REMEMBER: case matters
If you have a lot, keep them in their own folder› src needs the path› <img src=“images/sittersonsmall.jpg”
alt=“Sitterson”> Either is specific to this website
![Page 33: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/33.jpg)
Same image on ALL your websites
Examples › Company logo› Your picture
Put it in the top level› e.g., comp101 for this class› (same place as your course page)
Reference as › <img src=“../sittersonsmall.jpg”
alt=“Sitterson”>
![Page 34: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/34.jpg)
References Summary(src or href)
In my folderfile.ext
In a subfoldersubfolder/file.ext
In a higher folder ../file.ext On the web
http://www. …
![Page 35: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/35.jpg)
Picture Sources
Your own Publicly available
› Flickr and the Creative Commons› Google and labeled for reuse
IMPORTANT TO ASSURE NO COPYRIGHT INFRINGEMENT
![Page 36: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/36.jpg)
Formatting and Sizing
![Page 37: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/37.jpg)
Formatting img
All the box-related characteristics in CSS
Add class in HTML
![Page 38: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/38.jpg)
Resizing and Cropping
Resize and crop before you put it in the folder
Why?› Size on page› Size of file› More control
![Page 39: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/39.jpg)
Sizing Pictures in CSS
HTML permits you to put size on an img, but NOT in this class.
ALWAYS do it in css.
Only size ONE dimension. Deductions for using both: funny house effect
Why not always resize picture to wanted size?› May want to use image multiple times› Simpler to make multiple pictures consistent in
CSS
![Page 40: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/40.jpg)
Adding a caption
<figure><img …><figcaption>caption</figcaption>
</figure>
![Page 41: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/41.jpg)
Images as Background
![Page 42: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/42.jpg)
Overall page design
Default: window size› Advantage: grows and shrinks easily› Disadvantage: harder to design
Making body fixed width› Advantage: easier to control› Disadvantage: scroll bars and unused space
Using fixed width section in default body› Combines advantage of fixed width without scroll
bar› Allows complex backgrounds
![Page 43: Komodo Edit Project › Helping you find your folder Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder Isis](https://reader036.vdocuments.net/reader036/viewer/2022062422/56649ebf5503460f94bc9eb8/html5/thumbnails/43.jpg)
Background Image
Body background› Need to assure readability› Simple images (see resources)› For busier images: use overlay
Use div or section or … Opacity (0 to 1) to let it show through
› Background-image Background-size Background-repeat