Download presentation
Presentation is loading. Please wait.
1
Basic HTML
2
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>
3
Very simple HTML code <html> <head>
<title>Simple HTML</title> </head> <body> Hello World </body> </html>
4
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> Please set me to bold, italic, font = Arial, size = 3, color = Red <pre> This is a preformatted text </pre> </body> </html>
5
Image <img src=“image file name” alt=“Text to describe image”
width=“???” height=“???”>
6
Link <a href=“reference object” . . . >linked object</a>
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
7
List Unordered <ul > <li>item_1</li> …
<li>item_n</li> </ul>
8
List Ordered <ol type=“type_”> <li>item_1</li> …
<li>item_n</li> </ol> “type_” can be “1”, “A”, “a”, “I”, “i”
9
Table Begin table Begin row Column1, Column2, . . . End row . . .
End table
10
Table Begin table = <table . . . > End table = </table>
Begin row = <tr > End row = </tr> Column = <td > column content </td> column content : text, image, linked object, etc.
11
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>
12
More complex table #1 There are two rows: <table>
<tr> . . .</tr> </table>
13
More complex table #1 First row -> two columns
Second row -> one column <table> <tr> <td>. . .</td> <td> </td> </tr> <tr> <td> </td></tr> </table>
14
More complex table #1 Single column in the second row is a span of two columns of the first row: <table> <tr> <td>. . .</td> <td> </td> </tr> <tr> <td colspan=“2”> </td></tr> </table>
15
More complex table #2 There are two rows (max): <table>
<tr> . . .</tr> </table>
16
More complex table #2 Column: is the first column in the first row
is the second column in the first row Column: is the second column in the second row <table> <tr> <td>. . .</td> <td>. . .</td> </tr> <tr> <td>. . .</td> </tr> </table>
17
More complex table #2 Span two rows for column: <table>
<tr> <td rowspan=“2”>. . .</td> <td>. . .</td> </tr> <tr> <td>. . .</td> </tr> </table>
18
More complex table #3 It’s your turn ???
19
Form Begin form Form object components End form
20
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>
21
Form <form method=“?” action=“?” …> Form object components
22
Form object components
Textfield <input type=“text” name=“???” size=“???”> Password <input type=“password” name=“???” size=“???”> Hidden <input type=“hidden” name=“???”>
23
Form object components
TextArea <textarea name=“???” rows=“???” cols=“???”> Default textarea value </textarea>
24
Form object components
List Box (single) <select name=“???”> <option value=“???”>Text 1 <option value=“???” selected>Text 2 . . . </select>
25
Form object components
List Box (multiple selection) <select name=“???” multiple size=“???”> <option value=“???”>Text 1 . . . </select>
26
Form object components
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
27
Form object components
Button, Submit, Reset <input type=“button|submit|reset” value=“???”>
28
Frame Display multiple HTML document simultaneously in the same browser window Physically split pages as different html document in the browser window Why use frame ? Provide permanent navigation links
29
Frame General Implementation Begin set of frame frame1 frame2
End set of frame
30
Frame Begin set of frame: <frameset rows / cols =“?, ?"> Frame:
<frame src=“?" name=“?"> End set of frame: </frameset>
31
Frame Example <frameset rows = “20%, *”>
<frame src=“?” name=“top”> <frame src=“?” name=“bottom”> </frameset>
32
Frame Nested frame <frameset rows = “20%, *”>
<frame src=“?” name=“top”> <frameset cols = “25%, *”> <frame src=“?” name=“bottom_left”> <frame src=“?” name=“bottom_right”> </frameset>
33
Internal Frame As normal frame it can be used to display multiple HTML document simultaneously in the same browser window However, the html document pages are displayed as distinct internal elements of other main html document
34
Internal Frame Basic syntax:
<iframe src=“???” width=“???” height=“???”> Text to be displayed if browser not support internal frame </iframe>
Similar presentations
