Do you speak HTML? How To Meet the Ladies? Lol, hardly.
Well it’s time for you to be fluent in this language, it’s as important as speaking English for the purposes of dealing with your clients. I’m going to begin with some of the most basic ideas in HTML and move on from there. If you are already comfortable, move on, this will be boring, but I will throw in more tips and interesting facts than the average HTML tutorial. (because I don’t want to use the shift key, from now on i will call it html)
This is the language of your browser. Whatever is in the file is what IE or FF or Safari will be reading so you need to make sure that all these browsers can read the text equally and you need to be familiar with it as well, you need to be able to “see the matrix†as it were in order to properly get your vision from your head onto the WWW.
A *.html file is basically a text file that has an html or htm extension. Either way it doesn’t matter, but i tend to stick with .html because it is the more formal version. Really the browser will read any type of file with the right text in it, but let’s stick to html.
Every browser is looking for the index.html file in a directory SO every home page you make will need to start out as index.html. Make this first and then move on the contact.html and aboutus.html files as needed.
OK, let’s begin with some more basics. Of course at this point I’m assuming you know a little about Design 101 and have some sort of idea of what hosting is because I’m not going to go over it here.
Begin all files with <html> this tells the browser that some html will follow. And when you’re done at the very end you will need to put </html> which signals the end of the html. Every tag opens and then closes with the /. So the first thing you need will be:
<html>
//stuff will go in here later
</html>
NOW, you need a header section. We will add <head></head> in between the html tags like so:
<html>
<head>
</head>
</html>
The head contains STYLES and JAVASCRIPT and of course the TITLE which we will discuss. All of these elements will be hidden and used only for the browser to deal with.
NOW, we need a body with all of our visible stuff (I will also now add the title tags in the head):
<html>
<head>
<title>This is our title</title>
</head>
<body>
//stuff goes in here next
</body>
</html>
OK, so we have a very basic shell. Now let’s add some text in the body. I will just be showing you the body tags so we don’t need to see the head or html tags for now, I’ll review the whole set of code at the end.
<body>
This is some text
</body>
This will show text, but typically we use the <p> </p> tags to denote a paragraph. This makes the text easier to style but also sometimes a pain in the butt from the stand point of cross-browser functionality. I would recommend getting used to using paragraphs like so:
<body>
<p>This is some text</p>
</body>
As you can see I indent items inside the body brackets, this is just so things are easier to read as you make them more complicated.
Now let’s add a picture. Are you familiar with absolute or relative linking? Say you’re doing a site at www.mysite.com and you have the file in the main directory. www.mysite.com/index.html. Now where is the picture relative to this file? Is it in the same directory? Is it in an image directory? Lets assume it’s in a directory called images. IE, the image image.jpg is in the images directory at mysite.com. SO, the link would look like this: www.mysite.com/images/image.jpg. SO in a relative sense the image is located at “images/image.jpg†from the index.html file.
SO, our image code would start with this <img src=â€path of imageâ€> but with our relative link it would look like this:
<body>
<p>This is some text</p>
<img src=â€images/image.jpgâ€>
</body>
Notice that the image source (img src) has no ending tag? That’s because it’s stand alone.
So this is the very basics of HTML, more to come.
If you are asleep wake up, it only gets worse from here haha. Below is the entire mini-page we created today.
<html>
<head>
<title>This is our title</title>
</head>
<body>
<p>This is some text</p>
<img src=â€images/image.jpgâ€>
</body>
</html>