Skip to content

web building tutorial

HERE IS THE HTML CODE FOR YOUR FIRST SITE:

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<p>
<a href=”http://www.justinhoffman.net”>OUR CLASS PAGE</a> This is a link to a page on this website.
</p>

<p>An image from W3Schools:</p>
<img src=”http://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com” width=”104″ height=”142″ />

</body>

</body>
</html>

WEB BUILDING TUTORIAL

—————————————————————————–

An HTML document contains two major sections: head and body.

Generally speaking, the head contains information about the document, which is mostly not seen by the user. The body is the actual document which shows up in the browser.

Here is the most basic of web pages:
<html>
<head></head>
<body></body>
</html>

Hoo buddy. That is basic.

Note some key things: HTML tags are written inside of angle brackets, always in lower case, all tags must open and close, and the close tag is the same as the open tag, but with a backslash.

To spruce it up, this we’ll add a page title, like so:

<html>
<head>
<title>Basic as I wanna Be</title>
</head>
<body>
</body>
</html>

When this page is called up, the title is shown in the top of the browser window. (It does not show up in the main part of the page.)

To get really fancy, we now add content into the body of the page:

<html>
<head>
<title>Basic as I wanna Be</title>
</head>
<body>

<p>Web Page Content! Yeah!!!</p>

</body>
</html>

Another key thing: if you put text in the body without tags, it will show up. But you should always enclose text with meaningful tags. (This is an XHTML rule — more on that later on…) In this case, we used the paragraph tag.

To complete our journey up the basic ladder of fanciness, we now add an image to our document with an IMG tag, like so:

<html>
<head>
<title>Basic as I wanna Be</title>
</head>
<body>

<p>Web Page! Yeah!!!</p>

<img src=”http://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com” width=”104″ height=”142″ />

</body>
</html>

Note that the IMG tag ends with a backslash to close it — this is an XHTML rule for tags that don’t have a close tag (Again, more later.)

The SRC part of the tag gives the address of the image file. In this case, that’s just the file name. This means that the HTML document and the image are both in the same directory. If the image file were in a sub-directory called “images,” it would look like this:

<img src = “imgages/boom-bip.gif” />