HTML editors:
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
HTML Tags syntax:
<tagname>content</tagname>The common <!DOCTYPE> Declarations
HTML5<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org//TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML Comments
<!-- This is a comment-->HTML Headings
<h1>content</h1><h2>content</h2>
<h3>content</h3>
:
<h6>content</h6>
HTML horizontal line
<hr>HTML Paragraphs
<p>content</p>HTML Line Breaks
<br>HTML Links
<a href="link_address">content</a>HTML Images
<img src="image_source" alt="some_text" width="value1" height="value2"><map>
<area>
HTML Text Formatting Tags
| Tag | Description |
|---|---|
| <b> | Defines bold text |
| <em> | Defines emphasized text |
| <i> | Defines a part of text in an alternate voice or mood |
| <small> | Defines smaller text |
| <strong> | Defines important text |
| <sub> | Defines subscripted text |
| <sup> | Defines superscripted text |
| <ins> | Defines inserted text |
| <del> | Defines deleted text |
HTML "Computer Output" Tags
| Tag | Description |
|---|---|
| <code> | Defines computer code text |
| <kbd> | Defines keyboard text |
| <samp> | Defines sample computer code |
| <var> | Defines a variable |
| <pre> | Defines preformatted text |
HTML Citations, Quotations, and Definition Tags
| Tag | Description | ||
|---|---|---|---|
| <abbr> | Defines an abbreviation or acronym | ||
| <address> | Defines contact information for the author/owner of a document | ||
| <bdo> | Defines the text direction | ||
| <blockquote> | Defines a section that is quoted from another source | ||
| <q> | Defines an inline (short) quotation | ||
| <cite> | Defines the title of a work | ||
| <dfn> | Defines a definition term |
HTML <title> Element
<title>to defines a title in the browser toolba.</title>HTML <base> Element
<base href="default address or a default target for all links on a page"><base target-"_blank">HTML <link> Element
The <link> tag defines the relationship between a document and an external resource.<link rel="stylesheet" type="text/css" href="mystyle.css">
HTML <style> Element
The <style> tag is used to define style information for an HTML document.<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
HTML <meta> Element
The <meta> tag provides metadata about the HTML document. It is used to spcify page description, keywords, author of the document, last modified and other metadata.<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Free web tutorials on HTML and CSS">
<meta name="author" content="Hege Refsnes">
HTML <script> Element
The <script> tag defines a client-side script.Inline CSS Styles
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>Internal CSS Style Sheet
<head><style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
External CSS Style Sheet
<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML Tables
<table border="1"><tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
HTML List Tags
| Tag | Description |
|---|---|
| <ol> | Defines an ordered list |
| <ul> | Defines an unordered list |
| <li> | Defines a list item |
| <dl> | Defines a definition list |
| <dt> | Defines an item in a definition list |
| <dd> | Defines a description of an item in a definition list |
| <ol> |
|---|
| <li>list 1</li> |
|---|
| <li>list 2</li> |
|---|
| </ol> |
|---|
output:
|
|---|
| <dl> <dt>item 1</dt> <dd>- description 1 for item 1</dd> <dt>item 2</dt> <dd>- description 1 for item 2</dd> </dl> |
|---|
| output: |
|---|
| |||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
HTML Block ElementsMost HTML elements are defined as block level elements or as inline elements.Block level elements normally start (and end) with a new line when displayed in a browser. Examples: <h1>, <p>, <ul>, <table> HTML Inline ElementsInline elements are normally displayed without starting a new line.Examples: <b>, <td>, <a>, <img> | |||||||||||||||||||||||||||||
HTML Grouping Tags
| |||||||||||||||||||||||||||||
HTML FormsHTML forms are used to pass data to a server.An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form:
<form>
. input elements . </form> HTML Forms - The Input ElementThe most important form element is the <input> element.The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. The most common input types are described below. Text Fields<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. Password Field<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd"> </form> Note: The characters in a password field are masked (shown as asterisks or circles). Radio Buttons<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> Checkboxes<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> Submit Button<input type="submit"> defines a submit button.A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> TML Form TagsNew : New tags in HTML5.
| |||||||||||||||||||||||||||||
HTML IframesAn iframe is used to display a web page within a web page.Syntax for adding an iframe:
<iframe src="URL"></iframe>
Tables<table border="1"><tr> <th>table header</th> <th>table header</th> </tr> <tr> <td>table data</td> <td>table data</td> </tr> </table> Iframe<iframe src="demo_iframe.htm"></iframe>Forms<form action="demo_form.asp" method="post/get"> <input type="text" name="email" size="40" maxlength="50"><input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit" value="Send"> <input type="reset"> <input type="hidden"> <select> <option>Apples</option> <option selected="selected">Bananas</option> <option>Cherries</option> </select> <textarea name="comment" rows="60" cols="20"></textarea> </form> Entities< is the same as <> is the same as > © is the same as © |
