Sie sind auf Seite 1von 6

Tutorial 01

Question 01 - Retype the following and save it as font_tags.htm



<html>
<head><title>Font Tags</title>
</head>
<body>
Document Structures
<h1>This is Header One<h1> This is Header One
<h2>This is Header Two<h2> This is Header Two
<h3>This is Header Three<h3> This is Header Three
<h4>This is Header Four<h4> This is Header Four
<h5>This is Header Five<h5> This is Header Five
<h6>This is Header Six<h6> This is Header Six

<b>This is Bold</b> This is Bold
<i>This is Italic</i> This is Italic
<u>This is Underline</u> This is Underline

Superscript: 2<sup>10</sup>=1024 Superscript: 2
10
=1024
Subscript: H<sub>2</sub>O Subscript: H
2
O

<s>This is Strike Through</s> This is Strike Throngh
<strike>This is Strike Through</strike> This is Strike Through

<strong>This is Strong</strong> This is Strong
<em>This is Emphasis</em> This is Emphasis
<big>This is Big</big> This is Big
<small>This is Small</small> This is Small

<font size=6>This is Font Size=6</font> This is Font Size=6
<font size=5>This is Font Size=5</font> This is Font Size=5
<font size=4>This is Font Size=4</font> This is Font Size=4
<font size=3>This is Font Size=3</font> This is Font Size=3
<font size=2>This is Font Size=2</font> This is Font Size=2
<font size=1>This is Font Size=1</font> This is Font Size=1

<font face="Times New Roman">
This is Times New Roman</font>
This is Times New Roman
<font face="Arial">This is Arial</font> This is Arial
<font face="Courier">This is Courier</font This is Courier
<font face="Comic Sans MS">
This is Comic Sans MS</font>
This is Comic Sans MS
<font face="Webdings">This is Webdings</font> + #@
<font face="WingDings">This is WingDings</font> +) ) 1)_)_

1/6
</body>
</html>
Document Structures

Question 02 - Retype the following and save it as listing.htm

<html>
<head><title>Listings</title>
</head>
<body>
Document Structures
<b>Unordered Lists</b>
<ul>
<li>Today
<li>Tomorrow
<li>Yesterday
</ul>
Unordered Lists
Today
Tomorrow
Yesterday
<b>Unordered Lists</b>
<ul><li>Today
<li>Tomorrow
<li>Yesterday
<ul><li>123
<li>456
<li>789
<ul><li>abc
<li>pqr
<li>xyz
</ul></ul></ul>
Unordered Lists
Today
Tomorrow
Yesterday
o 123
o 456
o 789
abc
pqr
xyz
<b>Ordered Lists</b>
<ol>
<li>Today
<li>Tomorrow
<li>Yesterday
</ol>
Ordered Lists
1. Today
2. Tomorrow
3. Yesterday
<b>Ordered Lists</b>
<ol><li>Today
<li>Tomorrow
<li>Yesterday
<ol><li>123
<li>456
<li>789
<ol><li>abc
<li>pqr
<li>xyz
</ol></ol></ol>
Ordered Lists
1. Today
2. Tomorrow
3. Yesterday
1. 123
2. 456
3. 789
1. abc
2. pqr
3. xyz
<b>Definition Lists</b>
<dl>
<dt>Today
<dd>Today will be yesterday
<dt>Tomorrow
<dd>Tomorrow will be today
</dl>
Definition Lists
Today
Today will be yesterday
Tomorrow
Tomorrow will be today
2/6
<b>Mark Styles</b>
<ul>
<li type=dics>dics
<li type=circle>circle
<li type=square>square
</ul>
Mark Styles
dics
o circle
square
<b>Capital Letters</b>
<ol type="A">
<li>ONE-ONE
<li>TWO-TWO
<li>THREE-THREE
</ol>
<ol type="a">
<li>one-one
<li>two-two
<li>three-three
</ol>
Capital Letters
A. ONE-ONE
B. TWO-TWO
C. THREE-THREE
a. one-one
b. two-two
c. three-three
<b>Romanized</b>
<ol type="I">
<li>one-one
<li>two-two
<li>three-three
</ol>
<ol type="i">
<li>one-one
<li>two-two
<li>three-three
</ol>
Romanized
I. ONE-ONE
II. TWO-TWO
III. THREE-THREE
i. one-one
ii. two-two
iii. three-three
<b>Number</b>
<ol type="1">
<li>ONE-ONE
<li>TWO-TWO
<li>THREE-THREE
</ol>
Number
1. ONE-ONE
2. TWO-TWO
3. THREE-THREE
<b>List Started Number</b>
<ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
<ol start=10>
<li>TWO-ONE
<li type=i>TWO-ONE
</ol></ol>
List Started Number
E. ONE-ONE
F. ONE-TWO
10. TWO-ONE
x. TWO-ONE
</body>
</html>
Document Structures



