Tuesday, August 17, 2010

Webdesign (intro)

When I made my first blog I have always wanted to actually teach people how to do stuff. I had assumed that i would educate people about the joys of programming and why it feels good when you work all through the night (or day) and finally get a "build complete, 0 errors, 0 warnings".
However, lately I have ventured into the field of Webdesign, not just because my own site looks horrible, but because lots of sites don't look all that great, even though many of them are professionally made websites that most probably cost quite a bit of money to make. Also, there is so much you can do that most people don't, and then there are so many people who get a website template, or even a content management system (or a blog) and then can't change even the tiniest things because the whole thing is way too complicated for the uninitiated.
So for the duration of this series i will be focusing on HTML (very briefly, because you don't actually need to know much about html these days), CSS (this will be the main focus of the series since this part is doing the actual webdesign), JavaScript (very, very late in the series since you don't need it for even dynamic websites (by the usual definition anyway, in which the dynamic part is the server sending a website depending on who's visiting, what information was sent, etc.), but mostly for some effects), and PHP (the PHP part will mostly be used to make things easier for now, later i might get into the programming of dynamic features of websites and how to show every user a different website if you so chose).
I will probably also make some short posts about how to simplify things with CSS, or how to replace old, outdated html stuff with CSS.

Now, this is the first post of the series:
What is HTML ? HTML stands for HyperText Markup Language and was originally made for publishing websites. That link will tell you much more than I would ever be willing to write, or even read, about HTML. What HTML was not made for was looking good. HTML is made for structuring of the document you want to publish and, before CSS was made, was used to make things look a certain way. I still use HTML to make my own website look good, but I fail, and it's mostly because I don't update it much. HTML should be used to declaring parts of text, images, other content; it should not be used to declare how said content is supposed to look. With that i give you a very simple website that we will start with (same exact website can be viewed here):

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My First Website</title>
</head>
<body>
<p>This is my first website !</p>
</body>
</html>

What it all means:
In HTML we have tags that define content, the tags are always surrounded by angle brackets.
The first line defines the Document Type. That line just tells your browser how to interpret the information it receives. The document type declaration can actually be left out, but I kinda want to do things the way they're supposed to be done, which is why i picked one of the strictest document type declarations.
Then we have the <html> tags that surround the whole document, after which we declare the head of the document which contains information such as the title (as shown), there could be css in there, meta information (maybe I'll get into that later), javascript, etc.
The title just tells the browser what the title of the website is, it appears in the browsers title bar.
Then we have the <body> tags surrounding (drumroll, wait for it) the body of the document. Many people still put information about the text color, background color and various other things into this tag, but doing it with CSS is preferred.
After that we just have <p> for paragraph and then the actual text that we're trying to show.

No comments:

Post a Comment

Facebook