This is the second part of a two-part web design tutorial. If you haven’t already, go see “How to Build a Website in 10 Minutes” for the beginning of the lesson.
In that article, we walked you through the very basics of web design by using a plain-text editor. It’s an exciting, powerful skill for hobbyists, or anyone who thinks they might interested in learning to do web design professionally.
So, let’s jump right back in to your first web design lesson!
Step 3: Colors.
Books on how to create a website tend to be 300-500 pages long. We’re not going to go so far here, but what’s a website without a little color?
Your simple website now has one header, and two paragraphs, plus a link. It also has an amorphous thing called a “body.” Here’s how to create a website that uses your color choices.
First, modify the <body> tag so it looks like this.
<body style=”background: black; color: white;”>
Save that change and reload the page. Make sure you got the colons and semi-colons in the right places, or it won’t work!
If all went well, your web page should now have white text on a black background.
Now, you’ll notice that the link is very hard to read on a black background. You’ll want to change the link color so that it stands out better.
Play with the color names and color codes you looked up earlier, replacing “black” with your chosen background color, and “white” with your chosen foreground color. These two style settings, placed in the body tag, will affect the entire page.
For a simple example, let’s change it to a very light color of grey. Here’s how to create a website link with a color choice:
You’ll notice we inserted a style setting before the href setting, and you’ll also notice we used a color code rather than a name. HTML is a very flexible language, but trust us, even if the color codes you’ve seen up til now have had 6 digits instead of three, the above will work.
You can simply add style=”color: #DDD;” ahead of your existing link to get the same effect.
And that’s it! That style setting can be added to almost anything, such as your <p> (paragraph) and <h1> (header) tags. Play around with your simple web page to see the results of your color choices.
Conclusion on How to Build a Website
As you can see, this is hardly something to show your clients. But from these few basic steps, you’ve learned the fundamentals about how to build a website:
- How to structure a text file so that your web browser understands it as a web page
- How to create basic headers and paragraphs
- How to create links to other web pages or websites
- How to add basic style settings either to the whole page, or to individual parts
If you were to view the source of any website, you’d see that every website is a complex arrangement of similar tricks of the trade. … albeit, usually much, much more complex than what we’ve explained here!
We hope you enjoyed learning a few pointers. Sick of staring at code already? 5 Shades Media will be happy to provide professional website design services, and make sure you never have to think about how to build a website again! 😉