Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Basic HTML

  1. #1
    Senior Member
    Join Date
    Dec 2001

    Post Basic HTML

    Well, I've just been browsing the TUTORIAL forum and found no tutorials on HTML. I'm no expert, I've done some HTML at school and at uni I did one subject on it, but I think I'll be able to produce a basic tutorial for the people who come here to AntiOnline and ask 'what programming language should I learn?'.

    Here goes:

    General Knowledge:
    HTML is short for HyperText Markup Language and is the language used to create pages and websites on the World Wide Web (WWW). HTML defines the layout of the web page with the use of certain tags, such as <HTML>, <BODY>,

    and many, many more. Most of these tags you need to close and to close them, you just at '/' - so it would look like </HTML>, </BODY> or </P>.

    Browsers are responcible for interpreting these tags and attributes, displaying them in a window. The major web browsers are Opera (the best!! ), Microsoft Internet Explorer and Netscape Navigator.

    HTML can be coded in any text editor (I just use Notepad) or you can get special web-development software, such as Microsoft FrontPage or Macromedia Dreamweaver. The files that have the HTML code have the extension .html or .htm (example - basic.html).

    Major HTML Tags:
    Opening Tag...Closing Tag (most have)...Very Quick Explanation

    <BODY>...</BODY>...The text/code inside this tag is the actual part that the browser displays.
    <HEAD>...</HEAD>...Generally used to assist browsers in working with the code.
    <HTML>...</HTML>...The entire document is inside these tags.
    <TITLE>...</TITLE>...Displays the text inside these tags in the application's window titlebar.

    <A>...</A>...Is an anchor/link. Ie: AO Website
    ......Text inside these tags will be displayed in BOLD.

    ...none...Forces a line break.
    <BUTTON>...</BUTTON>...Displays a clickable button on the page.
    <CENTER>...</CENTER>...Center's the text inside these tags.
    <DIV>...</DIV>...Gives structure to the code inside these tags.
    <FONT>...</FONT>...Is used to define the font, such as color and typeface.
    <FORM>...</FORM>...Defines a form - used to collect user information, logon's, etc.
    <H1>...</H1>...Used for headings. Largest text.
    <H2>...</H2>...Used for headings.
    <H3>...</H3>...Used for headings.
    <H4>...</H4>...Used for headings.
    <H5>...</H5>...Used for headings.
    <H6>...</H6>...Used for headings. Smallest text.
    ......Text inside these tags will be displayed in ITALICS.
    <IMG>...none...Used to insert an image on the page.
    <MAP>...</MAP>...Used to define 'hot-spots' for links in image-maps.
    <OBJECT>...</OBJECT>...Supplies information on data types that the browser doesn't know.
    <OPTION>...</OPTION>...Provides elements for SELECT tag (below)

    ...</P>...Defines a paragraph and starts on a new line.
    <PLAINTEXT>...</PLAINTEXT>...Text inside this tag is displayed in monospace font.
    <SCRIPT>...</SCRIPT>...Container for scripts that the browser supports (ie - javascript)
    <SELECT>...</SELECT>...Provides a scrolling list or pop-up menu.
    <TABLE>...</TABLE>...Used to place a table in a website.
    <TD>...</TD>...Table Data - which provides a column in the table.
    <TR>...</TR>...Table Row - which provides a new row in a table.

    My Template:
    OK, first of all, when I start to design a page, I put this down in notepad first:


    These are the main tags that are needed, and you can start created a basic page from this template by simply adding text to it.

    A Basic Example:
    <BODY BGCOLOR="grey" TEXT="white">
    <H1>My Education</H1>
    <H3>St John's</H3>
    This was my high school. It was located about 10 minutes car ride from my house, but I had to travel in peak time and it took me bloody 30-40 minutes. I got dropped off to school by my mum and got home by bus - damn they were packed!
    <CENTER>Swinburne Website</CENTER>

    I am currently doing a course at Swinburne University. I am enrolled in Bachelor of Information Technology. This course goes for three years and I am currently in my second year.
    <FONT COLOR="lightgreen"><H5>This is a picture of my uni:</H5></FONT>

    Example Explanation:
    1. <HTML>...defines the start of the HTML document.
    2. <HEAD><TITLE>Basic HTML</TITLE></HEAD>...The title - look at your browser's window title.
    3. <BODY BGCOLOR="grey" TEXT="white">...Start of code - background color = grey, text color = white
    4. <H1>My Education</H1>...Large heading
    5. <H3>St John's</H3>...Sub-heading
    6. This was my high school...This is just text which will be displayed on the page.
    7. <H3>Swinburne</H3> Another sub-heading.
    8. <CENTER>Swinburne Website</CENTER>...Link to Swinburne site (centered)
    ...Line break.
    10. I am currently doing...More text.
    11. <FONT COLOR="lightgreen"><H5>This is a picture of my uni:</H5></FONT>...Font color will be set to light green, text will be very small and it will be in italics.
    12. [img]swin_pic1.jpg[/img]...Image will be inserted (swin_pic1.jpg) with the stated width and height.
    13. </BODY>...End of main code.
    14. </HTML>...End of HTML document.

    Well, there it is, a very basic and simple HTML tutorial. Hope this helps the newbies out there who are looking to learn their first and fairly basic language.

    I have attached a zip file which contains the example HTML file and also the picture of my uni. The picture is necessary to view the web page properly.

    \"Do you know what people are most afraid of?
    What they don\'t understand.
    When we don\'t understand, we turn to our assumptions.\"
    -- William Forrester

  2. #2
    Join Date
    Sep 2001
    hot_ice you left out one of the most widely used parts of html
    tables hehe ill let you write it just cause im nice and lazy

  3. #3
    Senior Member
    Join Date
    Dec 2001
    Oh crap, I did too didn't I!!!! Idiot!!!!

    Yes, well, I'll add the tag in the original post, might add something more solid on it later, thanks Roiter.

    \"Do you know what people are most afraid of?
    What they don\'t understand.
    When we don\'t understand, we turn to our assumptions.\"
    -- William Forrester

  4. #4
    Join Date
    Oct 2001
    Wow, Good job hot_ice
    For more info on HTML... Check out these links


  5. #5
    Senior Member
    Join Date
    Nov 2001
    Here's my favourite web-design site: www.webmonkey.com Covers the basics and a little more.....

  6. #6
    Senior Member
    Join Date
    Dec 2001
    Another good site to learn Html (that teaches table too!) is www.schoolofwebdesign.com That's where i learned a lot of what i know today... Although www.webmonkey.com is really good too
    -[h3llbringer] is back, again.
    -MSN CLoNE.

  7. #7
    Member D.J.'s Avatar
    Join Date
    Nov 2001
    here are some basic tags for tables. its very easy.
    <table border=2>...this shows that what is to follow will be a table, i chose the border to be 2
    <tr>...this starts a row. next, you will put in <th> for a table header, then you close the header with </th>
    </tr>ends the row
    <tr>...to start a new row
    <td>...to put in data, </td>...closes the cell
    </tr>..ends row
    </table>...ends the table
    using these tags, you can insert as many rows and columns that you need
    another of my favorite features is marquee (<marquee></marquee>), which makes text scroll across the page
    you can also add javascript to really fix things up
    D. J.

  8. #8
    Senior Member
    Join Date
    Oct 2001
    Helsinki, Finland


    My favourite sites:
    Index DOT Html: Alphabetic Sorted HTML Tag Listing
    bruce-hamilton.com: Server Side Includes (SSI) Tutorial, Apache: Tutorial/Introduction to SSI
    HTML entities listed: http://www.bbsinc.com/iso8859.html
    W3C: HTML Validator
    CSS: Dave Raggett's Introduction, RichInStyle
    I hope you find these useful.

    Q: Why do computer scientists confuse Christmas and Halloween?
    A: Because Oct 31 = Dec 25

  9. #9
    Senior Member
    Join Date
    Aug 2001
    Excellent work hot_ice! Greenies for that wonderful contribution.
    An Ounce of Prevention is Worth a Pound of Cure...

  10. #10
    Junior Member
    Join Date
    Mar 2002
    I say forget HTML and go with the next version -- XHTML. It's just as simple, and it's up-to-date.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts