Basic tags
Basic HTML structure
<html>
<head>
<title>website title</title>
</head>
<body>
content of website ...
</body>
</html>Common Tags for Blogs
| Tags | descriptions |
|---|---|
<h?>heading</h?> |
Heading(h1 for largers to h6 for smallest) |
<p>paragraph</p> |
Paragraph of Text |
<b>bold</b> |
Make text between tags bold |
<i>italic</i> |
Make text between tags italic |
<a href="url">link name</a> |
Create a link to another page or website |
<div> ... </div> |
Divide up page content into sections, and applying styles |
<img src="filename.jpg"> |
Show a picture |
<ul> <li> list </li> </ul> |
Unordered, bullet-point list |
<br> |
Line Break(force to create a new line) |
<span style="color:red">red</span> |
Use css to change color |
Text Formatting
| Tags | descriptions |
|---|---|
<h?> ... </h?> |
Heading (?= 1 for largest to 6 for smallest, eg h1) |
<b> ... </b> |
Bold Text |
<i> ... </i> |
Italic Text |
<u> ... </u> |
underline Text |
<strick> ... </strick> |
Strickout |
<sup> ... </sup> |
Superscript - Smaller text placed upon normal text |
<sub> ... </sub> |
Superscript - Smaller text placed below normal text |
<small> ... </small> |
Small - Fineprint size text |
<strong> ... </strong> |
Strong - Shown as Bold in most browsers |
<em> ... </em> |
Emphasis - Shown as Italics in most browsers |
<block> ... </block> |
specifies a section that is quoted from another source. |
<pre> ... </pre> |
text which is to be presented exactly as written in the HTML file |
Section Divisions
| Tags | descriptions |
|---|---|
<div>...</div> |
Division or Section of Page content |
<span>...</span> |
Section of text within other content |
<p>...</p> |
Paragraph of Text |
<br> |
Line Break |
<hr> |
Basic Horizonal line |
Images
format : <img src="url" alt="text">
<img> Tag Attributes:
src="url": URL or Filename of image (required)alt="text": Alternate Text (required)align="?": Image alignment withing surrounding textwidth=?: Image width (in pixels or %)height=?: Image height(in pixels or %)border=?: Border thickness (in pixels)
Linking Tag
format: <a href="url">link text</a>
<a> Tag Attributes:
href="url": Location of page to link toname="?": Name of link (name of anchor, or name of bookmark)target="?": Link target location:_self,_blank,_top,_parenthref="url#bookmark": Link to a bookmark (defined withnameattribute).href="mailto:email": Link which initiates an email (dependant on user’s email client).
Lists
| Tags | descriptions |
|---|---|
<ol>...</ol> |
Ordered list |
<ul>...</ul> |
Un-ordered list |
<li>...<li> |
List item(within order and unorder) |
<ol type="?"> |
ordered list type: A,a,I,i,1 |
<ol start="?"> |
ordered list starting value |
<ul type="?"> |
unordered list bullet type:disc,circle,square |
<li value="?"> |
List item value(changes current and subsequent items) |
<li type="?"> |
List Item Type (changes only current item) |
<dl>...</dl> |
defininition list |
<dt>...</dt> |
Term or phrase being defined |
<dd>...</dd> |
detailed definition of term |
notice:<dt> and <dd> both are within <dl>,for example:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>Table
format: <table>...</table>
Table Attributes:
| Attributes | descriptions |
|---|---|
border="?" |
thickness of outside border |
bordercolor="#??????" |
Border Color |
cellspacing="?" |
space between cells(pixels) |
cellpadding="?" |
space between cellwall and content |
align="??" |
Horizonal alignment:left,right,center |
bgcolor='??' |
Background color |
width="??" |
Table width |
height="??" |
Table height |
<tr>...</tr> |
Row content |
<th>...</th> |
Header cell |
<td>...</td> |
Table cell within table row |
<td> Attributes:
1. colspan="??": Number of columns the cells spans cross(cell merge)
2. rowspan="??": Number of rows the cells spans cross(cell merge)
3. width="??": cell width
4. height="??": cell height
5. bgcolor="??":background color
6. align="??: Horizonal alignment:left,right,center
7. valign="??": Vertical Alignment: top, middle, bottom
8. nowrap : Force no line breaks in a particular cell
Forms
format:<form>...</form>
<form> Tag Attributes:
1. action="url": URL of form script.
2. method="?": method of form: get,post
3. enctype="?": for file upload:enctype="multipart/form-data"
4. <input>...</input>: input field within form
<input> Tag Attributes:
1. type="?": input field type: text,password,checkbox,submit etc.
2. name="?": Form Field Name (for form processing script)
3. value="?": Value of Input Field
4. size="?": Field Size
5. maxlength="?": Maximum Length of Input Field Data
6. checked:Mark selected field in radio button group or checkbox
7. <select> ... </select>: Select options from drop down list
<select> Tag Attributes:
1. name="?": Drop Down Combo-Box Name (for form processing script)
2. size="?": Number of selectable options
3. multiple: Allow multiple selections
4. <option> ... </option>:Option (item) within drop down list
<option> Tag Attributes:
1. value="***": Option Value
2. selected: Set option as default selected option
3. <textarea> ... </textarea>:Large area for text input
<textarea> Tag Attributes:
1. name="***": Text Area Name (for form processing script)
2. rows="?": Number of rows of text shown
3. cols="?": Number of columns (characters per rows)
4. wrap="***": Word Wrapping: off, hard, soft