- Struktur HTML -
Langkah awal untuk membuat program web adalah kita harus membuat struktur HTML terlebih dahulu, dengan mengetik perintah.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- Tag Title -
Masuk ke sesi Tag Title dimana perintah ini berfungsi untuk menampilkan title pada tab browser kita kita bisa menggunakan perintah.
<!DOCTYPE html>
<html>
<head>
<title>Keinformations</title>
</head>
<body>
</body>
</html>
Maka akan muncul hasil seperti gambar diatas.
- Heading Text -
Lalu untuk sesi Heading Text kita bisa mengetikan perintah.
<!DOCTYPE html>
<html>
<head>
<title>Keinformations</title>
</head>
<body>
<h1>Hei Watsupp?!</h1>
<h2>Hei Watsupp?!</h2>
<h3>Hei Watsupp?!</h3>
<h4>Hei Watsupp?!</h4>
<h5>Hei Watsupp?!</h5>
</body>
</html>
Perlu diketahui semakin tinggi nilai <h> nya maka tulisan yang akan muncul akan semakin kecil.
Dan hasilnya akan seperti gambar diatas.
- Insert Image -
Pada sesi ini kita akan melakukan penginputan image(gambar).
Kita harus tau di folder mana kita menyimpan gambar yang akan kita input, kita dapat melihatnya di link MyComputer, kita dapat lihat imagenya berada di keinformations > asset > img > keinformations.png.
Gambar diatas adalah gambar yg akan kita input
<!DOCTYPE html>
<html>
<head>
<title>Keinformations</title>
</head>
<body>
<img src="asset/img/keinformations.png">
</body>
</html>
Dan hasil akhirnya akan tampak seperti gambar diatas.
- Hyperlink -
Sesi Hyperlink dimana kita akan memasukan suatu link dalam text ataupun image.
Kita dapat memberi perintah.
<!DOCTYPE html>
<html>
<head>
<title>Keinformations</title>
</head>
<body>
<a href="https://keinformations.blogspot.com">Click This!!</a>
</body>
</html>
Dan akan muncul tulisan biru yang dapat diklik.
Dan jika diklik kita akan dibawa ketempat yang dituju.
- Ordered List -
Ordered List kita dapat melakukan perintah.
<!DOCTYPE html>
<html>
<head>
<title>Keinformations</title>
</head>
<body>
<h4>List Pemrograman Web</h4>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT(JS)</li>
<li>PHP</li>
<li>MySQL</li>
</ol>
</body>
</html>
Maka akan muncul list-list seperti gambar diatas.
- Unordered List -
<!DOCTYPE html>
<html>
<head>
<title>Keinformations</title>
</head>
<body>
<h4>List Pemrograman Web</h4>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT(JS)</li>
<li>PHP</li>
<li>MySQL</li>
</ul>
</body>
</html>
Maka akan muncul list-list seperti gambar diatas (bedanya unordered list tidak menggunakan angka).
- Table -
<!DOCTYPE html>
<html>
<head>
<title>Keinformations</title>
</head>
<style type="text/css">
table, th, td {
border: 1px solid red;
}
</style>
<body>
<h4>List Pemrograman Web</h4>
<table>
<tr>
<th>No</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Hypertext Text Markup Language (HTML)</td>
</tr>
</table>
</body>
</html>
Hasil akhirnya akan seperti gambar diatas, kita bisa menambahkan baris lagi dengan menambahkan.
<!DOCTYPE html>
<html>
<head>
<title>Keinformations</title>
</head>
<style type="text/css">
table, th, td {
border: 1px solid red;
}
</style>
<body>
<h4>List Pemrograman Web</h4>
<table>
<tr>
<th>No</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Hypertext Text Markup Language (HTML)</td>
</tr>
<tr>
<td>2</td>
<td>Contoh Tambahan</td>
</tr>
</table>
</body>
</html>
Sekian tutorial dari saya, jika ada kesalahan mohon maaf (^.^)v.
ReplyDeleteThank you for your visit