S05 Activity / Discussion
parent
aa889ed078
commit
44f6b94b81
@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>S05: [Activity] HTML Forms, Tables and Semantic Tags</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Zuitt IT Solutions</h1>
|
||||
<section class="products-container">
|
||||
<table border="1">
|
||||
<thead colspan="3">
|
||||
<th>Package</th>
|
||||
<th>Price</th>
|
||||
<th>Description</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Basic</td>
|
||||
<td>₱ 500.00</td>
|
||||
<td>Package inclues a fully functional website with desired specifications.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Basic</td>
|
||||
<td>₱ 1000.00</td>
|
||||
<td>Enjoy all the benefits of the basic package and also includes site support and maintenance.</td>
|
||||
</tr>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="3">Additional features after initial project is inclusive of charges</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<!-- End of Products Description -->
|
||||
<section class="contact-form">
|
||||
<form action="https://google.com">
|
||||
<h1>Contact Form</h1>
|
||||
<label for="firstName">First Name:</label><br>
|
||||
<input type="text" id="firstName" placeholder="Type your Firstname." required><br><br>
|
||||
<label for="lastName">Last Name:</label><br>
|
||||
<input type="text" id="firstName" placeholder="Type your Lastname." required><br><br>
|
||||
<label for="email">Email Address:</label><br>
|
||||
<input type="text" id="email" placeholder="Type your Email Address." required><br><br>
|
||||
<label for="email">Contact Number:</label><br>
|
||||
<input type="text" id="contactNum" placeholder="Type your Contact number." required><br><br>
|
||||
<!-- Creates a dropdown menu -->
|
||||
<label for="serviceType">Service Type:</label><br>
|
||||
<select name="serviceType" id="serviceType">
|
||||
<option value="">Frond End Programming</option>
|
||||
<option value="">Back End Programming</option>
|
||||
<option value="">Full Stack Programming</option>
|
||||
</select>
|
||||
<br><br>
|
||||
<label for="prefContact">Preferred Contact:</label>
|
||||
<br>
|
||||
<input type="checkbox" name="email-type1" id="email-type1" required>
|
||||
<label for="email-type1">Email</label>
|
||||
<br>
|
||||
<input type="checkbox" name="phone-type2" id="phone-type2" required>
|
||||
<label for="phone-type2">Phone</label>
|
||||
<br>
|
||||
<br>
|
||||
<label for="prefContact">Package:</label>
|
||||
<br>
|
||||
<input type="radio" name="prefContact" id="basic-type1" required>
|
||||
<label for="basic-type1">Basic</label>
|
||||
<br>
|
||||
<input type="radio" name="prefContact" id="premium-type2" required>
|
||||
<label for="premium-type2">Premium</label>
|
||||
<br><br>
|
||||
<label for="notes">Notes:</label>
|
||||
<br>
|
||||
<textarea name="notes" id="notes" rows="5"></textarea>
|
||||
<br>
|
||||
<!-- Creates a button that will submit the form data -->
|
||||
<button type="submit">Send Inquiry</button>
|
||||
<!-- Creates a button to reset the form data -->
|
||||
<button type="reset">Reset</button>
|
||||
</form>
|
||||
</section>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>S05: HTML Forms, Tables and Semantic Tags</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- div tag creates a container element used to hroup html elements -->
|
||||
<!-- header value is used for SEO -->
|
||||
<div>
|
||||
<h2>HTML Entities</h2>
|
||||
</div>
|
||||
<div id="section">
|
||||
<p>
|
||||
<em>Reserved characters in HTML (e.g < or >characters that can mix up with HTML Codes.)</em>
|
||||
</p>
|
||||
<!-- Defines an HTML Table -->
|
||||
<table border="1">
|
||||
<!-- Used to group table header contents -->
|
||||
<thead>
|
||||
<!-- Defines a table row -->
|
||||
<tr>
|
||||
<th colspan="2">Entity</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- Used to group table body contents -->
|
||||
<tbody>
|
||||
<!-- Defines a table data element -->
|
||||
<tr>
|
||||
<td><</td>
|
||||
<td>lt</td>
|
||||
<td>Less than symbol</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>₱</td>
|
||||
<td>#8369</td>
|
||||
<td>Peso Sign</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>></td>
|
||||
<td>gt</td>
|
||||
<td>Greater than symbol</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"</td>
|
||||
<td>Quote</td>
|
||||
<td>Double quotation mark</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>'</td>
|
||||
<td>apos</td>
|
||||
<td>Single quotation mark</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>&</td>
|
||||
<td>amp</td>
|
||||
<td>Ampersand</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ũ</td>
|
||||
<td>Utilde</td>
|
||||
<td>U with ~</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ñ</td>
|
||||
<td>ntilde</td>
|
||||
<td>N with ~</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>&</td>
|
||||
<td>amp</td>
|
||||
<td>Ampersand</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!-- Used to group table footer contents -->
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="3">List of HTML Entities</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<h2>Forms</h2>
|
||||
<p>
|
||||
<em>
|
||||
Input elements that make up a form.
|
||||
</em>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form">
|
||||
<!-- Creates an HTML form to capture user input -->
|
||||
<form action="https://google.com">
|
||||
|
||||
<!-- Creates a label and allows for input field selection when click -->
|
||||
<label for="fullName">Full name:</label><br>
|
||||
<!-- Creates an input field to capture user input -->
|
||||
<input type="text" name="fullName" placeholder="Type your Full name">
|
||||
|
||||
<br><br>
|
||||
|
||||
<label for="birthDate">Birth Date:</label><br>
|
||||
<input type="text" name="birthDate" id="birthDate" placeholder="Type your Birthday" required>
|
||||
|
||||
<br><br>
|
||||
|
||||
<label for="age">Age:</label><br>
|
||||
<input type="date" name="age" id="age" placeholder="Type your age" required>
|
||||
|
||||
<br><br>
|
||||
|
||||
<!-- Creates a dropdown menu -->
|
||||
<label for="gender">Gender:</label><br>
|
||||
<select name="gender" id="gender">
|
||||
<option value="">Male</option>
|
||||
<option value="">Female</option>
|
||||
</select>
|
||||
|
||||
<br><br>
|
||||
|
||||
<label for="notes">Notes:</label><br>
|
||||
<!-- Creates a textbox for long response input. -->
|
||||
<textarea name="notes" id="notes" rows="5"></textarea>
|
||||
|
||||
<br><br>
|
||||
|
||||
<label for="newUser">New User:</label>
|
||||
<input type="radio" name="newUser" id="user-type1">
|
||||
<label for="user-type1">Yes</label>
|
||||
|
||||
<input type="radio" name="newUser" id="user-type2">
|
||||
<label for="user-type2">No</label>
|
||||
|
||||
<br><br>
|
||||
|
||||
<Label>Role:</Label>
|
||||
<input type="checkbox" name="role1" id="role1" value="developer">
|
||||
<label for="role1">Developer</label>
|
||||
<input type="checkbox" name="role2" id="role2" value="student">
|
||||
<label for="role2">Student</label>
|
||||
<input type="checkbox" name="role3" id="role3" value="manager">
|
||||
<label for="role3">Manager</label>
|
||||
|
||||
<br><br>
|
||||
<!-- Creates a button that will submit the form data -->
|
||||
<button type="submit">Submit</button>
|
||||
<!-- Creates a button to reset the form data -->
|
||||
<button type="reset">Reset</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,4 @@
|
||||
* {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
Loading…
Reference in New Issue