Reminder: Assignment #2 (Draft Design & Layout) Due Tonight to WyoCourses.
Reminder: 25-Point Quiz on Thursday during class time.
- Understand the differences among inline vs. block vs. void elements. Identify examples of each type.
- Understand what the basic elements (or tags) mean. Understand when to use them in your HTML document. For example,
- ol, ul, li
- Be comfortable with finding errors in coding, like the “Be the Browser” exercises in the book.
Chapter 4: Getting Connecting – A Trip to Webville
Domain Name Registration and Web Hosting
You’ll be designing a website using HTML (hypertext markup language) and CSS (cascading style sheets). Then, via Dreamweaver, you’ll upload your files to a website host using FTP (file transfer protocol), who will store and provide the files for your website when a person requests it (i.e., when they visit your domain name).
While you can use UW’s free student hosting service, I recommend buying your own domain name and hosting service for several reasons.
- Branding. In search engine optimization, you want to have your own website appear first on a search. That may not happen with UW’s hosting service.
- Also, there are limitations to file size on the UW account. You may exceed the storage limit (200 MB) with your work.
- You cannot solicit money or work on the UW service.
- And, your student account will be deleted when you graduate.
Nevertheless, if you cannot afford to pay for the hosting and domain name purchase, then please use the free UW student hosting service. I’ll do my best to help you, but many questions will need to be answered by UW IT Department.
If you buy your domain name, it must be unique and you’re not allowed to use one that’s already been bought. You can visit Go Daddy to check and register your domain name.
Don’t be disappointed if your full name is not available. Domain names that are simple are the easiest to remember and share with people. Sometimes that means cutting your first name for a first initial. For example, if PeterStevens.com is not available, then PStevens.com may be available.
You’ll see there are other options besides “.com”, such as “.org” and “.biz”. But, the standard “.com” is the easiest to remember and share.
Let’s discuss your domain name now in case you have any questions. The company you buy your domain name from does not need to be the same company that you use for the hosting service, but oftentimes they are the same.
Let’s buy now, in class, so we don’t get confused.
Download the Assignment #3 (Domain Name and Hosting) Requirements: 3 – Domain Name Registration and Hosting
Back to HTML
**We will cover p. 128-141 once we have purchased our domain name and hosting service.**
External links on pp. 142-145
Relative vs. absolute links on p. 146 and 154
Linking within one webpage on pp. 149-153
Title and target linking on pp. 147-148 and pp. 155-157
Reminder: Assignment #3 (Domain Name & Hosting Registration) Due by 1:20 p.m. Tuesday 2/21.
Krug, Ch. 6: Designing Navigation
Navigation: getting from one place to another, and figuring out where you are
Why is web navigation so important?
Difficulties of web browsing:
- Your sense of scale is limited. No idea how big the website is.
- Your sense of direction is limited. Which way again?
- Your sense of location is limited. Need to remember conceptual hierarchy.
Why should we make already-clicked links a different color?
- Make the hierarchy visible = show us what the site contains
- Implicitly tell you how to navigate and what the options are
- Use web navigation conventions (see p. 65 for the graphic)
- Include one set of global (persistent) navigation on every page (except forms, see p. 67). Include a maximum of five tabs (otherwise, we get lost).
- Put the clickable site ID (e.g., your name) in the upper-left corner. Make the site ID look like a site ID (a distinction typeface and/or graphic) (see p. 67-68).
- Consider drop-down menus (i.e., secondary navigation) in the primary (global) navigation. When you click, you see the drop-down menu of options or you go to a front page of the subsection (see p. 69).
- Avoid a search box because you’re building a small website.
- Include a prominent, helpful page name in an appropriate location on every page (see p. 75 for examples).
- On every web page, highlight my current location in whatever navigation bars appear on the page (see p. 78 for examples).
- Avoid “breadcrumbs” unless you have a complicated website.
In the future, consider trying Krug’s “trunk test” on pp. 82-83.
We’ll take a look at how images function on the web.
HTML & CSS Book: Ch. 5 – Adding Images to Your Webpages
How images work with browsers on pp. 164-166
The different types of images on pp. 167-169
The image element, alternative attribute, and width/height attributes on pp. 170-174
Instructor-led exercise with images on pp. 175-191
Instructor-led exercise with thumbnails and linking images on pp. 192-200
Inserting a logo, working with the PNG format on pp. 201-211