Tanpa Komentar: HTML Reference Sheet 2

HTML Reference Sheet 2

Basic Tags
Body Attributes
Special Characters
Text Tags
Links
Formatting
Bullet and Numbering List
Graphical Elements
Tables
Table Attributes
Frames
Frames Attributes
Forms
Styles

1. Basic Tags

<html></html>
Creates an HTML document -- REQUIRED

<head></head>
Sets off the title and other information that isn't displayed on the Web page itself -- REQUIRED

<title></title>
Puts the name of the document in the title bar -- REQUIRED

<body></body>
Sets off the visible portion of the document -- REQUIRED

Body Attributes:

<body bgcolor="?">
    Sets the background color, using name or hex value ("blue" or "#0000FF")

    <body background="BACK.gif">
    Sets the background using an image file

    <body text="?">
    Sets the text color, using name or hex value, default is #FFFFFF

    <body link="?">
    Sets the color of links, using name or hex value, generally #0000FF (blue)

    <body vlink="?">
    Sets the color of followed links, using name or hex value, generally #800000 (maroon)

    <body alink="?">
    Sets the color of links on click, generally #FF0000 (red)

    <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
    Sets the margins of the page to zero. Browsers typically have default values (usually 15 pixels) for page margins. Code above covers both Internet Explorer and Netscape.


Creates an invisible comment - it will not appear on the page as viewed in the browser - it is a note to yourself in the code.

<META HTTP-EQUIV="REFRESH" content="5;url=http://www.url.com">
Automatic Redirect Code; 5 is the seconds before redirect.

Special Characters

 
Non-breaking space - can use to indent or to make a double space: <p> </p>

<nobr></nobr>
No separation of words, e.g., <nobr>401(k)</nobr>

<
Angled bracket: <

>
Angled bracket: >

&
The "and" sign: &

"
Quote mark: "


em (long) dash


Bullet symbol (solid disc)

$
Dollar sign

£ or £
Pound sterling

¥ or ¥
Yen sign

€ or €
Euro sign

© or ©
Copyright symbol: ©

Bullet and Numbering Lists

<dl></dl>
Creates a definition list

<dt>
Precedes each definition term

<dd>
Precedes each definition

<ol></ol>
Creates a numbered list

    Ordered List Attributes:

    <ol type="?">
    Where the types are "1", "a", "A", "I", "i"

    <ol start="#">
    1,2,3 is the default for ordered lists

<li></li>
Precedes each list item, and adds a number or a bullet (use with <ol> and <ul>)

<ul></ul>
Creates a bulleted list

    Unordered List Attributes:

    <ul type="?">
    Where the types are "circle" - hollow bullet; "disc" - solid bullet; "square" - solid block

Links

<a href="URL"></a>
Creates a hyperlink. If you use the full address, i.e., "http://www.name.com", it is an absolute link. If you use "../index.htm", it is a relative link -- it is in the same file system. Use"../" to indicate "one folder up"

<a href="mailto:EMAIL"></a>
Creates a link to an e-mail address. For example, <a href="mailto:kmoravec4@yahoo.com"> would create an e-mail message to kmoravec4@yahoo.com.

<a name="NAME"></a>
Creates a target location within a document -- i.e., a bookmark.

<a href="#NAME"></a>
Links to that target location (bookmark) from elsewhere in the document

    A (link) Attributes:

    <a href="URL" title="NAME">
    Adds simple mouseover text to a text link (see ALT for image mouseover text)

    <a href="URL" target="_blank">
    The link is opened in a NEW browser window

    <a href="URL" style="text-decoration:none">
    The link is not underlined (underlining is the default)

Graphical Elements

<img src="URL">
Adds an image (image source). It is a good idea to set up an image folder, i.e., <img src="images/image.gif">

    Image Attributes:

    <img src="name" align="?">
    Aligns an image: "left", "right", "center"; "bottom", "top", "middle"

    <img src="name" border="?">
    Sets size of border around an image -- this can only be used when the image is a link. The default is 1. If you want no border, use <img src="name" border="0">

    <img src="name" width="?">
    Sets the width of the image - use # (pixels)

    <img src="name" height="?">
    Sets the height of the image -- use # (pixels). You should only use width and height if you have the exact size of the image, otherwise it will not look right.

    <img src="name" alt="?">
    Gives the alternate text for the image; also supplies simple mouseover text for the image

