Click and drag to scroll left and right to view all 18 figures.
<!-- figure 17.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ol { list-style-type: lower-latin; }
</style>
</head>
<body>
<h3>Shopping List</h3>
<ol>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Fruits and juices</li>
<li>Rice and pasta</li>
<li>Butter</li>
</ol>
</body>
</html>
<!-- figure 17.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ul { list-style-image: url("images/oval.png"); }
li { margin: 10px; }
</style>
</head>
<body>
<h3>Shopping List</h3>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Fruits and juices</li>
<li>Rice and pasta</li>
<li>Butter</li>
</ul>
</body>
</html>
<!-- figure 17.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ul { width: 475px; }
ul.one { list-style-position: inside; }
ul.two { list-style-position: outside; }
</style>
</head>
<body>
<h3>Marker outside</h3>
<ul class="one">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus
iaculis lacus a eleifend.</li>
<li>Nunc accumsan euismod leo a dapibus. Mauris id condimentum velit, a lacinia
nisi. Quisque varius orci accumsan nibh feugiat.</li>
</ul>
<h3>Marker inside</h3>
<ul class="two">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus
iaculis lacus a eleifend.</li>
<li>Nunc accumsan euismod leo a dapibus. Mauris id condimentum velit, a lacinia
nisi. Quisque varius orci accumsan nibh feugiat.</li>
</ul>
</body>
</html>
<!-- figure 17.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ul { width: 475px; }
ul { list-style: square inside; }
</style>
</head>
<body>
<h3>List</h3>
<ul class="illuminations">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus
iaculis lacus a eleifend.</li>
<li>Nunc accumsan euismod leo a dapibus. Mauris id condimentum velit, a lacinia
nisi. Quisque varius orci accumsan nibh feugiat. </li>
</ul>
</body>
</html>
<!-- figure 17.9 & figure 17.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial; font-weight: bold; padding-left: 30px; }
ol {
width: 700px;
padding: 20px;
list-style-position: inside;
background-image: url("images/beach.jpg");
border-radius: 20px;
box-shadow: inset 0 0 1em 0.5em orange, 0 0 1em 0.5em blue;
}
span { float: right; }
li:nth-child(2n+1) { border-style: solid; }
ol li {
padding: 5px 100px 5px 5px;
margin: 0 10px;
background-color: #cce5ff;
border-style: none solid none solid; border-color: #b3d9ff;
}
</style>
</head>
<body>
<h1>Menu List</h1>
<ol>
<li>Full Baby Chicken Grill . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . .
<span>3.50</span></li>
<li>Chicken Tikka (Boneless) . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . .
<span>3.00</span></li>
<li>Lamb Tikka (Boneless) . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . .
<span>3.00</span></li>
<li>Sheek Kebab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . .
<span>0.60</span></li>
<li>Quarter Tandoori Chicken . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . .
<span>1.50</span></li>
</ol>
</body>
</html>
<!-- figure 17.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
dt { background-color: pink; font-weight: bold; }
</style>
</head>
<body>
<h2>Web Technologies</h2>
<dl>
<dt>Internet</dt>
<dd>The Internet is a global network of interconnected computer networks that
comprises millions of different types of networks linked through various types
of connection technologies, such as fibre optic cable and wireless. </dd>
<dt>Web</dt>
<dd>The Web, also known as the World Wide Web (WWW), is an application that
runs on the Internet that links HTML documents located on different powerful
computers called Web servers.</dd>
</dl>
</body>
</html>
<!-- figure 17.14 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { padding: 10px; }
.tolist { display: list-item; }
</style>
</head>
<body>
<h2>List-item display value</h2>
<div>
<span>This is the content of an inline element.</span>
<span>This is the content of another inline element.</span>
</div>
<br>
<div>
<span class="tolist">This is the content of an inline element converted to a
list-item element.</span>
<span class="tolist">This is the content of another inline element converted to a
list-item element.</span>
</div>
</body>
</html>
<!-- figure 17.16 & figure 17.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial, Verdana, sans-serif; color: black; font-size: 100%; }
table { margin: 0.5em; }
td, th { padding: 0.4em; border: 1px solid #000; }
th {
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: left;
border-bottom: 2px solid#000;
}
tr.dkgrey { background-color: #aeaeae; }
tr.grey { background-color: #f3f3f3; }
</style>
</head>
<body>
<h2>Best Sellers</h2>
<table>
<caption>Five Top All-time Best-selling Books</caption>
<tr class="dkgrey">
<th>Book</th>
<th>Author(s)</th>
<th>First published</th>
<th>Approx. Sales</th>
</tr>
<tr>
<th>Don Quixote</th>
<th>Miguel de Cervantes</th>
<th>1605</th>
<th>315 million</th>
</tr>
<tr class="dkgrey">
<th>A Tale Of Two Cities</th>
<th>Charles Dickens</th>
<th>1859</th>
<th>200 million</th>
</tr>
<tr>
<th>The Lord of the Rings</th>
<th>J. R. R. Tolkien</th>
<th>1954/1955</th>
<th>150 million</th>
</tr>
<tr class="dkgrey">
<th>The Hobbit</th>
<th>J. R. R. Tolkien</th>
<th>1937</th>
<th>140.6 million</th>
</tr>
<tr>
<th>Le Petit Prince</th>
<th>Antoine de Saint-Exupéry</th>
<th>1943</th>
<th>140 million</th>
</tr>
</table>
</body>
</html>
<!-- figure 17.21 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
table { margin: 0.5em; border-collapse: seperate; }
td, th { padding: 0.4em; border: 1px solid #000; }
table.one { empty-cells: show; }
table.two { empty-cells: hide; }
</style>
</head>
<body>
<table class="one">
<tr><th>Fruit</th><th>Quantity</th></tr>
<tr><th>Apples</th><th>200</th></tr>
<tr><th>Banana</th><th></th></tr>
</table>
<table class="two">
<tr><th>Fruit</th><th>Quantity</th></tr>
<tr><th>Apples</th><th>200</th></tr>
<tr><th>Banana</th><th></th></tr>
</table>
</body>
</html>
<!-- figure 17.23 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial, Verdana, sans-serif; color: black; font-size: 100%; }
table { margin: 0.5em; border-collapse: collapse; width: 80%; }
td, th { padding: 0.4em; border: 1px solid #000; }
table.one { table-layout: auto; }
table.two { table-layout: fixed; }
</style>
</head>
<body>
<table class="one">
<tr>
<th>Le Petit Prince</th>
<th>Antoine de Saint-Exupéry</th>
<th>1943</th>
<th>140 million</th>
</tr>
<tr>
<th>Don Quixote</th>
<th>Miguel de Cervantes</th>
<th>1605</th>
<th>315 million</th>
</tr>
<tr>
<th>The Lord of the Rings</th>
<th>J. R. R. Tolkien</th>
<th>1954/1955</th>
<th>150 million</th>
</tr>
</table>
<table class="two">
<tr>
<th>Le Petit Prince</th>
<th>Antoine de Saint-Exupéry</th>
<th>1943</th>
<th>140 million</th>
</tr>
<tr>
<th>Don Quixote</th>
<th>Miguel de Cervantes</th>
<th>1605</th>
<th>315 million</th>
</tr>
<tr>
<th>The Lord of the Rings</th>
<th>J. R. R. Tolkien</th>
<th>1954/1955</th>
<th>150 million</th>
</tr>
</table>
</body>
</html>
<!-- figure 17.25 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.table { display: table; border: 1px solid black; }
.head { display: table-row; font-weight: bold; background-color: grey; }
.row { display: table-row; }
.cell { display: table-cell; width: 150px; border: 1px solid black; }
</style>
</head>
<body>
<h2>Display table value</h2>
<div class="table">
<div class="head">
<span class="cell">ID_No</span>
<span class="cell">Name</span>
<span class="cell">Age</span>
<span class="cell">Height</span>
</div>
<div class="row">
<span class="cell">10001</span>
<span class="cell">James Normal</span>
<span class="cell">28</span>
<span class="cell">6ft 1in</span>
</div>
<div class="row">
<span class="cell">10002</span>
<span class="cell">Amanda Holmes</span>
<span class="cell">24</span>
<span class="cell">5ft 6in</span>
</div>
</div>
</body>
</html>
<!-- figure 17.27 & figure 17.28 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
form { width: 500px; }
fieldset {
border: 1px solid #c6c4c4;
border-radius: 10px;
}
legend {
text-transform: uppercase;
background-color: #e4f0f6;
border: 1px solid #d4d4d4;
border-radius: 10px;
padding: 5px 15px;
}
div { margin: 10px; }
.box { background-color: #e4f0f6; }
.field { width: 150px; float: left; text-align: right; padding-right: 10px; }
.moveleft { margin-left: 0; }
.buttons { text-align: right; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Info</legend>
<div>
<label class="field">First name:</label>
<input class="box" type="text" name="fname" required>
</div>
<div>
<label class="field">Last name: </label>
<input class="box" type="text" name="lname">
</div>
<div>
<label class="field">Email: </label>
<input class="box" type="email" size="25" maxlength="35" name="email"
placeholder="e.g., joe@example.com">
</div>
<div>
<label class="field">Personal URL (if any): </label>
<input class="box" type="url" name="website">
</div>
<div>
<span class="field">Sex: </span>
<input type="radio" name="sex" class="moveleft" value="male">
<label>Male</label>
<input type="radio" name="sex" class="moveleft" value="female">
<label>Female</label>
</div>
<div class="buttons">
<input type="submit" value="Submit">
<input type="reset" value="Cancel">
</div>
</fieldset>
</form>
</body>
</html>
<!-- figure 17.31 & figure 17.32 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
form { width: 500px; }
fieldset {
border: 1ps solid #c6c4c4;
border-radius: 10px;
padding: 15px;
}
div { margin: 10px; }
.field { width: 150px; float: left; text-align: right; }
.buttons { text-align: right; }
.box {
width: 150px;
border: 1px solid #b3b3a9;
background-color: #e4f0f6;
margin-left: 5px;
padding: 3px 3px 3px 30px;
}
.username { background:url("images/username.png") no-repeat #e4f0f6 3% 50%; }
.email { background:url("images/email.png") no-repeat #e4f0f6 3% 50%; }
.password { background:url("images/password.png") no-repeat #e4f0f6 3% 50%; }
</style>
</head>
<body>
<form>
<fieldset>
<div><label class="field">Username:</label><input class="box username"
type="text" name="username"></div>
<div><label class="field">Email:</label><input class="box email" type="email"
name="email" placeholder="e.g., joe@example.com"></div>
<div><label class="field">Password:</label><input class="box password"
type="password" name="password"></div>
<div class="buttons"><input type="submit" value="Login"> <input type="reset"
value="Cancel"></div>
</fieldset>
</form>
</body>
</html>
<!-- figure 17.34 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
input:required { background-color: lightblue; }
input:foucs { background-color: yellow; }
input[type=checkbox]:checked + label { color: red; }
input[type=radio]:checked + label { color: red; }
</style>
</head>
<body>
<h3>Registration</h3>
<form>
<p>Please enter your details:</p>
<label>Ref: </label><input type="ref" value="10012" disbaled="disbaled"><br>
<label>First name: </label><input type="text" name="fname" required><br>
<label>Last name: </label><input type="text" name="lname" required><br>
<label>Email: </label><input type="email" required><br>
<label>Phone: </label><input type="phone"><br>
<input type="radio" id="male" name="sex"><label for="male">Male</label>
<input type="radio" id="female" name="sex"><label for="female">Female</label><br>
<input type="checkbox" id="conf"><label for="conf">Yes, send me
confirmation</label><br>
<input type="checkbox" id="terms"><label for="terms">Yes, I agree with the
terms</label><br>
</form>
</body>
</html>
<!-- figure 17.36 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
input#button {
width: 150px;
padding: 5px 0px 5px 0px;
background-color: #ffcc66;
border-radius: 5px;
box-shadow: 3px 3px 2px 0px #4d4d4d;
font-family: Arial;
font-size: 30px;
font-weight: bold;
color: black;
text-shadow: 2px 2px 1px blue;
}
input#button:hover {
color: blue;
background-color: orange;
}
</style>
</head>
<body>
<h3>Registration</h3>
<form>
<input type="submit" value="Submit" id="button">
</form>
</body>
</html>
<!-- figure 17.38 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
form { width: 500px; }
div { margin: 10px; }
.box { width: 150px; margin-left: 5px; }
.buttons { text-align: right; }
:default { border: 2px solid green; }
</style>
</head>
<body>
<form>
<fieldset>
<div><label>Username:</label><input class="box" type="text"></div>
<div><label>Password:</label><input class="box" type="password"></div>
<div class="buttons">
<input type="submit" value="Login">
<input type="reset" value="Cancel">
</div>
</fieldset>
</form>
</body>
</html>
<!-- figure 17.41 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
input:in-range { border: 2px solid green; }
input:out-of-range { border: 2px solid red; }
</style>
</head>
<body>
<h3>:in-range and :out-of-range</h3>
<form>
<p>Please enter your numbers:</p>
<p><input type="number" min="1" max="10"> (Enter between 1 and 10)</p>
<p><input type="number" min="1" max="10"> (Enter between 1 and 10)</p>
</form>
</body>
</html>
<!-- figure 17.43 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
input:valid { border: 2px solid green; }
input:invalid { border: 2px solid red; }
</style>
</head>
<body>
<h3>:valid and :invalid</h3>
<form>
Enter the first digit:<br>
<input type="number"><br>br>
Enter the second digit:<br>
<input type="number">
</form>
</body>
</html>