March 9th, 2002, 01:32 PM
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?'.
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.
<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.
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">
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!
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>
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)
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