<hr>
Inserts a horizontal rule

    Horizontal Rule Attributes:

    <hr size="?">
    Sets size (height) of rule -- use # or %. Default is 1pt.

    <hr width="?">
    Sets width of rule, in percentage (%) or absolute value (#)

    <hr noshade>
    Creates a rule without a shadow

    <hr align="?">
    Aligns the rule: "left", "right", "center"; "bottom", "top", "middle"

    <hr color="?">
    Sets font color, using name or hex value

Tables

<table></table>
Creates a table

<tr></tr>
Sets off each row in a table -- tag close is optional

<td></td>
Sets off each cell in a row

<th></th>
Sets off the table header (a normal cell with bold, centered text)

    Table Attributes:

    <table border="#">
    Sets width of border around table cells

    <table bordercolor="?">
    Sets the color of the border

    <table align="?">
    Sets alignment for table: "left", "center", "right"

    <table width="?"
    Sets width of table - in pixels (#) or as a percentage (%) of document width

    <table cellspacing="#">
    Sets amount of space between table cells

    <table cellpadding="#">
    Sets amount of space between a cell's border and its contents

    <tr align="?"> or <td align="?">
    Sets alignment for cell(s): "left", "center", "right"

    <tr valign="?"> or <td valign="?">
    Sets vertical alignment for cell(s): "top", "middle", "bottom"

    <td bgcolor="?">
    Sets the background color of the cell, using name or hex value ("blue" or "#0000FF")

    <td background="BACK.gif">
    Sets the background of the cell using an image file

    <td colspan="#">
    Sets number of columns a cell should span

    <td rowspan="#">
    Sets number of rows a cell should span (default=1)

    <td nowrap>
    Prevents the lines within a cell from being broken to fit

    <td width="?">
    Sets width of cell - in pixels (#) or as a percentage (%)

    <td height="?">
    Sets height of cell - in pixels (#) or as a percentage (%)

Frames

<frameset></frameset>
Tag in a frames document; can also be nested in other framesets -- replaces <body></body>

    Frameset Attributes:

    <frameset rows="value,value">
    Defines the rows within a frameset, using number in pixels, or percentage of width

    <frameset cols="value,value">
    Defines the columns within a frameset, using number in pixels, or percentage of width

<frame>
Defines a single frame -- or region -- within a frameset

<noframes></noframes>
Defines what will appear on browsers that don't support frames

Frames Attributes:

    <frame src="URL">
    Specifies which HTML document should be displayed

    <frame name="name">
    Names the frame, or region, so it may be targeted by other frames

    <frame marginwidth="#">
    Defines the left and right margins for the frame; must be equal to or greater than 1

    <frame marginheight="#">
    Defines the top and bottom margins for the frame; must be equal to or greater than 1

    <frame scrolling="VALUE">
    Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto". The default, as in ordinary documents, is auto.

    <frame noresize>
    Prevents the user from resizing a frame

Forms

<form></form>
Creates all forms

<select multiple name="NAME" size="?"></select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.

<option>
Sets off each menu item

<select name="NAME"></select>
Creates a pulldown menu

<textarea name="NAME" cols="40" rows="8"></textarea>
Creates a text box area. Columns set the width; rows set the height.

<input type="checkbox" name="NAME">
Creates a checkbox. Text follows tag.

<input type="radio" name="NAME" value="x">
Creates a radio button. Text follows tag

<input type=text name="foo" size="20">
Creates a one-line text area. Size sets length, in characters.

<input type="submit" value="NAME">
Creates a Submit button

<input type="image" border="0" name="NAME" src="name.gif">
Creates a Submit button using an image

<input type="reset">
Creates a Reset button

Styles

For hyperlinks:

<style>

</style>

For text:

<style>

</style>

<STYLE type="text/css">
BODY {font-family: serif;}
H2, H3 {font-family: Verdana, Helvetica, sans-serif;}
H2 {color: maroon; text-decoration: underline;}
P {margin-left: 3em;}
SUP {font-size: x-small; color: #666666;)
DIV.endnote P {text-indent: -1em; color: #333333;}
.link {text-decoration: underline;)
</STYLE> working in HTML 4

Tanpa Komentar

Thursday, January 9, 2014