Class Note 5 for Internet Web Publishing I

Learning Objectives:

You will be able to describe how search engines work.

You will be able to create an External Style Sheet that controls your HTML page.

You will be able to create a style that links a background image.


Read:  Chapter 8 & 9  in your book

Watch: Search Engine Video

Watch: Burger King view on Net Neutrality.

Google: Yourself

Visit: Google Easter Eggs

Post: Movie Review on your webspace and make sure it links off of your homework page.

Reminder: Post your articles on Canvas under the Weekly Articles on the Discussion Board Section.

Topics Covered:

John Oliver explains Net Neutrality!

How Search engines work:

Bots or Web crawlers gather the Web pages for the Search Engines.

Search Engines are very fast and powerful databasesAbout,WikipediaMSNGoogle, Bing and Yahoo

Cool new Google tool for those who don't know how to Google. (Yes this is a joke)

Google Yourself, a phone number, a web site, a politician ....

Advanced Search With Google

Google Scholar is handy for writing research papers

Search tips for Google

define: find definitions for a word define:html

Flight: search the cost of a flight: phoenix to denver

site: search only within a specific site

"set of words" search for exact set of words, quotes or phrases "live long and prosper"

filetype: find a type of file: GIF, JPG, DOCX filetype:jpg

.. get ranges of numbers, dates, or prices 2000..2013

word * word find other combinations of words between words creative * writing

- word search for jon storslee, but NOT Mark storslee - Mark

+ word find exact words - no synonyms or plurals +peace + freedom


CSS review:

selector {property: value}

Various Selectors used by CSS

Internal Styles:


body { background-image: url("suns.jpg"); font-family:arial;}

h3 {color: #FF0000;}

p { font-size: 150%}



External Styles:

External Styles are linked Example: <link rel="stylesheet" type="text/css" href="file-name_of_stylesheet.css" />

on the style sheet: (note no style tag)

h3 {color: #FF0000;}

p { font-size: 150%}


Inline styles:

Inline styles (avoid if possible) are placed inside the tag (element) as an attribute!

Example: <p style="font-family: arial; font-size:1.1em;">


The CSS Box Model:

CSS Box Method

This model defines how the Style will impact the content.

Content is the information you provide between the tags.

Padding is the space between the border and the content.

Border is a line you can place around the content.

Margin is the space between the border and the end of the screen

W3schools HTML & CSS

CSS of a Webpage

Responsive Design using CSS

Cool things you can do with CSS3 by Creative Can


css path for background



CSS, link, internal styles, external styles, selector, property, value


HTML Valid