Code Punk -- Lesson #1 - The HTML File

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

Home	<Code_Punk>'s Web Tutorials

Website Development and Management

Downloads & Resources

Lesson 1: The HTML File

The Web

The Internet is mostly a lot of files stored on big, interlinked computers called "Servers". What makes the Internet the Internet is the fact that you can go online and download these files. That's where the fun begins.

The Web is a big section of the Internet that handles web pages and related files. The main type of file on the Web is the web page, or HTML file. HTML stands for "HyperText Markup Language". This is the language in which web pages are encoded. There are a lot of markup languages you might have heard of like XHTML, XML, SHTMLand SGML, but HTML is the best place to start. It is the core language of web pages.

Web developers, the folks who make web pages and related code, write and save web pages on their machines and then upload them to the web servers so everyone can view them. People use web "browsers", like Internet Explorer or Netscape, to request and view web pages stored on the servers.

Browsers are very important to web developers because they are the program that renders the page for the viewer. There are differences between browsers and user settings that web developers must keep in mind. We'll be discussing this a lot as we go.

Well, enough of that, lets make a web page:

The HTML File

HTML files contain two things: plain old text and HTML tags. The text is the text that appears as content in the browser window for the viewer to read. The HTML tags format the text, layout the page, present images, make clickable links, and all the other cool stuff you see on the Web. You can type both the text and HTML tags in any text editor. No special software is required.

An HTML tag looks like this:

<html>

A tag is just some text inside "angle brackets". Angle brackets are the "less than" ("<") and "greater than" (">") signs. You can type the "<" by holding down the Shift key and pressing the comma (",") key on most English keyboards. The ">" sign is above the dot (".", or period). Type it by holding down the Shift key and pressing the dot key.

There is no space between the first angle bracket and "html". There is no space before the closing angle bracket, either. In fact, for the first few tags we'll be learning, there will be no spaces in the tags at all.

All HTML tags begin with a "<" and end with a ">". The first word inside the angle brackets is called an element. The element in the <html> tag is "html".

Closing Tags

Most HTML tags come in pairs. The <html> tag is called an "opening tag". It has a "closing tag" that looks like </html>. The only difference between the two is that the element of the closing tag begins with a slash ("/"). This is the slash that's used in fractions and URLs. It is not the backslash ("\"). The slash key is found just to the right of the dot (".") key on most keyboards. All HTML closing tags begin with a "<" followed by a "/".

Everything between the <html> and </html> tags will be interpreted by a browser as HTML code:

<html>

You'll put just about everything in your web page between the HTML tags.

</html>

This is how HTML tags work as a rule: You have an opening and closing tag, and everything put in between the two tags is formatted or otherwise effected by the tags.

Adding The <head> And <body> Tags

Web pages are divided into two sections, each inside the <html> tag set. These sections are called the <head> and <body>

<html>
<head>
Special instructions will go between the head tags.
</head>

<body>
The content that you want displayed will be coded between the body tags.
</body>

</html>

Notice that the <head> is coded first and the <body> last. Also note that they do not overlap. The <head> is opened and closed before the <body> tags are coded.

Both tag sets are "nested" inside the HTML tags. The <head> contains special instructions for the browser. Eventually this is where you'll put your CSS styling and JavaScript. The <body> tags hold the content you want displayed in the screen of the browser (client area).

Adding A <title>

A <title> is a special instruction you can put in the <head> of your web pages. It doesn't show up in the main browser screen (We'll cover that later.) It shows up at the very top of the browser window in the Title Bar. It is also the default text that people will see in their bookmarks/Favorites list if they bookmark your page. Make a <title> like this:

<html>

<head>
<title>My Page's Title</title>
</head>

<body>
Your page's content will go here.
</body>

</html>

I used the generic term "My Page's Title". You'd probably want to make your <title> more descriptive like:

<title>Joe's Fishing Page</title>

<title>Sabrina's Bead Work<title>

These <title>s are much more descriptive and will be a more informative bookmark when a viewer is searching for your page among several bookmarks.

Make Your First Page

It only takes two things to make an HTML file (Web page). First you must use HTML coding. Secondly, you must save the file as an HTML file with the extension .html or .htm.

The outline below is the framework of just about every page you'll write:

<html>

<head>
<title></title>
</head>

<body>
Your page's content will go here.
</body>

</html>

This is all the code you need to know to make your first page. You can type in whatever text you want to between the <body> tags and it will appear in the screen of your browser. Below is a walkthrough of making your first web page. Get these procedures down well. You'll be using them often.

1) Open your text editor. This is a program like Notepad or SimpleText.

2) Type in the code above. This is the basic framework for just about every web page you'll write. Don't just copy and paste. Practice using the all of the symbols and making tags yourself.

3) Now click File and then "Save As.." from the menu that drops down.

4) The Save As dialog box will appear. Notice the two long text boxes at the bottom of the dialog box. The first one is where you'll type in a name for your file. The bottom one is where you'll select the File Type by clicking the little triangle to the far right of the box.

5) First, click in the first textbox and give your file a cool name. Next, click the triangle on the far right of the File Type box and look at the options. If your text editor has an HTML or HTM option, select it. Now find a place to store your file on your hard drive and click the Save button.Remember where you saved your file. You'll need to find it to view it.

5a) Many text editors, like Notepad, don't have an HTML option in the File Types list. In this case select the "All Files" option. Now go back to the file's name and add a dot (".") followed by either "htm" or "html". The filename would look like this: myfile.htm or myfile.html. This will have the same effect of saving your file as an HTML file. The whole point is to save the file as an HTML file and not a text (.txt) file.

Now open this new HTML file in your browser. Open your browser and click File and then Open. Find your HTML file and open it. You don't see to much, but this is a bona fide web page. Click here to see what this simple page looks like. This will open in a new window.

Look up this file in your file manager and you'll notice it is a bona fide HTML file. It will have an icon associated with your browser and not your text editor.

To open the HTML file in your text editor so you can edit it and add things, just open your text editor and click the File|Open options. Now find your file, click it, and click the Open button.

Learn these processes of saving and viewing files well. You'll be using them often. Master this before finishing this lesson.

Now lets learn how to whip that text into more organized formats...

Continue To Lesson 2 -- Formatting Text >>>

<<< Back To Beginning HTML Index

<Code_Punk>'s Web Tutorials