Since I've decided to revitalize this website, I've been working for years building web sites, developing apps and I figured
it's a good time for me to give back to the web community by sharing my knowledge. I don't even really know where to start, I
have so many scripts lying around my computer but I figure it'll be faster to start with the basics and simple scripts.
One of things that bothers me the most is how often designers and developers lean on web developing programs to do all the
HTML work for them. Don't get wrong, these programs are amazing and can really help speed up your web page design and assist
you in building a great website.
But every now and again there'll come a time when you're going to need to add some code to your website, or edit some paths
in your image tags, or maybe change a JavaScript code snippet. Having some basic knowledge of HTML can save you both time and
hours of frustration. I've seen it first hand, a webmaster will ask me for help with his webpage after he/she spent hours
trying to fix, and it was a matter of a one simple line of code.
In Today's lesson I will cover your basic ingredients of a webpage, how to code a hyperlink, and how to code an image.
Your basic web page consists of the following code:
<HTML> --- Begins the web page.
<HEAD> --- Header tag. (usually where you place your javascripts and css tags)
<TITLE> --- TITLE OF YOUR WEBPAGE (appears in browser and key to search engine listing.) </TITLE>
</HEAD> --- end header tags
<BODY> --- Start your web pages BODY copy, text, images, etc...
</BODY> --- End your web page BODY.
</HTML> --- End your web page HTML
Open any simple text editor like Windows Notepad and enter the code above. Save the file as "test.html" to your desktop or
where ever you'd like. Open your newly created file with your favorite web browser, IE, Opera, Firefox, etc..
Now that we have our basic web page built, let's add a hyperlink. Adding a hyperlink is pretty straight forward. The code for a hyperlink is as follows:
<a href="PAGE OR WEBSITE WE'RE LINKING TOO">YOUR TEXT HERE</A>.
A hyperlink takes the user to another page on your website, another part of your webpage (a.k.a anchors), or a different
website all together.
Open your test.html webpage and enter in the code above or simply add the following code after the <BODY> tag of your
webpage. <A href="http://thescriptcenter.com">TheScriptCenter</A>. Save the file and re-open it in your web
browser. Now that we have a basic web page and hyperlink, lets add an image.
Images are a little more tricky. One of the biggest mistakes people make with images is not so much the code is the path
to the image is wrong 9x out of 10. The html code for an image tag is as follows:
<img src="PATH TO IMAGE WE'RE LINKING TOO">. For this example we'll use the following image:
Right Click your mouse over the image above and select "Save Picture As" IE users, or "Save Image As" firefox users. Save
this image to the folder or desktop where you created your test.html webpage.
Open your test.html webpage and enter in the code above or simply add the following code after the <BODY> tag of
your webpage. <img src="windows_notepad.gif">
And There you have it! You've now created your first webpage, with a hyperlink and image all on your own! Learning basic
HTML can save you both time and money in the long run. In my next article I'll cover some more advanced HTML coding.
http://thescriptcenter.com
Jason Russo specializes in website design, and programming
for the web.
This article may be reproduced in its entirety providing this
resource box is included.
Bookmark /Share
Favorites
Delicious
Digg
Google
Reddit
StumbleUpon
Yahoo!