Billy’s Guide to Website Stuff:

You!

Yes, you!

You wanna learn how to build a website?

You have many questions, I’m sure. Perhaps one of them is, “What will I use to build my website?”

Oh boy. Where do we start?

Let’s start at the beginning.

 

The Beginning

Early man used hard rocks to carve into softer ro—

Let’s skip ahead a little.

 

Your Personal Guide to The Web

Before we jump right into it, let me share with you a bit of background knowledge on The Web. The World Wide Web is a great entity that was envisioned in the late 80’s by Sir Tim Berners-Lee, an English engineer and computer scientist, in response to the emergence of an even greater entity that we all know today as the Internet.

 

The great Sir Tim Berners-Lee

The great Sir Tim Berners-Lee (Photo courtesy of Jarle Naustvik)

 

To break it down, the Internet is a global network of computers that are connected together. This allows them to communicate with one another, and effectively enables people to share things with one another, whether it’s text, photos, videos, or even music.

Unfortunately, trying to use the Internet is hard and scary. Tim figured out how to connect all the resources on the Internet in a not-so-hard and less scary way. The way to do this?

 

HTML - Hyper Text Markup Language

HTML: An elegant solution to making the Internet more accessible

 

Billy! What’s HTML?

Put simply, HTML tells your web browser (Chrome, Firefox, Edge… Internet Explorer…) how to display text. To give you some perspective, HTML told the very web browser that you’re using to read this blog article to display text in a certain font, in a certain colour, as a certain size, in a certain— Well, you get the idea.

Let’s take a look at some HTML. If you right-click any webpage, you should see this menu:

 

The right-click menu

The right-click menu

 

To see the code that makes up a web page, which can click “View Page Source” towards the bottom of a menu. Once you do so, you should see a screen like this:

 

View Page Source

Organised Chaos™

 

Oof. That’s what HTML looks like.

 

Aaah, Billy! What does all that stuff mean?

Well, it’s hard to explain what’s happening on this page. Larger, more complex web pages tend to have big globs of HTML — as you can see in the above screenshot. Understandably, it won’t make much sense to the everyday citizen.

Here, let’s look at the code for a very simple web page:

 

The source code for a simple web page

 

HTML is a language that uses tags to create results. Tags are those little words you see contained with the angled brackets (the “<” and “>”, in other words).

But what do they do, I hear you ask? Essentially, tags give your browser information about what’s in your web page. The html tag, for example, tells your browser that your web page is written in HTML. The head tag is a container for important information, like the title of your web page:

 

The anatomy of a simple web page

The anatomy of a simple web page

 

In the body tag — as you can see in the image above that my editor so dutifully annotated — we see the text “This is my web page”, formatted into a paragraph using, well, a paragraph tag.

The forward slash (the “/”) at the end of a tag indicates a closing tag. Tags need to be opened and closed to tell the computer how to show the web page:

 

How HTML tags work

HTML tags are truly the epitome of teamwork

 

Billy, your website is ugly!

I know. It takes a so much effort to build a nice-looking website from scratch. So what can we do to make it easier?

 

What can I use to build a website?

Well, there are many different types of tools at your disposal. Let’s have a look at some.

 

WYSIWYG builders

Bless you, Billy.

No, no, WYSIWYG is an acronym. It’s short for “What You See Is What You Get” — it’s a type of website builder. It allows you to build a website without knowing a single line of HTML. There are plenty of platforms today that take a lot of the hard work (and most of the coding) out of building a website. Platforms like Wix and Squarespace allow you to add pages, images, and text with the click of a button. All of these actions are rendered in real-time, meaning that any changes you make will show up as soon as you make them.

 

Wix, a WYSIWYG builder

 

Why do I need to learn HTML, then?

Well, all WYSIWYG platforms are really just fancy HTML generators. You tell it what you want to happen, and it will write all the HTML for you. You may never see a single HTML tag, but trust me: your website is still being built in HTML.

 

Billy, why should I learn HTML if I can pay Wix or Squarespace to build my website for me?

A valid concern. But do bear in mind that knowing even basic HTML can help you do a couple of things:

 

It can help you figure out when something goes wrong

If, for example, your paragraphs are randomly turning red even though you swear you set the colour to black, you can use your trusty knowledge of HTML to scan through the code and find the source of the problem.

 

