MSU Kendo Club

-WEBPAGE MAKING INSTRUCTIONS PAGE-

Hello, and welcome to our page that will teach you how to add a webpage to the MSU Kendo website using any Windows based personal computer. This page is made for those who have never made a webpage before or it can be used by those who know a lot about making websites.

What do i need to make a webpage?

How do i get started on making the webpage?

  1. First, you need find the template file and open it in your web-browser. This will allow you to see the changes that you are making. To do this double left click on the "template.html" file icon that you have and it will open in a browser.
  2. Second, open the template file in notepad. This will allow you to make changes to the template file and add the necessary text, images, or links you need. To do this, right click on the "template.html" file icon and choose the "open with" option. If notepad is not on the list, then click on "choose program" and then find notepad.
  3. Now that you have the html file open in notepad, you will see the "magic" coding that makes that text file turn into a webpage.
  4. At the very top of the file there is one line which has <HTML>. This is an opening tag. Any codes that are needed to do stuff in html require the less than (<) and greater than (>) signs around them in this fashion. This is also called a "tag". Almost all of the opening tags need a similar closing tag, such as </HTML>.
  5. After the html tag, there are a few other types of tags on the template but they are not of our concern, as they are too complicated.
  6. Look for the spot that says <!--Below is the title that appears at the very top of a browser window-->. This is called a comment and is something that is not be displayed on a webpage, but can be seen in a program like notepad. All comments are started with a "<!--" and end in "-->", without the quotes. Below the tag, is the code for the title and you can replace the text between the tags with whatever you wish. This will appear at the top of the browser window.
  7. Then, scroll down a little until you see <!--anything that you wish to put on this template needs to go between here and the END comment below. Thank-you.-->. The space below that tag till the tag that says <!--END--> is where anything you want to include in the webpage will go.
  8. Now that we have decided on where we will type at, we can discuss changing the typing. We can produce more than just words on a webpage. The things that appear on many other websites are accomplished using other tags. Below is a table showing some common tags and their meanings and uses. All of these tags do what they say to the text that they inclose. A better explanation appears below.
Tag
Meaning
Use in Notepad
<p>, </p>

Designates a paragraph, makes 1 line before and after the text.

 <p>Hello my name is bob.</p>
<br> Designates 1 line, inserts a return.
Using multiple break tags can create some blank space.		 First line.<br>Second line.
<b>, <b> Bold. Makes the text stand out. <b>Bold</b>
<u>, </u> Underline. Underlines the text. <u>Underline</u>
<i>, </i> Italicize. Slants the text. <i>Italicize</i>
<center>, </center>
Center. Centers the inclosed text.
 <center>Center</center>
<h1>, </h1>
<h2>, </h2>
<h3>, </h3>
<h4>, </h4>
<h5>, </h5>
<h6>, </h6>
 Header. Titles, basically bold text of different sizes.

Size 1

Size 2

Size 3

Size 4

Size 5
Size 6
 <h1>Size 1</h1>
<h2>Size 2</h2>
<h3>Size 3</h3>
<h4>Size 4</h4>
<h5>Size 5</h5>
<h6>Size 6</h6>
<hr> Horizontal Rule. A line like below.
 <hr>
  1. Those are all basic codes that anyone would be using when typing a letter or using a word processor. Html just requires you to tell the computer what to do. You just do this by typing, not clicking on a button like in Microsoft Word or something. You may not be used to this but a little practice and playing around will help out a lot. All the codes above do exactly what they say. The codes have to appear with a starting tag and closing tag like the diagram shows, unless no closing tag is shown.
  2. LINKS - If you want to insert a link do this. First, type <a href="">. Inside the quote marks type or copy and paste the website address or page that you are linking too (example: "http://www.google.com/"). Then type the word that you want the link to appear as after the tag (example: google homepage). Then type a closing tag of </a>. A full example is <a href="http://www.google.com/">Google Homepage</a>. This would appear as Google Homepage. Any type of file can be inserted inside the quote marks. But links are most common.
  3. PICTURES - If you want to insert a picture do this. You should probably use images that you have saved rather than linking to images on the internet. To do this, right click on an image you want on any website, and select save as. Save it to the folder or place you have stored the template.html file. First, type <img src="">. Inside the quote marks type or copy and paste the name of the image you have stored (example: "google.jpg"). The most common image files are .jpg and .gif.
  4. SAVING - When you are done, save the file as whatever name you want or are told to name followed by ".html" (without quotes).
  5. Finally, send the html file you created, along with any images or other files you have included in the website. You are all done after this is complete.

How can i learn about advanced html?

Made by Chris Meyers on 3/2/2005.