I once had a travel game of Othello and on the rules booklet it said this about the game; “A minute to learn, an lifetime to master.” Creating web sites follow that same idea. Anyone can learn how to make a website in short time period, unfortunately longer than a minute, but to be a web designer, a master, it does require a lot of practice; fortunately less than a life time. This article is just an introduction, the “minute to learn” step, to creating a web page. Later articles will help you move along the path to web designer status.
But like everyone picking up a new skill, we much start with the basics. The basics of web design is creating a web page. This article will outline the first step, creating a web page. Future articles I’ll go deeper into web design. To start all we need is a text editor to write the HTML code that makes up the foundation of web pages. When I say text editor I mean a program that edits .txt files, like Notepad on Windows or Text Edit on Mac. (Note: If you do use Text Edit make sure to convert the document to plain text to remove hidden formatting.) Programs like Microsoft Word or OpenOffice are word processors that pack loads of hidden characters in a document making it impossible to use for creating HTML docs; which means don’t use them. Whatever text editor you choose, from the ones coming bundle with the OS, or free ones online that do more advanced features like syntax highlighting, doesn’t matter for this article. Pick one and let’s move onto the next step, actually creating a website.
The first step on the journey to being a web designer is to design something! Since this is the first page the design will be very simple, only three lines of rendered text and no color. It isn’t a very good design, but for this article it will be enough. Before we start typing a couple of basic principles of coding in HTML. Future articles will dive deeper into HTML and how to make it do what you see in you head, this article will just briefly touch on it. The basis of a web page is the scripting language HTML. HTML is basically a series of tags that describe how the browser should render the text it surrounds. There are three different kind of tags: 1. Open tag: <tagname> 2. Close tag: </tagname> 3. Self-Terminating tag: <tagname/> If you use an open tag then you have to use a close tag. There are some tags, like <br/> or <img /> that don’t open or close because it isn’t changing text it surrounds, it just adds something into the text stream, like a return character or image. Another quick note about opening and closing tags, they should be closed in the same order as they are opened. For example, if I want the word “Hi” to be bold (<strong>) and and italicized (<em>) then this is how I would do it using HTML tags: <strong><em>Hi</em></strong>. I opened with bold then opened italics, followed by the text that will be styled, then closed italics followed by bold. I closed the tags in the order I opened them. It is important to do this or you start seeing weird things when the browser renders your page.
Now that you understand the basics lets make a simple “Hello World” web page. Step 1. Open a new text document, and if prompted, call it “hello.html” Step 2. Type the following lines of code: <html> <head> <title>Simple Website</title> </head> <body> <h1>Hello World</h1> I’m a new web designer<br/> Though I still have a lot to learn! </body> </html> Step 3. Save your document, and name it if you haven’t yet. Step 4. Open a web browser, any will do, and use the Open file command and find the “hello.html” file and open it.
Open a web browser go to the File menu and select Open, find your new web page and open it. Congratulation! You’ve made a web page. You are now on the path to becoming a web designer! See, I told you it was easy. Start playing around, see what you can do. Mess around and see what you can come up with. Doing a quick web search will unlock tons of samples how to do things. In my next article I’ll dive deeper into HTML, then we I’ll show you how to use CSS to make your website actually look interesting.
