HTML Basics
Learning how to build website could be a tricky thing if you don’t understand the basics. I will try to describe how a website works and the basic HTML tags that are used to declare different text formats.
A Website contains files that are pulled up and interpreted by a web browser. Just like you have a .doc file in your documents folder on your hard disk and Word is the application that is pulled up when you double click on the file. An .htm or .html file is a file Internet Explorer (IE) or Firefox web browsers can pull up. You can save the website .htm file to your hard disk by going to any web page and going to the File menu then “Save As..” Then you can latter open the file with a web browser directly from your hard drive.
Now this may seem a little simple talking about it this way and you may or may not notice that when you save a website to your hard disk it does not open the same as when you viewed the page off the website.
Now there are a lot more things that go into this but mainly speaking a websites .htm file is a Text file, meaning it does not contain graphics, just text. Graphic files linked with the <img> tag. Not to get ahead of myself but HTML files are more then just text files the web browser interprets what are called “Tags” as how the text is formatted and what it links to or what should be linked into the web page such as graphics files.
To begin with “Tags” determine how a web page will be formatted in the web browser. The <img> tag will tell the web browser there is a image to be inserted in this web page and it should be displayed (unless you manually turn that feature off, images will be displayed by the web browser). There are a few more things that go with the tag, each tag is started and end with a “/”.
Lets start off with something simple.
Say I want to insert an image here:
I have to insert this command into my HTML file:
<img src="/files/u52/yellow_box_blue_smile.jpg" alt="Yellow Box Blue Smile" />
Now you see the image name is yellow_box_blue_smile.jpg the location on the website is /files/u52/ the alternative name is “Yellow Box Blue Smile” The tag starts with a <img ends with a “/>” this is how most tags in html look what is contained inside information of how to effect and what is effected.
Ok, here is another one, the anchor tag <a>. This is what hyper linking is all about, placing this with a destination as a href will send the page to another page, like this:
<a href=”http://www.w3schools.com/tags”>w3schools html reference</a>
That gives you this link:
w3schools html reference
As you can see it starts with an “<a” and ends with an “/a>” this makes it another tag that links you to the page on tags from the W3Schools. See that page for all the types of tags that are out there and how they work.
Now lets put them together
Lets make a image link to something with this code:
<a href=”http://www.w3schools.com/tags”><img src="/files/u52/yellow_box_blue_smile.jpg" alt="w3schools html reference" /></a>
It looks like this:
we can see this image is now clickable and links to the W3Schools.
Now there are other tags to know about,
they are listed in the on the W3Schools sort by type click here and look at the basic types first html files start off with <html> then <body> then your content which contains <p> paragraphs </p> and <br /> line brakes and don't forget to end your commands with </body> then </html> a simple page would look like this:
<html>
<body>
<p> This is the start of my paragraph <br />
next line
</p>
</body>
</html>
This simple page can be found http://pcugsj.org/files/u52/sample.html
Understanding HTML is one step into understanding how web browsers interpret data given to the user. There are many other items web browsers use such as Java and CSS. Also there are server side technologies that deliver special HTML pages that are delivered on demand such as PHP and ASP. But if you understand the basic HTML you will be able to move on to more complicated topics.
Written by:
John Goliash
Web Design SIG Leader
PC Users Group of South Jersey
Delicious
Digg
Technorati- Login to post comments