Scribd
Upload
14 views5 pages

Ketik Perintah HTML

Uploaded by

nathanwicaksono28
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views5 pages

Ketik Perintah HTML

Uploaded by

nathanwicaksono28
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

1. Ketik perintah seperti ini, lalu di berinama file collapsedborders.

html kemudian simpan di


Folder latihan kalian, Contoh : Kalian buat folder baru dengan nama my collapsedborders
lalu klik tombil simpan/save.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-
collapse property.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>
Hasilnya ini.

2. Ketik perintah seperti ini, lalu di berinama file zebrastripedtable.html kemudian simpan di
Folder latihan kalian, Contoh : Kalian buat folder baru dengan nama my zebrastripedtable
lalu klik tombil simpan/save.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #D6EEEE;
}
</style>
</head>
<body>

<h2>Zebra Striped Table</h2>


<p>For zebra-striped tables, use the nth-child() selector and add a
background-color to all even (or odd) table rows:</p>

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya ini.
3. Ketik perintah seperti ini, lalu di berinama file navigationmenu.html kemudian simpan di
Folder latihan kalian, Contoh : Kalian buat folder baru dengan nama my navigationmenu
lalu klik tombil simpan/save.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a
navigation menu:</p>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>
Hasilnya ini

You might also like