Eddye Shropshire HTML Tutorial

Welcome...

The Basics

Before we get started, I want to explain my approach. Good practices state that you should use HTML and Cascading Style Sheets (CSS). I did that on this site. But it can be confusing. So I am going to show you how to build your HTML first and then I'll show you how it should be modified using a CSS.

Building a Web Page is a lot like building a model car. There are certain basic parts that are required - frame, engine, steering wheel, etc... The same thing is true about building a web page.

All web pages start with:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title></title>
</head>
<body>

YOUR PAGE TITLE, INFORMATION, PICTURES, ETC... GOES HERE

and ends with:

</BODY>
</HTML>

So how do you start? Using a text editor (like Notepad on a PC), start typing. When you are finished, save the file with the file extension of .html. Now when you double click on the file you just saved, it will load your browser and show your work.

Below are the minimum required basic elements (tags) that are necessary to build a web page.

<html>   (Document Type)

<head>   (descriptive info, such as title)

<title>   (The Title - Doesn't show up on your page)

</title>   Ends the TITLE)

</head>   (Ends the HEAD)

<body>   (Where everything you want shows up)

</body>   (Ends the body)

</html>   (Ends your document)

NOTE: Notice that tags (<...>) end with a slash (</...>).
Example: <HEAD> </HEAD>
What they represent:
<HTML></HTML>
This starts all web pages and identifies that this is a html document
<HEAD><HEAD>
The head element identifies the first part of your HTML-coded document that contains the title.

<TITLE></TITLE>
A title is used to identify your page for search engines. The title is typically displayed in the title bar at the top of the browser window, but does not show up on your web page.
<BODY></BODY>
The second--and largest--part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window).

Below is the coding for a simple one-line web page heading.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title></title>
</head>
<body><h1>This Is My One Line Web Page<h1>
</body>
</html>

Copy this into the box below to see what it would look like.

Well, wasn't that exciting?

Yeah, well, I didn't think so either but it is a start.

Did you notice that the heading isn't centered. The default is left justified.

So to center in native HTML we would add the <center> tag just before the heading.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title></title>
</head>
<body><center><h1>This Is My One Line Web Page<h1></center>
</body>
</html>
Copy this into the box below to see what it would look like.

So let's begin with this one line and make changes and see what we can come up with.

Click here -> to get started developing your page.

Hosted by www.Geocities.ws