A website is built up from a variety of files types, each serving a specific purpose. In this post, I’ll go through the key files required and in following posts on this blog go into more detail on each technology.
HTML (hyper text markup language) is the main language of the web, it’s the foundation for most web pages. Much like a Word document, HTML understands the difference between paragraphs and headings, by defining content using a strict set of elements. Content is wrapped around start and end “tags”. A piece of content wrapped in tags is called an element. For example, the first heading of a page looks like this in HTML <h1>My heading<h1/>. The ‘h’indicates it’s a heading and the 1 means its the first or primary heading.
This gives each page element meaning and allows web browsers (e.g. Internet Explorer) and search engines to understand the importance and type of each element. The tags used in a webpages also give search engines an idea of the relevancy of a sentence or paragraph. Some search engine optimisation (or SEO) techniques are based around getting specific keywords into what search engines deem the more relevant tags, e.g. Headings and titles.
CSS (short for cascading stylesheets) are files that are used to change the appearance of HTML elements. They are used to give sites their appearance, without CSS files webpages look extremely boring and visual differences of the text is limited different font sizes, font weights, basic link colours and basic margins.
Using CSS elements of an HTML document can be targeted and given properties to change their visual appearance. Using our previous example the <h1>can be given a large font size with some simple CSS h1 {font-size:24px}.
JavaScript is a programming language for websites, HTML and CSS themselves are static. The content and appearance can’t change without navigating to another page. JavaScript allows to to add dynamic functionality to a site, e.g. image slideshows, auto suggest, hiding and showing content, animation.
