HTML Notes (i)

<!DOCTYPE HTML><HTML>

<title> Document title </title>

<Body><H1>My first title</H1><P>My first paragraph.</P></Body></HTML>

This is the most basic structure of HTML, HTML is not a programming language, but a markup language

which

• DOCTYPE declares the document type
• In label <title> and </title> for document title
• Located in Tags
• Located in tags <body> and </body> for visualizing web content
• Used in label
• Located in label <p> with </p> as a paragraph display

1. Meaning of the basic label

<a> Define a hyperlink

<p> this is a paragraph. </p>
<br> (line wrapping)
<!--This is a comment--

2. Formatting of text

<b> Bold text </b>
<code> Computer code </code>
<em> Accent Text </em>
<i> Italic text </i>
<kbd> Keyboard Input </kbd>
<pre> pre-formatted text </pre>
<small> smaller text </small>
<strong> Important Text </strong>

<abbr> (abbreviation)
<address> (Contact information)
<bdo> (Text direction)
<blockquote> (part referenced from another source)
<cite> (name of work)
<del> (Deleted text)
<ins> (inserted text)
<sub> (subscript text)
<sup> (superscript text)

3. Links

Normal Links: <a href= "http://www.example.com/" > link text </a>
Image link: <a href= "http://www.example.com/" ></a>
Mail link: <a href= "mailto:[email protected" > Send e-mail</a>

Bookmark:
<a id= "Tips" > Tips section </a>
<a href= "#tips" > Skip to the Tips section </a>

4. Picture

5. Styles, chunks

<style type= "Text/css" >
h1 {color:red;}
p {color:blue;}
</style>

Block-level elements in the <div> document </div>
Inline elements in the <span> document </span>

6. List

(1) Unordered list

<ul>
<li> Projects </li>
<li> Projects </li>
</ul>

(2) Ordered list

<ol>
<li> the first </li>
<li> the second </li>
</ol>

(3) Definition list

<dl>
<dt> Project 1</dt>
<dd> Description Project 1</dd>
<dt> Project 2</dt>
<dd> Description Project 2</dd>
</dl>

7. Forms

<table border= "1" >
<tr>
<th> Table title </th>
<th> Table title </th>
</tr>
<tr>
<td> Tabular Data </td>
<td> Tabular Data </td>
</tr>
</table>

8. Framework

<iframe src= "demo_iframe.htm" ></iframe>

9. Forms

<form action= "demo_form.php" method= "Post/get" >

<input type= "text" name= "email" size= "maxlength=" >
<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> Apple </option>
<option selected= "selected" > Banana </option>
<option> Cherry </option>
</select>

<textarea name= "comment" rows= "cols=" ></textarea>

</form>

10. Character Entities

	Space	 	& #160;
<	Less than sign	&lt;	& #60;
>	Greater than sign	&gt;	& #62;
&	and number	&amp;	& #38;
"	Quotes	&quot;	& #34;
‘	Apostrophe	&apos; (ie not supported)	& #39;
￠	Score of	&cent;	& #162;
£	Pounds	&pound;	& #163;
¥	Yen	&yen;	& #165;
€	Euro	&euro;	& #8364;
§	Section	&sect;	& #167;
©	Copyright	&copy;	& #169;
®	Registered trademarks	&reg;	& #174;
™	Trademark	&trade;	& #8482;
X	Multiplication sign	&times;	& #215;
÷	Division Sign	&divide;	& #247;

HTML Notes (i)