beanz Magazine

How to Build a (Simple) Website

William Brawley on Flickr

Here is the simplest possible way to learn how to build a website, as well as how web pages and websites work.

There are many ways to build a website. Options range from the simple, a couple pages on your computer, to a website on a remote server where content is stored in a database. This article describes the simplest option. In the next few magazine issues, I'll describe more technical ways to build a website.

However you learn to build a website, it can be a great way to learn about computing, computer science, plus have some fun.

What Is a Website?

This might seem an odd place to start. However, parts of building a website only make sense when you understand what a website is and how they work.

If you don't already know, the internet is a set of computers that use software to speak the same language as they send and receive data between each other. This could be sending email from software on your computer upstream to another computer at the company that provides your internet access and from there to other computers until your email arrives at a computer near the person you emailed. They open their email software and see your email.

Websites work in a similar way. You open a web browser, type in a web address, your browser sends the address upstream to a computer at the company that provides your internet access and from there to other computers until the request arrives at a computer where your web address is received, processed, then sent back to your web browser. The data sent back to you is code to display in your web browser. This return data is text and images with instructions on how to organize the data visually in your browser.

To create a website visible on the internet, you need access to a computer on the internet that will translate a unique web address into data displayed in a web browser. Access can be through publishing software stored on that remote computer or using software to connect to the remote computer then upload or download files.

At every stage in this process, remember, computers talk back and forth in one or more common languages. HTML is one of those languages, a standard set of instructions used to organize data displayed in web browsers (as we will see). HTTP (hyper text transfer protocol) is another standard, used to transport data from web browsers to web servers and back again. FTP (file transfer protocol) is used to upload and download files from your computer to a remote web server.

Imagine if every person in the world spoke French or English or Swahili. Computers on the internet speak the same language made of different sets of standards, like dialects or vocabularies. Here's another way to think about it. Imagine if you had one language used to get dressed, another language to go to school (or work), another language to drive your car, and so on. That's how the internet works.

You do not have to be a rocket scientist to build a website or maintain a website. As you'll see, it can be a fairly simple project. You will learn a few things but there are ways to build websites without being too technical.

Like Goldilocks and the Three Bears, we'll do three versions, a Baby Bear Website today with a Momma Bear Website and a Poppa Bear website in the next few issues of this magazine. Your mileage will vary. Maybe you don’t like bears, for example.

A Simple (Baby Bear) Website

Yes, you could go to Wix.com or dozens of other websites and create your own website from scratch. But you would not learn much about how websites are created and how they work. This project will show you hands on the basics of the code behind web pages and how web pages link. It’s also a project where you can easily tweak the code to add pages and play around to learn even more.

In it's simplest form, a website can be one or two HTML web pages. To create the web pages, you'll need text editor software, for example, Notepad in Windows or Textpad in Mac. You'll also need a web browser. If you don't have these tools, links are at the bottom of this article.

Let's create your first web page:

  1. Open your text editor software.
  2. Type in the code below these instructions. Or copy/paste the code into your text editor.
  3. Save your file to your computer desktop as my-webpage.html.
  4. On your computer desktop, right mouse click over your my-webpage.html file and open the file with your web browser.
  5. Go back to your text editor software and change the text between the H1 and P tags. Reload your web page in your browser to see your changes. If you make a mistake, no worries: start again with the code below.

Here is the code to type or copy then paste into your text editor in Step 2 above:

<html>
<head>
<title>My First Web Page</title>
</head>
<body>

    <h1>My First Web Page</h1>
    <p>Wow, this is my first web page!</p>
    <p>Well, this is <strong>bold</bold> and <em>italics</em>!</p>
    <p>Here is <a href=&#34;my-second-page.html&#34;>a link</a></p>
</body>
</html>

No worries if you don't know HTML, the structured language above. It's a simple language to understand and learn. Basically HTML is a set of tags you use to tell a web browser how to display content. See the H1 tag in the code above? It tells the browser the text between <h1> and </h1> is heading text. The browser then displays heading text a default way compared to other text. For example, text between H1 heading tags is always displayed in a large font size and bold.

Do you also see how the <h1> and </h1> tags are paired? Same for <p> and </p>. Even the <a href=""> tag has a pair, the </a> tag. The </a>, </p>, and </h1> tell the web browser where each of these tags end and, therefore, when to stop doing what they do.

In the case of the <a href=""></a> tag, the href="" bit tells the web browser what to link to since this tag is used to create links between web pages. The </a> tag, as noted before, tells the web browser where to stop linking text. So my-second-page.html is a second web page we'll build next, to build a website with two pages, or more if you want to take what you've learned and create more pages.

And here are explanations for each part of this code:

