Professional Website
Development
TECH 272

Managing Your Site

  • Site homepage needs to be named index.htm or index.html
  • Use lowercase for file and directory names for consistency
  • Normal practice it to create an images directory on the site root.
  • Files can be arranged and named in a number of ways...no one correct method.

Image of Class Site File Layout

Lots o' Links

  • URLs (or, “links”) – are unique addresses of objects on the Web.  We call them links (technically called anchors) and they contain references to files or certain places in files.
    • Anatomy of a hyperlink:
      • Example: <A HREF=”http://www.mysite.com/mybio.cfm”>My Biography</A>
        • Where:
        • <A></A> is the anchor tag,
        • which has an HREF attribute
        • The HREF attribute is followed by an equal sign and a value (in quotes), which is the location (or, URL) of a file.  These URLs can be absolute or relative.
        • The text (or image) between the open and close anchor tags is the “hyperlink.”
Link Type
When to use it.
What's it looks like?
Example Code
Absolute When you leave your site and/or server. http://www.csszengarden.com <a href="http://www.csszengarden.com" title="CSS Zen Garden link" target="blank">Zen Garden</a>
Relative When you want to link within your site tutorials/css.html <a href="tutorials/css.html" title="Our CSS Tutorial link" target="self">Our CSS Garden</a>
Email When you want to embed an email link. mailto:melissa@proflizmi.com Email me at <a href="mailto:melissa@proflizmi.com?subject=Question about your site&bcc=supervisor@myco.com" title="Our CSS Tutorial link">melissa@proflizmi.com</a>
Named Anchors To go to a specific place on an (X)HTML page.

Link: <a href="#anchor">

Reference: <div id="anchor">

Table of Content:
Link: <a href="#history">History</a>

Reference: <h3 id="history">CSS History</h3>

Absolute Link: <a href="http://www.css.org/home.html#history">History</a>

More about Relative and Absolute Paths

  • absolute vs. relative links
  • document-relative vs. root-relative links
LINK TIPS
absolute links contain :
e.g.

<a href="http://www.ibm.com">link</a>

<a href="http://www.geocities.com/page.html">link</a>

root-relative links start with /
e.g.

<a href="/index.html">link</a>

<a href="/folder/page.html">link</a>
document-relative links start with either ../ or just a file name or folder name
e.g.

<a href="../index.html">link</a> (goes up one directory)

<a href="index.html">link</a> (docs are in the same directory)

<a href="folder/page.html">link</a> (calling doc in on the site root - goes down a directory only)

Doc relative vs. Root Relative:

Relative vs Absolute File Paths
(adapted from Adobe TechNotes)

more info on document-relative, root-relative and absolute paths

More about Named Anchors

  • Use the id attribute of just about any tag to identify the place in your document where you want your users to "land." For example, <h3 id="design_process">How does the design process work?</h2> This is called a named anchor.
  • Create a link to your named anchor using a # sign to indicate a document fragment; like these examples...
    • same document <a href="#design_process">Design Process</a>
    • relative path <a href="faq.html#design_process">Design Questions</a>
    • absolute path <a href="http://www.webworks.com/faq.html#design_process">Web Works has fabulous design prices!</a>
  • Take a look at this web word glossary. Copy the source code to your local drive then make the appropriate links. When finished, upload the file to your web4students account and link to your homepage .

Linking Images

  • Example <img src="xmas_party07.jpg" alt="picture of employees at company christmas party" />
  • Making an image clickable - nest tags! Surround your <img> tag with an <a> tag; like this
    • <a href="employees.html" title="Employee page"> <img src="xmas_party07.jpg" alt="company christmas party" /></a>

Let's practice linking with Jen's Kitchen

 

Homework 3: Named Anchors & File Management

Organize your website using folders like the example above if you have not already. You do not have to use the exact same folder/file layout, however, make sure your layout is logical and be prepared to explain why you choose your configuration if necessary. Since using an images folder to store all your images is an industry standard, make sure you create and use an images directory.

  1. Put at least three images on your site, making sure that all your images are stored in your images folder.
  2. Create a homework folder and save all your homework assignments in this folder. You will need to employ your relative path writing skills that we practiced in this unit to create links from your homepage to your HW2 & HW3 (and the rest of the assignments).

Named Anchors

  1. Create a hw3.html document that illustrates your mastery of named anchors. At the top of this document put
    1. <h2>Five Things You Should Know About Me</h2>
    2. next, create your bulleted or number list of five items
      1. Try listing professional assets you would offer potential employers like... 1) I am an achiever 2) I am a quick learner, etc.
      2. Or, try a creative approach; list personal traits about yourself like 1) I love spending time with my family, 2) I love to garden and teach.
      3. Or, make up your own list....however, PLEASE BE RESPONSIBLE with your posts; nothing obscene or otherwise inflammatory. This is a College server and is subject (as are you) to the rules and regulations of the College.
      4. Write 5 brief paragraphs supporting your 5 point list above and use a named anchor to link your list items to the beginning of each supporting paragraph.
      5. Give your users a [back to top] link at the bottom of the page, or at the end of each paragraph, whichever you deem appropriate.
  2. Link hw3.html to your homepage using the Homework list on your homepage. Have the clickable text read HW3: Linking