C1 – Design Simple Webpage Layouts – Week 04

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Follow up
  • Dreamweaver – Session 2
  • Feedback

Follow up on Previous Assessment and Work

How has everybody faired with the Assessment on Accessibility? It is due today, so please upload in class.

Please upload in ICA40311-ICTITW4N-ITGEN-2013-ICAWEB414A-DESIGN SIMPLE WEB PAGE LAYOUTS (sorry about the lengthy code).

Dreamweaver – Session 2

We will continue the Dreamweaver training on Adobe TV’s Webdesign Channel.

Adobe TV – Learn Dreamweaver CS5 & CS5.5

Creating new documents (5:23)

Adding structure to text (8:36)

Managing Assets in Dreamweaver (13:13)

Placing Images on the Page (7:44)

We worked to Managing Assets in Dreamweaver. Please watch the last video before next class.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C1 – Design Simple Webpage Layouts – Week 03

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Assessment 1 – Accessibility
  • Dreamweaver – Session 1
  • Feedback

Assessment 1 – Accessibility

We will read through this task together please click on the link to download the file. Follow the in-class discussion and make sure that you understand each question or ask the teacher in the presentation!

Assessment 1 – Accessibility

The assessment is due next week!

Dreamweaver – Session 1

We will commence Dreamweaver training. We will use the video tutorials provided on Adobe TV’s Webdesign Channel, but I would like you to open this online PDF to get you started: A Beginner’s Cookbook to Dreamweaver.

Adobe TV – Learn Dreamweaver CS5 & CS5.5

All numbers are the duration of the videos in minutes.

I do not expect that we will work past the 4th video, but students who are more advanced are welcome to work ahead.

Getting Started: What is Dreamweaver CS5? (3:23)

Note: Before you view ‘Defining a new Site’ create a folder with the name dw website and subfolder by the names: assets, CSS, images, notes, scripts and video.

Defining a new Site (4:42)

In class we worked up to here! We will continue with Dreamweaver next week.

Creating new documents (5:23)

Adding structure to text (8:36)

Managing assets in Dreamweaver (13:13)

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C1 – Design Simple Webpage Layouts – Week 02

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Accessibility
    • Web Standards
    • Browser Compatibility
    • Contrast and Colour Blindness
    • Alt text for Images
    • Drop-down Menus
    • HTML Code
    • Self-closing HTML Tags
    • Site  Maps
    • Text Size – Resizeable Text
    • Text Resizing Link
    • Accessibility Validation
    • Accessibility Levels
    • Alternative Content for Flash
    • Semantic Markup
    • Accessibility Checklist
  • Feedback

Accessibility

Web accessibility is the requirement to create websites that can be accessed and understood by as many people as possible. You can relate it to the accessibility of a room in a university. Every student has to be able to access the room regardless of injury, disability or other hindering circumstances. A lot of schools had to build ramps to allow students in wheelchairs easier access to the facilities.

Web Standards