It can help you get around any limitations imposed by individual platforms

Remember that a WYSIWYG builder can only generate code from what you give it. If you drag an image onto the page, for example, the platform will generate the code required to display your image.

But what do you do when you want to add a pricing table to your website, and your platform doesn’t give you the option to create tables? You write the code for a table yourself using your basic knowledge of HTML — that’s what you do.

 

Okay, Billy, you’ve convinced me: I’ll learn HTML. What can I use to write my code?

Well, let me tell you about a little something called…

 

Text Editors!

Text editors are extremely useful tools. They allow you to… edit text. Everything that your computer does is because of code that someone wrote — and code is written in text, so that means that a text editor was certainly used at some point to write the code that makes so many things possible! Phew. It’s a lot to take in, I know.

There are a few different types of text editors, but for now, let’s limit our riveting options to just three: plain text editors, IDEs, and online editors.

 

Plain text editors

A plain text editor is the humblest of text editors. It simply lets you write, well, plain text. It doesn’t do any formatting. Examples of plain text editors include Notepad on Windows, and TextEdit on Mac.

 

Notepad: Your local(host) hero

 

Why should I use a plain text editor?

Plain text editors allow you to make quick edits to files. They can also be used to write your code from scratch. They are simple and easy to use, and they let you focus on writing code without any distracting bells and whistles.

When you’re building a website in a plain text editor, simply save your text file with the .html extension (e.g. my_page.html). This way, it can be rendered in your web browser:

 

A file with a .html extension can be rendered in your web browser

 

IDEs

Integrated development environments (or, simply, IDEs) take coding to the next level. They have many more features than plain text editors do, such as:

  • Project management: IDEs allow you to easy manage multiple files (which is great if your website has multiple pages!)
  • Syntax highlighting: In the code for your web page, IDEs will highlight your opening and closing tags, allowing you to read your code more easily
  • Autocomplete: IDEs automatically close tags for you. For example, if you write the <p> tag, autocomplete will automatically add a </p> closing tag to the end of the line. This ensures that your code doesn’t create a webpage that is broken, incomplete, and/or in shambles.
  • Previews: IDEs allow you to view your website being built in real-time. In other words, as your write your code, your website preview will change to match what you’ve written

Examples of IDEs include Notepad++ and Atom.

 

Notepad++

Notepad++, an IDE — not to be confused with the humble plain text editor, Notepad

 

So what make an IDE so great?

IDEs are very useful for developers who have complex code. For the humble beginner, however, all the bells and whistles can appear cumbersome and overwhelming.

 

Online text editors

Online text editors range in complexity, from simple plain text editor-esque editors to full-blown IDEs. They have the advantage of being able to store your code online, so that you can access your code from anywhere in the world. Online text editors also allow you to share your code with other people.

An example of an online text editor is CodePen. We sometimes use this program in our classes.

 

CodePen, an online text editor

 

Aaah, there’s so many options! Which one should I use?

To build a website, all you really need is a text editor. It doesn’t matter what kind you use: at the end of the day, all you are doing is writing text.

WYSIWYG builders are fantastic for quickly building a decent-looking and usable website. This makes it ideal for people who aren’t interested in learning all the techy, behind-the-scenes stuff. That being said, there is very little learning value in using a WYSIWYG builder. If you want to build a website with flexibility, then — at some point — you will need to know how to write your own HTML.

IDEs are great once you become an experienced developer, as the extra features can assist you in writing a robust, error-free code. They can, however, be a tad intimidating to the novice programmer.

My personal recommendation is learning to write basic HTML in a plain text editor, such as good old Notepad. Mistakes aren’t highlighted for you, meaning you’ll have to read your code carefully to find any issues that arise. The very act of doing so reinforces your knowledge of how to properly use tags. Plus, it’ll give you an appreciation of WYSIWYG builders and IDEs when it comes time to using them.

At the end of the day, the only thing that will make your website code better is YOU. It doesn’t matter what you write your code in: HTML is HTML. Write your code in whatever you feel comfortable writing it in. There is no reason for you not to use the humble Notepad when you’re learning how to build a website. Now you have it, Billy’s Guide to Website Stuff.

 

By Billy Cody

 

Check out our free teacher download.

Learn to code with Scratch in 30 minutes with our Scratch cheatsheet.

 

If you’re interested to find out more