Task 1.2 Source

Source Codes

This is the source code to the website here.

This is a review of this webpage

This is the source for this webpage

Using Templates

USING TEMPLATES

This lesson we used a HTML template and changed the parts of the website to make them our own. I changed the images that came with the template on photoshop and uploaded them. I also went into the HTML code and changed he text on the page. I changed all the navigation bar names on the code and added a link from them, like this:

<nav>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
<li><a href="videos.html">Videos</a></li>
    <li><a href="catpics.html">Cat Pics</a></li>
    <li><a href="cattunes.html">Cat Tunes</a></li>

    </ul>
    </nav>

As you can see I put a '<a href='for the hyperlinks to the new pages. This meant that now people click on the navigation bar they will be taken to that page.

I also changed the logo on the page. I did this by opening the logo image source in photoshop, and just played around to change the logo. I then saved this over the original image and refreshed the file in my browser and the logo changed.

HTML Protocols

HTML PROTOCOLS

When writing HTML everything is done by creating tags. Tags are key words surrounded by angle brackets that tell the browser what to display. For example:

<html>

<h1> This is a heading </h1>

<html>

The tag <h1> is code for a heading, the words after this tag 'This is a heading' will then be read by the browser and then display those words in the format of a heading. A majority of tags need an ending, to tell the browser to stop displaying things as a heading. End tags are done by putting a forward slash in front of the tag name, like this </tag>. 

There are hundreds of tags, and with the newest review of HTML, HTML5, more and more are being added. 

Some tags are hidden from what you see on a webpage, these are called meta tags.Meta tags are generally used for search engine optimization. They provide a description of the webpage and basically provide search engines more information about the site, meaning that they are more likely to appear in search results. An example of a meta tag on a website that is selling garden furniture:

<html>
<head>
<title> Garden Furniture </title>
<meta name="keywords" content="wood, furniture, wooden chairs">
</head>
</html>

If a browser was to open this website, the meta tags, shown in red, wouldnt be shown, but it would make the website appear on searches for wood, furniture and wooden chairs.

Description meta tags can also be given. This is an example for the same website:
<html>
<head>
<title> Garden Furniture </title>
<meta name="keywords" content="wood, furniture, wooden chairs">
<meta name="description" content="Dealer of wooden furniture.">
</head>
</html>

This meta tag is shown in red, below the first meta tag. This again adds more information to website and again optimizes it in web searches.


Search engine optimization is means that a website is more visible to search engines and is more likely to appear in search results. It can be achieved in a number of ways, changing a sites content,  HTML coding and key word content are a few examples.

FTP

FTP

FTP stands for File Transfer Protocol and i used when transferring files from one host to another, usually over the internet. After using a FTP, the files have been uploaded to the designated server and become live. FTP users usually have to log in to connect with a server, then the transfer can begin. Often you have to pay for these services, but some programs such as filezilla offer the service for free. 

Web Coding Languages

WEB CODING LANGUAGES

There are 5 main  web coding languages; HTML, XHTML, HTML5, CSS3 and Javascript. All have a different uses on webpage.  

HTML

HTML or HyperText Markup Language is the main markup language for creating webpages. HTML is written in the form of elements, consisting of tags, usually in pairs, enclosed in angle brackets. For example '<h1>' and '</h1>' would be the coding for a heading. There are tags for a majority of things on a website, including the font, font size, colours,content such as images and many other things. Web browsers then interpret this coding and turn them into a visible webpage. 

HTML is basically the building blocks for all website. Other web coding languages, such as Javascript, can be embedded into HTML to change its behavior.

XHTML
This is an extended version of HTML which is part of the XML markup languages. It is basically an extension of HTML which meant interoperability was possible. This means that different browser and operating systems could all view a website in the same way, without incompatibility issues. XHTML became a W3C recommendation on the 26th of January 2000.

HTML5
This again is the 5th revision on the standard HTML language. This was created to try and standardize the way in which websites are built and iron out creases that have  been created by introduction of new technology. This version of HTML also introduced new tags, most of which are designed to make it easier to include and handle multimedia in webpages. Some pre-existing tags have been either deleted or changed to ensure usability.

CSS3
CSS, or Cascading Style Sheets where created to enable separation of document content from the styling of a webpage. This separation means that the layout, fonts and colours of the webpage can be changed without effecting the base coding of the website. The use of CSS also means that the website can change its layout depending on how it is being viewed, for example if a webpage was viewed on a phone it would be displayed differently to if it was being viewed on a desktop computer. CSS 3 brought about many changes, including transparency on webpages.

