Building Your Website Using XHTML and Cascading StyleSheets (CSS):
Part 1, The Theory
Building Your Website Using XHTML and CSS:
Part 1, The Theory
A few years ago people didn’t have to think much before setting up their websites. There was one way most people viewed websites and that was with the software for reading websites (a “web browser”) Microsoft’s Internet Explorer (IE) software on a regular desktop computer. People set up their website to look good on Internet Explorer on a desktop computer; it was a no-brainer.
Nowadays things have changed a lot. Many people now access the World Wide Web with palm pilots, smart phones and cell phones and with browser software other than Internet Explorer (ex. Firefox, Safari, Opera and others) and with screen readers (software for blind people that reads the screen). People also expect a lot more: cool graphics, audio, video, forms, databases, maps, blogs, bulletin boards and all kinds of ways to interact with the webpage and other users. To accomplish all this web design has changed in two main ways.
-
The language of the Internet has changed from the original language of websites, HTML (Hyper Text Markup Language), to a new version, XHTML (Extensible Hyper Text Markup Language). XHTML is used together with a cascading style sheet.
-
Web professionals no longer design how a website looks using tables and font tags-- they use Cascading Style Sheets (normally called CSS for short). Styles tell the web browser how to display XHTML tags. All the styles are collected together in a document called a cascading (one style after another, after another… in one long list) style sheet.
In this class you will understand how to use CSS to emulate old-school, HTML/table-driven web layouts, and you will be creating Web sites that have a lot more cool features that would be impossible to design using traditional HTML/table methods.
A stylesheet (CSS) lets you separate the style and layout of your website from its content (the XHTML), thus allowing you to control the position, margins, spacing, fonts, colors, typefaces, and design of your website by just make simple changes to just one stylesheet page (instead of having to change each and every webpage like we used to back in the days of HTML/tables).
So, basically, nowadays you want to make your website with two different documents, your XHTML webpage (your content that contains all your XHTML tags) and your CSS (the styles that make up the design) page. The two pages talk together and the resulting hybrid is your first webpage! Each webpage on your site has a XHTML page; you only need one style sheet for each design. Thus, you only have to change one style sheet to make all 100+ XHTML pages on your entire website change color -- or font sizes -- or many other designs. This sounds confusing the first time you hear about it, but let’s make your first webpage and it will start to make more sense.
Quiz (this is not graded, it is just to try and learn XHTML and CSS better)
1. Old-School is to HTML as New-School is to:
- Cascading stylesheets
- XHTML
-
Ludacris
- CSS
2. Using XHTML and CSS to create web pages is better than HTML because:
- the resulting web pages are smaller and faster loading
- it speeds up site maintenance by separating the content from the layout
-
it is easy and fast to change the style and layout of the entire website
- search engines can understand them better and thus rank them higher
-
all of the above
3. Cascading stylesheets make it easy to reformat your website to display on a cell phone or palm pilot:
-
true
- false
4. What looks more impressive on a resume seeking a web design position?
- knowing HTML
- knowing XHTML and CSS