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.
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
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.
Here's my favourite web-design site: www.webmonkey.com Covers the basics and a little more.....
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
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
</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
Excellent work hot_ice! Greenies for that wonderful contribution. :)
I say forget HTML and go with the next version -- XHTML. It's just as simple, and it's up-to-date. :)