3/6
Question 03 Retype the following and save it as table.htm

<html>
<head>
<title>Table</title>
</head>
<body>
Table

<table border>
<tr><td>Food</td><td>Drink</td><td>Sweet</td>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C

<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table></td>
Food Drink Sweet
A B C

<table border=5>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table></td>
Food Drink Sweet
A B C


<table border cellspacing=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table></td>
Food Drink Sweet
A B C

<table border cellpadding=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table></td>
Food Drink Sweet
A B C

<table border width=200 height=100>
<tr><th width=50%height=70>Food</th>
<th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C

<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table></td>
Food Drink Sweet
A B C

<table border>
<tr><th colspan=3>Morning Menu</th>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table></td>
Morning Menu
Food Drink Sweet
A B C
4/6

<table border>
<tr><th rowspan=3>Morning Menu</th>
<th>Food</th><td>A</td>
<tr><th>Drink</th><td>B</td>
<tr><th>Sweet</th><td>C</td>
</table></td>
Morning Menu
Food A
Drink B
Sweet C

<table border width=160>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</table>
Food Drink Sweet
A B C

<table border height=100>
<tr><th>Food</th><th>Drink</th>
<th>Sweet</th><th>Other</th>
<tr><td valign=top>A</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>
<td valign=baseline>D</td>
</table>
Food Drink Sweet Other
A B C D

</body>
</html>


Question 04 Retype the following and save as form.htm

<html>
<head>
<title>Form</title>
</head>

<body>


<form action=/cgi-bin/post-query method=POST>
Your Name:<input type=text name=name size="20"><br>
Your Home Page:<input type=text name=home value=http:/
size="20"/><br>
Password:<input type=password name=name size="20"><br>
<input type=submit><input type=reset>
</form>
Your Name:
Your Home Page:
http:/

Password:
Submit Query Reset



<form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>

Submit Query Reset



5/6
<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=f01>Banana
<input type=checkbox name=f02 checked>Apple
<input type=checkbox name=f03>Orange<br><br>
<input type=submit><input type=reset>
</form>
Banana Apple Orange

Submit Query Reset



<form action=/cgi-bin/post-query method=POST>
<input type=radio name=fruits>Banana
<input type=radio name=fruits checked>Apple
<input type=radio name=fruits value=Orange>Orange<br>
<br>
<input type=submit><input type=reset>
</form>
Banana Apple Orange

Submit Query Reset



<form action=/cgi-bin/post-query method=POST>
<select name=fruits>
<option>Banana
<option selected>Apple
<option value=My_Favorite>Orange
</select><br><br>
<input type=submit><input type=reset>
</form>
Apple


Submit Query Reset



<form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=30>
</textarea>
<br><br>
<input type=submit><input type=reset>
</form>


Submit Query Reset


</body>
</html>



Question 5 Create a html document that contains links to all the html document above.

Question 6 Create a html document that contains links to all the html document above using images as anchor.



6/6

Das könnte Ihnen auch gefallen