Belajar HTML Untuk Pemula Level 5


Halo sobat lautan, semoga sehat selalu ya. 
Sebelumnya, kita telah mempelajari list element. 
Sebuah element yang berfungsi untuk membuat menu pada skrip HTML. 
Dari sini, kita telah tau bahwa tag <ol> dan tag <ul> bersifat sebagai container daripada tag <li>. Untuk lebih jelasnya, kamu bisa membaca ulang lagi materi terkait dengan itu pada artikel dibawah ini


Pada artikel kali ini, kita akan akan kembali mempelajari mengenai list element. 
Namun kali ini, kita akan memulainya dari cara membuat menu navigasi dan baru setelahnya akan mempelajari image related element. 

Cobalah skrip dibawah ini dan perhatikan hasilnya!

<html>
<head>
<meta charset="UTF-8">
<title> Membuat Menu Navigasi </title>
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Tech_news.html">Tech News</a></li>
<li><a href="Tech_history.html">Tech History</a></li>
<li><a href="Artikel_Unik.html">Artikel Unik IT</a></li>
</ul>
</body>
</html>

Ya, kalau dipikir-pikir sekali lagi, hasil dari skrip diatas tidak tampak seperti menu yang pada biasanya. Karena apa ? karena kita belum memberikannya style. 
Nah, berikut ini adalah skrip yang bisa digunakan untuk mempercantik tampilan menu 

(letakkan tag style diantara tag head)

<style>
ul {
    list-style: none;
    margin: 0;
    padding: 0;

ul li {
   float: left;
}
ul a {
   text-decoration: none;
   color: black;
   padding: 10px 20px;
   height: 20px;
   display: block;
   background-color: #c2c2c2;
}
ul a:hover {
   color: white;
   background-color: #838181;
}
</style>

Sudah selesai ;D. 
Masuk pada materi berikutnya yakni:

Image related element.

Gambar adalah salah satu komponen yang paling penting dalam tampilan halaman website. Salah satu contoh penerapannya, ada pada logo website. Untuk dapat memasukan unsur gambar pada halaman HTML, maka digunakan tag <img>

Tag <img> ini termasuk kedalam inline level element. Selain itu, tag <img> merupakan tag yang tidak membutuhkan penutup, dengan kata lain, tag jomblo.

Atribut src

Perlu disadari gambar tidak akan muncul, sebelum kita memberikan atribut tambahan yakni src, singkatan dari source. Atribut ini berfungsi untuk menuliskan alamat gambar yang akan ditampilkan. Alamat yang dimaksud bisa berupa alamat absolut atau alamat relative.

Dibawah ini merupakan contoh tag <img> dengan menggunakan alamat absolut dan alamat relative.

Contoh Alamat Absolut
<body>
<img src="https://www.lautan-it.com/wp-content/uploads/2017/09/Lautan-It.png">
</body>

Contoh Alamat Relative
<body>
<img src="Lautan-it.png">
</body>

Atribut alt

Selain atribut src, didalam tag <img>, juga punya atribut alt (alternative text). Fungsi atribut alt adalah untuk memberikan keterangan mengenai gambar. 
Isi dari atribut tersebut akan muncul pada kondisi-kondisi dibawah ini:

  • Gambar tidak dapat ditampilkan 
  • Web browser tidak mendukung format gambar
  • Web browser sedang dalam proses menampilkan gambar
  • Web browser diset agar tidak menampilkan gambar
  • Pengguna menggunakan web browser khusus seperti "screen reader" yang tidak akan menampilkan gambar
Contoh skripnya seperti dibawah ini:

<img alt="logo lautan-it" src="lautan-it.png">

Atribut title

Setelah atribut alt, ada atribut title. Atribut ini bersifat opsional yang berarti boleh tidak ditulis
Digunakan untuk memberikan keterangan ketika cursor mouse berada diatas gambar

Contoh skripnya seperti dibawah ini:

<img alt="logo lautan-it" title="Logo Website" src="lautan-it.png">.

Atribut height dan width

Kedua atribut ini digunakan untuk mengatur ukuran gambar. 
Height digunakan untuk mengatur tinggi daripada gambar, sedangkan width digunakan untuk mengatur lebar daripada gambar. Adapun nilai untuk atribut berbentuk angka dalam satuan pixel maupun persen. 
Kedua atribut ini bisa digunakan secara terpisah atau bersamaan. Jika dibuat terpisah, maka web browser akan secara otomatis menyesuaikan agar gambar tampil proposional.

Contoh skripnya seperti dibawah ini:

<img src="lautan-it.png" width="275">

atau 

<img src="lautan-it.png" width="450" height="200">.

Atribut align

Secara default, gambar akan tampil dengan text berada disisi bawah gambar. 

Contoh skripnya seperti dibawah ini: (lihat hasil skripnya)

<p>
<img src="lautan-it.png">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas.porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
</p>

Untuk dapat mengaturnya, maka dibutuhkanlah atribut align. Nilai atribut align dapat berupa left, right, dan middle

Contoh skripnya seperti dibawah ini:

<p>
<img src="lautan-it.png" align="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas.porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
</p>

Atribut border

Border digunakan untuk memberikan garis tepi pada gambar. Nilai dari atribut dapat diisi dengan satuan pixel.

Contoh skripnya seperti dibawah ini:

<img src="lautan-it.png" border="5">

atau dengan memberikan sedikit gaya

<img src="lautan-it.png" style="border:5px dotted black">.

Terakhir, lautan akan berikan skrip untuk membuat link dengan gambar. 

<a href="http://www.lautan-it.com">
<img src="lautan-it.png">
</a>

Sekian dan terima kasih. Artikel yang akan datang, kita akan mempelajari tentang map, so silahkan pantau terus lautan-it yak.

Post a Comment

0 Comments