Lecture B3 Style : Algorithmic ThinkingComputing and Art : Nature, Power, and LimitsCC 3.12: Fall 2007Functionalia•HW B (Both Parts 1 and 2) DUE Wednesday Oct. 3, 11:59 pmInstructorChipp Jansen, [email protected] Web Pagehttp://www.sci.brooklyn.cuny.edu/~chipp/cc3.12/Office Hours | Extra HelpMy Office Hours : Mondays 12:30 to 1:30 - basement Ingersoll 0317NMonday1:30 to 5pmTuesday1:30 to 3:30Wednesday1:30 to 3:30Thursday12:45 - 1:45, 2:15 - 3:15Bridges Student Resource Center : 0317NFunctionaliaToday:•HTML Review•Style Sheets•Algorithmic ThinkingHTML Review•Questions about the Lab 1 - and what to do?•tags - paragraph, header, bold, etc...•lists•links•images•What are comments?HTML Review•Questions about the Lab 1 - and what to do?•What are comments?•Comments are notes to yourself and others. •They are ignored by the web-browser, and they are not visible on the page.•How do you write comments in HTML?<!-- This is a comment -->Style SheetsCSS = Cascading Style SheetsAllows you to control the look-and-feel for your web-pages. - Font of Text- Color of Text- Exact Layout of elements.Adding Style to your PageTwo ways:1. Embedded - use a style tag and put the style rules in the head tag<style type="text/css"> body { color: black; background: white; } </style> 2. Linked - create a separate text file that contains the style rules and link to it.<link type="text/css" rel="stylesheet" href="style.css">and the text file contains the style rules (no style tag) : body { color: black; background: white; } ex17.htmlex18.htmlStyle Rulesbody { color: black; background: white; }SAME AS:body { color: black; background: white; }Style Rulesbody { color: white; background: black; }p {color: yellow;}rules are written right after each otherex19.htmlStyle Rulesbody { color: white; background: black; }p {color: yellow;}names of the tags that are selected by that ruleUse curly-braces to enclose style specifcationbody { color: white; background: black; }p {color: yellow;}opening curly-braceclosing curly-braceAttributes and their values are givenbody { color: white; background: black; }p {color: yellow;}attribute nameattribute valueAdd Margins - left/right/top/bottombody { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;} h2,h3,h4,h5,h6 { margin-left: -4%; } p { text-indent: 2em; margin-top: 0; margin-bottom: 0; } ex20.htmlex21.htmlFont Stylesem { font-style: italic; font-weight: bold; } strong { text-transform: uppercase; font-weight: bold; } uppercaselowercaseboldbolderlighterex22.htmlFont Stylesbody { font-family: Verdana, sans-serif; }GaramondTimes New Romanex23.htmlDivisionsDivisions (div) allow for styling blocks of HTML.•borders•colors•naming (class) different divisionsdiv.box { border: solid; border-width: thin; width: 100%;}ex24.htmlLinksUnvisited Links:link { color: green; } Visited Links :visited { color: purple; } When a Link is clicked a:active { color: red; } When the mouse “hovers” over the link a:hover { color: blue; } ex25.htmlColors– there are some “named” colors (black, silver, gray, white, maroon, red, purple, magenta, green, lime, olive, yellow, navy, blue, teal, aqua, ...) – all colors have a six-digit hexadecimal definition: 2 digits each for Red, Green and Blue → RGB color table – “browser safe” or “web safe” colors accommodate older systems that only show up to 256 colors (at one time), so each RGB can only be one of the following: 00, 33, 66, 99, C C, F F (in hex) ColorNames Linkno style sheet - style the OLD way!– body tag: <body bgcolor="white" text="black" link="navy" vlink="maroon" alink="red"> where “link” for unvisited links, “vlink” for visited links, “alink” for the color when you click on the link (before you release the mouse) – font tag: <font face="sans-serif" color="red" size="5"> ... </font> ex26.htmlwhat is an algorithm?• “a step-by-step sequence of instructions for carrying out some task” • examples of algorithms outside of computing: – cooking recipes – dance steps – proofs (mathematical or logical) – solutions to mathematical problems • in computing, algorithms are synonymous with problem solving• How to Solve It, by George Polya 1. understand the problem 2. devise a plan 3. carry out your plan 4. examine the solution • example: find the oldest person in the class (besides me)Analysis of Algorithms• often, there is more than one way to solve a problem, i.e., there exists more than one algorithm for addressing any task • some algorithms are better than others • which features of the algorithm are important? – speed (number of steps) – memory (size of work space; how much scrap paper do you need?) – complexity (can others understand it?) – parallelism (can you do more than one step at once?)Big-Oh• Big-Oh notation – O(N ) means solution time is proportional to the size of the problem (N) – O(log2 N) means solution time is proportional to log2 N – see examples in Reed page 142Classic Algorithm: Search• sequential search • binary search • search the Manhattan phone book for “Al Pacino”: – how many comparisons do you have to make in order to find the entry you are looking for? – equality versus relativity —which will tell you more? which will help you solve the problem more efficiently? – can you take advantage of the fact that the phone book is in sorted order? (i.e., an “ordered list”) – what would happen to your algorithm if the phone book were in random order?Algorithms and Programming • programming languages provide a level of abstraction that is more understandable to humans than binary machine language (0′s and 1’s) • assembly languages (in the early 1950’s) provided abbreviations for machine language instructions (like MOV, ADD, S TO) • high-level languages (introduced in the late 1950’s) provided more “programmer- friendly” ways for humans to write computer code (e.g., FORTRAN, LISP)Machine LanguageAssembly LanguageC++ Example#include <iostream.h>main(){ cout << "Hello World!"; return 0;}JavaScript<html><body><script language=javascript>//says the language is javascriptdocument.write("Hello World!"); //prints Hello World!//stop JavaScript Code</script></body></html>Program Translation- translates assembly or high-level languages into binary machine language - two methods: •interpretation: reads and translates statements one at a time; doesn’t optimize
View Full Document