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"
- use dashes for id and class values
- 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
- css
- hwk02
- ...
- ...
- midterm
- ...
- ...
- hwk01
- _graphics