CSS was written to allow a styling and layout to be applied to multiple webpages all at once. Before CSS a web developer would have to go to every tag on a page and make sure that all of them are the same, this is time consuming and meant that mistakes often happened. To make this process easier, CSS allows styles to be created which can be applied to webpages easily and give exactly the same result each time. 

This is an example of CSS coding:

This is how CSS style is written: 

CSS files are usually saved and uploaded separately from the HTML file. This avoids confusion and means they can be more easily changed, without accidentally making unwanted changes. 



JavaScript 
JavaScript is a client-side (meaning it is on the client computer, not on the server) language that is embedded in webpages. JavaScript allows for much more dynamic content compared to HTML. Allowing dynamic content means it can display the current time and date, allow picture rotation and change the CSS content of a webpage. 

HTML, CSS, JAVASCRIPT WORKING TOGETHER

HTML, CSS and JavaScript all work together in harmony to create a single page. Each script does its own bit in helping to display the website you see. 
HTML is the base of the website, everything else is embedded into this script, without HTML there is no website. HTML marks the content up into different structural types, like paragraphs, tables, images etc. 
CSS then tell controls how these look by telling the browser how each element should be displayed which may change depending on how the website is being accessed.
JavaScript then tells how the website should react to user changes, such as clicks or changing a value in a form input. 
With all these working together you get a fully fledged website.


This is a website with only the HTML contents of the website, without the CSS to style:

Pretty lame. 

This is the same website, with the cascading style sheet added:

As you can see this has added the colours to the sheet and also the font. This is the coding for the page: 

Web Authoring Tools

WEB AUTHORING TOOLS

Web authoring tools are used to create web content. There are thousands of different programs that can be used to create this content, all in slightly different ways but on the whole delivering similar results. 

Tools include simple programs such as free word processors such as notepad, which comes pre-installed on windows computers. There are also specialist professional programs, such as Dreamweaver, which can cost hundreds of pounds.

Any program that can create content, via coding, that can be uploaded to the web is considered a web authoring tool.

Word Processors

These are the simplest web authoring tools, some examples are Notepad, Microsoft Word and TextEdit for mac. To create content user type 'tags' and their wanted coding into a document, processors then converts the the file into HTML and are saved as a .TXT file. This file can then be uploaded to a server and simplistic website is created. This format is not as user friendly as other programs, and if a single 'tag' is misspelled the whole website may not work.

Desktop Publishing

These include programs such as Dreamweaver. These program create virtual web pages that can be easily linked together to create large websites. Content such as documents, images, music and videos can be easily added to pages. The program then converts these into HTML and CSS files which can then again be uploaded to a server. These programs tend to be WYSIWYG (what you see is what you get) which means that what the user is seeing on the screen is what the final finished product will look like. These programs make it very easy for anyone to create a website without having to know anything about coding.

Online Web Builders

These programs are completely online based and are extremely accessible to most people. These mostly use drag and drop functionality and allow users to see their changes in real time. However they can only really create really simple websites and there are quite a lot of limitations on what you can do.

W3C

W3C

W3C (World Wide Web Consortium) was set up by Tim Berners-Lee in October 1994. The consortium is made up of member organisations that are always working together to develop the standards of the World Wide Web. As of March 2012 the consortium has 351 members.

W3C are the standards body for the internet, they have defined precise guidelines for how the HTML of a website should be authored to ensure compatibility and accessibility. W3C guidelines should be employed by all websites. 

W3C's Mission:

'The W3C mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web. Below we discuss important aspects of this mission, all of which further W3C's vision of One Web.'

Websites that comply with the W3C rules will:

• work more consistently across web browsers
• be more accessible and usable
• work on non-standard devices, such as mobile phones and televisions
• generally rank better in search engines.

Tim Berners-Lee

Tim Berners-Lee

Tim Berners-Lee is a British born scientist who 'invented' the internet we know today, also know as the World Wide Web.

In 1980 whilst working for CERN, Tim needed a system that work allow researchers from all over the world to share information, without having to ever meet. He then went on to build a prototype for this idea called 'Esquire' which used a concept called 'HyperText'. 

In 1984, Tim returned to CERN and quickly published a book called 'Information Management: A Proposal'. This was the first time that HyperText related to the internet. This was then the first system for easily sharing information globally. 

On the 6th of August 1991, the first ever web page was launched: info.cern.ch

This marked the beginning of the modern revelation that was the internet. 

Tim is now Holder of the Founders Chair at MIT's Computer Science and Artificial Intelligence Laboratory.