It is important that you have a basic knowledge of HTML in order to use this refrence.
HTML works in a hierarchy, if something is set lower down it can be changed higher up in the document without effecting the lower parts.
|
In this html tab refrence certain veriables are used in place of actual number or text, here is a description of them.
- x: is used as a standard veriable, it replaces frases like left and right.
- n: replaces numbers.
- color: this replaces colors and hexadecimal numbers.
- text: replaces all forms of written text where the content can change.
|
Basic HTML Tags
Main Tags:
<HTML> </HTML> These tags start and end an html document.
<HEAD> </HEAD> The head tags contain the title, meta and other tags that start off an html document.
<TITLE> </TITLE> Between these tags you type the title of your document, the title tags go between head tags.
<BODY> </BODY> Almost every tag that isn't between the head tags goes between the body tags, they contain the main parts of the document.
|
Comments:
<!-- type here --> Any text typed between a comment will not show up or effect the over all function of a web document.
|
Text Tags:
The fallowing tags apply to all text typed in the body of the web page.
<U> </U> Any text typed between these tags will be underlined.
<B> </B> Any text typed between these tags will be bolded.
<I> </I> Any text typed between these tags will be Italicised.
<STRIKE> </STRIKE> Any text typed between these tags will be striked out.
<CENTER> </CENTER> Any text typed between these tags will be centered on the page or cell.
<FONT size="+/-n" color="color"> </FONT> This is the font tab.
<FONT size="+/-n"> </FONT> These tabs will change the size of the font of the text between them.
- size=" " adjusts the font size, a plus or minus fallowed by a number goes in the quotation marks.
- Example:
<FONT size="+5"> Hello World </FONT>
This will increase the size of hello world by 5 points.
<FONT color="x"> </FONT> These tabs will change the color of the text typed between them.
- color=" " adjusts the color of the font, any color name or hexidecimal color can be put between the quotation marks.
- Example:
<FONT color="red"> Hello World </FONT>
This will change the color of hello world to red.
<BR> Will cause a break or hard return in a line of text.
<P> </P> Will start a new paragraph and is roughly equal to two breaks or <BR><BR>
<HR> This tag will draw a horizontal line.
<SUB> </SUB> Will shrink the text size, causeing it to become subtext.
<SUP> </SUP> Will shrink the text size and move it up, causing it to become suppertext.
<NOBR> </NOBR> Will keep the text from breaking to a new line.
<WBR> Forces a line break inside a <NOBR> tag
<BLINK> </BLINK> makes the text blink 1 time per second, only works in netscape, firefox, and other netscape related browsers.
|
Lists:
<UL> </UL> Starts an unordered list. Adding a second <UL> inside an unordered list will increase the tab.
<OL> </OL> Starts an ordered list. Adding a second <OL> inside an ordered list increases the tab.
<LI> </LI> is put inside a <UL> or <OL> will draw a bullet. LI can also be used outside a list for just bullets
- Example:
<UL>
<LI> Hello World
</UL>
This will draw hello world with a bullet in front of it.
- Note: Using <UL> or <OL> without <LI> will cause the lit to act like a tab.
|
Picture Tags:
<IMG src="picture.jpg"> Adds a picture to the web page, the picture must be in the same directory as the html file.
- src=" " is the location and name of the picture. If the picture is in a different location then the html file then the full path must be included, the type of picture must be specified.
- Note: Putting <CENTER> tags around a picture will center it.
<IMG src="picture.jpg" width="n" height="x"> Will adjust the width and height of the picture.
- width=" " will adjust the width of the picture in pixels, any number may be put between the quotation marks.
- height=" " will adjust the height of the picture in pixels, any number may be put between the quotation marks.
- Example:
<IMG src="picture.jpg" width="100" height="150">
This will adjust picture.jpg to be 150 pixels high and 100 pixels wide.
<IMG src="picture.jpg" align="x"> aligns the picture to one side of the window.
- align=" " will align the picture to a certan side of the page right, center, and left are the only things that can be put between the quotation marks.
- Example:
<IMG src="picture.jpg" align="right">
This will align picture.jpg to the right side of the window.
<IMG src="picture.jpg" alt="text"> will display text if the picture fails to load or if the cursor is held over the picture.
- alt=" " any text can be entered between the quotes, It may even be possible to stick another picture in the alt.
- Example:
<IMG src="picture.jpg" alt="This is a picture">
This will display This is a picture if picture.jpg fails to load.
<IMG src="http://www.place.com/picture.jpg"> Adds a picture to the web page from a different web site.
|
Backgrounds:
<BODY bgcolor="color" text="color"> </BODY> Changes the color of the background as well as the default color for the text.
<BODY bgcolor="color"> </BODY> Changes the backgound color for the web page.
- bgcolor=" " will change the color of the background, any color or hexidecimal color can be put between the quotation marks.
- Example:
<BODY bgcolor="blue"> </BODY>
This will change the background of the web page to blue.
<BODY text="color"> </BODY> Changes the default text color.
- text=" " will change the color of the text, any color or hexidecimal color can be put between the quotation marks.
- Example:
<BODY text="yellow"> </BODY>
This will change all the text in the body of the html document to yellow.
<BODY background="picture.jpg"> </BODY> This sets the background as a picture.
- background=" " will change the background of the web page to a picture, the full name and path to the picture must be entered here.
- Example:
<BODY background="picture.jpg"> </BODY>
This will change the background to picture.jpg, if the picture is smaller then the screen it will be tilled automatically.
<BODY background="http://www.place.com/picture.jpg"> </BODY> Changes the background to a picture from another web site.
|
Link Tags:
<A HREF="http://www.place.com/"> text </A> Creates a basic link
- HREF=" " This is where the address to a web site is put.
- Example:
<A HREF="http://www.google.com/"> Click here to go to google </A>
This creates a link to google that says: Click here to go to google.
<A HREF="file.html"> text </A> Creates a link to a file
<A HREF="http://www.place.com/"> <IMG src="picture.jpg"> </A> Creates a link using picture.jpg, the picture will have a border.
<A HREF="http://www.place.com/"> <IMG src="picture.jpg" border="0"> </A> Creates a link using picture.jpg, the picture doesn't have a border.
<A HREF="http://www.place.com/"> <IMG src="picture.jpg" alt="text"> </A> Creates a link using picture.jpg, text will be displayed if the picture doesn't load.
- border=" " changes the thickness of the border, any whole number can be used
<BODY link="color" alink="color" vlink="color"> </BODY>
<BODY link="color"> </BODY> Changes a unvisited links color.
- link=" " Changes the default color for visited links, any color can be enter
- Example:
<BODY link="green"> </BODY>
This changes the color of all the unvisited link to green.
<BODY alink="color"> </BODY> Changes the color of an active link.
- alink=" " Changes the default color for an active links.
- Example:
<BODY alink="red"> </BODY>
This changes the color of all the active links to red.
<BODY vlink="color"> </BODY> Changes the color of a visited link.
- vlink=" " Changes the default color for a visited link.
- Example:
<BODY vlink="blue"> </BODY>
This changes the color of all the visited links to blue.
|
Anchors
<A NAME="text"> </A> Creates a name anchor, anchors are links that link places inside a web page.
- NAME=" " between the quotations is where the name of the anchor goes, it is very important to spell it correctly.
<A HREF="#text"> text </A> Creates a link to a name anchor.
- HREF="# " Here is where you type the name to an anchor, you must include the # before the anchors name.
- Example:
<A NAME="anchor1"> </A>
<A HREF="#anchor1"> Link to anchor1 </A>
The first tag creates an anchor called anchor1, the second tag creates a link to anchor1 that says: Link to anchor1
|
Email Links
<A HREF="mailto:person@gmail.com"> text </A> Creates a basic email link.
- HREF="mailto: " This is where you type the persons email address, it must include the mailto: part.
- Example:
<A HREF="mailto:inime9@gmail.com"> Mail Me </A>
Creates an email link to inime9 (me) and displays the text Mail Me.
<A HREF="mailto:person@gmail.com?subject=text"> text </A> Creates an email link with a subject.
- subject= This is where you type the subject of the email, note that the subject= is inside the HREF=" ". The mailto: and subject= are seperated by a "?".
- Example:
<A HREF="mailto:inime9@gmail.com?subject=hello"> Mail Me </A>
Creates an email link to inime9 with the subject hello, and displays the text Mail Me.
<A HREF="mailto:person@gmail.com?cc=person@gmail.com"> text </A> Creates an email link with a carbon copy.
- cc= This creates a carbon copy of an email when a person's email is entered behind it, note that the cc= is inside the HREF=" ". The mailto: and cc= are seperated by a "?".
- Example:
<A HREF="mailto:inime9@gmail.com?cc=cyber1313@comcast.net"> Mail Me </A>
Creates an email link to inime9 as well as sends a carbon copy to cyber1313, and displays the text Mail Me.
<A HREF="mailto:person@gmail.com?bcc=person@gmail.com"> text </A> Creates an email link with a blind carbon copy.
- bcc=" This creates a blind carbon copy of an email when a person;s email is entered behind it, note that the bcc= is inside the HREF=" ". The mailto: and bcc= are spereated buy a "?".
- Example:
<A HREF="mailtoinime9@gmail.com?bcc=person@gmail.com"> text </A>
Creates an email link to inime9 as well as sends a blind carbon copy to cyber1313, and deisplays the text Mail Me.
<A HREF="mailto:person@gmail.com?bcc=person@gmail.com, person@gmail.com"> text </A> Creates an email link with 2 blind carbon copies, the carbon copies are seperated by a comma, this applies to carbon copies as well.
|
Headings:
<H1> </H1> Any text typed between these tags will become an extra large heading.
<H2> </H2> Any text typed between these tags will become a large heading.
<H3> </H3> Any text typed between these tags will become a medium sized heading.
<H4> </H4> Any text typed between these tags will become a small sized heading.
<H5> </H5> Any text typed between these tags will become about 12 point bolded font.
<H6> </H6> Any text typed between these tags will become super small.
|
Special Symbols:
NOTE: There is a space added between the & and the rest of the code for the special symbols, there is normally no space their.
& nbsp; is a space.
& copy; is the copyright symbol.
& lt; is the less than symbol.
|
Advanced Tags:
Text Tags:
<FONT face="text"> text </FONT> Changes the font face of the text inbetween the tab.
- face=" " This is where you type the font face you want to use, I believe you have to have the font installed on the server to use it. It also may be possible to stick this in the body tag so it effects all the text.
- Example:
<FONT face="Arial"> Hello World </FONT>
This will print out Hello World in the Arial font face.
<MARQUEE loop="infinite" bgcolor="color" width="n"> text </MARQUE> Creates a box with a scrolling message inside it.
- loop=" " Tells the MARQUE tab how many times to loop, this is normally set to infinite, but it may be possible to set it to a number as well.
- bgcolor=" " Tells what the background color will be, can be any color.
- width=" " Tells how wide, in pixels, the MARQUE will be, can be any number.
- Example:
<MARQUE loop="infinite" bgcolor="red" width="500"> Hello World </MARQUE>
This creates a Marque that loops infinitly, has a background color of red, is 500 pixels wide, and displays the message Hello World.
|
Forms:
To be able to use the fallowing tabs you have to have to be able to use a, sorry I don't know how to use one.
<INPUT type="text" name="text" size="25" maxlength="n"> Creates a one line text box.
- type="text" Don't mess with this, it is nesessary to keep this so that it doesn't mess up the text box.
- name=" " This is the name of the text box.
- size="25" This is the size of the text box, I don't know if you can change it.
- maxlength=" " This is the maximum number of characters the text box will take.
- Example:
<INPUT type="text" name="box1" size="25" maxlength="10">
This creates a text box called box1 that will accept a maximum number of 10 characters.
<INPUT type="radio" name="text" value="text"> Creates one radio button.
- type="radio" Don't mess with this, it is nesessary to keep this so that it doesn't mess up the radio button.
- name=" " The name, and group of the radio button, radio buttons in the same group must have the same name.
- value=" " The assigned value of the radio button.
- Example:
<INPUT type="radio" name="radio1" value="true"> True <BR>
<INPUT type="radio" name="radio1" value="false"> False
This creates 2 radio buttons. one is true, the other is false.
<INPUT type="checkbox" name="x" value="x"> Creates one checkbox.
- type="checkbox" Don't mess with this, it is nesessary to keep this so that it doesn't mess up the checkbox.
- name=" " The name, and group of the checkboxes, checkboxes in the same group must have the same name.
- value=" " The assigned value of the checkbox.
- Example:
<INPUT type="checkbox" name="box1" value="red"> Red <BR>
<INPUT type="checkbox" name="box1" value="blue"> Blue
This creates 2 checkboxes in the group box1, one has a value of red, the other blue.
<TEXTAREA name="text" rows="n" cols="n"> </TEXTAREA> Creates a multi line text box, any text you want to be edited can be put between the tags.
- name=" " The name of the text box.
- rows=" " The number of rows in the text box, any numerical value can be entered here.
- cols=" " The number of columns in the textbox, any numerical value can be entered here.
- Example:
<TEXTAREA name="bigbox" rows="5" cols="10"> </TEXTAREA>
This creates a text box called bigbox, it has 5 rows and 10 columns.
<SELECT name="text"> }
<OPTION SELECTED>text }
<OPTION>text } This creates a dropdown menu.
<OPTION>text }
</SELECT> }
<SELECT name="text"> </SELECT> This is the start of the dropdown menu.
- name=" " This is the name of the dropdown menu.
<OPTION SELECTED>text This is the Option in the dropdown menu that is auto selected, replace text with that option.
<OPTION>text This is another selection in the dropdown menu, as many of these tags as you want can be included, replace text with the alternate choice.
- Example:
<SELECT name="favcolor">
<OPTION SELECTED>Red
<OPTION>Yellow
<OPTION>Blue
</SELECT>
This creates a dropdown menu called favcolor, the option red is auto selected, and the alternet choices are yellow and blue.
<INPUT type="submit"> This sends the data from the form tags (abov) to the cgi program.
- type="submit" Don't mess with this, it is nesessary to keep this so that it doesn't mess up the submit button.
<INPUT type="submit" value="text"> Creates a submit button with text on it.
- value=" " This puts text on the button, any message can be typed between the quotation marks.
- Example:
<INPUT type="submit" value="Submit Form">
This creates a submit button that has Submit Form written on it.
<INPUT type="reset"> This creates a button that resets all imformation on the froms, the value=" " may apply to this button.
|
Music and Embedding Tags:
<A HREF="http://www.place.com/music.mp3"> text </A> This creates a link to a music file.
<EMBED src="music.mp3" width="n" height="n" autostart="true" loop="true" hidden="false"> This Embeds a music player into the web page.
- src=" " This is where the location and name of the music file are typed.
- width=" " This is how wide the music player will be, a commonly used size is 144.
- height=" " This is how high the music player will be, a commonly used size is 60.
- autostart=" " This tells the web page weather or not the music player will start automatically, it is a boolean operator and can be set to either true or false, it is defaulted to false.
- loop=" " This tells the music player to loop the music, it is a boolean operator and can be set to either true or false, it is defaulted to false.
- hidden=" " This tells the web page if the music player is hidden or not, it is a boolean operator and can be set to either true or false, it is defaulted to false
- Example:
<EMBED src="Alonez.mp3" width="150" height="50" autostart="true" loop="true" hidden="true">
This will create an invisable music player that will play the mp3 Alonez, it will autostart when the page loads and is hidden.
- Note: embedding doesn't always work, especially between operating systems.
|
Meta Tags:
<HEAD> }
<META name="x" content="text"> } This is a meta tag, meta tags are used for some search engine indexing.
</HEAD> }
- content=" " What goes in the content part of the meta tag is determaned by name=" ", see below.
- name=" " This defines what type of meta tag you are using and what goes in content=" ".
- name="keywords" Tells the search engine that the content is a group of keywords, the keywords are seperated with a comma.
- Example: content="manga, anime, games"
- name="description" Tells the search engine that the content is a description of the page.
- Example: content="how to write html"
- name="author" Tells the search engine that the content is the authors name.
- Example: content="Bob So-and-so"
- name="generator" Tell what program you used to create the webpage.
- Example: content="Microsoft Word"
- Example:
<HEAD>
<META name="author" content="Jacob Pack">
<META name="description" content="how to write html">
<META name="keywords" content="tags, html">
<META name="generator" content="notepad++">
</HEAD>
This creates 4 meta tags, one for each name.
|
Meta Refresh:
<HTML>
<HEAD>
<META HTTP-EQUIV="refresh" content="2;URL=http://www.place.com/newpage.html">
<TITLE>text<TITLE>
<HEAD>
<BODY>
text
</BODY>
</HTML>
This creates a meta refresh, which will automatically redirect the webpage to another.
- HTTP-EQUIV="refresh" Don't mess with it, this keeps the page as a meta refresh.
- content=" ;URL= " This determins the location of the rederection and the time it takes to redirect, before the semicolon put a number, after URL= put the website that you want to redirect to.
- Note: If the time on the refresh is less then 2 it may not be indexed in a search engine.
|
Line (HR) Tags:
<HR width="n" align="x" size="n" color="color" noshade> Creates a horizontal line.
- width=" " This determines the width of the line, it can be any numericle value.
- align=" " The side of the screen that the line is aligned to, it can be left or right.
- size=" " The height of the line, it can be any numerical value, I think the default is 2.
- color=" " The color of the line.
- noshade Makes the line a solid color instead of shading it.
- Example:
<HR width="600" align="right" size="5" color="red">
This creates a horizontal line that is 600 pixels wide and 5 pixels high, it is aligned to the right of the screen and is shaded the color red.
|
Links:
<A HREF="file.html" target="_blank"> text </A> Opens the linked file in a new window or tab.
- target="_blank" This will open the linked file or webpage in a new window or tab instead of in the existing window.
<a href="http://www.pageresource.com"> <img src="http://www.pageresource.com/images/pr468an01_bf4.gif" alt="PageResource.com" /> </a> This is an example of a banner.
<A HREF="http://www.place.com/" style="text-decoration:none"> text </A> This creates a linked file with no underline.
- style="text-decoration:none" This erases the underline on a linked file.
|
Backgrounds:
<BODY background="img.jpg" bgproperties="fixed"> </BODY> This creates a fixed background.
- bgproperties="fixed" This is what creates the fixed background on a web page.
|
Tables:
<TABLE border="n" cellspacing="n" cellpadding="n">
<TR>
<TD>
text
</TD>
<TD align="x">
more text
</TD>
</TR>
<TR>
<TD>
text 3
</TD>
<TD>
<IMG src="picture.jpg">
</TD>
</TR>
</TABLE>
This creates a basic 2x2 table with a picture in one of the cells.
<TABLE border=" "> This determans the size of the border, 0 is no border.
<TABLE cellspacing=" "> This determans the margins between cells.
<TABLE cellpadding=" "> This determans the amount of space between the contents of a cell and the border of the cell.
<TABLE width=" "> This is the width of the table.
<TABLE bgcolor=" "> This determans the background color of the entire table.
<TR> </TR> This tag starts a new row.
<TR bgcolor=" "> This determans the background color for a row.
<TD> </TD> This tag starts a new cell, all information goes inbetween these tags, the cell tags go inside the row tags.
<TD align=" "> This is the horizontal alignment of the objects inside a cell, it can be left, right, or center.
<TD valign=" "> This is the verticle alignment of the objects inside a cell, it can be top, middle, or bottom.
<TD rowspan=" "> The number of verticle rows the cell should take up, can be any number. This is equevilent to a verticle merge in a spreadsheet program.
<TD colspan=" "> The number of horizontal rows the cell should take up, can be any number. This is equevilent to a horizontal merge in a spreadsheet program.
<TD bgcolor=" "> This determans the background color for an individual cell.
|
Frames:
<IFRAME src="file.htm" width="n" height="n" frameborder="n"> text </IFRAME> This createsa basic frame with a file.
- src=" " This is the source of the objects inside the frame, this doesn't have to be used, the objects can be typed between the tag instead.
- width=" " This is the width of the frame, any numberical value can be typed here.
- height=" " This is the height of the frame, any numberical value can be typed here.
- frameborder=" " This is the size of the frame's border, it can be any numberical value.
|
Other Tags:
Head Tags:
<LINK rel="shortcut icon" HREF="picture.ico"> This putes a little icon somewhere at the top of the screen, this goes in the HEAD section.
|
Video Embedding:
<OBJECT width="n" height="n">
<PARAM name="movie" value="http://www.place.com/movie"></PARAM>
<PARAM name="wmode" value="transparent"></PARAM>
<EMBED src="http://www.place.com/movie" type="application/x-shockwave-flash" wmode="transparent" width="n" height="n"></EMBED>
</OBJECT>
This is the basic embedding code for a video from youtube.
- width=" " This determines the width of the video, it is normally 425. It is the same number in the OBJECT tag and the EMBED tag.
- height=" " This determines the height of the video, it is normally 355. It is the same number in the OBJECT tag and the EMBED tag.
- value=" " In the first PARAM tag it is the location of the actual video file.
- Note: The location of the video file and the place it is displayed are often different. For example: if the movie on youtube is from say https://www.youtube.com/watch?v=xo6GWfIQamA, then the actual video file is from https://www.youtube.com/v/xo6GWfIQamA.
- src=" " This is the location of the actual video file, it is the same location as in the value=" " in the first PARAM tag.
You shouldn't have to mess with any of the other tags.
|
|
|
