Posted on

Meta tags

Meta tags help search engines find your site. These are the most common for HTML 4 and XHTML, which you can copy and paste into your template:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="Author" content="" />
<meta name="Copyright" content="" />
<meta name="Rating" content="General" />
<meta http-equiv="expires" content="0" />

These are more common for HTML 5:

<meta charset="UTF-8" />
<meta name="Keywords" content="" />			
<meta name="Description" content="" />			
<meta name="Author" content="" />

Fill in your text between the quote marks.

If you don’t want search engines to find your site, then add these (or replace the others):

<meta name="Robots" content="noindex, nofollow, noarchive" />

OR

<meta http-equiv="pragma" content="nocache" />

Here is an example of complete meta descriptions for XHTML:


<meta name="Keywords" content="nw river tours, willamette river, willamette, osu, corvallis, oregon state university, boating, nordyke, hiking, nature photography, jet boat, north river boat, " />
<meta name="Description" content="Northwest and Willamette River Tours" />
<meta name="Author" content="PamVanLonden.com, CJ Nordyke, John Nordyke" />
<meta name="Copyright" content="2009" />
<meta name="Rating" content="General" />
<meta http-equiv="expires" content="0" />
Posted on

XHTML Checklist

This is a list of the most common requirements for XHTML as per the W3C. Also see HTML for the World Wide Web, Chapter 1, page 36.

Start the document like this:

  • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  • Define your File Type with: <html xmlns=”http://www.w3.org/1999/xhtml”>

In the head section, add the character set (optional):

  • <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

Use this formatting as needed:

  • 4.1. Documents must be well-formed
    • All elements must have closing tags: <p>paragraph</p>
      and <img scr=”pic.jpg”
      />
    • All the elements must nest properly: <p><b>Nested
      tags</b></p>
  • 4.2. Element and attribute names must be in lower case.
    • for all HTML element and attribute names: <a
      href      =”#” target=”_blank“>
  • 4.3. For non-empty elements, end tags are required
    • <hr width=75% noshade=”noshade” />
  • 4.4. Attribute values must always be quoted:
    • <p class=“menu“>
  • 4.5. Attribute Minimization
    • Attribute-value pairs must be written in full:
      • <dl compact=”compact”>
  • 4.6. Empty Elements
    • Empty elements must either have an end tag or the start tag must
      end with />:
      <br /><hr />
  • C.13. Cascading Style Sheets (CSS) and XHTML
    • Use lower case element and attribute names.
    • In tables, add a tbody element to a table if it is referred to
      in a CSS selector.
    • Posted on

    Dreamweaver Preferences

    1. Launch Dreamweaver
    2. Choose Edit->Preferences
      • General
      • Accessibility, choose
        • Show Attibutes When Inserting: check all boxes
      • Code Format, choose
        • Unix Line break type
        • lowercase
        • quote attributes
        • use DIV tag
      • Invisible Elements, choose
        • Line breaks
        • Image Maps
        • JavaScripts
      • New Document, choose
        • HTML
        • .Make document XHTML compliant
      • Validator, choose
        • XHTML 1.0 transitional
    Posted on

    Create Directories and Landing Pages

    The file structure

    On ONID, as on any other web server, you can have many sites within your root directory. Consider making a directory for each site you have planned, rather than mixing them all up.

    1. On your local hard drive, add a directory named for your public site.
      • Web site directories listed on a hard drive.Examples of names of directories and the address a visitor would type. Also see the hard drive list illustration at the right:
        • /courses/
          • http://oregonstate.edu/~vanlondp/courses
        • /blog/
          • http://oregonstate.edu/~vanlondp/blog
        • /vita/
          • http://oregonstate.edu/~vanlondp/vita
      • Add a file called index.htm (or index.php for dynamic sites) to the new site directory.
        • Index pages are the default landing page of each directory. Every directory that will have pages with content should have an index page.
        • Directories that do not require index pages are images, media, scripts, Templates, etc.
        • Note that on Microsoft servers (as apposed to Apache) use default.htm as the default page.
        • Default pages will automatically appear when you type the path to the directory because the server recognizes it as default by its name.
      • Sample file structure for ONIDNote: If you’re going to keep you site hidden—it’s private—then you can bury it within a class folder if you wish.
    2. Add a directory called images
      • to the site directory.
    3. If using .htm pages then add a directory for each main topic.
      • Keep the names as similar to the planned menu items as possible.
      • Add index.htm files to each directory.
        • Option-drag (Macintosh) or Control-drag (Windows) the previous index.htm file into each directory and subdirectory.
        • Note: there is nothing on these index files yet; we’ll apply templates to them later.
      • Add images directories to each topic directory that will have image files unique to that topic.
    4. Example of the course directory with php structure.If you are using .php pages and dynamic content, add just one page for each section rather than a directory for each section.
      • Place snippets of content such as articles, quotes, comments, etc into separate .htm or .php pages, or write queries to pull content from a database. More on this later in CS 295.
    5. Add subdirectories to topic directories as needed.
      • Add index.htm files to each subdirectory.
      • Add images directories to each subtopic directory that will have image files unique to that topic.
    6. Copy the completed structure to ONID‘s web server space in the public_html area.
    Posted on

    A web page in 15 lines or less

    The anatomy of a web page

    Roll over each each item below to read the <title> tag that describes it more.

    • doctype
    • html
      • head
        • title
        • meta
        • link to external style sheets and scripts
        • internal styles and scripts
      • close the head section
      • body
        • headlines
        • paragraphs
        • embedded images, movies, audio files
        • lists
        • tables
        • hyperlinks and anchors
        • image maps
        • links to external scripts
      • close the body section
    • close the document

    How to markup a simple .xhtml page

    Type the lines of code below in a text editor like NotePad, TextEdit, or SimpleText.

    Line 1: Define the version of markup language you’ll be using in the page with:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Line 2: Define your File Type with:

    <html xmlns="http://www.w3.org/1999/xhtml">

    Line 3: Begin the Header with:

     <head>

    Line 4: Add the Title of the page so it doesn’t say "untitled" in the browser title bar:

     <title>Soandso's Table of Contents</title>

    Line 5: Add the first of several Meta tags. This one isn’t required, but tells browsers what character set you’re using.

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
or
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    Line 6: Link to a style sheet that has the color scheme, fonts, and layout styles you prefer. Start with this one:

    <link href="http://oregonstate.edu/instruct/cs295/media/article.css" rel="stylesheet" type="text/css" />

    Line 7: End the Header section with:

    </head>

    Line 8: Begin the Body section.

    <body>

    Line 9: Begin and end a Headline with:

    <h1>Table of Contents for [myname]</h1>

    Line 10: Begin and end a Subhead with:

    <h2>List of Classes</h2>

    Line 11: Begin and end Paragraphs with:

    <p>Click each item listed below to view it.</p>

    Now what?

    1. Save the file as .htm or .html in a directory/folder on your hard drive.
    2. Open the file in a browser like FireFox, Explorer, Safari, or Netscape.
    3. Review how it looks and make corrections.
    4. Transfer/copy the file to the web server (ONID’s public_html directory).
      • ftp://ftp.onid.orst
    5. View the live web file on the Internet at your ONID web address.
      • http://oregonstate.edu/~onidID/page.htm

    Line 12: Begin and end a list of Navigational Links:

    <ul>
  <li><a href="cs195/index.htm">CS 195</a></li>
  <li><a href="art300/index.htm">ART 300</a></li>
