XHTML

Code samples & ideas on xhtml 1.0 strict.

Make a Basic HTML Page with Headers & Paragraphs

[iframe http://www.youtube.com/embed/OhQNVLwLrk4 420 315]

 

Get started making websites now. This is a beginner-level video on how to get started making web pages. It begins with a template you can download and begin using now, and ends with a very simple biography page with two levels of headers and two paragraphs of text.

I decided to pull any references to my name off of the video since it’s published on YouTube, which offered a great opportunity to have more fun (with the blur tool and a Monty Python reference).

OSU SuperQuest WordPress Showcase

I wanted to show off the brilliant work of my WordPress workshop participants from the Web Design: from Soup to Nuts course at OSU a few weeks back. Students (mostly teachers) learned about the core web technologies used in WordPress (X/HMTL, CSS, PHP, JavaScript, MySQL), manually installed WordPress on a server, developed a blog or website using WordPress, and learned how to modify the layout & structure of their site using the Appearance Editor.
Click a thumbnail to visit the site:

Sanders' Resources

Sander’s Resources
Image of Rainy Day Books Website

Rainy Day Books
Picture of Math Dude screenshot

Math Dude’s website


Picture of the Literature website

Literature is About Life web site
Image of THS Tech website

Tigard High School Tech Website
Picture of Twenty-Five into Twenty-Four Website

Twenty-five into Twenty-four Website



I had more participants, but I’m still waiting to see if they’ll send me the links to their sites. If I get more, I’ll post them here.

Web Design from Soup to Nuts PowerPoints

This post is intended for all OSU SuperQuest workshop participants, but I share the resources freely for all the world to see. I hope the notes make sense out of context.

Web Design From Soup to Nuts Introduction

Web Design From Soup to Nuts Day Two

I should make the disclaimer that I never did codify the explanation of MySQL and PHP in a PowerPoint presentation, so there is no record, other than oral tradition. If you would like an overview of MySQL and PHP, you should read the W3School’s tutorials on MySQL and PHP.

Website Layouts Made Simple Starter Code

I’m in the heart of open source country: Corvallis, Oregon, preparing to teach a workshop on website layout design for the 2010 SuperQuest Summer Institute at Oregon State University. I’ll be covering a variety of CSS techniques to generate cross-browser layouts (1, 2, & 3-column). We’ll also cover typography, use of color, background graphic positioning, and other fun techniques.

So we can get right to the meat of the matter, I decided to post some “starter” code.

XHTML 1.0 Strict Template

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
<title></title>
</head>
<body>
</body>
</html>

HTML-Ipsum

Since our concern will be primarily with coding layouts, I want to jump right to some sample code to drop into our various columns, headers, & footers. A great site to drop sample code is the HTML-Ipsum site. Look at the page, decide how much or what type of sample code you want, click the title box above the code, and you’ll get the sample code copied to your clipboard, ét voilá!

Stay tuned for some more yummy CSS goodness forthwith…!

The SuperFish Menu – “It’s Super-fishey!”

The Superfish plug-in rocks the free world, if you ask me, but I had a few problems implementing the JavaScript on my own CSS-styled menus. I therefore set out to expand their instructions and “fix” the ones that caused problems.

Start with a nested list of links.

There are many resources on using CSS to create fancy navigation bars. My top recommendation for any web designer is to start with CSS Max Design. They have a listutorial that explains the trick to creating horizontal and vertical navigation menus using only HTML and CSS. They also explain how to style nested lists. CSS Max Design also has a repository of probably 100 different menu styles, all using HTML and CSS only.

For the Superfish menu to work, you must begin with a nested list of links. Go to CSS Max Design’s Listamatic 2 and chose a CSS-driven layout that we liked (horizontal or vertical) – my favorite was “borders and indents” – you pick your own. It really doesn’t matter which menu you like because they all use the exact same HTML code.

Step 1: Copy the HTML Code and paste it on your web page.

A good place to stick this code is right after your header (<h1>) or in a banner or header div (<div id=”banner”>

Step 2: Change the <ul id=”subnavlist”> to <ul class=”subnavlist”>

Why? With the listamatic, they only contain 1 nested list (under “item one”). However, in the real world, there are typically 2 or more nested lists. Since the id attribute is a unique identifier, in theory, you should not have the same id attribute twice. That’s reserved for a class attribute.

Your nested list of links should look something like this when you’re done:

You’ll note I added a comment at the top, that was not in the listamatic, but it doesn’t really affect anything. Note also how I added a second “subnavlist”.

You might like to know that you can most probably nest a nested list. In my workshop, I did a quadruple nested list (a list within a list within a list within a list) just to see how the superfish handled it, and the only issue was the width of the entire menu made it a little cramped.

<div id="navcontainer">
<!-- Create an unordered list of links -->
<ul id="navlist">
 <li><a href="index.html">Home</a></li>
 <li><a href="#">Page One</a>
 <ul>
 <li><a href="#">Sub Item One</a></li>
 <li><a href="#">Sub Item Two</a></li>
 <li><a href="#">Sub Item Three</a>
 </li>
 <li><a href="#">Page Two</a></li>
 <li><a href="#">Page Three</a>
 </ul>
 <li><a href="#">Sub Item One</a></li>
 <li><a href="#">Sub Item Two</a></li>
 </ul>
 </li>
 <li><a href="#">Page Four</a></li>
</ul>
</div>

Create an external style sheet for your Navbar

Did you see my post on Notepad++, because it’s the best web design tool in the universe. If you don’t have Notepad++, download it now, and then you can proceed.

Step 3: Find a Listamatic2 Navbar that you Like

Note: if you are a seasoned code monkey, you may wish to create your own CSS code for the navigation bar. If that’s you, just skip the steps involving copy and paste from listamatic2.

  1. In Notepad++ (or whatever editor you like) Create a new file
  2. Find the listamatic2 CSS code that you want to use on your site
    • Note: you’re welcome to do all the code yourself
  3. Copy all the CSS code and paste it into the file
  4. Title it, “navigation.css”
    • note: I’m a firm believer in having a separate CSS file for your navigation, so it’s easier to locate

Step 4: Make Any Stylistic Changes that You Want

I often times make my students change the color schemes and fonts and encourage them to experiment with background images as well.

Step 5: Fix the CSS to Match the HTML Change from Step 2

What you’re going to do now is change every line of code in your CSS that states, “#subnavlist” to “.subnavlist” That’s because in CSS # is for an id attribute and the dot . is for class attributes.

Have you met my favorite shortcut key from Notepad++? It’s called “Replace.” In Notepad, it’s called “Find and Replace” either way, this is the time to familiarize yourself with that little shortcut.

  1. In Notepad++ AND in Notepad, type “Ctr + H” that opens the find and replace
  2. In the find window, type “#subnavlist”
  3. In the replace window, type “.subnavlist”
  4. Choose “Replace All”

Step 6: Test and Fix the navbar to make sure it looks good

This I can’t help you with. If you get stuck, or things are not working, you may wish to start over. It’s most likely due to steps 2 and 5. If you don’t mind having only 1 subnavlist or you what to throw semantic markup out the window, ignore steps 2 and 5 and hope for the best.

Add Your Superfish Files

Step 7: Download and Extract the Necessary JavaScript Files

Get the zip archive from the Superfish download page. Extract all files, then grab all JavaScript files from the ‘js’ folder and save them into a folder in your website (Note: even though you will link to 2 javascript files, all files will be used–don’t be stingy).

Step 8: Link to 2 External JavaScript Sheets

In the head of your HTML page, you will add 2 <script> tags that will link to two different JavaScript Sheets. WARNING: Make sure you link in the proper order, from top to bottom:

  1. First link to ‘jquery-1.2.6.min.js’ through a script tag
  2. Next, link to ‘superfish.js’ through a script tag

Note: the link to superfish.css is unnecessary for this (since we used the CSS from Listamatic2

Step 9: Initialize the Superfish

Initialize the superfish through a script tag like so

<script type="text/javascript">
//Initialize the SuperFish Plugin
 jQuery(
 function(){ 
 jQuery('ul#navlist').superfish(); 
 }
 ); 
</script>

According to the instructions on the Superfish home page, it says to add a class=”sf-menu” to your unordered list, but that’s only because they don’t realize how smart you are. You already gave an id attribute of ‘navlist’ to your <ul>. When you initialize the plug-in, you specify what tag gets adjusted by the Superfish, it’s the section where it says jQuery(‘ul.sf-menu’). Since our list has an id of navlist, you simply change the jQuery function call to jQuery(‘ul#navlist’), and it will work just fine.

Note: you could also just add class=”sf-menu” to your unordered list, but then it would be jQuery(‘ul.sf-menu’)