Menu toggle

Lecture Notes

Additional Helpful Information

What is HTML?

HTML is actually a really easy language to learn. with just a little bit of tutelage and a few tags, you could put together basic web pages within a hour! At it's core HTML is no more than telling the browser what the content is, ie: this is a paragraph, this is a headline, this is an image.

HTML stands for HyperText Markup Language. But it was sloppy, there were no web standards, and every browser had quirks and displayed the information in different ways. So the W3C applied the rules for XML (or Extensible Markup Language, a markup language where everything has to be marked up correctly, which results in "well-formed" documents) to HTML, and XHTML was born.

What is CSS?

CSS stands for Cascading Style Sheets and defines how XHTML elements are displayed. In our CSS documents we can tell the browser how to display our headlines and paragraph text.

In the old days you would set color, font, size and weight for every block of text on every page in the HTML. This ends up being a ton of redundant data for the browser to download. When a CSS document is downloaded, it is cached so you browser remembers you display settings and apples them to every page that references that CSS document.

This is the process of separating content from presentation. This is part of a larger discussion called Accessibility. It allows various browsers and interpreters to access the data equally. We will be discussing this in further detail later on in the course.


Web Technology

Web design requires the knowledge of the technologies behind the surface design. The more you dig into this field you will find many specialized areas that go into building a website. From project planning, to information architecture, to visual design to client-side and server-side programming.

Every visual choice you make in the design will have a technological consequence. There are two different environments that are called upon in every web page interaction.: The Client-Side and The Server-Side.

Client Side

Client-Side Technologies have to do with the users computer: The system hardware, the browser, the plugins.

Browser
Chrome, Firefox, Safari, IE, Opera, Netscape (each with it's own quirks). These request, retrieve and display pages from the server.
HTML
Hypertext Markup Language. Tag based language best used to define the structure of the content
CSS
Cascading Style Sheets. Used to define the visual style of the document
JavaScript
HTML is static, javascript makes pages dynamic. Object Oriented Programming Language
Adobe Flash
Used to make animations, games, banner ads, even entire websites. Requires browser plugin
Multimedia
Audio & Video Requires browser plugin

Server Side

Server-Side Technologies are languages the require the web server to execute before serving the requested pages to the users browser. Servers can deliver two kinds of pages: Static or Dynamic Static Pages do not require any extra server side processing Dynamic Pages run server side scripts to create dynamic data to build pages on the fly then serves them to the client

XML
Extensible Markup Language
AJAX
Asynchronous JavaScript and XML
PHP
Perl

Best Practices

Programming

  • Never use a space in a file name
  • Never use a special character in a file name
  • HTML
    • user lower case for all elements, attributes, and values
  • CSS
    • use dashes for id and class values
      class="my-class-name"
  • Javascript
    • use camelCase for variables and function names
  • PHP
    • use underscore_naming for variables and function names

Directory Structure Local

  • digm505
    • _graphics
      • header.psd
      • footer.psd
      • logo.ai
    • _resources
      • tables_example.html
    • public_html
      • hwk01
        • css
          • reset.css
          • styles.css
        • images
          • logo.png
          • face.jpg
        • bio.html
        • contact.html
        • index.html
      • hwk02
        • ...
        • ...
      • midterm
        • ...
        • ...