What's Behind Your Website?
There’s a whole lot more to your website than just images and text…
Web developers spend their day-to-day lives writing code, creating functional designs and optimizing websites for easy use. But with the exception of these developers, most people don’t actually know much about the behind-the-scenes process of website.
How did you create your website? Did you hire a developer? Or did you use an easy click-and-drop editor such as our Website Builder? Either way, your website has much more to it than you might realize. Let’s take a look at the anatomy of your website:
HTML
HTML is your website’s skeleton in that it holds everything together. HTML stands for Hypertext Markup Language and is used in almost every single website on the internet. It is a powerful framework that instructs your browser how to display important content such as text, images and links.
HTML uses tags, or little snippets of code that tell the web browser how to display a certain aspect of the website. Here is an example of HTML code:
<body>
<h1>This is HTML</h1>
<p>We are learning about websites</p>
<p>Click <a href=”http://www.midphase.com/”>Here</a> to see more web hosting options</p>
</body>
This small block of code would simply display:
This is HTML
We are learning about websites
Click Here to see more web hosting options.
Simple, yes. But when paired with other code, HTML creates a functional framework that delivers precise and informative web pages.
HTML5 is the latest version of the markup language. This new update allows for video and audio implementation as well as bringing in new tags that clean up the base HTML code.
CSS
Cascading Style Sheets (CSS) add color and design to a website. The CSS code is usually written in a separate file that’s linked to the base HTML code, although it can be written inline with the HTML if preferred. While HTML code tells the browser what to display, the CSS code tells it how it should be displayed.
Within the CSS you can determine background colors, a range of fonts, buttons, layout and much more.
CSS3 came out around the same time as HTML5, and is loaded with new attribute selectors and pseudo classes, furthering the capabilities of CSS even more.
Client-Side Scripts
In addition to HTML and CSS, most websites have additional scripts (pages of code that are carried out by a program rather than the computer) that dictate the functionality and user-interaction capabilities of a web page. JavaScript is a very common programming language that allows the user to interact with the page.
When you hover over something and a menu pops up, or when an element is moving on a web page, chances are it has been done using a client scripting language such as JavaScript.
JavaScript is a client-side script, meaning it runs entirely in the client’s browser. These scripts have the ability to change depending on the client’s input, hence why we say JavaScript makes a webpage interactive.
Server-Side Scripts
As the name suggests, server-side scripts run on the web server rather than in the client’s browser. These scripts are used to create HTML content, but are dependent on the input of a user.
Server-side scripts can be written in numerous languages, but some of the most popular are PHP, Perl, Ruby, Java and Python. These scripts can function on their own, but are often combined with client-side scripting to provide a smoother user experience.
One advantage to server-side scripts is that they aren’t dependent on a user’s browser, meaning that everyone will see the same web page regardless of if they’re using Chrome, Firefox or Internet Explorer, now known as Microsoft Edge.
Databases
As you can imagine, many websites hold more data than any basic script should. This is where databases come in. Most forums, wikis, blogs and other large sites with continuous user input will implement a database to store all the data.
Most databases are interfaced using server-side scripts in order to retrieve any required information. MySQL and PostgreSQL are two of the most popular database management systems used around the web (SQL is the language used to communicate with a database).
Domain Names
Although they don’t affect the visual aspect of a website, domain names play a vital role in how someone accesses a web page. Each website has a corresponding domain name, which is what you type into the address bar near the top of your browser.
Your browser uses Domain Name System (DNS) to display what the user is looking for. Each domain name is linked to an IP address (a long list of numbers) which tells the DNS server where to find the website’s data.
Web Hosting
Now that we’ve talked through all these different files, where are you going to store them all? Your computer isn’t capable of hosting an entire website, which is why you’ll need to go through a web hosting company to house your site.
Web hosting providers allow you to use their web servers to store your website. Once the website is stored and a domain name is pointed to the site, anyone on the internet can access the site using their browser.
WestHost is an industry leader in web hosting services. We offer the latest technology in shared, cloud and dedicated web hosting, and at the lowest prices around the web.
Quick Rundown
- A website is made up of tons of files that work together to deliver text, images, interaction and just about anything else you can expect to see on a web page.
- These files are stored on a server, which in turn is managed by a web hosting provider.
- A user accesses these files by typing the corresponding domain name into the browser.
- Once the browser locates the files using DNS, it returns the files.
- The user’s browser translates the code into a website.
There you have it, an inside look at “the anatomy of a website”. If you’re interested in learning more about web development, continue following our blog!
If you’d rather ignore all this code and script talk, check out WestHost’s Website Builder! This easy-to-use tool helps you create a website with no coding experience required!