09:23
Getting Started
HyperText Markup Language (HTML) is the primary building block of creating a website.
HTML is a very basic markup language and requires memorization of a few
dozen HTML commands that structure the look and layout of each of the
web pages. Before writing any HTML code or designing your first web
page, you must decide on an HTML editor or text editor such as Notepad, WordPad, and even Microsoft Word. What ever editor you decide on using can change if it isn't working for you.
Once
you have obtained an HTML editor and are ready to begin setting up your
website, think about how you want the page to setup or look, maybe even
draw out your ideas. Below, are some early considerations to think
about when designing your web page.
- How are you going to store all the files? Are all the files going to be in the same folder or directory? If you plan on having lots of different pictures and files its recommended that you store the pages, files, and pictures in separate directories.
- Are the HTML files going to be stored as .HTM or .HTML files? There is no advantage or disadvantage of going with .htm or .html; However, it is a good idea to stick with the same extension.
- Do you plan on having a template for the page? Are all the pages going to have the overall same look and feel?
- How is the navigation going to be handled? Do you feel its better for the navigation menu to be on the left, bottom, or top of each page?
Tip:
Realize that your web page will change over time as you find things
that don't work. Over the life time of Computer Hope we've changed our
complete site several dozen times.
Writing basic HTML
After installing an HTML editor and setting up a
folder you are ready to begin creating your page. Begin by creating a
file named index.htm or index.html, this will be your start page. All
servers on the Internet look for an index file if no file is specified.
For example, when typing http://www.computerhope.com, the server is really accessing http://www.computerhope.com/index.htm.
Once you are in the blank index.htm or index.html file, we recommend inserting the below source code into your page. Some HTML editors may automatically place this code in your page for you. If this is the case, or you have a WYSIWYG
HTML editor that allows you to design the page and not create the HTML,
you can skip to the next section if you're familiar with what this HTML
means.
Your web page content goes here
The above code is a very basic example of the code that helps make up
every web page. As you can see, the section starts of with ,
which is defining that everything within is HTML code.
Next, you have , which is defining the heading of your HTML
document. Third, we have the section within <head>,
which titles this page being shown. Finally, the <body> section is
what contains what is shown on the web page.</p>
<p class="tab">
Below,
is additional code that can be placed in the <body> section of the
code to help familiarized you with some of the most commonly used HTML
commands.</p>
<p class="tcy tab">
<center>
<h1>
Welcome to my web page</h1>
</center>
<br><hr>
<br><br><br>
<p>
Hello and welcome to my first website.<br><br><br>
<b>These are my favorite links:</b><br><br> <ul><br>
<li><a href="http://www.computerhope.com">Computer Hope</a></li>
<br>
<li><a href="http://www.google.com">Google</a></li>
<br> </ul>
<br>
</p>
</p>
<p class="tab">
As you can see from looking at the above code, you
will realize that the basic HTML commands are fairly simple to use.
First, we start off with <center>
; this is telling the browser to
center the information within these tags. Next, the <h1>
or
heading one statement, which tell the browser to display the text in the
largest heading. Next, the <hr>
tag tells the browser to display a
line straight across the screen. The third line contains <br>
that creates a break on the page. Next, the <p>
is short for
"paragraph" and helps separate the text in the page. Next, the <b>
tag is short for bold and will bold the text contained with the tag. In
the next section the <ul> starts a <a href="http://www.computerhope.com/jargon/b/bullet.htm">bullet list</a>
and each bullet is represented by the
<li> tag. Finally, the "a
href" tag is a method of creating a link to another location, in this
example we are created a bulleted link to Computer Hope and Google.</p>
<ul>
<li>See our <a href="http://www.computerhope.com/learnhtm.htm">HTML and Web design help page</a> for a listing of HTML commands and related content.</li>
</ul>
<h2>
<a name="03"></a>Viewing the website</h2>
<p class="tab">
Now that you have created a basic website you may
want to verify how the website looks. Being that you have files locally
stored on your computer you will not need to connect to the Internet to
view your web page.</p>
<p class="tab">
Open the computer browser and type
the location of your web page. For example, if you have placed the
index.htm or index.html file within the webpage folder, you would type
in the browser c:\webpage\index.htm or c:\webpage\index.html if you are
using an IBM compatible computer. If you have Microsoft Windows or
Apple, you can also double-click the web page file so it opens in a
browser automatically.</p>
<p class="dtab">
<span class="tips">Tip:</span> Some HTML editors also allow you to preview the page by clicking the preview button within the HTML editor.</p>
<p class="tab">
Viewing a web page locally allows you to experiment and make sure the page works before taking the time to <a href="http://www.computerhope.com/jargon/u/upload.htm">upload</a> the page to the <a href="http://www.computerhope.com/jargon/s/server.htm">server</a>. This also is useful if you do not have a place to store your web page.</p>
<h2>
<a name="04"></a>Displaying images</h2>
<p class="tab">
Now that you have created a basic website you can
improve the looks and feel of the website by adding images to the web
page. There are two methods of displaying images on your web page. The
first method is linking to another website to display the images by
using the below code.</p>
<p class="tcy tab">
<img src="http://www.computerhope.com/logo.gif"></p>
<p class="tab">
Using the above HTML tag you can display images off of other websites, which is also called a <a href="http://www.computerhope.com/jargon/h/hotlink.htm">hotlink</a>.
However, we recommend that you do not do this if possible as it can
cause your web page to load slower and could cause missing pictures to
occur if the other site removes or moves the location of the picture to
an alternate location. The alternate and recommended method would be to
use the below code.</p>
<p class="tcy tab">
<img src="mypic.gif"></p>
<p class="tab">
or if you have an images folder:</p>
<p class="tcy tab">
<img src="images/mypic.gif"></p>
<p class="tab">
If the mypic.gif exists on the computer the
picture is shown on your website. Adding pictures is an excellent way to
spruce up the website. However, do not get to carried away, adding
several images (especially animated images) can look tacky and slow down
the time the web page loads. Remember, the average time someone looks
at a website is 10 seconds.</p>
<p class="tab">
Finally, never place large sized images on your
home page. Large images will slow down the web page dramatically and may
cause the visitor to leave. If you would like a large picture on your
website, it is recommended that you create a small image called a '<a href="http://www.computerhope.com/jargon/t/thumbnai.htm">thumbnail</a>'. If the user is interested they can click the thumbnail to view a larger image.</p>
<h2>
<a name="05"></a>Understanding directories</h2>
<p class="tab">
When creating other directories (folders) on the
computer that contain other images or HTML files, it is important that
you understand the directory structure of how the server will access
other folders. Many times, users will mistakenly create a bad directory
that allows the page to work offline but not on the Internet or from
another computer.</p>
<p class="tab">
When accessing files in other
directories that are ahead of the current directory, first specify the
directory and then the file name. For example, if you are trying to
access or display the image file mypic.gif in the image folder, create
the link as shown below.</p>
<p class="tab tcy">
image/mypic.gif</p>
<p class="tab">
Notice in the above line that the directory is first specified and then the file.</p>
<p class="tab">
Next, if you wanted to access the image file mypic.gif that is back one directory, you would want to use the example below.</p>
<p class="tab tcy">
../mypic.gif</p>
<p class="tab">
In
this example, notice the two dots (..) these tell the browser that you
want to go back one directory. If you wanted to go back one directory
and then into another directory you would first do ../ and then the
directory as shown in the example below.</p>
<p class="tab tcy">
../other/mypic.gif</p>
<p class="tab">
This
rule can be applied to as many directories back as possible. For
example, if you wanted to go back three directories and then go into the
images directory, then you would use the example below.</p>
<p class="tab tcy">
../../../image/mypic.gif.</p>
<p class="tab">
A
common mistake with PC (Windows) users is that the HTML editor may
specify the file to be located in the computer hard drive such as
c:\mywebpage\image\mypic.gif. This will work fine on the computer hard
drive (locally); however, when posted on the Internet, no one but the
person with the file locally will be able to display the file.</p>
<p class="tab">
Finally, remember when specifying the directory that you are using a <a href="http://www.computerhope.com/jargon/f/forwards.htm">forward slash</a> (/) and not a <a href="http://www.computerhope.com/jargon/b/backslas.htm">backslash</a>.</p>
0 comments:
Post a Comment