How Do Websites Work?

Websites are a huge part of our lives today and have been for many years, but do you know how a website is built and how it actually works? A lot of work goes into making a site such as the one you’re viewing right now.  In this article, we’ll take a look at the foundational coding languages of the web such as HTML and CSS, in order to answer the question: “How Do Websites Work?”

The Browser

Browsers are familiar to most of us; in fact, you’re using one right now. Technically a browser is “A software application for retrieving, presenting and traversing information resources on the World Wide Web.” – Wikipedia

Code is just code until the files are uploaded to the browser. The browser is the software that actually interprets the code into the web page we see. The browser does most of the work when displaying a website. It’s also up to the browsers’ developers to decide what code the browsers support. Because of this, web developers need to be familiar with all the popular browsers and to test the site in each one.

 

Html: The Foundation

Anyone looking to start building websites starts by learning HTML. HTML or Hypertext Markup Language is the primary coding language of the web. It’s the foundation of almost any website. Markup languages differ from Programming languages in that they use tags to identify content.

HTML tags are generally pretty specific: there’s a paragraph tag, a heading tag, a footer tag, and so on. Every web page is made up of a bunch of these tags wrapped around content. For example, if I wanted to make a paragraph in HTML I would type this:

<p>This is a paragraph</p>

The two brackets < and > define an HTML tag. The letter inside the brackets, “p”, is the name of the tag. The <p> tag is the paragraph tag. The way HTML works is you have an opening tag, <p>, followed by some content, “This is a paragraph”, and then finished with a closing tag, </p>. There are a whole lot more HTML tags but they’re all fairly straightforward, and they all follow the same structural rules. You can use HTML to markup any sort of content such as videos, images, headings, links, and of course text.

 

CSS: The Presentation

CSS is the primary styling language of the web. Like HTML it’s essential for any budding web developer to learn it. CSS is responsible for all the different fonts, colors, and other styles you see. Put simply, CSS governs the presentation of web pages while HTML governs the structure.

Here’s an example. This is one of our blogs posts with no developer styles:

Pretty awful, right? All of the content is there marked up in HTML, but there’s no styles. Now take a look at the same post this time with both HTML and CSS enabled.

 

 

Much better. As you can see CSS is a very powerful language and one that’s pretty essential on the web. CSS can apply different styling rules to one or more HTML tags. For example using CSS I could change the styling of all the paragraph tags to be in the Times New Roman font.

CSS stands for Cascading Style Sheets. The Style Sheets part refers to the CSS file. The Cascading part is a little bit more complex. Think of it this way. A waterfall falls straight down hitting rocks on the way, but only the rocks at the bottom determine which way the water flows.

In the same way, browsers have their own default styling. If a developer doesn’t upload a CSS file along with his sight, then the browser displays it according to it’s own default CSS. For example, my browser will default the font type to Sans-Serif. If, however, a developer uploads his own style sheet, then the browser will display that one because it’s the last defined style sheet.

 

Javascript: The Interactivity 

Javascript is a true programming language and is much more complicated than either HTML or CSS. Most modern browsers support Javascript and most sites use it for interactivity. However CSS is quickly growing to replace Javascript for animations and transitions. Javascript is still widely used for things like pop up boxes and slide-in CTAs. It can also be used for secure form transactions and games. Like I said though, a lot of Javascript is becoming obsolete because of new CSS functionality and it’s not essential for you to learn it in order to start building websites.

 

Conclusion

Now you’re a little bit more familiar with the coding languages that make up the majority of the web. The actual process goes something like this. A developer, once he has acquired a project, will code up the website in HTML and CSS files, maybe with a little Javascript thrown in. Then he will upload them to a web server and the browser does the rest. Obviously this is a very condensed version of a complex process, but it should be enough for a fundamental knowledge of how websites work.

[av_hr class=’default’ height=’50’ shadow=’no-shadow’ position=’center’ av_uid=’av-4yfuui’]

[av_hr class=’invisible’ height=’50’ shadow=’no-shadow’ position=’center’ av_uid=’av-2ck86i’]

[gravityform id=”1″ name=”List Sign-up Form” title=”false” description=”false”]