Wednesday, 6 February 2013

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: 




No comments:

Post a Comment