Website Basics – How Do They Work?

Most people don’t consider what goes on to make a website work. In this article we will break down how a website is built, and expose the bare bones, what makes them work the way they are seen. These are the website basics where you will learn about HTML, CSS and Javascript, explained in plain English.

The Structure A.K.A. HTML…

What is HTML?

HTML5-Logo-Website-Basics-Developmental-Structure

HTML (HyperText Markup Language) defines the structure and content of a website. Every image and word is wrapped in tags which tell your browser how the page is structured and what the content is. It originally had 18 elements and was created by Tim Berners-Lee, a physicist at CERN, who is widely considered the father of the internet. The most recent version of HTML contains 118 element tags, so HTML has grown a little since Sir Tim first created it. . A copy of how the first ever website looked in 1992 is now hosted at its original urlhere. HTML5 the most recent version of HTML now contains 118 element tags. So HTML has grown a little since Sir Tim first created it.

Common HTML Tags

Main Title

<h1>Main Title<h1>

The “heading 1″ tag tells your browser that the text contained within is the most important heading on the page.

Sub Title

<h2>Sub Title</h2>

The “heading 2″ tag tells your browser that the text contained within is the an important heading on the page but less important than the H1 wrapped title.

This is a paragraph.

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

The “paragraph” tag tells your browser that the text contained within is text formatted as a paragraph and has lower importance than a heading.

<a href=”www.3one4.co.uk”>This is a link</a>

The “link” tag tells your browser that the text contained within is a hyperlink and will direct your browser to a different URL.

So HTML is for content?

HTML-Website-Real-Example-3one4

That’s right. Prior to the introduction of CSS (see the next section), HTML also included presentation tags which told the browser how elements should look as well as how they were structured and the content that was contained within. With modern websites it is good practice to avoid using presentational tags and all styling is done with CSS. We call this semantic HTML and good websites are always be developed with good semantic HTML and well-ordered CSS. So let’s find out what that is!

The Styling A.K.A. CSS…

What is CSS?

CSS3-Website-Basics-Development-Styling

CSS (Cascading Style Sheets) defines the style of the elements. Each tag has styles assigned to it that tell your browser how to display it. This can include fonts, font weight, font-size, background colour, borders, etc. Every HTML element can also be assigned a class and an ID, these can be used to define specific styles to certain elements. Stylesheets are separate from the html and your browser reads them from top to bottom meaning the lower the style command in the stylesheet the browser assigns more importance to it. The latest CSS version CSS3, has an extremely wide range of parameters it can control including transition effects, gradients and animations.

Simple CSS Style Examples

Website Basics

h1 { text-align:center; text-transform:uppercase; color:orange; font:700 38px ‘montserrat’ }

The CSS tell your browser the H1 needs to center align, be all uppercase, orange, bold, font-size of 38px and the font-family of Montserrat.

Sub Title

h2 { font-weight: 700; font-size: 24px; color: rgb(127,90,230) }

The H2 is told to be bold, font-size of 24px and the color is set using a RGB value.

This is a paragraph.

p.example { font-weight: 500; font-size: 1.2em; color: rgb(255, 255, 255); padding: 10px; background: rgba(0, 0, 0, 1); border-radius: 5px; width: 90px; }

The CSS here changes the background colour, defines the width, rounds the corners, sets the font size, colour, weight and adds space around the text. The ‘p’ tag has a class defined which means the style are defined differently to the standard ‘p’ styles. In the stylesheet this noted with a ‘.’ before the class name.

a { font:15px ‘Lato’,sans; font-weight: 700; } a:hover { color: blue; text-decoration: underline; }

The CSS defines the weight, font-family and then tell your browser to change the style when you hover over the link.

So CSS is pretty cool.

CSS-Website-Basics-Real-Example-3one4

CSS is really cool and getting cooler, the problem with the really cool stuff is that not every browser supports it. Internet Explorer has notoriously bad support for CSS styles, to the point, where when building sites, extra functions have to be added for it to look good in IE. For a long time web development has relied on JavaScript for features, but as CSS grows we find ourselves using less and less JavaScript. “But what is JavaScript?”, you say. Read on to find out.

The Behaviour A.K.A. JavaScript…

What is JavaScript?

JavaScript-Website-Basics-Development-the-behaviour

JavaScript allows a website to interact with a user in real-time. A common example of JavaScript is when you are filling in an email address on a form and it reminds you it needs an ‘@’ to be a real email address. That is JavaScript in action. Our menu on this site uses a mixture of CSS and JavaScript to slide onscreen. We also use JavaScript to determine if a user is on a touch device when clicking certain images and displaying overlays. JavaScript transforms a web page from a static experience to an interactive one and often it interacts with CSS to work. Many websites use a JavaScript library called JQuery to simplify the process of writing actions. This library has a set of pre-defined functions that a developer can use to create JavaScript actions quickly.

Get Date JavaScript Example

JavaScript has an in-built date function that pulls the date & time from the user’s system clock. This simple JavaScript example is set to display that value when you click on the button. More practically the date function could be used to timestamp online interactions or change content according to time.

onclick=”document.getElementById(‘demo’).innerHTML = Date()”

Conditional JavaScript Example

There follows a practical use example of the date call function. It is a simple script with multiple conditions. If the time returned by the date call is less than 11 it will display one message, if it returns a value less than 15 it will display another, any other result will return the final message. This is a simple example of how you can build conditional scripts using JavaScript. Websites can use similar scripts to deliver different languages according to the region of the user or different stylesheets according to the browser.

   function myFunction() {
   var greeting;
   var time = new Date()
     .getHours();
   if (time < 11) {
     greeting = "Breakfast, muesli or full english for us! How about you?";
   } else if (time < 15) {
     greeting =
       "Lunch time, maybe a sandwich or a pasty for us! How about you?";
   } else {
     greeting = "Dinner time, steak or stir-fry for us! How about you?"
   }
   document.getElementById("demo-if")
     .innerHTML = greeting;
 }

JavaScript seems complicated.

JavaScript-Website-Real-Example-3one4

JavaScript certainly seems more complicated than HTML or CSS, however it is also much more powerful. Despite the examples here being trivial in reality Javascript is used to power some of the very important features that you find on websites. As with all programming languages it is logical and with Javascript the syntax is self-explanatory. With a little time and effort Javascript is a great tool to have as a web development option.

That's All Folks, Website Basics Part 1 Complete!

We have covered how your browser displays a website, by processing the rules assigned by the HTML, CSS and Javascript. You now know what each of those are and what they do. Hopefully it has helped you understand how much work goes into designing and developing a website. We haven't discussed the design, templates and boilerplates or server-side languages like PHP and SASS. We will get into that another day, for now you should have the tools to understand what a website contains behind the pretty images and nice fonts. If you have any questions feel free to add a comment or send us a message. If you're looking to get a website created then have a look at our web design services.

0

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>