Jump to content



Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
Photo
- - - - -

HTML 101 - Web Design For Beginners


7 replies to this topic

#1 vujsa

vujsa

    Absolute Newbie

  • [MODERATOR]
  • 888 posts
  • Gender:Male
  • Location:Indianapolis, Indiana, USA (Midwest)
  • myCENTs:35.43

Posted 22 February 2005 - 08:28 AM

HTML 101 - Web Design For Beginners
Absolute Basic HTML Writing

This will be part one of a multi-part HTML tutorial.
Please don't post advanced HTML replies to this article.

This tutorial is specifically written for beginning HTML writers.

Requirements:
Software: Web Browser, HTML Editor.
Skills: Ability to press the keys on the keyboard.

Any web browser will work as long as it can open files saved on your hard drive.
-> Netscape and Internet Explorer are both free and easy to use.

Any HTML editor will work as long as it is an HTML editor and not a web page design program.
-> The difference between the two is who actually writes the code.
--> If the user writes the HTML code the software used is and HTML editor.
--> If the user arranges the look of a page and the program writes the corresponding HTML code, the software used is a web page design program.

You're here to learn HTML so you'll need an HTML editor. An HTML editor can be any text editor that will allow you to save your files with the .html extension.
For now, Notepad will do just fine as your editor. I assume that Mac still has a Notepad program.

<--------------------------------------------------------------------------------------------------->

Now a little background about HTML.

Hyper Text Markup Language is the language developed to display information on the internet in a format other than plain black text on a white background.

HTML requires the use of tags. A tag is a trigger that tells the browser what to do with the information between the opening tag and the closing tag.
For Example:
<CENTER>Center this text!</CENTER>
Here the "center" tag is used to place text evenly between the left and right sides of the window like below:

This Text is Centered!


With very very few exceptions, ALL open tags must be closed! Again, ALL open tags must be closed!

For the "center" tag, the opening tag is <CENTER> and the closing tag is </CENTER>. the slash must be included in all closing tags and ommited in all opening tags.

A Few More Samples:
Align to the right is: <RIGHT> Text </RIGHT>
Align to the left is: <LEFT> Text </LEFT>
Bold text is: <B> Text </B>
The HTML tag is: <HTML> Code </HTML>

Just remember, ALL open tags must be closed!

<--------------------------------------------------------------------------------------------------->


The first tag that you have to use in all webpages is the HTML tag. Failing to insert this tag before your code will result in everything being shown to the user. This is because if you don't tell the browser the the page is html, the browser automatically assumes that the page is just text.
"<HTML>" Tells the browser that everything that comes next is coded in HTML until the </HTML> tag is reached.

Step 1: Open and close HTML.
<HTML>
</HTML>

The next thing you'll need is a head. The HTML head holds very important information about your web page but for now it will only hold its place.
The head tag is <HEAD> and tells the browser that everything that follows belongs in the head area of the web page until the </HEAD> tag is reached.

Step 2: Open and close head.
<HTML>
    <HEAD>
    </HEAD>
</HTML>

Inside your head tag you can place the title tag.

Step 3: Add a title
<HTML>
    <HEAD>
        <TITLE>
            Here is my first web page!
        </TITLE>
    </HEAD>
</HTML>

After you head tag comes the body tag. The body tag contains all of the information that is displayed in the browser window.

Step 4: Add a body
<HTML>
    <HEAD>
        <TITLE>
            Here is my first web page!
        </TITLE>
    </HEAD>
    <BODY>
    </BODY>
</HTML>

Now add your content between <BODY> and</BODY>

Step 5: Add your content
<HTML>
    <HEAD>
        <TITLE>
            Here is my first web page!
        </TITLE>
    </HEAD>
    <BODY>
            Place your content here!
    </BODY>
</HTML>
Cut and paste this code into your HTML editor and save as firsthtml.html and open with your browser. You'll see that you have created your first web page although it's not very pretty and it just says "Place your content here!".

Help for saving and viewing your HTML documents is located at the end of this article.

This is the absolute minimum code needed to create a properly working web page.

Next play around with you formating a little like so:
<HTML>
    <HEAD>
        <TITLE>
            Here is my first web page!
        </TITLE>
    </HEAD>
    <BODY>
        <CENTER>
My First Page.<BR>
        </CENTER>
More text here.<BR>
    </BODY>
</HTML>
The <BR> tag means line break and is one of a very few tags that does not reqiure a closing tag.

Next we'll add a link to another page or site. A link is actually called an anchor and thus the tag is <A> to open and </A> to close.

The tag actually will require some formating of its own as seen below.
<A HREF="http://www.astahost....ost.com">Sample Text</A>
"A" is the tag type.
"HREF" is an argument that tells the browser that this anchor is Hypertext REFerencing whatever is after the equal sign in quotes.
The "Sample Text" is the text that can be clicked on to take you to "http://www.astahost.com".

***See note at bottom about the definition of "HREF".

Here it is in your you code:
<HTML>
    <HEAD>
        <TITLE>
            Here is my first web page!
        </TITLE>
    </HEAD>
    <BODY>
        <CENTER>
My First Page.<BR>
        </CENTER>
More text here.<BR>
<A HREF="http://www.astahost.com">Sample Text</A><BR>
<A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR>
   </BODY>
