James Thorne Website


Posted in Uncategorized | Leave a comment

Class 13 – Dec 5

Today’s agenda

  • SEO Basics
  • Google Analytics
    (MOE TRACKING CODE – Please paste tracking code befor the close of </head> tag in the document) 

SEO Basics

  1. Indicate page titles by using <title> tags
    • Page title contents are displayed in search results
    • Accurately describe the page’s content
    • Create unique <title> tags for each page
    • Create brief, but descriptive titles
  2. Make use of the  “description” <meta> tag
    • A page’s description <meta> tag give search engines a summary of what the page is about
    • Descriptions <meta> tags are important because the search engine might use them as snippets or blurbs for your pages
    • Accurately summarize the page’s content
    • Use unique descriptions for each page
  3. Improve the structure of your URLs
    • Simple -to-understand URLs will convey content information easily
    • URLs are displayed in search results
    • Create simple directory structure
  4. Make your site easy to navigate
    • The navigation of a website is important in helping visitors quickly find the content they want. It can also help search engines understand what content the webmaster thinks is important.
    • Create a natural flowing hierarchy
    • Use mostly text for navigation
  5. Write better anchor text
    • The anchor text is the clickable text that users will see as a result of a link, and is placed within the anchor tag
      <a href=”…”></a>
    • Choose descriptive text – the anchor you use for a link should provide at least the basic idea of what the page linked to is about
  6. Optimize the use of images
    • Image-related information cab be provided by using the “alt” attribute
    • the content of the “alt” attribute provide information about the picture
    • Use brief text, but descriptive file names and “alt” text
  7. Use heading tags to emphasis important text
    • Heading tags are used to present structure on the page to users.
    • The most important <h1>, and the least importnat <h6>

Example <meta>tags description, keyword and author


Read more Search Engine Optimization Starter Guide – Google

Google Analytics

  • Create an account
  • Fill in the relevant information
  • Click Get Tracking ID
  • Copy the tracking code snippet
    It’s in a box with several lines of JavaScript in it

Example tracking codetracking-code

  • Paste your tracking code into every web page you want to track. Paste it immediately before the closing </head> tag.

If you need to access it the tracking code again:

  • Sign in to your Google Analytics account, and select the Admin tab. From the ACCOUNT and PROPERTY columns, select the property you’re working with. Click Tracking Info > Tracking Code.


Write a list of keywords appropriate for site.
Implement analytic services on final portfolio site.

Export a google analytic reportas a PDF and put into your site folder. for the final class.


Posted in Uncategorized | Leave a comment

Class 10 – Nov 14

Last class we completed converting a PSD file to an HTML and CSS file.
You can find

PART 1: Steps to slicing an image at this link.
PART 2: Steps or format used for the HTML and CSS can be found link.

Today we will be continuing:

  • Creating a gallery page
    This will be used to create you portfolio page.

Home page template from last class.

Home page (Preview in browser)

We will be creating the gallery/portfolio page (works.html) and gallery description page (project1.html) from the template demo.

Gallery page (Preview in browser)

Place into content and repeat for row 2 and row 3. Change information where needed (alt, src, and comment).

Project description page (Previewed in browser)

Place into content in new HTML page. (Example project1.html)

Please have the template folder with template.html, images folder and css folder.

Create the gallery page of work, it must consist of minimum of 8 images.

Posted in Uncategorized | Leave a comment

Class 9 – Nov 7

Last class we started converting a PSD file to an HTML and CSS file.
You can find the steps to slicing an image at this link.

Today we will be continuing:

  • Converting PSD to an HTML (Part 2)
    HTML and CSS

This is what we have have covered from last class.


Preview in browser





I will upload the step to this part after class.

Posted in Uncategorized | Leave a comment

Class 8 – Oct 31

Today we will cover:

  1. Backgrounds
  2. Converting PSD to an HTML (Part 1)
    1. Slicing (Image Optimization) (Part 1)
    2. HTML/CSS (Part 2)

I will not be looking at anymore assignments that was due before mid-term.


HTML needed  for <body>


CSS rules needed

Rule ID #one


ID #one – preview in browser


Rule ID #two


ID #two- preview in browser


Rule ID #three


ID #three – preview in browser


Rule ID #four


ID #four – preview in browser



Code the structure of your home page from your site layout using HTML and CSS.
(#container, #header, #nav, #content and #footer)

Posted in Uncategorized | Leave a comment