| So you want to make a web page, huh? It's easier than you think.
HTML is a very simple language. Now we are not going to get into
the specifics of HTML here; the point of this is just to show you
how to make a very basic web page.
Basic Steps to Making a Website
- Open any text editor.
- Windows - Notepad is a free text editor that comes
standard on all versions of Windows. To find it, go to Start
Menu -> Programs -> Accessories -> Notepad
- Unix - There are many text editors freely available
for Unix (or Linux). Werecommend either emacs or pico.
- Macs - SimpleText is the default text editor on the
Mac. Mac users eventually might want to download BBedit
Lite, a more powerful, and free mac text editor.
- Write your HTML code. (The steps below will show you how to
do this part.)
- Save as a .html file. That means that you are going to save
the code you just wrote with a ".html" file extension. The file
extension is used to determine which program will open the file.
In this case, we want to open our file with a web browser.
- Open your file with a web browser.
- Optional - Upload your file to a web server. If you have space
on a web server, you can put your file on the web for anyone to
see. You can use any FTP program to transfer (upload) your file.
We recommend a SSH secure file
transfer client.
*** NOTE: You could also use a program specifically made for writing webpages such as Macromedia Dreamweaver or Microsoft Frontpage. However, these programs hide the basic HTML from you. We believe that it is important to understand the basics of HTML so that you can control the changes you want to make. Once you start writing HTML, you'll see how easy it is and that you don't need to spend the money on these fancy programs.
Tags
The most important thing to understand is that everything in HTML has a "tag". You can recognize these tags because they are always in between < >. For every tag, there is a corresponding closing tag. You can recognize closing tags because they always look like </ >. Everything between the opening and closing tags is a part of that tag. So the title of the page (the name on the top of the browser) is everything between the <title> tag and the </title> tag. This will make more sense with an example.
Here is a basic web page - basic website. To download it, right-click on the link and choose "Save Target As".
The same code is shown below:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
</body>
</html>
In the code above, each tag has a meaning. Whenever you create a webpage, you should have all of the tags listed above (you can also add a lot more in the body). The <html> tag tells the browser that the following code is in the HTML language; this needs to be on your first line. The closing html tag, </html>, should be the last line of your page. All of the content for your site (i.e. what you want to see on the screen) should be put between the <body> and </body> tags.
Tag Attributes
Each tag also has a number of different attributes that can be set in the opening tag. For example, if I want all of the text on my page to be in the Arial font, the i would say <p font="Arial">. This would affect all text until the </p> tag (p stands for "paragraph").
Here is an example of centering a paragraph of text - center.html. The same code is shown below:
<html>
<head>
<title>Applet example</title>
</head>
<body>
<p align=center>
This is my centered text.
</p>
</body>
</html>
Adding an Applet to your website
Like everything else in HTML, Applets have their own tag. The Applet tag looks like this <APPLET>. There are a few required attributes that you must set everytime you use an applet:
Code - filename of executable code (.class file)
Width - width of the window to open for the applet
Height - height of the window to open for the applet
Here is an example of an HTML page with an applet - Applet Page. To download it, right-click on the link and choose "Save Target As". The same code is shown below:
<html>
<head>
<title>Applet example</title>
</head>
<body>
<center>
<H1 >Applet Title</H1>
<applet code="HelloWorld.class" width=200 height=50></applet>
</center>
</body>
</html>
More info
For more information check out the HTML tutorials on our Other Resources page.
|
