Introduction: Build a Website: for Beginners

Welcome to Build A Website: For Beginners!

Ever wonder how people make websites? Always wanted to try your hand at building a website, but you have no experience with code or web design? Then this tutorial is for you!

In this Instructable, I will be teaching you:

  • The basics of the HyperText Markup Language (HTML).
  • How to manage the flow of your web-page elements.
  • How to text, lists, images, and hyperlinks.
  • How to change the styles and colors of your elements.
  • How to document your code for others to use.

What you'll need:

  • An up-to-date web browser. This tutorial will use Google Chrome to view webpages.
  • A text editor. Microsoft Word and Notepad won't suffice here; you'll need a proper text editor. This tutorial will use Sublime Text 3, but I also highly recommend Notepad++ for Windows users or Atom for Mac or Linux users.

Once you pick a favorite text editor and a favorite web browser, proceed to the first step!

Step 1: Hello World!

Web Browsers & HTML

The HyperText Markup Language, or HTML, is a language that is dependent on the web browsers that use them. Web designers use HTML to, "tell," the web browser what it should draw, but not necessarily how to draw them. A web browser decides how to draw a webpage based on how it was programmed, but it is up to the web designer to tell the browser what to draw!

To help the browser understand what to draw, we can use tags. Tags are special words put inside braces like that only the web browser understands. These tags won't show up on your site as actual text, but they will tell the browser how things are meant to, "behave."

What Every Website Needs

Every website needs three basic tags in order to function properly. They are:

  1. !doctype HTML: This tells the browser that the file it's reading should be treated like a HTML file.
  2. head: This is the, "head," of the website. It contains information that usually is invisible to the reader but is necessary for the site to function. The text that displays for this page's tab in your browser is located here!
  3. body: The body of the site. Everything that the user interacts with will be displayed in the body. This text you're currently reading is part of the body of this site!

Open your text editor if you have not done so already. Create a new file, and add these three necessary tags just like this!

<!doctype HTML>
<head>

</head>
<body>

</body>

Notice how we follow certain tags like head and body with /head and /body? This is called closing the tag, and it is very important that we close the tags that require it. Otherwise, your instructions to your web browser may be confusing, and your site may not behave as you expect it to!

Hello world!

Now, let's add a title and a header, like so. 

<!doctype HTML>
<head>
	<title>Hello world!</title>
</head>
<body>
	<h1>Hello world!</h1>
</body>

What did we just create?

Once you are confident in your code, save your file where you can remember it! Make sure you save your file with a .html extension or else your code will not be recognized as a html file!Your page should look something like this before you proceed to the next step.

Step 2: Controlling Your Elements

Congratulations! You built your first, "hello world," web page! Now, let's get a little fancier; let's build a web page about coffee.

The div Tag

div is a, "divider," tag whose purpose is to group similar web elements into modular blocks. This can be helpful for designers who need to make the same changes to many different elements who are supposed to behave similarly.

Let's put the header we just made into a div block. The result should look something like this.

<div>
	<h1>Hello world!</h1>
</div>
Div is, "invisible," by nature, but it is invaluable to organizing a page.

The img Tag

img tells the browser that an image should be in that spot. However, the browser needs to know what image should be placed in that tag's location. To do this, we have to make use of a new HTML feature: attributes.

Attributes are, like tags, special keywords that are reserved to do special tasks. However, unlike tags, they cannot stand on their own - attributes always go inside of a tag. They also need to be defined, because attributes do not have a default behavior assigned to them. Think of attributes as, "options," for your elements that will override the tag's default behavior.

img requires a src attribute. Src stands for, "source," and will point the browser in the direction of the, "source," file. To define this image, create adivblock underneath our first block. Then, add the image inside that div like this.

<div>
	<img src="https://pixabay.com/static/uploads/photo/2015/10/12/14/54/coffee-983955_960_720.jpg">
</div>

The img tag does not need to be closed. Notice that we set src equal to a URL. All attributes must be defined using a =, and all definitions for attributes are enclosed by "".

To finish up, change the, "Hello world," text in the title and h1 to whatever you'd like. You may proceed once you are confident that your page looks something like this!

Step 3: Paragraphs, Lists, and Links

Before we proceed to adding a fuller body to our site, let's learn about a few useful tags when blocks of text are required.

The p tag

The p tag is the, "paragraph," tag. It is arguably one of the most used HTML tags because it is used to define places where blocks of text (much like this block of text) should be in the page.

ul, ol, and li Tags

The ul, ol, and li tags define an unordered list, an ordered list, and a list element, respectively.

  • Unordered lists do not have any order. They are lists with bullet points, much like this one.
  • A list element, in this case, would be every bullet point. In ordered lists, each number would be a list element.

