With your friendly Web Developer, Chris.

Terminology  HTML - > Hypertext Markup Language  CSS -> Cascading Style Sheet  open tag  close tag  HTTP->Hypertext Transfer Protocol  URL -> Uniform Resource Locator  Server -> Computer that holds the files for users to request on the web  Style -> Visual effects driven by CSS code

Understanding HTML Code  Documents are just pages of text interpreted by your web browser  Every web page has some identifying markup included, standard items

Standard Markup  Every page begins with and ends with  Within the tags is usually a section  After the comes the… of course

Common tags  Is a self opening and closing tag to create a new line (line break)  is a layer  is a heading (of value 1)  is a span of text  Text Links “Text” to “URL”  class=“classname” assigns class to an object  Id=“named” gives an object an Id of named

Client- Server Architecture  All webpage's sit on a server waiting to be accessed by a user on the web  When the users requests a page via the http protocol, the web server responds by giving it the text of that page  The browser then renders the page according to the text on the page and any associated files/styles

Dynamic Sites  Facebook, Youtube, USF’s Site  These sites don’t have all their data on the pages  Instead they pull data out of a database to be displayed based on variables

Static Sites  The website You’ll Create  Content is hard-coded into HTML files  You must have separate pages for different content  Typically faster to serve than dynamic sites

Quiz  What does HTML stand for?  Name one difference between dynamic and static sites  Name 2 common tags  Do all tags need open and close tags? If no, what is an example of one that doesn’t?

Languages of the Web  HTML  PHP -> Hypertext Preprocessor  ASP -> Active Server Pages  JAVA  Ruby

Our Project  You’ll create 2 webpages, at minimum. Both will be styled using CSS and a separate style sheet.  You must link the two together  Have 3 links to outside sites between the two  Rollover effects on links  Well chosen backgrounds  Div layers, Spans etc

Standards  You should adhere to good web-standards practices!  Different browsers interpret things differently, be careful about targeting your audience.  Incomplete code may display, but please, for the love of the internet, finish it!

Lets start the project!  Verify you have a Q:\ drive  Install Notepad ++  Open Notepad++  Save as index.html in your Q:\ drive  Open a browser, go to

Doctypes  html html  Document Types are important!

Open and close some tags  Lets get some required tags after our doctype declaration 