A Guide to Beginning Your First
Web Page
To create an web page you will need to know basic
HTML
programming. HTML programming is quite easy once you learn some simple
rules and tools. This is a guide to the basics of HTML and some basic
code to create things such as links and show pictures on your page. To
learn even more, please see the related links on the left hand side of this
page. Files:
A webpage can have several different file
extensions, this guide will only cover the .html extension.
There are several programs that are designed to create
web pages, but for this guide we will show you how to work with just plain
text coding. All that is needed for this is a plain text editor.
The plain text editor described in this guide is Notepad. Notepad
comes with Windows and can be found by clicking on Start > Accessories >
Notepad.
Basic Code Rules:
There are several basic rules when coding in HTML.
- The file names are case-sensitive. This
means that a P is different than a p and so
on. So when writing your code you will need to pay specific
attention to the case. Most web programmers only use lower case for
everything to save on confusion.
- All HTML commands are wrapped in < >
signs. This helps the HTML interpreter distinguish the code from
actual text on your page.
- All "open" commands must be followed with a closed command. The
item in between the command is what the command will manipulate. The
actual closed command is preceded with a / this keeps
the HTML interpreter from thinking it's another open command.
|
Open/Closed: |
|
<title>This is my page title !</title> |
|
<title> |
This is the Title
command. It is "Open" now. |
|
This is my page title ! |
This is the text the
Title command will manipulate. |
|
</title> |
This is the Title
command in it's "Closed" state which means anything after this will
not be considered part of the Title. |
Basic Syntax for common Code:
Following is examples of pieces of code to use on a web
page, a brief explanation of what they do and an example.
|
Examples of
basic HTML code: |
| Code: |
Explanation: |
Example: |
| <html> |
This code needs to be at the
top of each of your pages. The closed version will be the very
last tag on your page. |
NA |
| <head> |
This code
tells the web browser that the information contained in it is part of
the page, but not for display. Special commands for the page such
as JavaScript are placed in the <head> command. |
NA |
| <title> |
This code adjusts the text
that is displayed in the title bar of the visitors web browser.
This line of code is placed in the <head> code. |
<title>Welcome to my
page</title> |
| <body> |
This code
tells the web browser that everything within it is to be placed on the
body of the page to be displayed for the user. |
NA |
| <p> |
This creates a single page
break. No closed version of this is needed. |
This is some text.<p> |
| <a href=" "> |
This code creates a
clickable link to another page or image on your website. Specify
the destination of the file you are linking to between the quote marks. |
<a href="http://www.google.com">
Click Here to visit Google</a> |
| <img src="
"> |
This code
will display a picture on your web page. This code does not need a
closed tag. Specify the exact file location between the quote
marks. |
<img scr="http://support.neobright.net/images/flag.gif"> |
| <a href="mailto: "> |
This code will create a link
on your website that when clicked it will open their e-mail with the
address you specify. To create a link to e-mail you, specify your
e-mail address after mailto: and before the last quote mark. |
<a
href="mailto:help@neobright.net">Click Here to E-mail Airstream
Support</a> |
|
* Remember all
Commands have to be followed with the closed version of the command.
The closed command has a / in front of them. See the
previous section for more help with this. |
Basic Website:
Below is an example of a basic webpage for you to try.
Open up your plain text editor, such as notepad, copy and paste the
information below into the program and save the file as index.html
on your desktop. Then upload it to your
account. Once there you can view your website by opening your
web browser and typing the following address:
http://www.bright.net/~username (where username = your
username). Copy the following into your text
editor:
<html>
<head>
<title>Welcome to my first web page !</title>
</head>
<body> Welcome to my very first website.<p>
<a href="http://www.google.com">Click here to visit
Google.com, it's a great search engine.</a><p>
Now that I know the basics of web coding, I will be updating this page in
the near future, please stop back. </body>
</html>
|