Това са задачите от второто домашно по HTML на тема таблици.
Задача 1: Create Web Pages like the following using tables:
<!DOCTYPE html>
<html>
<head>
<title>Fruit Table</title>
</head>
<body>
<table>
<colgroup>
<col width="300">
<col width="200">
</colgroup>
<thead>
<tr>
<th colspan="2">Fresh Fruits</th>
</tr>
</thead>
<tbody>
<tr>
<td>It has long been known that a diet that includes
at least a few servings of fresh fruit every day
will help keep you healthy, fit and trim.</td>
<td><img src="fruit.jpg" width="200" alt="fruits"/></td>
</tr>
</tbody>
</table>
</body>
</html>
Задача 2: Create a Web Page like the following using forms:
<!DOCTYPE html> <html> <head> <title>Alphabet Table</title> </head> <body> <table border="1"> <tr> <td colspan="3" >Title goes here</td> <td>A</td> <td>B</td> </tr> <tr> <td rowspan="3">C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr> <td>H</td> <td colspan="2" >I</td> <td rowspan="2" >J</td> </tr> <tr> <td>K</td> <td>L</td> <td>M</td> </tr> <tr> <td>N</td> <td colspan="4">O</td> </tr> </table> </body> </html>
Задача 3: Create a Calculator-like table. You should use a HTML 5 form for the Calculator.
Buttons for all the numbers and operators (+, -, etc.)
Textbox for the result
Do not make the same styles as the example
<!DOCTYPE html> <html> <head> <title>Form</title> </head> <body> <form> <fieldset> <label for="mname">Member Name</label> <input type="text" name="mname" id="mname" /> <label>*req</label> <br /> <label for="email">Email</label> <input type="text" name="email" id="email" /> <label>*req</label> <br /> <label for="school">School</label> <input type="text" name="school" id="school" /> <label>*req</label> <br /> <input type="image" src="Submit.jpg" width="50" name="SubmitBtn" alt="submit" /> </fieldset> </form> </body> </html>
Задача 4:
<!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <form> <table border="1"> <tr> <td colspan="5" dir="rtl"><input type="text" value="0" /></td> </tr> <tr> <td><input type="image" src="images/mc.jpg" alt="MC" /></td> <td><input type="image" src="images/mr.jpg" alt="MR" /></td> <td><input type="image" src="images/ms.jpg" alt="MS" /></td> <td><input type="image" src="images/mplus.jpg" alt="M+" /></td> <td><input type="image" src="images/mminus.jpg" alt="M-" /></td> </tr> <tr> <td><input type="image" src="images/back.jpg" alt="Back" /></td> <td><input type="image" src="images/ce.jpg" alt="CE" /></td> <td><input type="image" src="images/c.jpg" alt="C" /></td> <td><input type="image" src="images/invert.jpg" alt="+/-" /></td> <td><input type="image" src="images/sqrt.jpg" alt="Sqrt" /></td> </tr> <tr> <td><input type="image" src="images/seven.jpg" alt="7" /></td> <td><input type="image" src="images/eight.jpg" alt="8" /></td> <td><input type="image" src="images/nine.jpg" alt="9" /></td> <td><input type="image" src="images/divide.jpg" alt="/" /></td> <td><input type="image" src="images/percent.jpg" alt="%" /></td> </tr> <tr> <td><input type="image" src="images/four.jpg" alt="4" /></td> <td><input type="image" src="images/five.jpg" alt="5" /></td> <td><input type="image" src="images/six.jpg" alt="6" /></td> <td><input type="image" src="images/multiple.jpg" alt="*" /></td> <td><input type="image" src="images/onex.jpg" alt="1/x" /></td> </tr> <tr> <td><input type="image" src="images/one.jpg" alt="1" /></td> <td><input type="image" src="images/two.jpg" alt="2" /></td> <td><input type="image" src="images/three.jpg" alt="3" /></td> <td><input type="image" src="images/minus.jpg" alt="-" /></td> <td rowspan="2"><input type="image" src="images/equal.jpg" alt="=" /></td> </tr> <tr> <td colspan="2"><input type="image" src="images/zero.jpg" alt="0" /></td> <td><input type="image" src="images/comma.jpg" alt="," /></td> <td><input type="image" src="images/plus.jpg" alt="+" /></td> </tr> </table> </form> </body> </html>
В домашното има много картинки, които няма да се визуализират ако се използва този код. Хубаво е да се спомене, че навсякъде където има input трябва да се използва таг <form>.
Няма коментари:
Публикуване на коментар