The Zak Soup Center for Designers Who Can’t Code Good
A while back I was working with Matthew Reakus on a website and I found out that he didn’t know how to code HTML. This was news to me: a designer couldn’t code HTML? As I become more and more a part of the “design community” I realized that this wasn’t just Matthew, it was many designers. They could design awesome stuff, but couldn’t code the simplest HTML and CSS web page. I decided to remedy that. Thus, I started the Zak Soup Center for Designers Who Can’t Code Good.
Part 1: HTML BASICS
HTML is both simple and complex. It is simple in that it has a very structured form and is easy to to pick up quickly. It is complex in that there are literally hundreds of advanced features and tags that you can use to spice up your site.
HTML syntax is comprised of “tags.” A tag looks like <this></this>. Basically the way tags work is you have your <typeoftag moreinfo=”info”>content</typeoftag>. An HTML page always starts out with an opening HTML tag: <HTML>.
Then you have your head. The head is comprised of all the information about your site, but isn’t displayed on the page. You will put your metadata, your title, and your css+javascript links here. <head> <link /> <link /> <title>My Awesome Site</title> </head>
Next comes your body: <body>. All of the content you want to be displayed on the page is going to go into your body. <body>all of your content are belong to me</body>
Now you close the HTML tag to let the browser know that’s the end of the page </HTML>
Your final website should look like:
<HTML>
<head> <link /> <link /> <title>My Awesome Site</title> </head>
<body>all of your content are belong to me</body>
</HTML>
You may have noticed that my links did not match the other tags. A link tag is actually a single tag, not an opening and closing tag. the “/>” at the end signifies the end of the tag. generally a link tag will look like this:
<link href=”link_to_site_or_file.html” />
Part Two, coming soooooooon…
