Your job today is to create a web page for a new skateboard shop in Kelseyville. The name of the shop will be... well, you have to randomly generate it with one of the links before. :P SOME BUSINESS NAME
123 North Main Street
Kelseyville, CA 95451
(707) 279-1234
Home Page: H1 tag with title, H2 tag with subtitle, appropriate graphic, address and phone number, "div" for nav menu, Footer (same color scheme as your H1 tag) with copyright
Boards: H1 tag with title, "div" for nav menu, table with at least 4 boards and titles, appropriate graphics, Footer (same color scheme as your H1 tag) with copyright
Accessories: H1 tag with title, "div" for nav menu, appropriate graphics, table with at least 6 accessories and titles, Footer (same color scheme as your H1 tag) with copyright
Clothing: H1 tag with title, "div" for nav menu, a "Coming Soon" notice and a Bulleted (unordered) List of clothing types that will be offered, Footer (same color scheme as your H1 tag) with copyright
Jobs: H1 tag with title, "div" for nav menu, appropriate graphic, an Ordered (numbered) List with 3 position titles that you are hiring for, and a Footer (same color scheme as your H1 tag) with copyright
Note: Footers should include your actual email address
All pages (and graphics) will be in a folder:
T:\Your Name\PopQuizYourName
(i.e. T:\Robert Griffith\PopQuizRobertGriffith)
Tomorrow I will have you copy your "PopQuizYourName" folder to a fake web server -- and without your name, I won't know who to give the points to.
Obviously if you're just starting out in photography or movie production, a logo's not a huge deal... but it potentially could be.
Sometimes a logo comes out that is iconic. Bad Robot made a big name in television and is now doing motion pictures. The "Bad Robot" doesn't really have anything to do with movies or television or anything else... but it's memorable.
On Friday we began building our business web sites. You are going to build a web site for the business of your choice, and we started with this HTML framework:
Julio Perez is the owner of the JavaJam Coffee House, a gourmet coffee shop that serves snacks, coffee, tea, and soft drinks. Local folk music performances and poetry readings are held a few nights during the week. The customers of JavaJam are mainly college students and young professionals. Julio would like a Web presence for his shop that will display his services and provide a calendar for the performances. He would like a homepage, menu page, music performance schedule page, and job opportunities page. A site map for the JavaJam Coffee House Web site is shown below. The site map describes the architecture of the Web site, a Home page with three main content pages: Menu, Music, and Jobs.
HOME PAGE
|
MENU ♦ MUSIC ♦ JOBS
You have two tasks in this case study:
Create the Home page: index.html
Create the Menu page: menu.html
Creating the Home page:
Enter the company name as the Title of the page
Use an H1 (heading) tag to place the company name at the top of the page
Create a DIV with links (anchor tags) for each of the pages:
index.html
menu.html
music.html
jobs.html
Create an Unordered List (UL) for "Specialty Coffee and Tea", "Bagels, Muffins and Organic Snacks", "Music and Poetry Readings" and "Open mic Night"
Create a DIV with the company address and phone number
Add a blank line after the address/phone number DIV
Save your index.html file, then do a "Save As" and save it as menu.html
Adjust the Title and the H1 heading to indicate that the viewer is in the Menu now.
Delete the "content" (unordered list and address)
Create a "Description List" (dl) containing "Description Titles" (dt) and "Description Data" (dl):
Just Java
Regular house blend, decaffeinated coffee, or flavor of the day.
Endless cup $2.00
Cafe au Lait
House blended coffee infused into a smooth, steamed milk.
Single $2.00 Double $3.00
Iced Cappuccino
Fish Creek Animal Hospital
Magda Patel is a veterinarian and owner of the Fish Creek Animal Hospital. Her cus-tomers are local pet owners who range in age from children to senior citizens. Magdawould like a Web site to provide information to her current and potential customers.She has requested a home page, a services page, an ask the vet page, and a contact page. A site map for the Fish Creek Animal Hospital Web is shown below. The site map describes the architecture of the Web site, a Home page with three maincontent pages: Services, Ask the Vet, and Contact.
HOME PAGE
|
SERVICES ♦ ASK A VET ♦ CONTACT
You have two tasks in this case study:
Create the Home page: index.html
Create the Services page: services.html
Pacific Trails Resort
Melanie Bowie is the owner of Pacific Trails Resort, located on the California North Coast. The resort offers a quiet getaway, with luxury camping in yurts along with an upscale lodge for dining and visiting with fellow guests. The target audience for Pacific Trails Resort is couples who enjoy nature and hiking. Melanie would like a website that emphasizes the uniqueness of the location and accommodations. She would like the website to include a home page, a page about the special yurt accommodations, a reservations page with a contact form, and a page to describe the activities available at the resort.
HOME PAGE
|
YURTS ♦ ACTIVITIES ♦ RESERVATIONS
You have two tasks in this case study:
Create the Home page: index.html
Create the Yurts page: yurts.html
Prime Properties
Prime Properties is a small real estate company that specializes in residential properties. The owner, Maria Valdez, would like a website to showcase her listings and provide a point of contact for her clients, who are mainly middle-class working adults who are looking for a home in the northwest Chicago suburbs. Maria would like a home page, a listings page that contains information about her properties, a financing page, and a contact page.
Although I could spend pages explaining the differences between HTML, XML, XHTML, and HTML5, I think we'll just begin with the basics using the currently accepted methods.
To design, build, and develop web pages you really don't need any specialized programs. Although programs like DreamWeaver and Front Page are great, all we really need is a text editor. On a PC we can use Notepad, but I recommend Notepad++ (NEVER Microsoft Word). On a Mac you can use TextEdit or TextWrangler.
Every HTML page will have two main components: A Head and a Body.
A basic HTML5 web page template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>
... body text and more HTML5 tags go here ...
</body>
</html>
After you have typed your web page into a text editor, save it to a folder with the extension .html (.htm works as well, but .html is the standard). For example, you could save your page as whatever.html or index.html.
Testing: Next you can test your document. Generally it's easiest to simply double-click the icon of the file that you saved. This will open the web page in your default browser (i.e. Internet Explorer). You can also right-click the icon (if you're using a PC) and select, "Open With..." and choose which browser you would like to test. The first few pages you create will most likely look the same on all browsers and computer platforms,
Header Element: The H1 to H6 tags are used for Headers in a web page, moving from largest to smallest. As you'll find out later in the course, the H1 and H2 tags are the most important because they get indexed more readily by Google. Also, Header tags are used by Accessibility programs (i.e. screen readers) and some page indexing programs.
Breaking Text: The 'p' tag (short for paragraph) will break the text and add a blank line. The 'br' tag (short for break) will break the text and continue immediately on the next line.
Lists: Lists help you display information on your page in an easily readable format. The types of lists below are actually show in a list -- in this case, an ordered list (although I will use an unordered list a little later).
Ordered Lists: These are generally numbered and imply an order or importance. They can be indicated using the "ol" (ordered list) tag with individual items being added with 'li' tags. HTML5 now offers a 'reversed' attribute, which is nice for doing a countdown.
Unordered Lists: These are generally bulleted lists and imply no particular order or importance. Be aware, however, that Unordered Lists are considered obsolete and are being deprecated because they convey no value.
Description List: HTML5 introduces this "new type of list" -- which is basically exactly like the "definition list" which has been deprecated -- kind of. It's basically the same thing.
Div Element: This is a way of saying that everything between the 'div' and the '/div' is a specific "division". A block of "stuff" separated by a blank line on top and bottom. We'll be learning some other useful structural elements as well, but for now let's focus on the Divs.
Hyperlink Elements: Hyperlinks make web pages interactive. They are the "buttons" that users can click on to navigate to other pages or open other files. When creating hyperlinks, try to keep accessibility in mind. For example, if someone [a visually impaired person, for example] is using a screen reader, a link which says "Search the course schedule" is more useful than "More information".
Anchor Tags: "Anchors" (used with the 'a' tag) is a link to another page or file.
Absolute Hyperlinks: Using the anchor tag, this is the way we would link to an absolute address. For example:
will always point to that specific address. It's like telling a cab driver to take you to 123 North Main Street, Lakeport, California and park in the alley behind the red fence. No matter where you are [or where the taxi is] they will find that place.
Relative Hyperlinks: Using the anchor tag, this will link to a relative address. For example,
<a href="mypage.html">My Page</a>
would open mypage.html if it existed in the current folder. It's equivalent to telling a cab driver to stop at the red house. Obviously if you're on a different street, the red house will be a DIFFERENT red house -- or there may not BE a red house. The positive to using a relative hyperlink is that if you use the same collection of pages in a different site, you don't have to change every link.
Email Hyperlinks: Again, using the anchor tag you will specify a link which will open an email program. For example:
would [if equipped] open an email program and compose a new email to rgriffith@mendocino.edu. Note: Some people set up their programs to show "Email Me" instead of showing their email address. This is not recommended since many people don't have email programs set up to automatically open when clicked. People often highlight the email address, copy it, and paste it into a program like Gmail.
HTML Validation: W3C has a validation service at http://validator.w3.org which HTML coders can use to validate the syntax of their web pages. It's definitely worth trying, especially if you're having trouble finding pesky little problems (missing semicolons, for example).
These are a couple of previous tutorials which I have not updated since the release of HTML5, but they should give you a pretty good handle on what is going on here.
This video shows what people in 1969 thought the future of technology might be. It's short and interesting to see just how accurate these predictions were:
Don't stress over the "alphabet soup" that is web page design. I tend to avoid questions such as "Define the following: CERN, NCSA, NSF, ARPA, W3C, TCP, XML, XHTML, CSS, etc.". I mostly want you to get a feel for where these things came from and their context. To help with this, check out the brief video called "Warriors of the Net". This video does a great job of explaining how the Internet works in human terms -- while still managing to fit in some "computerese". I like it. :)