</HTML>

Okay, that should do for now.
This tutorial is just a basic reference for beginners and will be referenced in future tutorials.

I just wanted to break the ice and provide some HTML comfort for more advanced topics.


File Saving And Viewing Instructions Here!
To save an HTML file in Notepad:
Click File and then Save As
Type your name and make sure that the .txt is gone and that the file name ends with .html --> like:myfile.html
Then where it askes for file tye change from Text Documents (*.txt) to All Files
Click Save.
Remember which folder you saved the file in, probably in My Documents.

To view an HTML page with Netscape:
Click File and then Open File.
Browse to the location of your html file and choose open.

To view an HTML page with Intenet Explorer:
Click File and then Open and then Browse.
Browse to the location of your html file and choose open.

*** HREF Note:
I corrected this definition after microscopic^earthling reminded me of what the "H" stood for in HREF.

My thanks to microscopic^earthling.

Happy Coding :P
vujsa

#2 miCRoSCoPiC^eaRthLinG

miCRoSCoPiC^eaRthLinG

    PsYcheDeLiC dR3aMeR

  • [MODERATOR]
  • 2,248 posts
  • Gender:Male
  • Location:Bangkok, Thailand
  • Interests:Photography, Magic Tricks, Numismatics & Philately to some extent, Being a nuisance in general (that's my favourite)
  • myCENTs:NEGATIVE[-21.50]

Posted 22 February 2005 - 08:59 AM

I think H stand for Hyperlink. SO <href> would be HyperLink Reference.. Correct me if I'm wrong. Another good tutorial. :P

#3 JustinSquare

JustinSquare

    Newbie [ Level 2 ]

  • Members
  • 21 posts
  • Location:New Glasgow, Nova Scotia
  • Interests:Comps. Flash programming. And other things.

Posted 22 February 2005 - 11:25 PM

Wow. I mean, no idiot can say they don't understand how html works after this. Well,amybe they still don't understand, but they will know how to do it. Kinda short, but that's all you need to know for everyelse after that. And i agree with MS^E. Most programs call it a Hyperlink, so it would make sence to be HyperLink Reference. Then again, i ain't no HTML master.

#4 SingleDaddyof2

SingleDaddyof2

    Advanced Member

  • Members
  • 115 posts
  • Location:So. Cal.
  • Interests:Improving my webmaster skills &amp; my baseball card collection

Posted 23 February 2005 - 01:27 AM

Very nice vujsa! One suggestion...after introducing the title tag, I would mention the purpose of the title tag. (i.e. The text between the opening and closing title tags is displayed by your browser at the very top in the window title bar--not in the web page. The title text is also displayed when the webpage is bookmarked and the Bookmarks (or Favorites) list is shown.) Also there can be only one title per webpage.

#5 vujsa

vujsa

    Absolute Newbie

  • [MODERATOR]
  • 888 posts
  • Gender:Male
  • Location:Indianapolis, Indiana, USA (Midwest)
  • myCENTs:35.43

Posted 23 February 2005 - 03:28 AM

Hey, thanks for the feedback. I agree that the title portion is a little lacking but I didn't want to get too side tracked. I considered leaving the title out alltogether as it is not a requirement to make the browser parse the code. But then I wouldn't have had a reason to have a head. While a missing head will go unnoticed by a browser, its important to learn how and where to write the head code.

The title tag will be explained further in the second article. In fact the second article will discuss each of the tags from the first article extensively.

Thanks,
vujsa

#6 ree

ree

    Newbie [ Level 2 ]

  • Members
  • 27 posts

Posted 03 April 2005 - 08:12 PM

Hi and Thank You for this easy to read and "Understand" Tutorial.... i needed something like this....broken down step by step...:P it was nice of you to take your time. here is a Link to a place where i and Practice my HTML.. http://www.w3schools...e=tryhtml_basic i really like it.:P i just included this so others' who might be wondering where to Practice their HTML, can find a HTML Editor Practice Pad.... with luv' Thank You again ~ree~

#7 vujsa

vujsa

    Absolute Newbie

  • [MODERATOR]
  • 888 posts
  • Gender:Male
  • Location:Indianapolis, Indiana, USA (Midwest)
  • myCENTs:35.43

Posted 04 April 2005 - 09:20 AM

Hey, I'm glad that you found this tutorial helpful and informative.
If you liked that tutorial, there are a couple of related tutorials available as well.Hopefully these tutorials will give you a better understanding of how HTML works and help you dream up ideas of what you can do with it.



That was a good link that you posted above for:W3Schools TryIt Editor v1.4

I wish they had one of those 10 years ago! :P
An HTML practice window, that's great. I mean, wow, I started by editing a blank shell document via telnet (emacs), saving, switching to browser to reload and view, and noting changes that were needed. Next thing you know, someone will invent an HTML editor that lets you visually place content in the page. :P AKA WYSIWYG

Okay, sarcasim aside, let us know if you have any questions.

happy coding, :o
vujsa

#8 eXc1te

eXc1te

    Newbie [ Level 2 ]

  • Members
  • 16 posts

Posted 14 October 2007 - 09:58 PM

great beginner tutorial i would also suggest that people go out and buy a book i find that one of the best ways to learn the language.



Reply to this topic



  


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users