Basic webpages are built using HTML, or Hyper Text Markup Language. While there are several software packages that will construct the page for you, they do not always code the websites correctly and Internet Assisted biology students are expected to have an understanding of the basic HTML "tags". For these reason, science assignments requiring a webpage will be constructed using Notepad (some exceptions may be made to this).

HTML is not a programming language. The "tags" are codes enclosed in brackets < >. They tell the internet browser how to display information on the webpage. Most tags have a beginning, < >, and an end, < />. The tags needed to construct basic webpages are explained on this page.

Tags displayed here have a space between the < tag function. This space has been added to keep the browser from identifying them as a display command for this page. When building your webpage, do not use these spaces.

• Open the software:

  Click on the Start Menu. Go to Programs > Acessories > Notepad.

• Set up a page:

  PC	Mac
  Once in notepad, copy the html code below. Highlight from html to html. Paste the copied html code onto the blank notepad. You now have the basics for a web page. < html> < head> < title> < /title> < /head> < body> < /body> < /html>	When opened, Cobweb displays a new page with the following standard outline tags already on the page. < html> < head> < title>{title}< /title> < /head> < body bgcolor="#FFFFFF"> < /body> < /html> The page background will be white. If you want another color, change the FFFFFF to something else.

• Add a title to your page:

  Both PC and Mac
  Type the title of your page between this pair of tags < title> < /title>. This short title will show in the title bar at the very top of your browser screen. While a title is not required, do not skip this part. Well constructed webpages will always be titled.

• Place information on your page:

  Both PC and Mac

  All the information for your page will be placed between the "body" tags. This may be done in two ways: Use HTML Assistant or Cobweb as a word processor to type in your page information. If your information is already typed, copy and paste it onto the page. The "begin body" tag for this webpage looks like this: < body bgcolor="#ffffff" text="#000000" link="#ff0000" alink="#ffffff" vlink="#bf0000"> If the tag is left as < body>, the browser will use its own defalt settings for these things. Most webpage builders want to modify at least some of these color characteristics: bgcolor - the background color of the page. text - the color of the print on the page. link - the color of links on the page. alink - the color of the link as it is clicked on. vlink - the color of the link after it has been clicked on.

• Save your page:
  • For Macs, click "file" at the top of the Cobweb toolbar, then "save as".
  • For PCs, click the "save" button at the top of your new page in the HTML Assistant window.
  • For both PCs and Macs, the first time you save the page, you will be asked to give it a file name. Be sure to use the proper file name for your science class.
    • Select your science directory to save the file.
    • Be sure to save the file with the proper assignment name.
    • Use the file extension .htm.
    • When building your webpages, save all .htm files and picture files (.gif or .jpg) in the same folder. This will make life easier for you and your facilitator.

• View your new page for the first time:

  PC	Mac
  After saving, click on the "test" button. HTML Assistant will open the file with the Internet Browser and you can see what your page looks like.	After saving, click on "file" on the Cobweb toolbar, then "preview with browser". Cobweb will open the file with the Internet Browser and you can see what your page looks like.

• Make changes to your page:
  • Look critically at your page. If you find something you want to change:
    • For Macs, use the "apple" and "tab" keys to change back to Cobweb.
    • For PCs, use the "alt" and "tab" keys to change back to HTML Assistant.
  • Make the changes to your page.
  • To save the changes:
    • For Macs, go to the toolbar and choose "file", "save".
    • For PCs, click on the "save" button. DO NOT CLICK ON "TEST".

  • To view the changes:
    • For Macs, use the "apple" and "tab" keys to change back to the browser. Click the browser "refresh" button. You now see the page with changes.
    • For PCs, use the "alt" and "tab" keys to change back to the browser. Click the browser "reload" button. You now see the page with changes.

