How to Become a Web Designer
Written by Jason Boyle
We often feature articles aimed at macintosh web designers and developers here on MacMine.com. Many of these, however, assume that you have prior knowledge of HTML/PHP/etc. Since we felt that many of our visitors were being left out, I decided to write an article on how to become a web designer. In this article, I'll show you how to set up your own site on the web and start writing basic HTML code to get you started.
Getting Started
In order to become a web designer/developer, there is one thing that you must have: A website.
Before we get started, you're probably wondering how much it costs to run your own website. The answer is not much. We pay less than $60 per year to run MacMine.com, which includes the domain (macmine.com) and hosting for our web files. Even so, you won't need this for a while, at least until you've figured out what you're doing.
HTML? No way!
If you're going to be a really good web designer, you're going to need to learn HTML (HyperText Markup Language). It's not as hard as you think. There are many good tutorials on the web, including an excellent one at w3schools.com/html.
Learning HTML, however, is not necessary. There are some very useful programs that can write your HTML for you. For example, you can design a web page in a program similar to MS Word (e.g., by dragging in images and typing up your text, etc.), and the program will save your document in HTML format. These programs are called WYSIWYG (What You See Is What You Get) editors, and unfortunately, they will cost you.
I learned HTML by using a WYSIWYG editor for a few years before I started to look closer at the code and start experimenting. Now I write all my web pages in HTML.
Macromedia DreamWeaver is quite simply the best WYSIWYG editor. It costs $399 (retail), but you can get a huge discount as a student/teacher from sites like academicsuperstore.com, which charges only $99.95 for the full version of DreamWeaver.
Your First Web Page
While you're just learning to make web sites, you can save them to your computer and view them in a browser. Follow these simple steps to get an idea of what it means to create a website:
Open any text editor, and type (or copy and paste) the following code into a new document:
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p style="font-size: 12px; font-family: Arial">This is some text. You can write whatever you like here.</h1>
</body>
</html>
Now save this file as helloworld.html (or any other name as long as it ends in .html). Drag and drop the saved file into a new browser window, and you should see a simple page. Congratulations! You just made your first website.
The text in between the angle brackets (< and >), for example, <p>, are called HTML tags. Each tag must be closed, or have another similar tag containing a slash (/) after the first angle bracket, for example, </p>.
So any code in between <p> and </p> will be formatted differently. The <p> tag tells the browser that any code between the two tags is a paragraph and should be treated as such. Try adding another paragraph to your document.
Think you got it? Okay, so here's what each tag means:
<html> - Anything inside this tag is part of your web page. All websites must contain this tag.
<head> - This tag is the most complicated. It is used to define any information about your website that will not be shown in the page. In our example, we defined our page's title, but we could also define other things such as keywords to be used by search engines.
<title> - This tag must be inside the <head> tag. It tells the browser what to call your website in the window's title bar.
<body> - Anything inside this code is part of your webpage and will be shown on the screen (finally!).
<h1> - Text inside this tag will be treated as your page's header, or title. For slightly smaller text, you can use <h2> through <h6>, which become increasingly smaller and "less important".
<p style="font-size: 12px; font-family: Arial"> - Paragraph tag; see above. In this case, it includes a style attribute, which contains CSS code to format your text. For more information on CSS, see below.
Finally, remember that all tags must be closed (with a /).
Now you have a basic understanding of HTML. Try experimenting and look up some other HTML tags on the web (search for "HTML tags" on Google).
Putting your pages on the web
Okay, cool. So now you have your first web page, either by following the instructions above, or you used some fancy-shmancy WYSIWYG editor to do the trick for you. Now, what good is a web page if no one else can see it?
There are plenty of good free web hosts on the internet. My personal favorite is Angelfire, although others such as Tripod can be quite good. Once again, google around until you find what you're looking for.
We'll assume you chose to use Angelfire. Cool. Set up a free account (you'll have to figure out how to do this on your own). Once you're looking at your very own website control panel, choose "Upload File" or similar, select the website you saved on your computer (we called ours helloworld.html), and click Upload.
Uploading is the opposite of downloading: You're sending data somewhere else rather than having it sent to your computer.
Now, check out the website URL you were given when you signed up. This is usually something like http://www.angelfire.com/jazz/jb/ (yours will be different). You should see something, although it depends on your host. Now add helloworld.html to the end of that address to come up with http://www.angelfire.com/jazz/jb/helloworld.html. Press return, and you should see your page. Give the URL to your friends, and they, too, should be able to see your site in all it's simplistic glory--but make sure to put some more interesting text on it first.
Conclusion
One of the best ways to get better at HTML is to look at the source code of other web pages. Source code is just another name for HTML. In Safari, choose View Source... from the View menu. Other browsers may have the View Source... menu item in other places, so click around until you find it. Make sure you have a website open before you do, and you should see loads of indecipherable random HTML scribblings. Scroll down until you see the <body> tag and go from there. You're on your way to web design nirvana!
One thing I haven't yet mentioned (so as not to confuse you) is CSS, or Cascading Style Sheets. Once you've got the basics of HTML down, check out w3schools.com/css for more info. I learned CSS from this very site in less than an hour, so don't despair.
