View Single Post
Old 01-15-2004, 06:05 PM   #1 (permalink)
Sean
 
Sean's Avatar
 
Title: Founder/Admin
Join Date: Jan 2004
Location: Sydney, Australia
Age: 28
Posts: 8,907
Blog Entries: 4
Rep Power: 10 Sean will become famous soon enough
Send a message via MSN to Sean Send a message via Skype™ to Sean
Lightbulb [HTML] Getting Started with Web Design.

Before u can start learning Javascript or even think about touching PHP u have to have a very good knowledge and understanding of HTML

HTML stands for HyperText Markup Language.

HTML is the language you use to write Web Pages. HTML tells your browser how to place the text and graphics you want on your web page.
It can make links to other pages on the Internet or other pages on your webpage and also make text Bold, Italic, Underlined or different colors and sizes, you can add sounds and video and more importantly add graphics which can make your webpage very unique.


When writing HTML code you will need a few things to get started.

A browser like Netscape, Microsoft Explorer, Netscape or Mosaic etc.

A word processor or text editor like Notepad, Microsoft Works or Lotus on the windows operating systems and TeachText, SimpleText or BBEdit on the Mac systems. And Finally on Unix machines Emacs is one of my Favorite Editors and in Windows Araneae is my favourite.

These programs will allow you to write and view the code then save it with the *.html suffix.

NOTE-- While there is alot of software programs out in the market which will create HTML documents for you like DreamWeaver, HotDog Professional, Adobe GoLive, NetOjects Fusion, FileMaker, Microsoft FrontPage and many more, you will be limited to the programs features. And when new commands come available you will not be able to use the new commands until the HTML program brings out a software update.
But it all depends on the user, i personally prefer and enjoy not using 3rd party programs.


Tags < >.
The most important aspect or you can say the foundations to HTML is called Tags.
They surround or enclose the keywords or Flag Commands with less than < and greater than > signs which tell the browser that a command is coming up.
If u want a word to become Bold for example you add a Bold Flag at the beginning of the word and an closing Bold Flag after the word.


Saving HTML Documents.
When you want to save your document you must choose a name for it and choose a Suffix. (Extension Name).
If you are using a Macintosh or Windows 95,98,NT,ME or XP save it with a *.HTML suffix. If you are using an older Operating System like Windows 3.1 or 3.11 save with an *.HTM as older Operating Systems can only handle 3 letter suffixes.


Opening the HTML Document in a Browser.
Once you have saved your HTML document you will need to open it in a Browser.
Open your preferred browser then goto the FILE menu in the top left hand corner of the screen, then goto OPEN, then browse your Hard-Drive or Floppy-Disk for your *.HTML document.

HTML The Basics

All HTML formats are the same. Tags surround or enclose the keywords or Flag Commands with less than < and greater than > signs which tell the browser that a command is coming up.

For example <i>Griffin</i> will make the word Griffin italic.

Here are a few more simple HTML flags:



You can also add these simple tags together to create different text variations like so:

<b><i>Griffin</i></b> will make the word look like this Griffin

NOTE-- All tags should end with an forward slash at all times no exceptions especially flags that change text otherwise for example an bold flag with no </B> closing tag will make the whole document bold until you input another text changing tag.

<BR> Breaks the text onto the next line.
<P> Just like BR, but makes a paragraph (2 lines)
<HR> Makes a Horizontal Line across the page.


Spacing
HTML browsers will ignore any extra spaces and returns you make between your flags in your document, which can be used to your advantage if you want to add comments to your document to remind you of what you were attempting accomplish.

<!-- ######## --> Where # = The comment you make in your HTML document which will be invisible to the browser.


A note to remember- Your Browser displays text left justified and only leaves one space between words and sentences. To force extra spaces or simply to indent a line, use the following command:

&NBSP; which stands for Non-Breaking SPace character. Which Will make a space on your page.


Headings
There are 8 different size headings in total, H1 through too H8 where H8 is the smallest and H1 is the biggest.
Like in the previous examples headings just have tags surrounding the text you want to make a heading.

Here is the code: <H1>Griffin-Net</H1>

Here is the complete H1-H8 codes and what they look like:



NOTE-- You cannot place text beside headings for some reason headings like too be all by there lonesome.


Writing Your First Web Page
Here is the code for a really basic HTML document:

Code:
<HTML> 
<TITLE>My First Webpage</TITLE> 
<CENTER><H2>Welcome to Griffin-net HTML Tutorials</H2></CENTER>  
<BR> 
<BIG>Hope these tutorials really help you</BIG> 
<HR> 
I can write in <B>Bold</B> or <I>Italic</I> or <U>Underline</U> 
</HTML>
As you can see the code starts and finish's with a command called <HTML> and </HTML> this tells the browser when too start reading and where too stop reading the script.
This must always be the first and last command in all HTML scripts.

Now the next line contains the <TITLE> command and as you can see from the diagram to the right, it puts text in the title bar of your browser.

The next line contains the Heading <H2> command from the last tutorial. The <CENTER> command surrounding it just makes the text center on your screen. You can also left and right align text which i will teach in the next tutorial.

<BR> Breaks onto the next line.

The next line contains text which is surrounded by the <BIG> command. This just makes the text big.

<HR> Puts a horizontal line on your page.

And finally the next line contains text which has bold, italic and underlined words.

</HTML> tells the browser it is the end of the script.



This ends the tutorial of the Basics of HTML.
Dont hesistate to ask me any questions if u dont 100% understand this tutorial.
All the best

Last edited by Sean; 06-09-2005 at 04:17 AM.
Sean is offline   Reply With Quote