HTML Tag What This Tag Does
html Content displayed between the open html tag and close html tag is the full web page. A web page is made of at least the head portion, always hidden from sight, and the body of the page which is visible.
head Content displayed between the open head tag and close head tag contains content that does not display in your web browser but is useful, for example, the title of your web page.
title Content placed between the open title tag and close title tag displays as the page title at the top of our web browser.
body Content placed between the open body tag and close body tag is displayed in web browsers as your web page.
h1 Any text placed between the open h1 tag and close h1 tag will appear as a top level heading. You can try changing h1 to h2, h3, h4, and h5 then save your web page and refresh your web browser. You'll see web browsers display each numbered heading in a different size. Headings also help search engines determine how one block of web content might relate to another block. If you do experiment and change h1 to h2, for example, be sure to update the close tag </h1> to </h2>.
p Any text placed between the open p tag and close p tag will appear as a block of text, a paragraph, with space above and below. It's like typing a hard return or two in a word processing program.
strong Any text placed between the open strong tag and close strong tag will display as bold text in a web browser.
em Any text placed between the open em tag and close em tag will display as italicized text in a web browser.
a Called the anchor tag, this tag is used to create links with one or more words or even images placed between the open and close anchor tags. This tag uses a couple elements. href=”” defines the page to link to. target=”_blank” tells the web browser to open the link in a new web browser window.

 

The bottom of this article has links to more information about HTML tags and how they work. Remember, the biggest mistake people make with HTML is forgetting to close a tag for an HTML tag that has a close tag. The bottom half of your page, for example, will be all large type if you forget to close the </h1> after heading text. Add in the close tag and magically your text returns to normal.

With one web page created, and a general idea how HTML is used to create web pages, let's create a second web page:

  1. Open your text editor software.
  2. Type in the code below these instructions.
  3. Save your file to your computer desktop as my-second-page.html.
  4. On your computer desktop, right mouse click over your my-second-page.html file and open the file with your web browser.
  5. Go back to your text editor software and change the text between the H1 and P tags. Reload your web page in your browser to see your changes. If you make a mistake, no worries: start again with the code below.

Here is the code to type or copy then paste into your text editor in Step 2 above:

<html>
<head>
<title>My Second Web Page</title>
</head>
<body>

    <h1>My Second Web Page</h1>
    <p>This is my second web page!</p>
    <p>Well, this is <strong>bold</bold> and <em>italics</em>!</p>
    <p>Here is <a href="my-webpage.html">a link to my first web page</a></p>
</body>
</html>

Notice how the <a href="my-webpage.html"> tag now links to my-webpage.html, the file name of your first web page? When you save the code above as my-second-page.html — which is the file name in the href="" value used in your first web page, you should be able to click the link on your first web page and go from there to your second web page, back and forth.

Congratulations! You have a simple website plus the basic knowledge to add content and create pages of content. Feel free to add pages. Browse the HTML resources linked at the bottom of this article to add images and do other neat stuff. And be sure to come back in the next few months for more advanced tutorials to create websites.

Learn More

W3 Schools

While there are many online HTML reference sites, this one makes it easy to practice HTML.
http://www.w3schools.com/html/
http://www.w3schools.com/tags/

HTML Help by the Web Design Group

This site is a little ancient but it includes prior versions of HTML, if that is useful.
http://htmlhelp.com/

Also In The February 2014 Issue

Summer 2014 Code and Technology Camps

It may be the middle of winter in the Northern Hemisphere but now might be a great time to start thinking about technology summer camps if you're a kid or have kids.

An Interview with Susan Kare

You’ve looked at and used Susan Kare’s work, or work inspired by hers, every time you use a computer. The garbage can icon and other taken for granted icons can be traced back to Kare’s icons on the first Macintosh computers.

User Experience Designers

User experience design touches on all the ways people interact with software or hardware. This includes how people use technology, the hardware design, and documentation.

Database Design

How you store and retrieve data in a relational or NoSQL database depends on how well you design the database structure.

How to Create Color Palettes

Here are several ways to create a color palette that looks professional for web sites and interfaces. It's not as easy as you might think.

Fizz-Buzz and Other Odd Questions

There are at least two types of questions coders might face in job interviews, fizz-buzz and puzzle questions. Both can be learned ahead of time.

Interface Design Basics

Interfaces are the primary way people work with computers and websites. Here are concepts used to design human interactions with computers.

A Short History of Lorem Ipsum

No discussion of design is complete without the history of lorem ipsum. It's more than placeholder text you stuff into a visual design.

docstrings

Docstrings are special comments embedded in software code that survive compiling the code, for example, help text.

Database Normalization

Relational databases need to have their data organized a certain way.

What is Information Architecture?

When you think of architecture, you think buildings not information. However, information also needs careful design and structure in computing.

JavaScript

JavaScript is a programming language and an historical artifact from the early internet conflicts between Netscape, Microsoft, and Sun for open standards.

News Wire Stories for February 2014

Interesting stories about computer science, software programming, and technology for the months of December 2013 and January 2014. More stories can be found at the News Wire link at the top of of this site.

How to Build a (Simple) Website

Here is the simplest possible way to learn how to build a website, as well as how web pages and websites work.

A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.

Learn More Links for February 2014

Links from the bottom of all the February 2014 articles, collected in one place for you to print, share, or bookmark.