1. Creating Webpages

2. Today’s Class Check to make sure your frames are working Using CSS (Cascading Style Sheets) Counters Google Analytics

3. Using CSS We learned things like: – Formatting used on every page… must be included onto every page… UNLESS you use CSS CSS = Cascading Style Sheet. Defines the “style” for your site. Each page includes a single line of code to call in all the info on the CSS file.

4. Benefits of CSS The new standard Content starts off your pages, not code. Better for search engine optimization Change the style (appearance) across entire site in one place

5. Using CSS First, create.css page that defines the look of your web site. Go to www.snotrocketscience.com/cw Click on HTML Shortcuts New notepad file Copy and paste #4 into notepad Save as samplestyle.htm

6. style.css explained body {background-color: pink; font-family:arial} h1 {color:navy; font-size:20pt} h2 {color:green; font-size:15pt} h3 {color:white; text-decoration:underline} hr {color:goldenrod} Background color & default font face for page Headline color & size headline smaller headline etc. Hr = line or rule. Try it out: or

7. style.css explained p {font-size:11pt; font-family:arial; margin-top:10px; margin-left: 15px; color: white} a:link {color:goldenrod} a:visited {color:green} a:hover {color:black; text-decoration:bold} a:active {color:purple} Defines general text properties for paragrahs after tag Defines generic link appearance Regular link Visited link Hover mouse over link Link you are clicking on

8. style.css explained a.special {font-family: comic sans ms; font-size: 20px; font-weight: bold; color:lime; text-decoration:none} a.special:hover {text-decoration: underline; color:navy} Creates/defines a class called “special” that when used makes your links follow these instructions instead. We’ll cover how to use this later.

9. Using CSS Download sample page to play with: http://www.snotrocketscience.com/cw HTML shortcuts #6: Download a file with some coding already in it, to test out with your style.css file here. (Right click, Save Target As..., and save in your directory.) Experiment w/changing things in this.htm file AND your.css file

10. Experimenting with CSS To utilize everything in the CSS, include these examples in your.htm pages: – Big headline, Medium headline, Smaller headline – for horizontal rule – for general text –Links – try clicking and holding, hovering over, etc. Experiment with changing formatting in style.css until you’ve customized your page.

11. Using CSS To make existing pages use the samplestyle.css file you just downloaded: HTML Short cuts page - #5: must appear in any page you want to use the style from style.css

12. Using “class” You can use css to treat some aspects of your page differently, e.g. this stuff: a.special {font-family: comic sans ms; font-size: 20px; font-weight: bold; color:lime; text-decoration:none} Try this in your page: special page

13. Other ways to use CSS Inline style sheet: Rather than creating a.css file, you can just specify at the beginning of the document. Works great if you want 1 page to be different. hr {color: blue} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

14. Other ways to use CSS Using Inline styles: If you want to change ONE element ONE time, you can use this to override the existing style: This is a paragraph that is tabbed over to the left Easy way to create text that is tabbed over when you only need to do it once. Otherwise create a class for it.

15. CSS Notes/Cautions Notes –Your CSS file can be named anything, but must end in.css –Make sure you refer to it properly in your web page –You can use multiple.css pages through your site. –CSS is now the more accepted standard than what we learned at the beginning of class. However, I started with the other method because it 1. provides instant gratification, and 2. it’s easier to understand.

16. Search Engine Optimization http://en.wikipedia.org/wiki/Search_engine_opti mization http://www.searchenginewatch.com http://www.google.com/corporate/tech.html Actual algorithms not always shared Read up on articles to stay current on what works Content is most important.

17. Search Engine Optimization Key words = search terms = what you’d type into a search engine Use key words/phrases as often as possible –In file names *.htm and *.jpg files, i.e. loricooperwebexpert.jpg –In text (i.e. all image navigation hurts you) –Title field Creating Webpages – Urbana Adult Education Lori Cooper (goes in head area) –Alt image tags -

18. Meta Tags Google claims to note use Meta tag information in ranking Yahoo apparently still does Relevance today - ??? Description tag often appears in search results (i.e. Google search PhilCooper.com

19. Meta Tags Two most important meta tags are keyword and description tags

20. Add content for SEO Top of your page: ___________________ (Type a title for your page. It will appear in as the link in search engine results & across the top of the web browser)

21. Add content for SEO (write a description of your page’s intended content) (Use keywords to describe your content, separating with a comma.) (Rest of your page’s content starts here)

22. Proper page formatting Title and meta tags, sometimes javascript code Regular body content of your page

23. Counters Add a counter to your web site to track hits http://www.free-counter-plus.com/ You can also google “free hit counter” for cut and paste code. Remember—your page is on the local computer now, so the counter will be pointless until you upload.

24. Advanced Stats Offered free (or added $) with many commercial hosting options Many pay sites Gold standard – Google Analytics – Free! –Sign up and then simply paste in provided code on every page you want tracked –It will tell you exactly where to put code –before closing tag most recently

25. Google Analytics google.com/analytics In-depth Statistics – sign up, and set up by pasting code (provided by Google Analytics) onto the pages you want tracked –Displays info graphically –# visits, time on site, # page views, new visitors, geographic location of visitors, traffic sources Use info & stats to test and tune your page content

26. Google Analytics # Visits, Unique Visits, # Pageviews –Browser & connection speed –Mobile devices, carriers Time on site (higher=better) Bounce rate (lower=better) percentage of single-page visits or visits in which the person left your site from the entrance (landing) page. Map Overlay – where are visitors coming from?

27. Google Analytics Traffic sources –Direct – use your URL –Referring sites – follow a link –Search engines Search Keywords – are they what you would expect? Are people finding what they are looking for on your site? If not, adjust content. Content Overview – what are people looking at on your site. Beef up content as needed. –Site Overlay – what are people clicking on?

28. Embedding video Youtube makes it easy—www.youtube.com –Others – Vimeo, Google Video, etc. Upload your own videos to post on your web site or find something you want on your webpage Video owner does have option of not providing the code to embed video Let’s add a video to your Pictures page – open it in Notepad to get ready to edit it.

29. Embedding using youtube Go to youtube and find a video (i.e. search for funny dog) Click Embed button

30. Customize video’s appearance Make changes: Related videos? Maybe not on a sale video Aesthetics – border, color, size

31. Copy and Paste Custom Code (Left) click in the Embed field and it will turn blue Right click and select “copy” Go to Notepad file and Paste Save & check in browser window (Use Firefox)

32. Embedding Music Can be obnoxious. Go to http://www.midicenter.com/ –(On your own: Google free midi download) Browse & find a midi file you want to put on your page

33. Follow instructions here to download. -Consider renaming w/easier filename to retype, i.e. music.mid -Save in your website directory

34. EmbeddingMusic Open notepad, and add the following text to the HTML document you want the song to play on: –Replace FILENAME with your file name

35. Embedding Music Caution: starts a plugin which may or may not work automatically on everyone’s computer. Try Firefox if you have problems –Adjust height and width Differs in Firefox vs. IE. Experiment.

36. More text formatting Big heading Medium heading Smaller heading … etc on to Lists Define items to be bulleted. 2 nd bulleted item.

37. List techniques to try 1 st bullet 2 nd bullet 1 st bullet 2 nd bullet 1 st bullet 2 nd bullet 1. 1 st bullet 2. 2 nd bullet Also trying nesting lists!

38. More formatting… This text is emphasized This text is strong This is some computer code Special symbols… —em-dash — © copyright © or © ® registered ® or ® More: http://www.ascii.cl/htmlcodes.htm