• A few tags to make your page better:

  HTML Assistant and Cobweb have buttons on the toolbar that will add some of these tags for you. It is to your advantage to try using these buttons to see how they work.

  Make a paragraph:

  • < p>
  • This tag tells the browser to skip a line on the page.
  • It does not require an end tag.

  Stop one line and start a new one:

  • < br>
  • This tag tells the browser to stop the current line and begin a new one.
  • It does not require an end tag.

  Center a line on the page:

  • < center> < /center>
  • Anything between this pair of tags will be centered on the page.

  Make the print on the page bold:

  • < b> < /b>
  • Anything between this pair of tags will be displayed in bold print.

  Make the font on the page Italic:

  • < i> < /i>
  • Anything between this pair of tags will be displayed in italic print.

  Change the size of the font:

  • There are several ways to change font size. This is the most useful.
  • < font size="+1"> < /font>
  • Anything between this pair of tags will be displayed in the font size indicated.
  • The numbers can be increases up to 5 to make larger font.
  • The plus sign can be changed to a minus sign to make the font smaller.

  Change the color of the font:

  • < font color="#000000"> < /font>
  • Text between this pair of tags will be shown in the specified color.
  • Font size and color can be combined in one pair of tags.
  • The color is indicated by the six letters or numbers after the # sign. This is known as "hexadecimal color code".
    • See a chart of the hexadecimal colors.
    • The chart above is from Douglas R. Jacobson. You can find a lot more about webpage developing at his website.

  Change the color of the page:

  • bgcolor="#ffffff"
  • Place this INSIDE the "body tag" at the top of your page.
    • It would look like this < body bgcolor="#ffffff">.
  • Again, you can specify any color by a combination of six letters or numbers.

  Make an ordered list:

  • < ol>
    < li>
    < /ol>
  • This combination of tags defines the ordered list.
  • The < ol> < /ol> pair begins and stops the list.
  • The < li> tag places a number in front of a line of text.
  • Each time you use the < li> tag, a new line begins and the number increases.
  • Numbers are the "default", but you can make the browser display letters by adding this to the tag. < ol type=a> or < ol type=A>

  Make an unordered list:

  • < ul>
    < li>
    < /ul>
  • This combination of tags defines the unordered list.
  • The < ul> < /ul> pair begins and stops the list.
  • The < li> tag places a large dot in front of a line of text.
  • Each time you use the < li> tag, a new line begins.

  Draw a line across the page:

  • < hr>
  • This tag tells the browser to display a line across the page at that point.
  • It does not require an end tag.
  • If you do not want the line to go all the way across the page, you can add:
    < hr width=50%> - Change the percentage as needed.

  Put a link on the page:

  • < a href="URL here"> < /a>
  • This pair of tags defines the link. Anything between the pair will show as a link on your webpage.
  • The internet address of the linked page goes between the quotation marks in the tag.
  • It is possible to make a link to jump from one part of a single page to another.
    • Make the link with: < a href="#key word here"> < /a >
    • Put this tag where you want the link to jump to: < a name="key word here">
    • The same key word goes between the quotation marks in this set of tags.
    • Three of the four links at the top of this page are examples of this.

  Put a picture on the page:

  • < img src="file name here" >
  • This is the basic tag used to put a picture on the page.
  • The name of the picture file goes between the quotation marks in the tag.
  • The location of the picture on the page can be controlled by adding one of the following between the "img" and the "src":
    • align=right - This moves the picture all the way to the right, allowing type to begin at the left of the page and wrap around the picture.
    • align=left - This moves the picture all the way to the right, allowing type to begin on the right of the picture and wrap around it.
    • align=middle - This will allow you to put a line of type centered at the side of the picture.
  • You should make it a habit to also add a text title for pictures on a page. This will allow someone viewing your page to have some information about the picture. Do the following:
    • Between the "img" and "src" add the following ..... alt="___"
    • Your short title or information goes where the blank is above.
    • Whatever is between the quotation marks will show up when someone moves their cursor onto the picture, or if the picture fails to load.

  Put information on the page into a table.

  • The basic table outline is:
    < table>
    < tr>
    < td> < /td>
    < /tr>
    < /table>
  • Tables can be simple, or very complex. The best way to understand a table is to look at the "page source" for some. The tags in the table below will get you started.

    Each of the tags above does the following:
    < table>	Starts the table.
    < tr>	Begins a horizontal row.
    < td> < /td>	Divides the row into columns. Add as many of this pair as you need. This row has 2 columns.
    < /tr>	Ends the horizontal row. If you need more horizontal rows, start with another < tr>. This table has 6 horizontal rows.
    < /table>	ends the table

  • To view the tags used to make this table, click on "view" on the browser toolbar. Then select "page source". You are looking at all the tags used to make this page. To see the table tags, scroll down the page until you see TABLE BEGINS HERE.
  • The DV Biology Homepage, and many other of our pages use tables to control the way information is displayed on a page. You can go to those pages and use "view page source" to see how those table differ.

  Use this page:

  • Every one of the tags discussed are used to display this page. You can get more ideas by viewing the "page source" for the examples on this page.

  Webpage composition:

  • There is a difference between personal webpages that are meant to be pretty or fun and professional webpages that are meant to provide information. All webpages built for your science class are meant to be professional and provide information. You do not want to clutter those pages with unnecessary colors and graphics.
  • Very few webpages in the Internet Assisted biology website have a background color other than white or a font color other than black. The reason is that not all computers display color shades the same way. A combination that looks good on your computer may look very bad on another computer.
  • No pages in the Internet Assisted biology website have background graphics. When graphics are used on a page, they are small and relate directly to the topic of the page. Your science webpages must be built in such a way that even the slowest Internet connection will be able to load them quickly. Cluttering a page with large and unnecessary graphics is one of the most common mistakes people make when building webpages.

Communication Technology Page