Friday, 18 January 2013

HTML - Hyper Text Markup Language

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:
  1. list 1
  2. list 2
<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:
item 1
- description 1 for item 1
item 2
- description 1 for item 2

HTML Block Elements

Most 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 Elements

Inline elements are normally displayed without starting a new line.
Examples: <b>, <td>, <a>, <img>


HTML Grouping Tags

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)    




HTML Forms

HTML 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 Element

The 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>
How the HTML code above looks in a browser:
First name:
Last name:
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>
How the HTML code above looks in a browser:
Password:
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>
How the HTML code above looks in a browser:
Male
Female

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>
How the HTML code above looks in a browser:
I have a bike
I have a car

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 Tags

New : New tags in HTML5.
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist>New Specifies a list of pre-defined options for input controls
<keygen>New Defines a key-pair generator field (for forms)
<output>New Defines the result of a calculation
 

HTML Iframes

 An 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

&lt; is the same as <
&gt; is the same as >
&#169; is the same as © 


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)