Maui County Council, Boy Scouts Of America
Scouting In Paradise



Communications Merit Badge: Web Page HTML Example

Towards meeting Requirement 7b, here's a step-by-step example of how a very simple web page is coded. If you're using a word processor, save the resulting document as text only, otherwise use Notepad for Windows, or SimpleText or TextEdit on the Macintosh.

1) First, you let a browser know this is a webpage, and add a bit a text so that the person using the browser has something to read: 

<HTML>
  <BODY>
  <P>
    John's web page
  </P>
  </BODY>
</HTML>
2) Then, add a page title that'll appear on top of the browser window: 
<HTML>

  <HEAD>
    <TITLE>John's Web Page</TITLE>
  </HEAD>

  <BODY>
  <P>
    John's web page
  </P>
  </BODY>
</HTML>
3) Center your text: 
<HTML>
  <HEAD>
    <TITLE>John's Web Page</TITLE>   
  </HEAD>
  <BODY>

  <CENTER>

  <P>
    John's web page
  </P>

  </CENTER>

  </BODY>
</HTML>
4) Add a paragraph: 
<HTML>
  <HEAD>
    <TITLE>John's Web Page</TITLE>
  </HEAD>
  <BODY>
  <CENTER>
  <P>
    John's web page
  </P>

  <P>
    I have more to say!
  </P>

  </CENTER>
  </BODY>
</HTML>
5) Add a link to another page that expands on your topic: 
<HTML>
  <HEAD>
    <TITLE>John's Web Page</TITLE>
  </HEAD>
  <BODY>
  <CENTER>
  <P>
    John's web page
  </P>

  <P>
    I have more to say <a href="http://www.htmlhelp.com">about web pages</a>!
  </P>

  </CENTER>
  </BODY>
</HTML>
6) Add a picture. The picture could be on our web server, or another web server: 
<HTML>
  <HEAD>
    <TITLE>John's Web Page</TITLE>
  </HEAD>
  <BODY>
  <CENTER>
  <P>
    John's web page
  </P>
  <P>
    I have more to say <a href="http://www.htmlhelp.com">about web pages</a>!
  </P>

  <P>
    I have a picture that illustrates my topic
  </P>
    <img src="http://www.mauitroop22.org/images/Maui_County_Council_patch_small.gif" alt="Maui Council Patch">

  </CENTER>
  </BODY>
</HTML>
7) Let's add a link back to our troop home page: 
<HTML>
  <HEAD>
    <TITLE>John's Web Page</TITLE>
  </HEAD>
  <BODY>
  <CENTER>
  <P>
    John's web page
  </P>
  <P>
    I have more to say <a href="http://www.htmlhelp.com">about web pages</a>!
  </P>
  <P>
    I have a picture that illustrates my topic
  </P>
    <img src="http://www.mauitroop22.org/images/Maui_County_Council_patch_small.gif" alt="Maui Council Patch">

  <P>
  <a href="http://www.mauitroop22.org/index.html">Home</a>
  </P>

  </CENTER>
  </BODY>
</HTML>
8) That's it. Save the page with a name like "john.html", and try to open it with your web browser to see if it looks ok. If it does, cut and paste the code into an email to your merit badge counselor, and either send the picture(s) you use as attachments via email, or just provide him/her with the link, if the picture is elsewhere on the Web. (Note to Troop22/Kihei: This means Asst. Scoutmaster Carl, cmholm 'at' mauiholm 'dot' org)

For a slightly more useful example of HTML and the Communications Merit Badge, refer to our page reporting on Requirement 5, Attend A Public Meeting.