The presentation layer is one of the three main layers in object-oriented programming.
The three main layers include:
- Presentation Layer
- Business Layer
- Data Layer
Now, these three layers are typically related to enterprise web applications. It's a design pattern used to help separate your code out in three distinct areas that (if need be) can easily be switched out with another programming language or technology.
So if you keep all of your presentation layer code in one area of your application, switching presentation layer technologies shouldn't be too difficult.
Same rules apply to the business and data layers. If you separated your code out properly, switching databases shouldn't be too big of an issue.
Having said that, we'll be focusing on the presentation layer.
The four big players (in terms of technology) in the presentation layer are as follows:
Let’s dive into the overviews of each of these big players, shall we?
HTML (HyperText Markup Language) is a technology used to communicate with web browsers. All browsers follow the rules laid out in HTML (currently in its 5th iteration).
HTML defines a bunch of different HTML elements known as tags that are put together to make up the basic layout of a web page. These tags are used to define things like the title of the webpage (which appears in the tab of your browser), the actual text that appears on the page, images, buttons and more.
Thankfully HTML isn’t too tough to learn as it’s more of a game of memorizing the most popular tags and using them to create your simple web pages. HTML is not a programming language, as it doesn’t define variables, data types, control structure or the like. This is also what makes it fairly easy to learn.
We’ll be diving into examples of HTML “code” later, so stay tuned.
CSS (cascading style sheets) is used to add some “pizazz” to your web pages. CSS is used to add a design look and feel to your web pages through the use of its cascading rules. We won’t get into the exact rules that CSS uses to apply its designs just yet, but again, stay tuned for a more in depth explanation.
All you need to know is that CSS is used to make a web page look nice. You can use it to choose which parts of the web page should be which color, how big or small elements should be, what fonts should be used and more.
If you’ve ever landed on a web page that wasn’t able to properly load its CSS, you’d likely think that the website was completely broken. It is often fixed by forcing the page to reload and then the CSS usually gets picked up the second time and everything loads properly and the website goes back to looking great. This situation is quite rare, but I thought I’d mention it because it’s a great example of just how powerful CSS is.
That simple distinction between the two languages makes for two very different languages in terms of their use and functionality.
In today’s world we have so many browsers that can be downloaded for free and used to peruse the web. This actually makes building websites a bit challenging, as every browser has made up their own minds on how to “render” an HTML web page.
This means that a webpage loaded on Safari might not look the same as if it’s loaded on Internet Explorer, or Firefox, or Chrome.
The best part of all of these technologies is that they are all free to use.
And thankfully, they are also free to learn via these tutorials!
Do you want to get a job as a full-stack developer? Consider joining our Online Web Developer Bootcamp.