Introduction to HTML
This html tutorial includes all basic html codes and explanations for newbies who want to try making their own webpages. I am actually not an expert on html codes so I cannot really teach you much, but I guess this is enough for beginners.If you have any questions regarding the stuff I wrote here, please don't hesitate to contact me. I will try to answer your questions to the best of my abilities.
Just a short note, this tutorial is not for skilled webmasters. If you want to learn java script or cgi, php, mysql, please don't e-mail me. Although I know some of those I don't want to/don't have the ability to teach.
What is HTML?
HTML stands for Hypertext Markup Language, I am not sure what this is, but it is a type of program code which the computer understands and can turn the code into web operations. Webmaking beginners usually learn html first before any other languages because this is the simpliest form and the most basic of all the codes. (I also learn html first =D)Firstly, check out the requirements for making a webpage, you will need notepad (assumed to be with every computer), fingers (to type of course =P), and a place to upload your webpage on the net. Since this is only a html tutorial, you will have to find the hosting sites yourself. Search on google or yahoo, I am sure you will get lots of results. One html page is divided into two parts: the head and the body. The head are where the title, the description of the site, the server's name and some java settings if you know. The body is for the actual content which viewers will see on your site.
General Codings
HTML codes are all denoted inside the <> brackets separately, with the opening like < html> and the closing like < /html>, below are some of the most commonly used ones. (LEAVE OUT THE FIRST SPACE AFTER < FOR ALL CODES!)
html - for opening and closure of the html coding for one page.
head - a webpage is divided into two parts, the head and the body, this code is use to denote the header, usually for title (ie, the blue IE bar above) or java settings if you use them for scrollbars, colour settings etc.
title - for words that appear on the title bar when you open the page, titles can be set differently for each page.
body - the body of the page which contains the actual content that viewers can see.
h# - for headers inside the body, # is a number from 1 to 6, 1 the largest and 6 the smallest. H# will automatically set the words you type into bold face.
hr - to draw a line across the page.
br - to jump to the next line (html doesn't know how to go to the next line automatically if you only press enter). (no closing tag)
p - skip one line, for separating paragraphs. You can also make this effect by 2 "br"s. (no closing tag)
bgcolor - set the background colour of the page. This code is put inside the body tag, ie < body bgcolor="colour">.
font face="font" - setting the font face, eg. Times New Roman, Verdana etc. (for more font names search in Word.doc). Closing tag is < /font>.
font size="#" - setting the font size, # is from 1 to 7, 1 the smallest, 7 the largest, and 3 is the commonly used size. Closing tag is < /font>.
font color="colour" - setting font colours. Some of the colours can be entered directly, such as red, blue, green, black, white... with the code < font color="white"> and closes with < /font>. Other colours can use colour codes (refer to later explanations).
center - used for centering paragraphs, tables or images.
b - to bold certain words or letters.
i - to italicise words or letters.
u - to underline words or letters.
sup - to set some words or letters to superscript.
sub - to set some words or letter to subscript.
strike - to draw a line across some words or letters.
code - to show codings, but I think it cannot be used to show html codes...
pre - everything inside the pre tags will be shown as how you type it in the notepad, for exampl, you don't need the br tags to go to the next line.
link="colour" - colour of the links, used inside the body tag.
alink="colour" - colour of the active link, used inside the body tag.
vlink="colour" - colour of visited links, used inside the body tag.
text="colour" - set overall text colour on the page, used inside the body tag.
img src="link_of_image" - to insert an image, you should get the link of the image first. No closing tag.
a href="http://www.webpage.com" - to open an external link to another page or another site. It is used with its closing tag like < a href="http://www.animegenkai.net.tc">< /a>
a href="mailto:email@email.com" - link for sending e-mail. The Microsoft Outlook Express window will automatically be opened once clicked. It is closed with < /a>.
a name="#target" - link to a different place on the same page. You would have to first specify the place to link by < a name="#target">< /a> (notice the # sign) and the link tag will be written as < a href="#target">< /a>
marquee - to have a text message or images moving across the page horizontally.
frame - to divide the browser window to show different pages at the same time.
iframe - to insert another page into an existing page with a frame.
width=## - to set the width of img src, table, frame, iframe etc. The ## are number in pixels. This is used inside the respective tags.
height=## - to set the height of img src, table, frame, iframe etc. The ## are number in pixels. This is used inside the respective tags.
Table Codings
Used for constructing and decorating tables on a webpage.
table - to open and close a table.
border="#" - to set the border width of the table, used inside the table tag. border=0 means no border.
bordercolor="colour" - to set the table border colour, used inside the table tag.
width=## (width=##%) - to set the width of the table in pixels or the percewntage of the whole page.
cellspacing=# - spacing between table cells, even if you don't set it will be fine. Used inside table tag.
cellpadding=# - spacing between the cell border and the cell contents, used inside table tag.
tr - table row, used to start and end a row.
th - table header, contents will be automatically centred.
td - table data, contents are left-aligned.
align="xxxx" - alignment of the contents in a cell, xxx stands for left, center or right. Used inside the th or td tags.
valign="yyy" - vertical alignment of the contents in a cell, yyy stands for top, middle or bottom. Used inside the th or td tags.
rowspan=# - to mearge several rows, # stands for the number of rows to be merged.
colspan=# - to merge several columns, # stands for the number of columns to be merged.
Forms and Lists Codings
Forms are an input type where viewers can type something onto boxes provide. Using cgi scripts, these forms can be sent through e-mail or other media. Lists are point form shown on a webpage.
form - to open and close a form.
input - to add in an entry box in the form. No closing tag.
type="xxx" - type of input, xxx stands for text, radio, checkbox etc. Used inside the input tag.
name="yyy" - name of the field. This will only be visible when someone fills in your form and send it to your e-mail. The name indicates the entry box. Used inside the input tag.
value="www" - words that will appear on the entry box prior to others' entry. Used inside the input tag.
type="text" - entry box can only input text, ie, words and numbers.
type="checkbox" - multiple options are available for viewers to click.
type="radio" - viewers are only able to choose one option.
type="submit" - to make the submit button, value on the button is set by value="Name" where Name is the word(s) which will appear on the button.
type="reset" - to make the reset button, value on the button is set by value="Name" where Name is the word(s) which will appear on the button.
select - to make a pull down menu on the selections available.
option - the opening and closing of each option inside the < select> an < /select> tags.
type="file" - used inside the input tag, allows viewers to browse their own computer and select a file.
ol - ordered list opening and closing. List will be indexed by numbers.
ul - unordered list opening and closing. List indexed by dots, squares etc.
li - tag put in front of each item on the list.
After Coding
After the code is done, save the file as "filename.html" and it is done. Every time you want to make amendments to the page, go to "Source" in "View" and amend the file. Click "Save" and then the "Refresh" button on the html page.Then you will have to find a host on which you upload your pages for the world to view. One suggested host is the one Anime Genkai is hosted on right now - 110mb.com. 110mb is absolutely free and currently places no ads on your site. It also does not have frequent downtimes and allows php hosting. The only thing bad about it is that only upgraded accounts allow MySQL. However for beginers, this host is more than enough. I greatly recommend it =D
All pictures from the animes in this site are copyrighted by their respective owners.