Web and User Interface - Lab 2

Part I – Coding “Fish Creek Animal Hospital”

Completed.


Part II – Using <meta> in an HTML5 page 

1. Identify four different uses of the meta tag:

Meta tags are HTML elements in the head section of a website. Search engines can use them to find out what your webpage is about, but the reader will not actually be able to read the text of the meta tag. 
Four different uses of the meta tag include: defining keywords for search engines which relate to your page, defining a description of your webpage, defining the author of a post on your webpage and also specifying that the page should be refreshed every 30 seconds. 

2. Put a meta tag for each of these uses into your 'Fish Creek' Web Pages:
                    
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styles.css">
        <meta name="keywords" content="vet, sick, animal, doctor, medecine">
        <meta name="description" content="Fish Creek Animal Hospital">
        <meta name="author" content="Thomas McIlwaine">
        <meta http-equiv="refresh" content="30">
        <title> webpage </title>
        </head>

3. Copy the head section/ make a screenshot of one of the web pages with the meta tag and paste into your blog:

Meta Tags added


Part III – Search Engine Optimisation (SEO)

1. Read some of the following articles on Search Engine Optimisation (SEO):
Completed

2. Based on reading the aforementioned article(s), or other research/experience, outline four SEO guidelines that you will employ when designing your own websites:

Based off the reading of the six articles linked, I would be inclined to employ the following four SEO guidelines: (a) I would use a different description meta tag for each page of my website. A short sentence accurately describing each individual page will attract more people to read. (b) I would use mostly text links for navigational purposes. Controlling navigation through text-links not only makes it easier for search engines to crawl through the information, it also makes the links more likely to work across different devices that might not have 'Flash' or 'JavaScript' plug-ins to handle an animation link, or moving-image link to bring them to the next page. (c) I would include acronyms as well as the name spelled out in full, so that both the experts and the novices could find themselves at my page. For example, people already experienced with 'Games of Thrones' would refer to it mostly as GOT in their online searches. I would aim to include well-known acronyms related to the subject amongst my keywords and URL titles (e.g. "GOT") , as well as the word written out in full for people who might be new to the subject (e.g. "Game of Thrones"). (d) Lastly, I would make use of the "alt" attribute which allows web designers to specify alternative text for an image if it cannot be displayed for some reason. Sometimes users are looking at your site on a browser that doesn't support images, or may be using alternative technologies (such as screen-readers for people with vision impairment). Both of these users will be left confused if they arrive at a site with a dead image which hadn't been named properly. image.jpg won't help explain what the image was supposed to have been. If you name images properly using the "alt" attribute" it will aid in user navigation. Also your files will appear more easily through a Google Image Search. 

Diehard 'Game of Thrones' fans would just search 'GOT'


Not related to SEO specifically but related to website design, I would like include a 'breadcrumb list' at the top of any page on my website that would allow users to easily click back to a page they had been before, instead of getting bogged down in the quagmire of a badly designed website with countless pages. I would custom-make my own 404 page so that it would respectfully give users the option to head back to the root page. Of course it makes for a better user experience to never have to encounter a 404 page at all, but if the user does have to see one at least it should contain some apology and a chance to return to a page which they recognise. 


3. Write two pieces of code that you will include on your Fish Creek website to improve the SEO of the website:

(a) The title tag is very important. It gets shown in the browser's title bar or the page's tab. The page title is used by search engine algorithms in deciding the order they list the results after a search request. They should ideally be longer than 2 words and less than 50 characters. In any HTML document, you can not have more than one title element so its important you get it right.  To stick with the Fish Creek example, I'll set what would be a suitable title tag for a website designed to an animal hospital in Fish Creek, Wisconsin. 


<!DOCTYPE html>
<html>
<head>
  <title>Fish Creek Animal Hospital WI - Pets Are Us</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


(b) As mentioned before, meta tags are vitally important for SEO on your page. For this reason, one of the most valuable things you can include in your page is the meta name="keywords" line which defines keywords for the search engine to look out for. 


<head>
  <meta name="keywords" content="Fish, Creek, Animal, Hospital, Vet, Pet, Cat, Dog, Medical, Surgery, Medicine, Wisconsin, Opening, Hours">
</head>


Part IV - Setting up Github

Optional.





The End of "Web and User Interface - Lab 2"

See you again for "Web and User Interface - Lab 3"





Comments

Post a Comment

Popular posts from this blog

Web and User Interface - Lab 3

Image
Part I – Reviewing this week’s lectures  Question  1.  Select one website that you visit the most. Draw its wireframe and identify its different divs or layers (header, footer, etc) BBC News wireframe (bbc.com/news) Above is a wireframe of the BBC News website which I visit at least once a day. My drawing is a bit out of scale. The main advertisement actually accounts for about 40-45% of the total length of the page, pushing the main content down to the bottom of the screen, along with a secondary content section. Beside these there is another space for advertisement, in this case taken up by an ad for Maldron hotels. It's a very image based page, and I usually click the picture above the story to go to the story because it's easier than clicking the text. There aren't plain blocks of text on the page, so I'm not sure where the divs are. Clicking into 'View page source' and searching 'div' indicates that there are many on the page, but it looks quite com...
Read more

Web and User Interface - Lab 4

Image
Part I – Coding a Fish Creek Website 1. Alter your Fish Creek code (from previous labs) to use the following:  a. Classes and ids  b. Centring layers  c. The position attribute  d. The float attribute (Completed in Notepad++) 2. Test your code with the HTML validator (http://validator.w3.org/ ) and the CSS validator (http://jigsaw.w3.org/css-validator/ ).  a. What are the problems that are highlighted?  HTML Validator (I had 4 x HTML pages on my Fish Creek website): index.html = I got 6 errors and a warning. I was advised in the 'warning' to consider adding a 'lang' attribute to the html to declare what language the page is in. Most of the Errors were the same as each other and consisted of the message telling me that " Element dt not allowed as child of element body in this context ".  python.html =  I got 1 error and a warning. They were the same error and warning as above mentioned in index.html.  askthevet.html = I got 1 error and a war...
Read more

Web and User Interface - Lab 1

Image
Part I – Beginning Web Development 1. Create a blog to document your Web & User Interface lab work. Welcome to my blog! 2. (a)  Wireframing versus prototyping. ( First observation ): The main difference between wireframing and prototyping is the ‘fidelity’ of each – that is, how closely the test examples of each match what the final webpage product will look like. Wireframing can be done by using a pen and paper and can be thought of as the 'skeleton view' of how a webpage will eventually look, showing outlines of structure and layout of the page. Simplicity is key.  ( Second observation ):   Prototypes are the next stage in the product design process and show colour, animations and the content the page will have. It looks like a more finished product but it is still not finished fully.  They allow a user to test a webpage’s interface and interactions. 2. (b)  The 10 Most Common Web Design Mistakes. ( First observation ):  Simplicity, as well as minim...
Read more