Tutorials for HTML and CSS
Adding new lines in HTML is probably the simplest thing that you can do.
We use the <br /> tag for adding new lines. Note that since there is no content involved with the break tag, it is an empty tag and to comply with HTML standards we just close it with a / after the br and before >
Example:
This is line 1. <br />
This is line 2.
The above code will output:
This is line 1.
This is line 2.
HTML (HyperText Markup Language) contains of tags which are directives to the browser. Each tag tells the browser to display content in some format. HTML Tags are sometimes also referred to as HTML Commands.
Tags are contained between the < and > signs.
An example would be anchor tag which is <a>. Most of the tags are closed with a corresponding closing tag which comes between </ and >. Again, an example would be </a>.
Some tags don’t have a closing like a linebreak tag or horizontal rule tag. They are called self enclosed tags. Its a good practice to close such tags within the opening tag itself. Example would be <br /> or <hr />.
The basic syntax of a tag is:
<TAG-NAME {ATTRIBUTE1{=”VALUE1″ …}}>TEXT CONTENT</TAG-NAME>
Below is a list of commonly used tags and their use:
| Tags | Use |
|---|---|
| HEADER | |
| <head> | The text within this tag specifies the header information for the HTML document. |
| <meta> | Specifies information about this HTML page. This information is not displayed on the browser but may be used by search engines. |
| <title> | The text within this tag specifies the title of the HTML document. |
| BODY | |
| <body> | The information within this tag is the body of the HTML document |
| TEXT FORMATTING | |
| <h1>…<h6> | The text within these tags are treated as headers. |
| <b> | Bold the text within the tag. |
| <i> | Italicize the text within the tag. |
| <u> | Underline the text within the tag. |
| <br> | Line break. |
| <p> | New paragraph. |
| <font> | Specify the font type, size, and color for the text within the tag. |
| <center> | Center the text within the tag. |
| TABLES | |
| <table> | Signifies the presence of an HTML table. |
| <th> | Specifies header properties in a table. |
| <tr> | Specifies row properties in a table. |
| <td> | Specifies column properties in a table. |
| BULLET LISTS | |
| <ul> | Unordered list, usually followed by one or more <li> tags. |
| <ol> | Ordered list, usually followed by one or more <li> tags. |
| <li> | Itemized list. |
| LINKS AND IMAGES | |
| <a> | Link. |
| <img> | Specifies the image to be shown on the HTML document. |
| FRAMES | |
| <frameset> | Signifies that this HTML page is composed of frame(s). |
| <frame> | Specifies the properties within each frame. |
Basic Tags
<html></html>
Creates an HTML document
<head></head>
Sets off the title and other information that isn’t displayed on the Web page itself
<body></body>
Sets off the visible portion of the document
<title></title>
Puts the name of the document in the title bar
<body bgcolor=?>
Sets the background color, using name or hex value
<body text=?>
Sets the text color, using name or hex value
<body link=?>
Sets the color of links, using name or hex value
<body vlink=?>
Sets the color of followed links, using name or hex value
<body alink=?>
Sets the color of links on click
<pre></pre>
Creates preformatted text
<h1></h1>
Creates the largest headline
<h6></h6>
Creates the smallest headline
<b></b>
Creates bold text
<i></i>
Creates italic text
<tt></tt>
Creates teletype, or typewriter-style text
<cite></cite>
Creates a citation, usually italic
<em></em>
Emphasizes a word (with italic or bold)
<strong></strong>
Emphasizes a word (with italic or bold)
<font size=?></font>
Sets size of font, from 1 to 7
<font color=?></font>
Sets font color, using name or hex value Links
<a href=”URL”></a>
Creates a hyperlink
<a href=”mailto:EMAIL”></a>
Creates a mailto link
<a name=”NAME”></a>
Creates a target location within a document
<a href=”#NAME”></a>
Links to that target location from elsewhere in the document Formatting
<p>
Creates a new paragraph
<p align=?>
Aligns a paragraph to the left, right, or center
<br>
Inserts a line break
<blockquote></blockquote>
Indents text from both sides
<dl></dl>
Creates a definition list
<dt>
Precedes each definition term
<dd>
Precedes each definition
<ol></ol>
Creates a numbered list
<li>
Precedes each list item and adds a number
<ul></ul>
Creates a bulleted list
<li>
Precedes each list item and adds the bullet
<div align=?>
A generic tag used to format large blocks of HTML; also used for stylesheets Graphical Elements
<img src=”name”>
Adds an image
<img src=”name” align=?>
Aligns an image: left, right, center, bottom, top, middle
<img src=”name” border=?>
Sets size of border around an image
<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of rule
<hr width=?>
Sets width of rule in percentage or absolute value
<hr noshade>
Creates a rule without a shadow Tables
<table></table>
Creates a table
<tr></tr>
Sets off each row in a table
<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 cellspacing=#>
Sets amount of space between table cells
<table cellpadding=#>
Sets amount of space between a cell’s border and its contents
<table width=# or %>
Sets width of table in pixels or as a percentage of document width
<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#>
Sets number of columns a cell should span (default=1)
<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
<frameset></frameset>
Precedes the <body> tag in a frames document; can also be nested in other framesets
<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 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 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 scroll bar; value may equal “yes,” “no,” or “auto.” (The default, as in ordinary documents, is auto.)
<frame noresize>
Prevents the user from resizing a frame
For functional forms, you’ll have to run a CGI script. The HTML just creates the appearance of a form.
<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
<option>
Sets off each menu item
<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
Tables consist of <table> element and other related tags. These other tags are nested inside the <table> tag.
The child tags of the <table> elements are as follows:
<caption>
<colgroup>
<thead>
<tfoot>
<tbody>
<tr>
An example would where the <table> tag can be used is:
<table border = "1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>
The above code would be rendered as below in the HTML Web Page:
| Cell 1 | Cell 2 |
The <font> tag specifies the font face, font size, and font color of text.
Below are some of the common attributes used to format the font:
| Attribute | Value | Description |
|---|---|---|
| color | rgb(x,x,x) #xxxxxx colorname |
Specifies the color of text |
| face | font_family | Specifies the font of text |
| size | number | Specifies the size of text |
<font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font>
The above code will be displayed as:
This is some text!
This is some text!
This is some text!
A complete table listing all the possible HTML color codes is displayed in the below table for your reference.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
<table> tag in HTML is used for rendering TABLES in the html web page. <th>, <tr> and <td> tags are used in conjunction with the <table> tag to draw a table in HTML.
<th> tag is used for the header row. There can be only one occurence of header row in a table. Text within this tag is bolded.
<tr> tag signifies a row in table. A Table consists of multiple rows.
<td> tag signifies the data in table. All data/content comes inside the <td> tag. A Row contains of multiple <td> tags.
<table border="1"> <tr><th>Heading1</th><th>Heading2</th></tr> <tr><td>Row1 Col1</td><td>Row1 Col2</td</tr> <tr><td>Row2 Col1</td><td>Row2 Col2</td></tr> </table>
The above code will display a table of 2X2 dimensions as shown below:
| Heading1 | Heading2 |
|---|---|
| Row1 Col1 | Row1 Col2 |
| Row2 Col1 | Row2 Col2 |
Built with clean and validated XHTML and CSS, support widget on both sidebars, Ads friendly.
