Dasar-dasar HTML
Pendahuluan
HTML adalah bahasa markup yang digunakan untuk pembuatan sebuah website, namun begitu HTML bukanlah bahasa pemrograman, ia hanya merupakan bahasa markup.
HTML ialah bahasa yang menggunakan tag buka dan tag tutup. Misal, tag <HTML> harus ditutup dengan tag </HTML>. Namun, ada beberapa tag HTML yang bisa digunakan tanpa menggunakan tag penutup. Contohnya tag <hr> & <br>.
Kerangka HTML
Langsung saja untuk kerangka HTMLnya
<!DOCTYPE html>
<html>
<head>
<title>Judul</title>
</head>
<body>
Isi konten sebuah web
</body>
</html>
<html>
<head>
<title>Judul</title>
</head>
<body>
Isi konten sebuah web
</body>
</html>
Tag <head>
Di atas merupakan kerangka dari sebuah bahasa HTML. Di dalam tag <head> ada tag <title> yang digunakan untuk memberi judul pada sebuah halaman website contohnya seperti pada halaman artikel yang sedang kalian baca ini, di atas ada judul halamannya.
<head>
<link rel="stylesheet" href="styles.css">
</head>
<link rel="stylesheet" href="styles.css">
</head>
Tag <body>
Lalu yang terakhir adalah tag <body>, pada tag inilah isi sebuah website ditaruh dan yang ditampilkan pada halaman website. Jadi secara garis besarnya, kerangka HTML itu terbagi menjadi 2 bagian, Head dan Body.
Untuk selanjutnya kita coba memahami HTML ini sambil praktek, silakan siapkan perangkatnya, saya rekomendasikan Sublime karena saya menggunakan Sublime sebagai editornya karna lebih mudah untuk digunakan.
Pembuatan Halaman Web Statis
Kita akan membuat beberapa halaman web statis seperti halaman Beranda, Kontak, Profil dan lainnya, dan beberapa halaman tersebut nantinya akan saling berhubungan. Untuk langkah pertama, kita akan membuat halaman Beranda terlebih dahulu.
Halaman Beranda (index.html)
Pertama kita buat folder untuk penyimpanan file-file HTML yang akan kita buat, saya membuat folder bernama PWPB yang disimpan di dalam Documents di C:\Users\aqil\Documents\
Setelah itu buka sublimenya, dan ketik kode HTML di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<h3>ini index</h3>
<a href="index.html">Beranda</a>
<a href="kontak.html">Kontak</a>
<a href="profil.html">Profil</a>
</body>
</html>
Jika sudah, pilih File > Save > arahkan ke folder yang tadi kita buat, simpan dengan nama index.html.
kemudian kembali ke Sublime, klik kanan pada bagian yang kosong, lalu pilih Open in Browser..
Maka akan tampil halaman web statis yang kita buat pada browser yang berisi 3 link yaitu link menuju halaman Beranda (index.html), Kontak (kontak.html) dan Profil (profil.html), namun untuk link menuju Kontak & Profil masih belum bisa karena kita belum buat halamannya. Selanjutnya kita akan membuat halaman Kontak terlebih dahulu.
Halaman Kontak (kontak.html)
Masih di Sublime file index.html, kita pilih File > Save as..
Arahkan di folder yang sama dengan file index.html, simpan dengan nama file kontak.html
Sampai disini link menuju kontak.html sudah bisa diakses, selanjutnya kita isi halaman kontak dengan link menuju sosial media yang kita punya seperti Facebook, Twitter & Instagram.
Sebelumnya, kita search dulu di google icon Facebook, Twitter & Instagram di google gambar, lalu simpan di folder baru yang diberi nama sosial media.
Setelah itu kembali ke Sublime di file kontak.html, ketik kode berikut ini tepat di bawah tag <hr>
<table>
<tr>
<td><a href="Link FB"><img src="sosial media/facebook.png" width="36" height="36"></a></td>
<td><a href="Link FB">Abdurrahman Aqil</td>
</tr>
<tr>
<td><a href="Link IG"><img src="sosial media/instagram.png" width="36" height="36"></a></td>
<td><a href="Link IG">Abdurrahmanaqil</td>
</tr>
<tr>
<td><a href="Link Twitter"><img src="sosial media/twitter.png" width="36" height="36"></a></td>
<td><a href="Link Twitter">AbdurrahmanAqil</td>
</tr>
</table>
Sama dengan pembuatan halaman Kontak,
Masih di Sublime file index.html, kita pilih File > Save as..
Arahkan di folder yang sama dengan file index.html, simpan dengan nama file profil.html
Buat folder baru, berinama image. Dan masukkan foto kita ke dalam folder tersebut.
Lalu ketik kode dibawah ini, tepat di bawah tag <hr>
<table>
<tr>
<td rowspan="4"><img src="image/foto1.jpg" width="100" height="130"></td>
<td>Abdurrahman Aqil</td>
</tr>
<tr>
<td>Kelas</td>
<td>:</td>
<td>XI RPL 1</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>Jl Raya Tanah Baru</td>
</tr>
<tr>
<td>No.Telpon</td>
<td>:</td>
<td>087881846154</td>
</tr>
</table>
Lalu simpan dan coba jalankan di browser. Sebagai contoh hasilnya seperti ini.
Okay, sampai disini untuk pembuatan 3 halaman web statis, untuk videonya bisa klik video di bawah ini
selanjutnya pembuatan Halaman Saran bisa klik disini
Post a Comment