Code 201: Class 11 - Audio, Video, and Images

Read: HTML pp 406-427

Images inline elements by default

can use display: block; if you then want to use margin-left: auto; and margin-right: auto; to center it on the page by itself
{background-image: url("path");} Place a background image in an element
background-repeat: repeat-x; Background image repeats in the x direction only
background-repeat: repeat-y; Background image repeats in the y direction only
background-repeat: repeat; Background image repeats in both directions
background-repeat: no-repeat; Background image does not repeat
background-attachment: fixed; Background image does not move on scroll
background-attachment: scroll; Background moves on scroll
background-position: center-top; Background image is set to center top, can also be left top, right top, left center, center center, center right, bottom left, bottom center, bottom right
- can also use px dimensions or % from top left, background-position: 50% 50%; would center the picture in the window
can stack images in the background by listing more urls
Image Rollovers and Sprites
- Sprite single image that is used for several different parts of an interface
Background gradients
- Example: background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from (#66cccc), to(#336666)); sets a top to bottom gradient from lighter green to darker green

SEO Search Engine Optimization

Basics
- trying to have your page rank near the top of search engine results
- figure out which keywords are likely to be searched in relation to your sight, use them in specific places
- ranking determined by what is on your site as well as how many sites link to your site
- On-page techniques are things that can be done on your page to improve page rank
  - 7 Places to put keywords
    - Page Title
    - URL / Web Address
    - Headings
    - Text
    - Link Text
    - Image Alt Text
    - Page Descriptions
- Off-page techniques are things that can be done on other sites to improve page rank
Keyword tools
- adwords.google.co.uk/select/KeywordToolExternal
- www.wordtracker.com
- www.keyworddiscovery.com

Domain Names and Hosting

Domain names web address
Web hosting third party that provides the server hardware to upload and store your website

FTP File Transfer Protocol

Selecting Elements by Tag Name

Repeating actions for an entire node list

var hotItems = document.querySelectorAll('li.hot');
for (var i=0; i < hotItems.length; i++){
  hotItems[i].className = 'cool';
}

var hotItems contains a NodeList, all list items whose class attribute is hot
length property of NodeList indicates how many elements are in the NodeList
hotItems[i] array sytax used to indicate which item in NodeList is currently being worked on