Задача 1: Create a Web form that looks like this sample:
<!DOCTYPE html>
<html>
<head>
<title>Web Form</title>
</head>
<body>
<form>
<table border="1" cellspacing="0" style="text-align:left">
<colgroup>
<col width="140" />
<col width="320" />
</colgroup>
<tr>
<td style="text-align:right"><label>Last Name</label></td>
<td><input type="text" name="lname" required="required" pattern="[a-z-A-Z]{2,15}" size="40"/></td>
</tr>
<tr>
<td style="text-align:right"><label>First Name</label></td>
<td><input type="text" name="fname" required="required" pattern="[a-z-A-Z]{2,15}" size="40"/></td>
</tr>
<tr>
<td style="text-align:right"><label>Adress</label></td>
<td><textarea name="adress" cols="30" rows="4" required="required" ></textarea></td>
</tr>
<tr>
<td style="text-align:right"><label>City</label></td>
<td><input type="text" name="city" required="required" pattern="[a-z-A-Z]{2,20}" size="25"/>
<span><label>State</label>
</span><input type="text" name="state" required="required" pattern="[a-z-A-Z]{2,20}" size="5"/></td>
</tr>
<tr>
<td style="text-align:right"><label>Zip/Postal Code</label></td>
<td><input type="text" name="zip" required="required" pattern="[0-9]{4}" size="15"/></td>
</tr>
<tr>
<td style="text-align:right"><label>Country</label></td>
<td><select name="country">
<option value="BG" selected="selected">Bulgaria</option>
<option value="RO">Romania</option>
<option value="GR">Greece</option>
<option value="SR">Serbia</option>
</select></td>
</tr>
<tr>
<td style="text-align:right"><label>Phone(Country Code, Area Code, Number)</label></td>
<td><span>*(</span>
<input type="tel" name="phone" required="required" pattern="[\+]\d{3}" placeholder="+359" size="5"/>
<span>)</span>
<input type="tel" name="phone" required="required" pattern="\d{3}" placeholder="888" size="5"/>
<span>-</span>
<input type="tel" name="phone" required="required" pattern="\d{6}" placeholder="888888" size="15"/></td>
</tr>
<tr>
<td style="text-align:right"><label>E-mail</label></td>
<td><input type="email" name="email" required="required" pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z0-9_]{3,}.[a-zA-Z0-9_]{2,4}" placeholder="sample@email.com" size="40"/></td>
</tr>
<tr>
<td style="text-align:right"><label>Birth date</label></td>
<td><span>Month</span><input type="text" name="birth date" required="required" pattern="[0-9]{1,2}" size="1"/>
<span>Day</span>
<input type="text" name="birthdate" required="required" pattern="[0-9]{1,2}" size="1"/>
<span>Year(4 digit)</span>
<input type="text" name="birthdate" required="required" pattern="[0-9]{4}" size="3"/></td>
</tr>
<tr>
<td style="text-align:right"><label>Gender</label></td>
<td><select name="gender">
<option value="male" selected="selected">Male</option>
<option value="female">Female</option>
</select></td>
</tr>
<tr>
<td style="text-align:right"><label>Starting date</label></td>
<td><input name="startingdate" type="radio" value="s" />
<label>Spring 2006</label>
<input name="startingdate" type="radio" value="r" />
<label>Summer 2006</label></td>
</tr>
<tr>
<td style="text-align:right"><label>Comments/Questions</label>
<td><textarea name="comments" cols="35" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align:center"> <input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Clear This Form" /></td>
</tr>
</table>
</form>
</body>
</html>
Задача 2: Create the following using tables and forms:
<!DOCTYPE html>
<html>
<head>
<title>Univercity Table</title>
</head>
<body>
<form>
<table border="1" cellspacing="0">
<thead>
<tr>
<th rowspan="2">Order</th>
<th colspan="3">Personal Info</th>
<th colspan="5">University Marks</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Faculty Number</th>
<th>English</th>
<th>Math</th>
<th>Biology</th>
<th>Physics</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="9"><input type="button" value="Previous" />
<a href="#">1</a>
<span>,</span>
<a href="#">2</a>
<span>,</span>
<a href="#">3</a>
<span>,</span>
<a href="#">4</a>
<span>,...,</span>
<a href="#">10</a>
<input type="button" value="Next" /></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Pesho</td>
<td>Yordanov</td>
<td>123456</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3,50</td>
</tr>
<tr>
<td>2</td>
<td>Pesho</td>
<td>Yordanov</td>
<td>123456</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3,50</td>
</tr>
<tr>
<td>3</td>
<td>Pesho</td>
<td>Yordanov</td>
<td>123456</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3,50</td>
</tr>
<tr>
<td>4</td>
<td>Pesho</td>
<td>Yordanov</td>
<td>123456</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3,50</td>
</tr>
<tr>
<td>5</td>
<td>Pesho</td>
<td>Yordanov</td>
<td>123456</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3,50</td>
</tr>
<tr>
<td>6</td>
<td>Pesho</td>
<td>Yordanov</td>
<td>123456</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3,50</td>
</tr>
<tr>
<td>7</td>
<td>Pesho</td>
<td>Yordanov</td>
<td>123456</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3,50</td>
</tr>
<tr>
<td>8</td>
<td>Pesho</td>
<td>Yordanov</td>
<td>123456</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3,50</td>
</tr>
<tr>
<td>9</td>
<td>Pesho</td>
<td>Yordanov</td>
<td>123456</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3,50</td>
</tr>
<tr>
<td>10</td>
<td>Pesho</td>
<td>Yordanov</td>
<td>123456</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3,50</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Задача 3: Construct the following Grid component:
Try to make a HTML page, that looks just like the example
Not required to style for the homework
<!DOCTYPE html>
<html>
<head>
<title>Grid Component</title>
</head>
<body>
<form>
<table cellspacing="0" border="1">
<thead>
<tr>
<th colspan="6">Drag a column header and drop it here to group by that column</th>
</tr>
<tr>
<th>ProductID</th>
<th>Product Name</th>
<th>Unit Price</th>
<th>Quantity per unit</th>
<th>Units in stock</th>
<th>Discontinued</th>
</tr>
<tr>
<th><input type="text" name="1" /></th>
<th><input type="text" name="2" /></th>
<th><input type="text" name="3" />
<input type="image" src="images/Button1.jpg" width="20" alt="B" /></th>
<th><input type="text" name="4" /></th>
<th><input type="text" name="5" />
<input type="image" src="images/Button1.jpg" width="20" alt="B" /></th>
<th style="text-align:left"><input type="checkbox" name="" value="" />
<input type="image" src="images/Button1.jpg" width="20" alt="B" /></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4"><input type="image" src="images/first.jpg" width="20" alt="<<" />
<input type="image" src="images/Previous.jpg" width="20" alt="<" />
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<span>...</span>
<input type="image" src="images/next.jpg" width="20" alt=">" />
<input type="image" src="images/last.jpg" width="20" alt=">>" />
<label for="pagesize">Page size:</label>
<select name="pagesize" id="pagesize">
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="2">4</option>
<option value="2">5</option>
<option value="2">6</option>
<option value="2">7</option>
<option value="2">8</option>
<option value="2">9</option>
<option value="2" selected="selected">10</option>
</select></td>
<td colspan="2" style="text-align:right">335104 items in 33511 pages</td>
</tr>
</tfoot>
<tbody style="text-align:left">
<tr>
<th>1</th>
<th>Chai</th>
<th>$18.00</th>
<th>10 boxes x 20 bags</th>
<th>39</th>
<th><input type="checkbox" name="" value="" /></th>
</tr>
<tr>
<th>2</th>
<th>Chang</th>
<th>$19.00</th>
<th>24 - 12 oz bottles</th>
<th>17</th>
<th><input type="checkbox" name="" value="" /></th>
</tr>
<tr>
<th>3</th>
<th>Aniseed Syrop</th>
<th>$10.00</th>
<th>12 - 550ml bottles</th>
<th>13</th>
<th><input type="checkbox" name="" value="" /></th>
</tr>
<tr>
<th>4</th>
<th>Chef Anton's Cajun Seasoning</th>
<th>$22.00</th>
<th>48 - 6 oz jars</th>
<th>53</th>
<th><input type="checkbox" name="" value="" /></th>
</tr>
<tr>
<th>5</th>
<th>Chef Anton's Gumbo Mix</th>
<th>$21.35</th>
<th>35 boxes</th>
<th>0</th>
<th><input type="checkbox" name="" value="" /></th>
</tr>
<tr>
<th>6</th>
<th>Grandma's Boysenberry Spread</th>
<th>$25.00</th>
<th>12 - 8 oz jars</th>
<th>120</th>
<th><input type="checkbox" name="" value="" /></th>
</tr>
<tr>
<th>7</th>
<th>Uncle Bob's Organic Dried Pears</th>
<th>$30.00</th>
<th>12 - 1 lb pkgs.</th>
<th>15</th>
<th><input type="checkbox" name="" value="" /></th>
</tr>
<tr>
<th>8</th>
<th>Northwoods Cranberry Sause</th>
<th>$40.00</th>
<th>12 - 12oz jars</th>
<th>6</th>
<th><input type="checkbox" name="" value="" /></th>
</tr>
<tr>
<th>9</th>
<th>Mishi Kobe Niku</th>
<th>$97.00</th>
<th>18 - 500g pkgs.</th>
<th>29</th>
<th><input type="checkbox" name="" value="" /></th>
</tr>
<tr>
<th>10</th>
<th>Ikura</th>
<th>$31.00</th>
<th>12 - 300ml jars</th>
<th>31</th>
<th><input type="checkbox" name="" value="" /></th>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Задача 4*: Create the following HTML Page:
<!DOCTYPE html>
<html>
<head>
<title>Mac Book Air</title>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th style="text-align:center" colspan="3"><span><a href="#">Apple</a></span>
<span><a href="#">Toshiba</a></span>
<span><a href="#">Lenovo</a></span>
<span><a href="#">Dell</a></span>
<span><a href="#">Asus</a></span>
<span><a href="#">Acer</a></span>
<span><a href="#">HP</a></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><fieldset><legend>Apple Mac Book Air</legend>
<table>
<tr>
<td rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
<td>64GB SSD</td>
</tr>
<tr>
<td>2GB DDR</td>
</tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
<td><fieldset><legend>Apple Mac Book Air</legend>
<table>
<tr>
<td rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
<td>64GB SSD</td>
</tr>
<tr>
<td>2GB DDR</td>
</tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
<td rowspan="3"><div>Min price: 500USD</div>
<div><input type="range" min="500" max="1500" /></div>
<div>Max price: 500USD</div>
<div><input type="range" min="500" max="1500" /></div>
<div>Min RAM: 4GB</div>
<div><input type="range" min="4" max="16" /></div>
<div>Max RAM: 16GB</div>
<div><input type="range" min="4" max="16" /></div></td>
</tr>
<tr>
<td><fieldset><legend>Apple Mac Book Air</legend>
<table>
<tr>
<td rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
<td>64GB SSD</td>
</tr>
<tr>
<td>2GB DDR</td>
</tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
<td><fieldset><legend>Apple Mac Book Air</legend>
<table>
<tr>
<td rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
<td>64GB SSD</td>
</tr>
<tr>
<td>2GB DDR</td>
</tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td><fieldset><legend>Apple Mac Book Air</legend>
<table>
<tr>
<td rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
<td>64GB SSD</td>
</tr>
<tr>
<td>2GB DDR</td>
</tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
<td><fieldset><legend>Apple Mac Book Air</legend>
<table>
<tr>
<td rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
<td>64GB SSD</td>
</tr>
<tr>
<td>2GB DDR</td>
</tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Последната задача съм се опитал да я докарам едно към едно със заданието, но има лека разлика. Според мен може да има и по-лесен начин за реализация, но за момента само така успях да го направя.
Няма коментари:
Публикуване на коментар