Basic HTML. Guide to HTML code Not case sensitive Use tag for formatting output: new line, paragraph, text size, color, font type, etc. Can be a single

Basic HTML

Guide to HTML code

• Not case sensitive

• Use tag for formatting output: new line, paragraph, text size, color, font type, etc.

• Can be a single or coupled tag

• Tag general format: Single: <tag_format>

Double: <tag_format> . . . </ tag_format>

Very simple HTML code<html>

<head>

<title>Simple HTML</title>

</head>

<body>

Hello World

</body>

</html>

More complex code<html><head><title>More about HTML Text</title></head><body>This is a normal text<br><b>This is a text (bold)</b><br><i>This is a text (italic)</i><p><font face=“Arial” color=“#FF0000” size=+3>This is a text with font = Arial, size = 3, color = Red</font><p>Please set me to bold, italic, font = Arial, size = 3, color = Red<p><pre>This is apreformatted text</pre></body></html>

Image

<img src=“image file name” . . . >

<a href=“reference object” . . . >linked object</a>

reference object :• Part of text in the same document• Other document• Image / animation / audio / video• Application logic (CGI script)• Client script (JavaScript / VBScript)

linked object :• Text• Image

Link

Table

Begin table

Begin row

Column1, Column2, . . .

End row

. . .

End table

TableBegin table = <table . . . >End table = </table>

Begin row = <tr . . . >End row = </tr>

Column = <td . . . > column content </td>

column content : text, image, linked object, etc.

Table

Table with 2 rows & 3 columns for each

row:

<table border cols=3 rows=2 width=“100%”>

<tr><td>1</td><td>2</td><td>3</td></tr>

<tr><td>4</td><td>5</td><td>6</td></tr>

</table>

More complex table #1

There are two rows:

<table>

<tr> . . .</tr>

<tr> . . .</tr>

</table>


First row -> two columns

Second row -> one column

<table>

<tr> <td>. . .</td> <td> . . . </td> </tr>

<tr> <td> . . . </td></tr>

</table>


Span two columns for the single column in the second row:

<table>

<tr> <td>. . .</td> <td> . . . </td> </tr>

<tr> <td colspan=“2”> . . . </td></tr>

</table>


There are two rows (max):

<table>

<tr> . . .</tr>

<tr> . . .</tr>

</table>


<table>

<tr> <td>. . .</td> <td>. . .</td> </tr>

<tr> <td>. . .</td> </tr>

</table>

Column: is the first column in the first row

Column: is the second column in the first row

Column: is the second column in the second row


<table>

<tr> <td rowspan=“2”>. . .</td> <td>. . .</td> </tr>

<tr> <td>. . .</td> </tr>

</table>

Span two rows for column:


It’s your turn ???

FormBegin form

Form object components

End form

Form• Begin form = <form . . . >

• Form object components = Textfiled, Password, Hidden, TextArea, List Box (single/multiple), Radio Button, Check Box, Submit Button, Reset Button, Buttons

• End form = </form>

Form

<form method=“?” action=“?” …>


</form>


Textfield<input type=“text” name=“???” size=“???”>

Password<input type=“password” name=“???” size=“???”>

Hidden<input type=“hidden” name=“???”>


TextArea

<textarea name=“???” rows=“???” cols=“???”>

Default textarea value

</textarea>

List Box (single)

<select name=“???”>

<option value=“???”>Text 1

<option value=“???” selected>Text 2

. . .

</select>


List Box (multiple selection)

<select name=“???” multiple size=“???”>

<option value=“???”>Text 1

. . .

</select>


Radio Button<input type=“radio” name=“r1” value=“v1”>Text 1

<input type=“radio” name=“r1” value=“v2” checked>Text 2

<input type=“radio” name=“r1” value=“v3”>Text 3

. . .

Check Box<input type=“checkbox” name=“c1” value=“v1”>Text 1

<input type=“checkbox” name=“c2” value=“v2” checked>Text 2

<input type=“checkbox” name=“c3” value=“v3”>Text 3

. . .


Button, Submit, Reset

<input type=“button/submit/reset” value=“???”>


Frame Object

• display multiple HTML doccument simultaneously in the same browser window

• Why use frame ?

• provide permanent navigation menu

Frame Object

• General Implementation

Begin set of frame

frame1

frame2

End set of frame

Frame ObjectBegin set of frame:<frameset rows / cols =“?, ?">

Frame:<frame src=“?" name=“?"> End set of frame:</frameset>

Frame Object

• Example

<frameset rows = “20%, *”>

<frame src=“?” name=“top”>

<frame src=“?” name=“bottom”>

</frameset>

Frame Object• Nested frame

<frameset rows = “20%, *”> <frame src=“?” name=“top”> <frameset cols = “25%, *”>

<frame src=“?” name=“bottom_left”>

<frame src=“?” name=“bottom_right”>

</frameset>

</frameset>

Documents

Basic HTML. Guide to HTML code Not case sensitive Use tag for formatting output: new line, paragraph, text size, color, font type, etc. Can be a single