Accessibility has been integrated into the web standards. The web standards are decided on by the W3C (World Wide Web Consortium). Please click on this link now to visit the W3C: www.w3.org. Can you find the definition of accessibility? (>http://www.w3.org/WAI/intro/accessibility.php)

Please look up what impairments and disabilities are the focus of accessibility!

Browser Compatibility

Make sure to code your websites to W3C web standards to allow for the widest range of web browsers.

Contrast and Colour Blindness

Colour blindness is a common problem today with sources claiming that most people have levels of colour blindness. It affects mostly males, and it is excepted that about 10% of males have some form of colour blindness.

Web designers need to ensure that text and other interface elements can be read and understood by everyone. Here is some advice on the use of contrast:

  • Any time you use colour to convey information in an interface also use clear, secondary cues to support the information.
  • Use grey scale differentiation
  • Use graphics to support the information
  • Use text label associated with each colour

Spend 10 minutes to find websites that help with contrast and colour blindness. List 5 sites that help with contrast and 5 sites that help when designing for accessibility and colour blindness. Add your links to this post in form of a comment!

A great validator for colour has been recommended by Paul Murphy (see comment): Snook’s Color Contrast Check

See also below: Accessibility Validation!

Alt Text for Images

You add an image to your web page with this code in HTML: <img src=”smile.jpg” alt=”girl smiling”> or <img src=”\images\smile.jpg” alt=”girl smiling”>

If a visually impaired user is trying to access your web page they rely on screen reader software. Using the alt attribute allows all users to get an idea of the image regardless if they can view it or not.

What could be other reasons for users not to be able to view images?

Click on this W3Schools Link and access the TryIt-Editor. Read the code for inserting an image and try to rewrite it from memory adding a descriptive alt attribute.

I will walk around and look at your results.

Drop-down Menus

Drop-down menus are a smart way to navigate. Drop-down menus tend to look very attractive. Many successful websites avoid their use in total: eBay, Yahoo!, Amazon.

Drop-down menus are bad for accessibility.

HTML Code

Using the example of bold text and strong text, the code for bold <b>I love Football!</b> boldens that section. Using the code for strong has the same visual impact, but the difference is quite important. If you write <strong>I love Football!</strong> it will look bold, but a speech reader will interprete the text as important.

So, use strong rather than bold.

Self-closing HTML Tags

The old style of a tag is not self-closing: <br>. This is the tag for a line break and most browsers will have no trouble to read it. The web standard-compliant version is self-closing: <br />. Start to use self-closing tags to ensure that your websites will show on the widest range of web browsers in the future as well.

Site Maps

Site maps are a good way to support accessibility. Anyone with trouble navigating your site will benefit from a clear, text-based site map.

What is a site map? It is an index or guide to the different pages and hyperlinks on your website.

Example of a Site Map found at MelbourneIT

Example of a Site Map found at MelbourneIT

Read here for Tips on Sitemaps  Example of WAI Sitemap – is it too complex?

Homework

Read the updates below on the weekend!

Text Size – Resizeable Text

Make sure to use text size that is suitable for a variety of users. Smaller text looks neet and modern, but not everyone will be able to read small text (think of older users).

Recommendations regarding the ideal text size vary significantly: various sources recommend sizes for body text (main text) from 12px-14px as well 16px. W3Schools recommends a default size for paragraphs of 16px.

With a change towards responsive web design, a design approach that aims at flexible website dimensions to provide an optimal viewing experience on any platform, there has also been a shift towards maesuring text size in em, rem or in percentages.

Text set in em or rem (they are different)  can be resized by all browsers, which allows for ideal viewing on a screen as much as on a tablet or mobile phone.

Read more on text size at: W3Schools CSS Font  Sitepoint: Relative Font Size Rem  Sitepoint: CSS Font Sizing  W3C: The Amazing Em Unit

Text Resizing Link

It is recommended to add a link that allows the user to change the font size within the website. To achieve this you need to include a link that uses JavaScript to swap between two CSS style sheets.

Accessibility Validation

It is important to check your website for accessibility! Make use of one of several  online accessibility validators.  Bobby used to be the most successful free online validator, which has been disabled recently by IBM.

A great validator for colour has been recommended by Paul Murphy (see comment): Snook’s Color Contrast Check

Find a list of numerous accessibility validators below at: W3C: Complete List of Accessibility Evaluation Tools

Accessibility Levels

Automated validators give only an indication of the accessibility of your website. Accessibility is measured at three levels from basic accessibility to advanced: A, AA, AAA. Each level relates to a priority checklist that can be found at: W3C website.

The W3C website is rather cumbersome and that is being friendly. It is fine to use an accessibility validator and you can refer to the checklist below (see Accessibility Checklist)

What level do you need to reach as a web developer? W3C states:

  • A Web content developer must satisfy all priority 1 points. This will give the site a Level A-Accessibility rating, which can be labeled on the website.
  • A Web content developer should satisfy all priority 2 points. This will give the site a Level AA-Accessibility rating, which can be labeled on the website.
  • A Web content developer may satisfy all priority 3 points. This will give the site a Level AAA-Accessibility rating, which can be labeled on the website.

Alternative Content for Flash

There has been a problem with Flash content online. Flash content has not been accessible until later versions of Adobe Flash. If you use Flash make sure to provide the content in alternative format.

It is recommended to describe your Flash file (SWF) in words by offering users a link to a text version.

Semantic Markup

The W3C has declared its intention to create a Semantic Web, meaning a World Wide Web of structured data, that is transparent. Using ‘Semantic Markup’ means that you will write HTML that is self-descriptive and written for other humans rather than just for machines (software, parsers, Google etc).

Semantic Markup means that HTML code is used appropriately. This is achieved by using the HTML standard classes accordingly: <h1> will be used for the main heading followed by <h2> and these tags will be used for headings and not to emphasise or enlargen text. <p> will be used for a paragraph (rather than <br /> for line break).

Above I mentioned the examples of using <strong> rather than <b> to emphasise text. The same applies to the <em> tag (which actually stands for emphasis, while strong represents prominent text) to be used rather than the <i> tag which stands for italic or sloped text.

The point is that <b> and <i> are purely representational or visual, while <strong> and <em> offer semantic meaning that will be interpreted differently by screen reader software. The other point is that the visual representation for <strong> and <em> may change over time from bold and italic to something else (eg high-lighted).

You can also add comments to important sections of your code. Comments will only display in your HTML code and not on your website. The use of comments is to help understand long passages of code. Other team members will benefit. But it also helps understanding code that you wrote a while ago.

Example of a comment in HTML: <!–This is a comment. Comments are not displayed in the browser–>

HTML5 offers new semantic elements to clearly define different parts of a web page:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>
Example of Semantic HTML5 Tags, Source: W3Schools.com

Example of Semantic HTML5 Tags, Source: W3Schools.com

Accessibility Checklist

Finally, here is a checklist that you may want to use.

  • Add valid DOCTYPE declaration
  • Keep the content simple, avoiding jargon and complex words
  • Avoid justified text, as users with dyslexia find it harder to read than left-aligned text
  • Use sans-serif (eg Verdana, Calibri, Arial)
  • Avoid images of text
  • Allow that font size can be adjusted
  • Allow for large clickable area of links
  • Use descriptive links (avoid ‘click here’) This is important for users with visual impairment who rely on screen reader software.
  • Provide a sitemap
  • Provide ‘Back to Top’ and ‘Skip’ links
  • Ensure functionality of keyboard and mouse (eg tab)
  • Use images and icons
  • Provide meaningful alternative text for images: <alt>
  • Provide enough contrast in your colours of text and background
  • Avoid distracting animations and sounds or allow for them to be paused, skipped or switched off
  • Make use of white space (empty space around filled space with either text or images)
  • Provide a consistent design and navigation throughout the website

(The checklist is an altered version based on the original that can be found in ‘How to Design Websites’ by Alan Pipes, Laurence King Publishing, 2011, p.73.)

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

HTML Class – Week 08

Link to all Classes     Week 3     Week 4      Week 5     Week 6     Week 7     Week 8

Today’s Class

  • Assessment Task
  • Inclass Demonstration
  • Feedback

Assessment Task

Use the W3Schools TryIt Editor and Notepad to create the home page for a website of your choice with HTML and CSS.

Content: include a

  • banner with an image and title,
  • menu with 5 menu items. The menu items need to be links. Link them to a file with the name of the menu item (it will be an incomplete link).
  • 2 sections (divs) with text content
  • 1 section with an image
  • footer with a Copyright statement including this year and your name.

The images can be sourced online. Please aim for Creative Commons images. You may use www.morguefile.com or other websites for this purpose.

Work on the assessment in class and during the week and have ready to be handed in as html file. The CSS component can be either internal or as an external CSS document.

Inclass Demonstration

We will work through the steps to create a website in HTML and CSS:

Start off with the HTML script:

We start with the DOCTYPE declaration and the HTML tags followed by the Head and Body tags:

<!DOCTYPE html>

<html>

</html>

_____

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Note: Add the closing tag straight away to make sure that you do not forget it!

Add your title in the Head as well as your main meta data:

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>  (Add your own title here)

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”” />  (Either write your description straight away or do it later. This description will show in a Google search and it is important to write something that will be relevant to the webside/ web page. Keep it short, but make sure not to skip over important information that would get a user to visit your site!)

<meta name=”author” content=”Federico Viola” />(put your name in here!)

</head>

<body>

</body>

</html>

Now create your divs in html

It is important to sketch out your site beforehand. Write down all the dimensions for the various elements. Overall dimensions, example: width 960px x height 690px, dimensions of the banner/header, dimensions and format of the menu, dimensions of various content boxes.

Divs are basically spaces that you reserve. They are like 2D boxes that allow you to place content, either images, text, video or audio. You can give the background a colour and you can create outlines.

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

</head>

<body>

<div id=”wrapper”>  (This will be the div for the overall webpage. It will be like a frame for all the elements.)

<div id=”header”>

<h1>This is the header/banner</h1>

</div>  (This closes the header div.)

<div id=”container”>  (This will be the div for the menu and content divs)

<div id=”menu”>

<p>Menu</p>

</div>  (This closes the menu div.)

<div id=”content1″>

<p>Content1</p>

</div>  (This closes the content1 div.)

<div id=”content2″>

<p>Content2</p>

</div>  (This closes the content2 div.)

<div id=”content3″>

<p>Content3</p>

</div>  (This closes the content3 div.)

</div>  (This closes the container div.)

<div id=”footer”>

<p>Copyright Statement</p>

</div>  (This closes the footer div.)

</body>

</html>

Now create your CSS

You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on  various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

<style> (opens an internal CSS style tag)

#wrapper {;}

#header{;}

#container{;}

#menu{;}

#content1{;}

#content2{;}

#content3{;}

#footer{;}

ul{list-style-type:none;}  (this is the ul tag to be used for the menu later in the body, it defines to have no bullet points)

</style>  (always make sure to close html tags)

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1>This is the header/banner</h1>

</div>

<div id=”container”>

<div id=”menu”>

<p>Menu</p>

</div>

<div id=”content1″>

<p>Content1</p>

</div>

<div id=”content2″>

<p>Content2</p>

</div>

<div id=”content3″>

<p>Content3</p>

</div>

</div>

<div id=”footer”>

<p>Copyright Statement</p>

</div>

</body>

</html>

Add your dimensions to the CSS

You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on  various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

<style> (opens an internal CSS style tag)

#wrapper {width:960px;height:690px;margin:0px;}  (the site will go to the edge due to having no margin)

#header{width:960px;height:140px;margin: 10px 0px;background:#3375FF;} (the header will have 10px margins on top and bottom and no margins on the right and left, the background colour has been specified)

#container{width:960px;height:410px;}  (always make sure to use a semi-colon at the end of a CSS declaration)

#menu{width:100px;height:410px;margin-right:10px;background:#3399FF;

#content1{width:410px;height:200px;margin-right:10px;padding:5px;background:#4CCCFF;}

#content2{width:410px;height:200px;margin-right:10px;padding:5px;background:#3375FF;}

#content3{width:410px;height:410px;padding:5px;background:#0099FF;}

#footer{width:960px; height:140px;}

ul{list-style-type:none;}

</style>  (always make sure to close html tags)

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1>This is the header/banner</h1>

</div>

<div id=”container”>

<div id=”menu”>

<p>Menu</p>

</div>

<div id=”content1″>

<p>Content1</p>

</div>

<div id=”content2″>

<p>Content2</p>

</div>

<div id=”content3″>

<p>Content3</p>

</div>

</div>

<div id=”footer”>

<p>Copyright Statement</p>

</div>

</body>

</html>

To be continued

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C2 – SEO – Week 08

Link to all Weeks     Week 3     Week 4      Week 5     Week 6     Week 7     Week 8

Today’s Class

  • Photoshop Work
  • Assessment 2 – Next term

Photoshop Work

We will use this class to inprove your Photoshop skills and you will be able to work on your website designs for class C1.

Assessment 2: Next Term

Assessment 2 will be conducted next term when you will have a better understanding of how to upload web content.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C2 – SEO – Week 07

Link to all Weeks     Week 2     Week 3     Week 4      Week 5     Week 6     Week 7

Today’s Class

Assessment 1 – Work

Assessment 1

You will have time to work on assessment 1 in class. I will be available to offer assistance and answer questions.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

HTML Class – Week 06

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     week 6

Today’s Class

  • CSS Styling Fonts
  • HTML Tables
  • CSS Styling Tables
  • HTML Lists
  • CSS Styling Lists
  • HTML Blocks
  • HTML Layout
  • Homework
  • Feedback

CSS Styling Fonts

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/css/css_font.asp.

HTML Tables

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_tables.asp.

CSS Styling Tables

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/css/css_table.asp.

HTML Lists

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_lists.asp.

CSS Styling Lists

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/css/css_list.asp.

HTML Blocks

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_blocks.asp.

HTML Layout

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_layout.asp.

Homework

Please look at this W3Schools example: Basic website created with div elements and change it to create a simple text based website for yourself. Call it something like ‘My first website’, supply a menu with menu items (about me, portfolio, etc) and change dimensions and colours. Add more divs to the HTML.

Save your final work with Notepad as a HTML file and bring to next class!

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C2 – SEO – Week 06

Link to all Weeks     Week 2     Week 3     Week 4      Week 5     Week 6     Week 7

Today’s Class

Assessment 1 – Introduction

Assessment 1

The task will be posted here shortly: C2 – Assessment 1

Assessment 1 will cover these questions:

Instructions:

Develop a detailed SEO recommendation for AntiArt, a Melbourne-based website that retails illustrations, screen prints, lithographs and other Art prints by international, non-established and non-commercial artists and illustrators. The website will have sections based on the different print formats and sections based on the cultural origins of the artists (European, Australian, Aboriginal, Chinese, Indian, Latin American).

Clients need to be able to place orders for specific, unique and numbered art pieces.

The website will be available in English only.

The prints will be stored in Hong Kong and shipped from there. The website will promote Melbourne as the home base.

Please use the Google Search Engine Optimization Starter Guide as a reference.

Create a unique, accurate page title for the home page!Describe your choice and why it is suitable for   SEO.
Create a unique, accurate page title for the page on which clients can purchase screen prints!Describe your choice and why it is suitable for   SEO.
Create a unique, accurate page title for the page on which clients can purchase art   by European artists!Describe your choice and why it is suitable for   SEO.
How can you write description meta data for a web   page?Create an example in code.
Create a description for each of the 3 pages   above:

  •   Home Page
  •   Page for purchasing Screen Prints
  •   Page for purchasing art by European artists
Give an example of a good URL for the page for   purchasing screen prints!
List a set of keywords you would use for the home   page!
Describe how you can write better anchor text for   links used on the site!  (p16)
Give 3 examples for good anchor text for links   to:

  •   Screen Prints
  •   Art by European Artists
  •   Art by Aboriginal Artists
How can you use heading tags appropriately?Give an example what type of heading to use for   your most important text (eg. Screen Prints) (p20)
How can you use robots.txt effectively? (p21)
How can you guide mobile users accurately? (p26)

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

HTML Class – Week 05

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     week 6

Today’s Class

  • CSS
  • Feedback

CSS

We will continue working through the CSS section on W3Schools: http://www.w3schools.com/css/default.asp.

By now you should understand the purpose or function of CSS. It is mostly responsible for the styling of online documents. CSS is also responsible to view documents for different platforms and outputs.

Examples of Output and Display for web-content. Image: live.surveyshack.com

Examples of Output and Display for web-content. Image courtesy of: live.surveyshack.com

Having CSS allows you to change the font, image sizes, layouts to suit different requirements. The ideal size for a font will be different if viewed on a widescreen monitor or on a mobile phone.

After last week you should be aware of the differences between inline, internal and external CSS: http://www.w3schools.com/css/css_howto.asp

We will go through the Styling related tabs as well as the box model. I will ask you to trial the different options as we work through to the Box Model together.

NOTE: In class we worked through the Styling Backgrounds and Styling Text Tabs. We wook time to look at a number of CSS related aspects and we spend a good time exploring the Styling Backgrounds examples.

Screenshot W3Schools: CSS Background Style

Screenshot W3Schools: CSS Background Style

Make sure to explore these ones in some depth:

Trial the links above and change the code from background-position:right top to left top and change the margin to margin-left:240px. Play around with the settings and observe the changes by submitting them in the TryIt Editor.

<!DOCTYPE html>

<html>

<head>

<style> body

{

background-image:url(‘img_tree.png’); background-repeat:no-repeat; background-position:left top; margin-left:230px;

}

</style>

</head>

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C2 – SEO – Week 05

Link to all Weeks     Week 2     Week 3     Week 4      Week 5     Week 6     Week 7

Today’s Class

Due to me being sick I would like you to work individually through Google’s SEO Starter Guide.

Google Search Engine Optimisation Starter Guide

Please work through pages 14 – 19 on your own. This will include information on how to write better anchor text and how to write descriptive alt attributes for images.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!