Tag Archives: HTML

SEO, HTML and the resourceful cheat sheet

One of the constant struggles in eMarketing is the SEO (Search Engine Optimisation) of a page/site. Search engines use different algorithms to present what they define as relevant content to a user. In eMarketing, the question is constantly how can I get my search result appear at the top (or at least on the first page) of a search engine’s results, while still being relevant? I stumbled upon a resource that may just be the answer to this question…

schema.org [http://schema.org/] provides “a collection of schemas, i.e., html tags, that webmasters can use to markup their pages in ways recognized by major search providers”

The schema’s are laid out for the newbie developer to understand and get into while still being clear for an expert developer to jump straight to the information they require.

The site does not say what level of validation the content they provide is, so remember to use you HTML validator.

with javascript and google analytics combined…

I am captain planet (OK, so with two assessments looming, sleep deprivation is a given!!!).

I was requested today to put some code on link so we can track downloads via Google Analytics…I work in a CMS, so I am confined by the CMS and it’s abilities. I can insert JavaScript code and Google Analytics is already across the site. So let the testing begin.

I have searched a number of online posts and it seems as though the best option is to add the following code to the html code with the a href:

onclick=”javascript:pageTracker._trackPageview(‘/file.pdf’);”

As Google Analytics is not in real-time, will need a day or two to check if it is working. But I thought it is something interesting and related to our class as you may need to build a marketing style site and such code is extremely relevant to track interest of documents.

If there is an alternate solution you can think of, please let me know as I am happy to test it out.

using google web based fonts

As I want my site to pop (even though this is not a design unit), I have explored the possibilities that Google Web Fonts has to offer. Zinemac’s target audience is primarily youth and therefore I have been looking for a graffiti and/or blackboard style font. Google Web Fonts has one called Cabin Sketch, by Pablo Impallari. I quite like this font and have applied it as the Headings of my site.

To apply Google Web Fonts to your site:

  1. Go to Google Web Fonts
  2. Select the font you are interested in (for example Cabin Sketch) You are able to view the font character set, some history and current stats of usage as well as download it.
  3. Select the tab Use this font and you will be directed to a page with two sets of code. The first needs to be added in the <head> section of your html file and the second piece of code is an example of how to apply the code in your CSS file. I have applied the code to my <h1> – <h6> tags.

I have also been toying with the letter-spacing property and you will see in the above image the h1 and h2 tags have a value of 0.1em, while the h3 tag has no letter-spacing.

Other uses for Google fonts

In addition to being able to use Google fonts on your site, you can also download the font and insert it into your word processor library. This is a great feature if you are needing to create documents that match the branding elements of your site…or…for a number of alternative reasons, including making your assessments stand out a little more!

Definitely check it out and let me know how you go 🙂

terminology from week 2: HTML overview

Over the semester I will be posting definitions as provided each week from class that will assist in development of assessments. The first definition list is summarised from Week 2, HTML overview by Viveka and Oanh. I have also linked each of the terms to their Wikipedia page for you to use as a starting point and to find links to authoritative sources just in case you require additional information.

terms, people and definitions

  • HMTL – Hyper Text Markup Language, written in tags that started out in capitals, but today is formulated with lower-case letters. We are not up to HTML 5 that is a work in progress
  • HTML 5 – follows all the well formed rules of XHTML, but it is less verbose. HTML 5 supports next generation devices really well, for example location based technology, can rotate etc. HTML 5 can complete a lot of the functionality that flash does/did and rich media types are part of the code – for example video src = etc. HTML 5 is not finished and they are not planned to finish it till 2045 (and some have said that they may never finish it.
  • SGML – output from the publishing world – massive specification that nobody implemented as it was too hard!!! A standards body attempted to regulate it, but did not succeed. It is important in understanding HTML as it is a markup language the publishing world used and HTML is the online version of the mark up
  • Ted Nelson – Coined the term ‘hypertext’ and was an influence on TimBL
  • TimBL – Tim Berners-Lee, invented the World Wide Web and HTML
  • XHTML Transitional – the transition that led towards the separation of design into CSS and HTML. There is also XHTML Strict and this is what is required to pass DMT!!! – it is the same as transitional but it absolutely requires that you separate presentation items with content (i.e. CSS with HTML)
  • XML – extensible mark up language – it is a language for writing languages in…there are no .xml files!!! it is a metalanguage…the way it is written: open bracket tag attribute = “value” close tag some stuff open bracket tag / close bracket

additional notes:

The simple HTML page tagging structure is:

  • open html
  • open head
  • open title / insert title name / close title
  • close head
  • open body
  • open divs (div id=”a section”) / headers / images etc and close them
  • close body
  • close html

Let me know if there were any additional terms and their definitions from class – happy for everyone to add to this list.