How are complex HTML websites created?

brackets iconIn this lesson we’ll understand how more complex modern websites are created.
Now we have created our first website, with two basic pages and a navigation bar that lets us move between them. We understand how to add images, and how to structure our HTML documents. And the importance of keeping our HTML neat and clean.

Use the buttons below to navigate through the lesson

img0
img1
img2
img3
img4
img5
img6
img7
img8



However, before we move onto our next topic – which is CSS in much more detail – you may be wondering how more complex websites are created.

You will have noticed that editing HTML directly in Notepad is difficult, and that the internet is more complicated than the basic HTML files we are currently making.

This is because most of the HTML we load into our browsers when we navigate modern websites is automatically generated by the server.

When the internet was first invented webpages were just simple HTML files like the ones you have been creating. However it became difficult to maintain, so server-side languages were invented that generate the HTML automatically.

These are programming languages such as PHP or ASP.NET or Ruby on Rails. When a request comes in to a server running one of these languages the server checks the rules written in PHP (or whatever language the server uses) and generates the HTML that is then sent to your browser.

So is it a waste of time learning HTML if it is automatically generated nowadays?

No, not at all. In order to program well in a server-side language such as PHP or ASP.NET you must understand HTML very well, so practicing by creating your own web pages in a simple tool like Notepad is ideal!

It is a good idea to try and create a complex webpage first in HTML just to understand the problems you have. If you try and make for yourself a whole homepage, with an “About me” and a “Contact” page and some other pages, you’ll soon find that you become frustrated at how much HTML you have to ensure is the same on every page.

Remember our <nav> bar? We had to copy that into every page, so if we change our <nav> we have to change every file on our website.

Similarly with our CSS – we haven’t yet learned how to share CSS between multiple different pages. The difference here is that it’s easy to share CSS using pure HTML, but it’s impossible to share a <nav> bar across pages without using a server-side language.

Once you’ve completed this course and learned all about HTML, CSS and JavaScript you might want to look into learning a server side language such as ASP.NET or PHP.

I hope this helps you to understand how modern webpages are created.

In the next part of our course we will study CSS and practice styling our sample website.