Hi everybody!

Pablo asked to learn how to make a webpage. I thought I would start a thread on how to write HTML, which is the name of the code that a webpage is written in.

These instructions are for writing HTML on a Windows machine. Sorry, if you have a non-Windows machine, I do not know how to help you.

Writing HTML is complicated. I will give one short lesson at a time. Today we will only create the simplest document possible.

First, you need to create a blank text (txt) file. Go to Start, Programs, and find a program called Notepad. (It may or may not be in the Accessories Section.)

Open up a new Notepad document. Type in these words:

My First Webpage

Click on File, Save As, and save it with this name:

mywebpage.htm

Save it inside of the My Documents folder. Click on File, Exit, and close out the Notepad document.

Open up the My Documents folder. (If you cannot find it, right-click on Start, and click on Explore. The My Documents folder should appear. You should see the mywebpage document in there. (It may be called mywebpage or mywebpage.htm, depending on how you have your computer set up.) Click on and open up the document. A very simple white webpage should open up in your browser, showing the words,

My First Webpage

If anyone has trouble getting through this first set of steps, let me know.

It is time to introduce the concept called Tags. Tags are command that are contained within the < > symbols. For example, let's take a look at our previous sentence.

My First Webpage

We will now put this sentence inside a tag called the title tag.

<title>My First Webpage</title>

Note that the second tag contains a forward slash (making it an ending tag, which ends the tag).

Add the two tags as shown. Save the changes. Redisplay the page (click on the refresh button). You will see how the words "My First Webpage" have now shifted up to the very top of your browser, into the blue stripe.

We will now learn all of the tags, one at a time. Everything in webpages is controlled by tags.

So far, we have one line:

<title>My First Webpage</title>

Let's now add two lines:

This is a Headline.

This is a line of text.

Add these two lines to your document. Save the changes. Redisplay the page. The "Webpage" line will be up in the blue "Title" strip at the top of your browser. The "Headline" line and the "text" line will be displayed in the white area of the webpage. Please note that the "Headline" and "text" lines appear on the same line in your webpage, and are NOT separated onto two different lines, even though they ARE separated onto two different lines in your HTML document (your "mywebpage" document).

Change the Headline line, and add these tags:

<h1>This is a Headline.</h1>

The Headline line now becomes much larger. The two lines are now separated onto two different lines.

We will now learn the <br> or line-break tag.

We already have the line;

This is a line of text.

Let's type another line;

This is another line of text.

We now have these two lines together;

This is a line of text. This is another line of text.

Save the changes. Redisplay the page. The new line will appear.

We will now put in some line-breaks. In your document, move the second line down two lines. like this;

This is a line of text.

This is another line of text.

Save the changes. Redisplay the page. Please note that the second line does NOT appear on a lower line, but still appears on the same line as the previous sentence. In order to move the second line down, you must put in the <br> tag.

Add the tag, so it looks like this;

This is a line of text.<br>This is another line of text.

Save the changes. Redisplay the page. Please note that the second line has now loved down one line.

Practice putting in multiple <br> tags;

This is a line of text.<br><br><br>This is another line of text.

Save the changes. Redisplay the page. Watch how the second line gets moved lower and lower down the page.

It is time to take another look at headlines. Here are some examples:

<h1>This is a number 1 headline.</h1>

<h2>This is a number 2 headline.</h2>

<h3>This is a number 3 headline.</h3>

Add these lines. Save the changes. Redisplay the page. Please note how the different headlines are different sizes.

We will now learn the <center> or center tag. The center tag centers everything between the two center tags.

Previously, we had typed in these three headline:

<h1>This is a number 1 headline.</h1>

<h2>This is a number 2 headline.</h2>

<h3>This is a number 3 headline.</h3>

We will now put center tags around the first headline:

<center><h1>This is a number 1 headline.</h1></center>

<h2>This is a number 2 headline.</h2>

<h3>This is a number 3 headline.</h3>

Notice how the first headline is now centered, while the other two are not.

We will now learn the <hr> or long-line tag. The <hr> tag puts a horizontal line through the page.

Previously, we had this line:

This is a line of text.<br>This is another line of text.

This caused the two lines to be split by a carriage-return. We will now replace the <br> tag with a <hr> tag.

This is a line of text.<hr>This is another line of text.

The two lines of text are now separated by a horizontal line. This is the result we see in our browser:

This is a line of text.

---

This is another line of text.

We can add space between the lines, by adding some line-breaks:

This is a line of text.<br><br><hr><br>This is another line of text.

It now produces this result:

This is a line of text.

---

This is another line of text.

It is time to introduce the <html> and <body> tags. The entire page should be inside <html> tags. The title part of the page should be inside <title> tags. The main part of the page should be inside <body> tags.

Here is an example of a basic page. Paste these into a new page and see how they display.

<html>

<title>HTML 2</title>

<body>

<center><h1>HTML 2</center></h1>

<br>

<p>This is a line with left justification.</p>

<hr>

<br>

<p><center>This is a line that is centered.</center></p>

</body>

</html>

We will now learn how to change the colors of a webpage.

Start a new document. Type in the words:

This is a test of HTML colors.

You will see black letters on a white background. Now, add this to the top:

<body bgcolor="yellow">

This causes the background color to become yellow.

In the previous post, we changed background color to yellow:

<body bgcolor="yellow">

We will now add a phrase which changes the color of the words in the webpage:

<body bgcolor="yellow" text="red">

The color of the text now changes from black to red.

Bold, Italics, Underline

Here is an explanation on how to use these three features. Look at these examples:

Here is an example of <b>boldface</b> text.

<br><br>

Here is an example of <i>Italics</i> text.

<br><br>

Here is an example of <u>underlined</u> text.

Please notice how each of the lines is separated by <br> tags.

Add these lines. Save the changes. Redisplay the page. Please note how the text has changed.

We now return to the topic of colors for text, background, etc. Instead of using words like red, blue, green, etc., we can use six-digit coded numbers.

red = ff0000

blue = 0000ff

green = 00ff00

grey = 999999

light grey = aaaaaa

dark grey = 555555

Take a look at this webpage:

http://www.ficml.org/jemimap/style/color/wheel.html

You will see a color wheel. Pass your mouse over the color wheel. The boxes below the wheel will tell you the six-digit code for that color.

Take a look at this webpage:

http://www.pagetutor.com/colorpicker/index.html

You will see a group of boxes. Click on several of the boxes. The background color will change to that color. Below the boxes are a set of radio buttons. Select different buttons, and you can change the color of the text, background, etc.

Earlier, we had used this code:

<body bgcolor="yellow" text="red">

This is the same code and same colors (yellow and red) using six-digit color-codes.

<body bgcolor="#ffff00" text="#ff0000">

Different size letters

We can control the size of letters. Paste these lines into your HTML document:


<font size=+1>different </font>
<font size=+2> size </font>
<font size=+3> letters, </font>
<font size=-1> etc.</font>

How to make a link

Here is the code that creates a link. This is a link to Google.

<a href="http://www.google.com">Click here for Google.</a>

Please note that you must put the entire address, including the http://.

Add this line to your document. Save the changes. Redisplay the page. Please note how a new link now appears in your web page.

Experiment with this. Change the address to your favorite web page. Re-word the words between the tags.

pop-up links

It is possible to make links that cause the new webpage to pop up, rather than having it appear in the same browser window. Here is an example:

<a href="http://www.google.com" target="_blank">Click here for Google.</a>

embedded Google search-window

Here is some advanced coding. This causes an embedded Google search-window to appear right in your webpage.

<form action="http://www.google.com/custom" method="get" target="google_window">
<FORM method=GET action="http://www.google.com/search">
<INPUT TYPE=text name=q size=55 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Google">
</FORM>

Try experimenting with it, Changing the size=55 to a different number, and watch the size of the box change.

link to a point part-way down the page

It is possible to create a link that will take the reader to a specific line in the webpage, not just to the very top of the webpage.

Paste this into your HTML document:

<br><br>

Click <a href="#alpha">HERE</a> to move down, to the middle of this webpage.

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a name="alpha">welcome to the middle of the page!

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

end of document

When you click on the link at the top, your prowser automatically repositions itself at that line.

You can also use this for people who wish to go directly to that point part-way down the page. For example, if your document is named mypage.htm, set up a link called mywebpage.htm#alpha and it will take them directly to that point.