A Beginners Guide to Basic HTML:
Tutorial #1
This is the first coarse of a set of web design and development tutorials I'm
writing. I intend to educate the beginning to novice web site developer on everything
you'll need to know to create professional HTML and PHP driven websites using
my own personal methodology. This specific tutorial "A Beginners Guide to Basic HTML"
is designed for the web design newbie who has not yet experienced HTML code,
or who doesn't yet understand the formatting basics. It is written for the web
designer who as of yet has never used HTML coding to design a web site.
TUTORIAL REQUIREMENTS:
PC with a Windows O/S
Internet Browser (Internet Explorer, Mozilla
Firefox[recommended], etc.)
Notepad
Step 1: Getting Started
Open up Notepad by going to Start Menu
> RUN and typing "notepad", then hit Enter.
Alternatively you may go to Start Menu > Program Files > Accessories >
Notepad
Editor's Tip:
you can switch between this tutorial and notepad quickly
by hitting Alt-Tab
Step 2: Understanding
the Basics of HTML
<HTML> & </HTML>Tags:
When creating a website the first thing you must do is tell the Browser that the
document you've created is in fact a web page. You do this by placing your "source
code" aka webpage content inside two "Tags". These Tags may be
visualized as brackets that tell Internet Explorer, FireFox, or any other website
browser that say "anything in between me is an HTML webpage."
ie.
<HTML>I'm a Webpage!</HTML> would display the
text "I'm a Webpage!" in just about any web browser.
<HEAD> & </HEAD> Tags:
Source code and additional Tags will typically be located in the area in between
the <HEAD> and </HEAD> Tags in order to declare certain parameters
to the web browser. Things like the Title, Keywords, Description, Author, etc.
will be located in the Head area of an HTML website. Many of these tags as described
also benefit your search engine optimization, or how easy it is for search engines
to include your contents in their database and display it in an orderly fashion.
<BODY> & </BODY> Tags:
The Body section of an HTML web page is where the bulk of the source code in
a normal website page will be located.This is where the main content that your
web site visitors will see will be placed, such as your website text, images,
and anything else from submission forms to input boxes, bulleted lists and many
other seemingly infinite types of HTML coding objects.
<P> & </P> Tags:
These are simple little website Tags that will go inside the <BODY> Tags.
They're called Paragraph Tags, and there used for just what their title implies,
to format paragraphs on your website.
Step 3: Creating your
first Website in Notepad
Now that you're familiar with standard basic HTML protocol you can start your
first web page with a solid understanding of why to put what tag, and where to
put it. Real quick however, one more thing to always keep in mind is that white
space means nothing in HTML code. So you can Tab over or hit Enter as much as
you want and it's not going to effect the overall output. It's not going to change
how your website looks in the slightest. Because of this many people code their
HTML developments in a hierarchal format, which is exactly how I'm going to display
the following source code to you.
In Notepad type:
<HTML>
<HEAD>
<TITLE>My first Website Page!</TITLE>
</HEAD>
<BODY>
<P>This is the first website I've ever made.</P>
</BODY>
</HTML> |
Now click the "File" menu (top left in Notepad)
and click Save As... Go to your desktop or anywhere
you would prefer to save your first web site, but before you click
Save click the 
Create New Folder Icon. Title the folder "my-first-website" or something along
those lines. Spaces are always a no-no for website file naming, as URL's do
not work properly with spaces. Personally I use dashes to represent spacing,
and I always make sure to keep my filenames and directory titles lower case
that way typing links between pages is more streamlined and less complicated.
Double-click to go inside the new folder you created and type
index.html for the filename. Click Save.
Editors Tip:
Personally, I keep a directory(aka folder) titled "Websites" and every
time I make a new website I create a new directory for that site inside the
Websites directory. So for Veroy.com I simply browse to my Websites folder and
click the Veroy directory.
Step 4: View your
first Webpage:
Now that you've coded your first website page you'll want to see what it looks
like in your default web browser. To do this it's real simple just go to
Start > My Computer. Browse to your "my-first-website"
directory and double click the index.html file. Viola! It should load right
up into your default web browser.
My First Web
Page Example
Editors note:
If for some reason you get an error, first verify that your code is the same
as the above listed code. If it's not the same, fix the error and reload the
webpage. If that doesn't fix your problem try downloading Mozilla's
Firefox.
Basic Website Design
w/ HTML Tutorial #2
|