</ul>

    Line 13: Begin and end text that links to an Email Message Window, with:

    <p>This site &copy; <a href="mailto:soandso@onid.orst.edu">Soandso</a> 2004</p>

    Line 14: End the Body with:

    </body>

    Line 15: End the File with:

    </html>
    Posted on

    File Transfers ~ OSU only

    Addresses

    html: http://www.onid.orst.edu
    shell: shell.onid.oregonstate.edu
    ftp: ftp.onid.orst.edu

    FTP using MacOS X from off campus

    1. From the Finder menu, select Go->Connect to servers.
    2. Type afp://onid-fs.onid.orst.edu/ in the server address field.
      • Type your ONID UserID and Password when prompted.
        • Your name may be in the name field but you’ll want to replace it with your ONID userID.
        • If you are not prompted for the userID and password, then try it again; you won’t be able to transfer files to the web server without authenticating the login.
    3. Open the public_html folder.
      • View by files rather than folders to see the organization of directories and files at a glance.
    4. Drag and drop files into the public_html folder.
      • Keep the organization of files and folders the same as you have on your hard drive to keep from breaking links within the html documents.

    For other Mac OS X or 9 options, see the ONID site.

    FTP with Dreamweaver

    FTP with ONID

    SSH to the database

    • You ssh into shell.onid.oregonstate.edu as normal, then execute
      • mysql -h oniddb.cws.oregonstate.edu -u -p
      • You will be prompted for a password. It is the password supplied on the ONID Web Database page.
    • Or you can execute
      • mysql -h oniddb.cws.oregonstate.edu -u[onid login] -p[onidDB password]
      • so that you don’t have to wait for a prompt. Also for your onid login, you have to precede it with ‘onid_’ before you type in your onid login.
        • This actually beats using the prompt because you actually get to see your password as you input it, which saves you a lot of trouble, since the password is also case sensitive.
    Posted on

    Optimizing Online Images

    Readings

    How to Avoid Plagiarism of your Digital Images.

    Online Image Specifications

    Optimized images meet these specifications:

    Small file size
    Keep file size less than 30k if you can.
    Exact dimensions
    Crop and reduce the size of images to fit the dimensions of the space in your web page.
    Correct file format
    Online photos are usually .JPG.
    Flat-color images like logos and clipart are usually .GIF and sometimes 8-bit .PNG.
    Graphics with true transparency need 24-bit .PNG.
    Reduced resolution
    Monitors render 72 or 96 pixels per inch (ppi); the standard is 72ppi.
    Color Mode
    RGB for .PNG and .JPG and Indexed for .GIF.

    At the completion of this tutorial, students will be able to:

    1. Understand why we optimize images.
    2. Change the five specifications with various software.

    The main purpose of optimizing images for online viewing is to reduce the time it takes a browser to display an image file in its correct size. Visitors to web sites do not want to wait for photos and other graphics to load; they want instant reading and viewing. Updating the dimensions of images to fit within the scroll area of a browser is also helpful because visitors want to view an entire image in one glance without scrolling around to see it. And they don’t want graphics to overlap other important information on the page.

    In addition, web site servers around the world would fill up too quickly if we all loaded large graphic files onto them because we were unskilled at reducing the file size. To keep from filling up our allotted server space, we will reduce the file size, dimensions, and resolution, and save in the proper format.

    Example files and their properties

    The three most common file formats for the web are .GIF, .PNG, and .JPG:

    • Example of a gif file
      GIF files can have transparency and animation and are typically used for flat color graphics. Their edges anti-alias to one background matte color.
    • Example of a png file
      PNG files have true transparency and are usually best for biomorphic shapes and flat colors.They can be placed over any variety of colors without distortion.
    • Example of a jpg file
      JPG files only used for photographic images. They compress down to small file sizes and remain rectangular. Higher compression reduces image quality.


    Tools and Tutorials for optimizing images

    For any of these tutorials, have ready a digital file of your photo, art, or graphic.