To create a list:

  1. Decide on using a ul or an ol tag. This list you are reading is created using an ol tag.
  2. Create an open and closed tag to encapsulate your list elements.
  3. Create as many list elements as you need in between the list-type tags.

The a tag

The a tag is used to define a hyperlink which is used to jump from one page to another. You can open and close an a tag around almost any element to create a hyperlink for that element.

All a tags have to have a reference to a URL. To do this, we use a href attribute inside every a tag.

Add some text!

Add some code underneath what you've already created! In this image, we use all of the tags that were described above. Here are some things you may notice about this code:

  • The href attribute is defined to go to "#". If you don't know what your link should jump to, you can use a pound symbol in place of a URL to stop the tag from attempting to load a page.
  • The paragraph at the bottom of the page uses a style attribute. This attribute will be explained in the next step.

Once you are confident that your page looks similar to this, proceed to the next section!

Step 4: Add Some Style!

The style attribute allows a designer to make quick, inline style changes without affecting a lot of their work. While most designers use an entirely separate file to add style to their site, the designer may find it easier to test new ideas or to implement small changes inside of the html file.

This step will cover the idea behind styling your site. However, the language used to add style to your site is beyond the scope of this Instructable. For more information on styling your site, check out this nifty guide on the power of CSS attributes!

CSS & The Style Attribute

Cascading Style Sheets, also known as CSS, allow a designer to intuitively edit many elements of a page at once. CSS has a symbiotic relationship with HTML, and CSS syntax is completely different from HTML syntax. In the old days of HTML, all the style information was required to be in the HTML file. These files, as you may imagine, became unruly to work with! Therefore, CSS was invented to eliminate the task of tagging every element in HTML with style information.

While most designers will use a separate file for CSS properties, we will be using the inline style attribute that HTML offers. Like every other attribute, style must be declared with an =, and everything in its definition must be contained in quotes. However, unlike other attributes, the definition of the style will be read in the CSS language. Therefore, a great web designer needs to know how to manipulate HTML and CSS simultaneously to get the results they want. For a full list of what CSS has to offer, check out this great resource.

Adding Style to Your Site

Use the style attribute to make your HTML file look like this. Be sure to terminate every property definition with a semicolon! Semicolons separate properties from each other.

There are 5 different CSS properties described in these elements. Here's a brief summary of what they do:

  • The color property is used to change the color of text. It is defined using a hex code, which is typically a 3 or 6 digit hexadecimal number that the browser associates a color with. A digit in hexadecimal can be any, "number," 0 through F, where a code of #000000 is black and #FFFFFF is white.
  • The background-color property is used to set the background color of an element. Again, this is defined using a hex code that represents a color.
  • The border-radius property tells the browser that the border of this element should be rounded. In this example, it is used to round each corner of the header and the image in equal parts. The amount of rounding is calculated in pixels which is why each number has a, "px," appended to it.
  • The padding-left property adds whitespace to the left side of this element. This helps give the element spacing and makes the element, "breathe," a bit. Alternatively we could have instead used the padding property to create the same effect. Like the border-radius, this is also measured in pixels.
  • The font-size property is used to adjust the size of the text. Again, this is measured in pixels.

Feel free to adjust the numbers to your liking. Once you are confident that your page looks similar to this, you can proceed to the final step!

Step 5: Document Your Work!

From web sites to operating systems, all programmers have to develop a skill for documentation. Everyone has their own style for documentation, but documentation is important for others to understand your code!

Importance of Documentation

Have you ever tried to assemble something complex like a piece of furniture, but the instruction manual you received is incomprehensible? Programmers feel that same frustration when they have to read poorly documented code. You, as a designer, are the only one who knows how and why your code does what it does. If you try to share your code with others without documentation, they are most likely to misinterpret what your code does. Even you - years after writing some code - may forget exactly what your code does if you try to look at it again. We call this concept spaghetti code because this style of coding is impossible to untangle.

Comment Tag

Typically, the easiest and most effective way to document code is to leave comments in the code itself. A comment is something we can designate the web browser to ignore; comments are for humans only!

To make a comment, we can add an, "element," like so:

<!-- This is an example comment.
This is also part of the same comment.
The comment does not terminate until I place an ending tag, like this: -->

We use comments to explain parts of our code that may be confusing to others at first glance. With comments, we can tell others who wrote the file or what a certain block is doing.

Add some comments into your code, like this! After you save your work, be sure to check that your site is unaffected by your comments!

Step 6: Congratulations!

You've built a great first website!

However, there is plenty to improve on in your career in web design. If you want to improve on what this Instructable can provide, check out these great web design resources:

  • Codecademy has great interactive courses in HTML, CSS, and JavaScript for free! If you like to learn by doing, then you can't get much better than what they have to offer.
  • W3Schools has great reading resources on every part of building a website. From the front end with HTML to the web-server with PHP, they have every resource you need to build a website that looks good and can function in a real application!