How to create a webpage

Paragraph Format

Now that we've learned about some of the buttons, let's use them to create a practice page. First we'll create a heading for our page. From the paragraph format drop-down list select "Heading 1."

Selecting Heading 1

Then type "This is Heading 1" and press Enter. As you can see, heading level 1 is a very large size heading. Try doing the same to create other size headings (eg. On a blank line select "Heading 2" then type "This is Heading 2" and press Enter). The bigger the number gets, the smaller the heading.

Headings

To type regular text, just select either "Body Text" or "Paragraph" from the Paragraph Format drop-down list. The difference between "Body Text" and "Paragraph" is that "Paragraph will put a little space after each paragraph (each time you press Enter) while Body text will not. To try it out, select "Body Text," type something, press Enter, then type something else. Do the same with the "Paragraph" setting.

Body Text vs. Paragraph

 

Alignment

Now let's play with the alignment a little. I imagine that you're pretty familiar with alignment from word processing programs. Try changing the alignment of the headings that you created earlier. Click to get your cursor in the line that you want to change, then click on the alignment button of your choice.

Note: The "Align Justify" button will only justify text if you have a whole paragraph of text.

Alignment

 

Colors

Next, we'll change the colors on your page. When you click on the upper box in the color button you change the text color, while box underneath changes the background color.

Color Buttons

You will be changing the color of the text or line(s) that you have selected. If you want to change the color of only one word, double click on the word and then change the color. If you want to change the color of a whole line of text or a paragraph, select it and then change the color. To change the color of the whole document, select the whole document using Edit, Select All from the menu bar or Ctrl and a. Play around with these buttons a little on your practice page in SeaMonkey.

Note: You cannot change the background of only one word, only the text color. If you have one word selected and you change the background color, it will change the background color for the whole line. If you want to do one word, try the highlighter button instead. Select the word or words and then click on the Highlighter button.

Highlighter Highlighter

 

Font Size

To change the font size of text, use the font size buttons.

Font Size Buttons

Let's try it. Go to a blank line or press Enter to create a blank line, select "paragraph" or "body text" as the paragraph format. Type a word, click on the Make text bigger button to enlarge the text, then type another word. If you want to change the size of text that has already been typed in, you'll need to select it and then use these buttons. Play around with the font size buttons a little on your practice page in SeaMonkey.

Big Text

 

Bold, Italic Underline

Do I really need to explain these? I imagine that you're quite familiar with them from word processing. Just in case you aren't, here's what the kind of text looks like.

Bold Italic Underline

You can select one of these before you type in the text or select text on the screen and then click on the button to change it. Actually, it's not a very good idea to use underlining in a website because people might confuse it with a link since links are always underlined. Try changing the appearance of text on your practice page using these buttons.

 

Lists

There are two kinds of lists you can create on a website. You can do a bulleted list or a numbered list.

Bulleted List

  • Item 1
  • Item 2
  • Item 3
     

Numbered List

  1. Item 1
  2. Item 2
  3. Item 3

These buttons work the same as they do in a word processing program. You can click on the button to select the kind of list you would like before creating the list or select a list of items and then click on the button. Try making two lists, one of each type, on your practice page in SeaMonkey.

 

Indenting

Again, these buttons work as they do in a word processing program. The indent button moves the paragraph(s) in a little while the outdent moves it back out (after it's been indented). If you click on the indent (or outdent) button more than once, it moves the paragraph(s) over more.

Indent & Outdent Buttons

This is an example of an indented paragraph. This is an example of an indented paragraph.This is an example of an indented paragraph.This is an example of an indented paragraph.

Try writing a paragraph in your practice page in SeaMonkey and then indent and outdent it.

 

Saving a page

Finally, we're ready to save your practice page. Click on the Save button.

Save Button

SeaMonkey will prompt you to give a title to the page. The title of a webpage is not a filename. It's what appears at the very top of the Browser Window. It tells the visitor to your site what the page is about. For example, the title to this page is "Your first webpage - Teachers' Websites Online." You should see it at the top of your browser window right now. I always put the name of the page, a hyphen, then the website name, but you can do whatever you want. For this practice we'll just put "Practice Home Page" as the title. Type "Practice Home Page" in the Page Title Dialog Box (pictured below) and click on OK.

Title Prompt

Next, another dialog box will appear. It is prompting you for a filename and a location to save the file. To select the location to save the file, select "Browse Folders" (In the lower left corner of the dialog box that popped up). Find the folder where you want to save this file. It's a good idea to have a separate folder for each website that you create. If you want to create a folder inside another folder right now, you can right click, select New, then Folder. Then give your folder a name and press Enter. The folder will automatically open up for you. Now you can save the file inside it. Since this is going to be our home page for our practice site, we'll need to name it index.html. Home pages need to always be named index.html. Actually, if you don't add the extension ".html" the program will automatically add it for you when it saves the file.

 

Congratulations! You created your first webpage!

 

Back HomeNext

 

Recommend this site to your friends!