Bluepearl Design
Go Back   Bluepearl Design > Misc > Tutorials > HTML, XHTML, Javascript, CSS

[HTML] Getting Started with Web Design.

HTML HyperText Markup Language.
XHTML Extensible Hypertext Markup Language.
JAVASCRIPT object-based scripting programming language.
CSS Cascading Style Sheets.

    

Reply
 
LinkBack (1) Thread Tools Rate Thread Display Modes
Old 01-15-2004, 05:05 PM   1 links from elsewhere to this Post. Click to view. #1 (permalink)
 
Sean's Avatar
 
Title: Founder/Admin
Join Date: Jan 2004
Location: Sydney, Australia
Age: 28
Posts: 8,822
Images: 386
Blog Entries: 3
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 03:17 AM.
Sean is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 01-17-2004, 06:56 PM   #2 (permalink)
 
Title: Member
Join Date: Jan 2004
Location: Sydney, Australia
Age: 27
Posts: 50
Rep Power: 0 Cosita is an unknown quantity at this point
Re: [HTML] Getting Started with Web Design.

I will someday read this properly
Cosita is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 01-18-2004, 10:14 AM   #3 (permalink)
 
Sean's Avatar
 
Title: Founder/Admin
Join Date: Jan 2004
Location: Sydney, Australia
Age: 28
Posts: 8,822
Images: 386
Blog Entries: 3
Rep Power: 10 Sean will become famous soon enough
Send a message via MSN to Sean Send a message via Skype™ to Sean
Re: [HTML] Getting Started with Web Design.

Once u learn these basic methods, the rest of HTML will come easy to u.
Sean is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 01-18-2004, 11:44 AM   #4 (permalink)
 
Title: Bluepearl Veteran
Join Date: Jan 2004
Posts: 409
Rep Power: 5 Blackhawk is on a distinguished road
Re: [HTML] Getting Started with Web Design.

nice work mate, very nice
Blackhawk is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 01-18-2004, 12:19 PM   #5 (permalink)
 
Sean's Avatar
 
Title: Founder/Admin
Join Date: Jan 2004
Location: Sydney, Australia
Age: 28
Posts: 8,822
Images: 386
Blog Entries: 3
Rep Power: 10 Sean will become famous soon enough
Send a message via MSN to Sean Send a message via Skype™ to Sean
Re: [HTML] Getting Started with Web Design.

Thanks, wrote this about 2 years ago lol.

Just updated some parts when i posted it a few days back.
Sean is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 01-19-2004, 03:50 PM   #6 (permalink)
 
Title: Member
Join Date: Jan 2004
Location: Melbourne, Australia
Posts: 252
Rep Power: 5 Rebel is on a distinguished road
Send a message via AIM to Rebel Send a message via MSN to Rebel
Re: [HTML] Getting Started with Web Design.

hey is there a way to change the background colour of the page, and the font too, or does it always stay white?
Rebel is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 01-19-2004, 04:24 PM   #7 (permalink)
 
Sean's Avatar
 
Title: Founder/Admin
Join Date: Jan 2004
Location: Sydney, Australia
Age: 28
Posts: 8,822
Images: 386
Blog Entries: 3
Rep Power: 10 Sean will become famous soon enough
Send a message via MSN to Sean Send a message via Skype™ to Sean
Re: [HTML] Getting Started with Web Design.

Quote:
hey is there a way to change the background colour of the page, and the font too, or does it always stay white?
I will create a tutorial on this soon but here is the basic idea

HTML Code:
<HTML>
<HEAD>
  <TITLE>Bluepearl Design</TITLE>
</HEAD>

<BODY BGCOLOR="#000000">

<font color="#FFFFFF" face="arial" size="12">Basic commands</font>


</BODY>
</HTML> 

Last edited by Sean; 06-09-2005 at 03:48 AM.
Sean is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 01-19-2004, 04:40 PM   #8 (permalink)
 
Title: Member
Join Date: Jan 2004
Location: Melbourne, Australia
Posts: 252
Rep Power: 5 Rebel is on a distinguished road
Send a message via AIM to Rebel Send a message via MSN to Rebel
Re: [HTML] Getting Started with Web Design.

ok thanks griff, your tutorial makes sense and all
Rebel is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 01-21-2004, 12:24 PM   #9 (permalink)
 
Scrivy's Avatar
 
Title: Member
Join Date: Jan 2004
Age: 46
Posts: 74
Rep Power: 5 Scrivy is on a distinguished road
Send a message via MSN to Scrivy
Re: [HTML] Getting Started with Web Design.

Had a former friend start a web page u now the 10g thing u get wit ur isp so now i can change it by using ur tutorial


You the man Griffy
Scrivy is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 01-21-2004, 12:39 PM   #10 (permalink)
 
Title: Member
Join Date: Jan 2004
Location: Charlotte, NC
Posts: 11
Rep Power: 0 mccallum is on a distinguished road
Send a message via MSN to mccallum Send a message via Yahoo to mccallum
Re: [HTML] Getting Started with Web Design.

you can also use .css / but thats another tut altogether...
__________________
mccallum is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply


LinkBacks (?)
LinkBack to this Thread: http://www.bluepearl-design.com/forums/html-xhtml-javascript-css/18-html-getting-started-web-design.html
Posted By For Type Date
How To Indent On Ur Myspace | Myspace Database This thread Refback 07-18-2007 05:31 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads for: [HTML] Getting Started with Web Design.
Thread Thread Starter Forum Replies Last Post
New bluepearl design site coming soon Sean Bluepearl Announcements 26 02-25-2005 03:03 AM


  
Powered by vBulletin® Version 3.7.2
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0
Bluepearl Templates

All times are GMT +11. The time now is 09:33 PM.

 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52