How to make a website

To make a website you just upload some HTML, CSS, and JavaScript, to a webserver on the internet. Then register a domain name and create a DNS entry that points to your site.

Got it?

No?

Well, let me explain…

The Internet

The internet is a bunch of computers all over the world that talk to one another over phone and cable lines. It's a lot like people making phone calls to each other, but instead of using spoken language, the computers communicate via internet protocol (IP) and instead of phone numbers, they use IP addresses.

Some of those computers are servers. Their job is to house information and services that people want, and to provide that info and services when requested.

Most of the computers on the internet are client computers. That's what you call any device a person uses to request info or services over the internet.

People use the internet for lots of really useful things like writing letters, sending instant messages, sharing files, and reading documents. Each one of these things needs a set of rules that everybody uses to get the job done. These rules are called application layer protocols. Here are some examples:

• FTP (file transfer protocol) for copying files between computers
• SMTP (send mail transfer protocol) for sending emails
• IMAP (internet message access protocol) for receiving emails
• BitTorrent for sharing files
• SSH (secure shell) for controlling computers remotely
• HTTP (hypertext transfer protocol) for accessing web pages

The Domain Name System

The internet is really useful, but it would be really difficult for people to use without the domain name system (DNS). Remember that computers find each other on the internet using IP Addresses? Well an IP address looks like this:

198.185.159.144

or even this:

3ffe:1900:4545:3:200:f8ff:fe21:67cf

So, when you send an email to your Grandma's mawmaw@grannypants.com address, your computer has to know the IP Address of the computer that provides your Granny's email service.

How does it know? It uses the domain name system like a giant set of contacts. It's a lot like you looking up a phone number. You would scroll through your contacts looking for a person's name to find their phone number. Your computer searches through DNS records looking for a domain name (like grannypants.com) and then uses the IP Address that's associated with it.

Without the domain name system, your Grandma's email would look something like:

mawmaw@3ffe:1900:4545:3:200:f8ff:fe21:67cf

Domain names make it a lot easier to remember and communicate internet addresses.

You can buy and register a domain name through a company called a registrar. Then you create DNS records with IP addresses for computers that provide services for your domain.

The World Wide Web

Easily the coolest thing on the internet is the World Wide Web, or just "web" for short. A web page can be a document, an app, a multimedia experience, a work of art, or all of these at once!

A collection of related web pages is called a website.

All the websites in the world make up the World Wide Web.

The heart of the web is hypertext. It's the idea that you can link text (called a hyperlink) to another web page. It's the main way you go from one web page to another.

The web was invented to link together scientific and technical documents into a huge "web" of information. Since then, it has grown to include entertainment, commerce, and all kinds of apps. The web is now both a computer application platform and a communication medium.

The Separation of Concerns

Web browsers understand three computer languages: HTML, CSS, and JavaScript. Each of these languages serves a different purpose.

The HTML contains all of the information: mostly text, but also images, movies, and audio.

The CSS controls the web page's appearance: colors, fonts, visual effectsx, and layout.

The JavaScript governs behavior: animations, calculations, and "if…, then…" logic.

Each of these languages are tailored to its own purpose and they are very different from one another. In computer science, this is called separation of concerns.

HTML

HyperText Markup Language (HTML) is the most basic language of the web. You can't have a web page without HTML!

HyperText is text that is linked to other web pages. That was a big concept when HTML was invented in 1990.

Markup means that the language labels or tags all of the content on the page. For example you use a paragraph tag to show that words go together in a paragraph. Like this:

Without HTML, a web browser would just see the content of a page as one big chunk of text. Check out what this page looks like without HTML.

CSS

Cascading Style Sheets make web pages attractive. Without CSS, web pages would be very ugly and boring to use.

With CSS you can control just about every aspect of how a web page looks, including:

• Backgrounds (color, images, gradients)
• Borders (color, size, rounded corners, styles)
• Text (color, font, size, weight, style)
• Layout (columns, grids, sizing, spacing, position)
• Visual effects (opacity, shadows, shapes)

This page uses pretty basic CSS, but even a little makes a big difference. See what this page looks like without CSS.

JavaScript

JavaScript is the programming language used to bring web pages to life. You can create amazing animations and computer programs with JavaScript.

This page doesn't use any JavaScript, but here are some examples of the kinds of things other people have created:

animation calculator clock graphs

Putting It All Together

Those are all the bits you need to know to build a website. Here are the steps again:

1. Register a domain name like fionacarton.com with a registrar.
2. Rent some space on a web server from a hosting company.
3. Create a DNS record for your domain name that points to your web server.
4. Write your web page in HTML (add some CSS to make it look pretty and some JavaScript if you want to get fancy).
5. Upload the code and files you created to your web server.
6. Be proud of your creation!