Unit 59 assignment 1

Websites used for comparison:

http://igg-games.com/

http://www.w3schools.com/html/html_styles.asp

1. Web coding protocols and how the two websites demonstrate different web languages such as HTML, and CSS and the protocols of web coding.

Web coding protocols refer to an agreement on what a websites must contain or the rules that the coding has to oblige by. For example hypertext transfer protocol (HTTP). This was set up and promoted by W3C which is a regulating body for web coding. This has been set up to ensure that coding can be standardised and understood by web browsers. These programmers from different nations to understand the code of any page as it follows the same protocol as the one they use.

Web language and terminology- this are words and phrase used when discussing websites.

Some terminology includes: Accessibility, Address, URL, HTML, XHTML, CSS, W3S, ASCII, and Unicode among others.

How the two websites demonstrate web languages like HTML and CSS.

Web Page Construction –This refers to the commands used in order to create the webpage. Examples of this include divisions (div) which are used to divide the page. The footer is also a division.

Divisions can then be edited in the way they look and work using CSS. This is done by attributing an ID or class to the division.

Example 1: http://igg-games.com/

This Screenshot of the webpage’s code demonstrates how it uses divisions in order to construct the page. These divisions are individually edited; this can be deducted from the fact that the divisions are given an ID and not a class. This would mean that more code is needed to style divisions individually and thus some code might be redundant (since it would be repeated), however this allows the programmer a higher level of customisation for each division.

This page also gives some divisions classes; which means that they were edited alongside other divisions.

This webpage uses the commands <div id=””> <div class=””> and </div> for its page construction.

Example 2: http://www.w3schools.com/html/html_styles.asp

This screenshot shows how w3schools has constructed their web page. They have divided the page into divisions. However these divisions have been put in classes so they don’t have a unique ID. This means that there would be less coding overall and makes it so there is less redundant code however the divisions are harder to customize as changes to the code would affect all the divisions in the class.

The pages do not have IDs for divisions this is because individual divisions have been edited in HTML instead of CSS but this is more limiting. This can be seen in the command “style” because it is within the “div” command.

This page uses the <div class> <div style=””> and </div> for its construction.

Text – Text can be styled and given functions by using CSS and HTML. Styling can be done by affecting various variables such as the font, colour and size (CSS) and functions are gained from HTML.

Font- refers to the way the text looks, this includes size and thickness bun not colour. CSS commands that do this include font-family, font-size (or just font) and font-weight (how bold it is).

Colour represents the colour of the text. There are three ways of assigning this propriety.

1. English- this refers to using English words to assign colour. (e.g. color=green)2. Hexadecimal- this refers to using a hexadecimal value to assign a specific

colour(e.g.#ffffff)3. rgb- this refers to using the rgb system to assign a specific colour to text(e.g.

rgb=255,255,255)

*this exact system can be used to assign colour to the background

Out of the three, colour is the most limited because it cannot be given a specific value for the red, green and blue elements of each colour.

Both the Hexadecimal and rgb methods can give a very specific colour by assigning the values of red green and blue which make up the colour. Out of the two rgb is more accurate because you can use the rgba command to not only assign colour but to also assign its transparency by assigning an alpha value.

Function one function of text is to create hyperlinks (<a href=http://example.com>, more details on this in the hyperlinks section). Text can also be used in order to display a message, paragraph, mathematical formulas etc. by using commands like <p> and <h1>.

Example 1: http://igg-games.com/

These 3 screenshots demonstrate how text is styled (size and colour) and how it can be used in HTML.

The first screenshot refers to adding colour to text. This website has used hexadecimals for assigning colour (This is indicated by the use of “#”). The colour is white because it has maximum intensity of red green and blue (ff is equal to 255).

The command used to assign colour for this website is color:#ffffff. This code is in java instead of CSS.

The second screenshot shows how font is used to give the text a size of 32px (pixels) and the “Arial” style. This means that all the text would gain a size of 32px and have the Arial style. This is commonly done in HTML and CSS but it can also be done in java.

The command used for this is font=”600 32px Arial”.

The third screenshot demonstrates how text is used as a hyperlink. This would allow a user to click on the text and to be transferred to the webpage the hyperlink refers to. This makes the text blue in colour and underlined (changing to purple after being pressed).

In this same screenshot the <p align=”centre”> command is used in order to display a message in the centre of the division, and the <a href=””> command is used for the hyperlink. The commands </p> and </a> are also used by this webpage.

Example 2: http://www.w3schools.com/html/html_styles.asp

This code shows how text is edited using CSS which is imbedded in HTML. This is done by using the <p style=””> command.

The font has been used to make the text a certain size (20px and 36px). The colour is in English which makes it limiting by design. Both the font and the colour have been used in order to make text more appealing.

In this screenshot text is used to display messages on the webpage this is done using the <p> command. This is one of the simplest ways to display text, as a paragraph. In this screenshot the use of the <a href””> command can be observed which makes the text act as a hyperlink.

Images- In web coding there are different types of images and different image functions. These include but are not limited to: bitmaps, PNGs, JPEGs and Gif files.

Out of the four examples I have offered Bitmaps is the worst one to use because it cannot be compressed. PNGs are the best to use followed by JPEGs and Gif files.

Pictures can be used as hyperlinks, as background and for styling the webpage by making it more appealing to look at.

Example 1: http://igg-games.com/

This screenshot demonstrated how images can used as hyperlinks. These images are in the JPG format because they have the “.jpg” ending. The images must either have been adjusted to have similar proprieties either in CSS or outside the code because in this screenshot there are no traces of adjusting the images, for example by changing the width and height.

The command <img scr=””/> is used in order to add the images to the webpage and the <a href=””> command is used to give the images the functions of a hyperlink.

Example 2: http://www.w3schools.com/html/html_styles.asp

This screenshot demonstrates how the images added to the webpage are styled. This is can done by specifying the width (150px), height (28px) and giving it a boarder. This image is also given an ALT command, this allows screen read users to gain information as to what the image is, and the command gives the image a “tag” that can be relayed instead of the image.

This is a Gif file which means that it has moving parts as well as few colours and high resolution (this are the attributes which define a gif file).

The command used to add the image is the <img> command, style=”” is used to style the picture, scr=”” to determine which image is used and the alt=”” command to describe the image.

Tables- this is an element of webpages which must not be used for styling text at it promotes bad programming. Tables are used to show tubular relations between data. The elements of a table are: <table>, <th> (table head), <tr> (table row) and <td> (table data).

*For this section 2 other websites are used because the original two did contain tables.

Example 3: http://www.w3schools.com/html/html_tables.asp

This screenshot sows part of a table it shows how to make a 2x3 table which contains 2 hyperlinks. This screenshot also demonstrates that tables can be grouped into classes, the same as divisions. This means that multiple tables can be styled with the same code.

The commands used in this screenshot include <table><tr><th></th></tr><td> and </td>.

Example 4: http://www.sosmath.com/tables/mult/mult.html

This screenshot demonstrates how tables can be styled themselves by changing variables like “width”. This also demonstrates that scripts can be written within tables.

Commands used <table><td width=><td valign=> and </table>.

Hyperlinks- Hyperlinks can be made to take the user to a different website, add resources to a web page, and link pages together. Hyperlinks follow the HTTP protocol and therefor “http://” needs to be written alongside the desired webpage. The command <a href> is used in order to add hyperlinks. Hyperlinks can be interactive (e.g. the user clicking on it) however some hyperlinks are used to link pages which the user can’t get acess to (e.g. connecting the home page and the style sheet). For interactive hyperlinks the title command is what the user sees.

Example 1: http://igg-games.com/

This screenshot demonstrates how hyperlinks can be used to link the index page to a different page. This also shows that hyperlinks can be given an ID and therefore be styled. This is an interactive hyperlink because it’s got a title which the user can see and interact with. This means that the hyperlink will not activate without interaction.

The command used to add this hyperlinks is <a href=””>.

Example 2:

This image demonstrates how hyperlinks can be used to link to external websites. This also shows that hyperlinks can have more options like a “target” which determins how the hyperlink will open the website (e.g. target=_blank would open the link in a new tab).

The command used to add the hyperlink is <a href=””> and target=”” to open the link in a certain place, e.g. in a new tab.

Metadata- This refers to data which is stored alongside other data in order to describe it. It can include length for a video, time and date for a photo and the artist for a music file. Metadata is not dysplayed on the webpage but search engines can have acess to it. This can be in the form of keywords which the web browser is looking for when searching for a topic.

Example 1: http://igg-games.com/

This screenshot demonstrates how the website uses metadata to provide data on the content of the website. This is not visible to the user but web browsers use it to figure out the website’s relevance to what the user wants.

The commands used are <meta proptiety=””> to add proprieties and <meta name=””> to add names and content=”” to add content.

Example 2: http://www.w3schools.com/html/html_styles.asp

This screenshot demonstrates how the website uses metadata in order for web browsers to find them. This is because the metadata can be used to set key words.

The command <meta charset=”utf-8”> is used for encoding, <meta name=””> to give the metadata a name and content=”” is used to represent what the metadata is.

2. The nature of HTML/XHTML and how the two websites are structured.

The nature of HTML/XHTML.

Before getting to HTML/XHTML I would need to mention the hystory of the two languages. The group who is overall responsible for this is the Consortium of web professionals W3C (they set up standards); they are the ones who set up the DTD (document type definition) and consequently SGML (standard generalised mark-up language) which is an agreement it has generalised terms. XML (Extensible mark-up language) is more specific than SGML. This is not code but it looks like it. It’s a language that defines a specific object (e.g. a book)

HTML and XHTML have both been created from XML. HTML is a version of XHTML which accepts some errors made by the programmes and XHTMS does not. HTML is easier to learn however it defies the protocol set up by the DTD. The two languages share the same code but HTML allows errors whilst XHTML does not.

The two languages are used for defining the structure and layout of a website on the World Wide Web. Features of XHTML include all names only having lower case letters, all values being quoted and attribute mineralization being forbidden.

XHTML follows the standards of XML but HTML does not. This means that websites which only read XHTML can’t understand HTML but websites which understand HTML can understand HTML.

Both HTML and XHTML use the commands: <HTML><head></head><body></body><footer></footer></HTML>

W3C promotes XHTML over HTML because it makes sure that programmers use the same formats for their code instead of using things like abbreviations or making mistakes. They have done this by developing Extensible Style sheet Language Transformations or XSLT which allows XHTML file to do more than HTML files.

However beginner coders are encouraged to learn HTML precisely because it is more forgiving with their mistakes.

General Website Structure:

All websites written using HTML/XHTML use the following:

<HTML><head></head><body></body><footer></footer></HTML>

This is the fundamental structure of a website.

Most websites also use navigation menus in their structure so that the user can access different pages through hyperlinks.

All websites cascade down vertically infinitely. This means that web programmers can make a website as long as they want (vertically only).

In the past CSS was incorporated within HTML however that compromised the page as it could be copied and now the CSS is written in a different file and linked to the HTML.

The structure of the two websites

The first website (http://igg-games.com/) uses a navigation menu, which utilizes hyperlinks for user navigation and it is structured using divisions. This website is structured using HTML rather than XHTML due to the frequent mistakes present in the screenshots from the previous section. The styling is done using CSS and inaccessible.

Their navigation menu:

The second website (http://www.w3schools.com/html/html_styles.asp) uses two navigation menus one vertical and one horizontal; they also use hyperlinks for navigation. This page is structured using XHTML as it has names in lower cases, has all values quoted and attributes are not minimalized. The styling is also done in CSS and locked inaccessible.

Their navigation menus:

3. The nature of Cascading style sheet (CSS), website accessibility, W3C compliance, and Search Engine Optimisation

The nature of CSS- Cascading style sheet is used for styling the way the webpage cascades. Before CSS styling had to be embeded into HTML this caused problems because it is more limiting and the code for the webpage can be coppied and used without the owner’s permission. CSS is an internal part of a webpage because without it the code would cascade down on the left side of the page.

Before CSS styling was done using tables which was limited as well as promoting bad programming practices.

CSS is used for most of the styling for websites. It can be used to style specific elements or groups of elements. In order to specify what element to edit a “#” is needed for one

element and a “.” for groups of elements, followeb by the name of the element. However some elements, like the footer do not need a “#” or “.”.

In a cale like this:

The second division is a child of the first one. This means that deleting the first division would also delete its children. In order to edit a “child” you need to get through the “parent”. E.g. #page, page-ext{}

Website Accessibility- this refers to the proctice of including features in a webpage which allow people with physical impearment to acess the website as normal people.

One way of douing this is by adding is by adding the “alt” command to images this would provide a user with visual impearment what the image is meant to reprenent by using text.

Example 1: http://igg-games.com/

This screenshot shows thagt the website “igg-games” does not encourage web scessibility. This is beause the “alt” command has a blank left instead of a message, this means that visually impared individuals cannot understand the website. This vould mean that this website cannot be equally acessed by everyone.

The command used to do this is “alt”:”” which is in java rather than HTML.

Example 2: http://www.w3schools.com/html/html_styles.asp

This screenshot Demonstrates how w3schools uses the “alt” command to promote web acessibility. They use it text to represent the image which is of their logo. This means that anyone can have acess to the website no matter if they are impeared or not.

This is usen in the command <img style=”” scr=””>. This is done in HTML as indicated by the “<>”.

W3C compliance- This refers to following the protocols and standards been set up by W3C. This ensures that all the code which complies with these protocols and standards of W3C can be understood by any programmer as it is standardised.

Some websites do not comply with W3C as their standards are extreamle strict and some web programmers want to the code to behave in a certain way which does not fall in line with W3C standards.

Search Engine Optimization(SEO)- This refers to affecting the place where a website appears in search results (for unadvertized websites). This also means that websites appearing at the top are acessed more.

SEO is influenced by metadata, keywords,images, videos (in vedeo search) etc.

Efficient SEO requires changes in HTML to include metadata and keywords.