Belajar HTML Untuk Pemula Level 7


Halo sobat lautan, semoga sehat selalu ya. 
Kali ini lautan kembali membahas tentang pemrograman web, namun kali dengan hal yang mendasar yakni bahasa HTML. Masih sama dengan artikel sebelumnya pada kategori ini, kita masih membahas tentang image. Pada artikel sebelumnya kita telah mengetahui fungsi dari map element, area element dan atribut usemap. 

Baca juga : Belajar HTML untuk pemula level 6

Nah, di artikel terbaru ini, kita akan mempelajari figure element dan figcaption element. Kedua element ini termasuk dalam semantic element yang merupakan fitur baru di HTML5 dan keduanya berkaitan erat dengan gambar. 

Tag <figure> bertindak sebagai container untuk satu atau beberapa tag <img>. Sedangkan tag <figcaption> digunakan untuk membuat keterangan atau gaulnya caption dari gambar. Dalam spesifikasi lengkap HTML5, tag <figure> dapat digunakan untuk gambar, ilustrasi, diagram, maupun komponen lain yang berkaitan dengan teks yang dibahas, namun tidak harus berada di satu lokasi yang tetap. 

Berikut contoh penggunaan tag <figure>

<figure>
<img alt="Lautan-IT" src="Lautan-IT.png">
</figure>

Hasilnya akan memberikan margin dari tepi tag <figure>. Sedangkan tag <figcaption> yang kegunaannya adalah untuk memberikan caption gambar, bisa diletakkan pada awal sebelum tag <img> dan akhir setelah tag <img>.

Contoh penggunaan

<figure>
<figcaption>Website Sistem Informasi</figcaption>
<img alt="Lautan-IT" src="Lautan-IT.png">
</figure>
<figure>
<img alt="Lautan-IT" src="Lautan-IT.png">
<figcaption>Website Sistem Informasi</figcaption>
</figure>

Contoh skrip penggunaan figure element dan figcaption element

<html>
<head>
<title>Belajar Figure dan Figcaption Element</title>
</head>
<body>
<figure>
<figcaption>
Website buatan mahasiswa sistem informasi
</figcaption>
<img alt="Lautan-IT" src="Lautan-IT.png" width="300">
</figure>
<figure>
<img alt="Lautan-ITl" src="Lautan-IT.png" width="300">
<figcaption> Di buat pada tahun 2017 </figcaption>
</figure>
</body>
</html>

Dan hasilnya seperti dibawah ini...

Kita juga dapat menempatkan beberapa tag <img> di dalam tag <figure>. O iya, HTML5 hanya menyarankan untuk menggunakan 1 tag <figcaption> untuk setiap tag <figure>.

Contoh skrip

<html>
<head>
<title>Belajar Figure dan Figcaption Element</title>
</head>
<body>
<figure>
<figcaption>
Website buatan mahasiswa sistem informasi
</figcaption>
<img alt="Lautan-IT" src="Lautan-IT.png" width="300">
<img alt="Lautan-IT" src="Lautan-IT.png" width="300">
<img alt="Lautan-IT" src="Lautan-IT.png" width="300">
</figure>
</body>
</html>

Dan hasilnya


Sebagai penutup dari image element, lautan akan membagikan skrip tugas mata kuliah teknologi website lautan dalam mempelajari image element, dan hasilnya seperti dibawah ini


Dan berikut adalah skrip lengkapnya

<!DOCTYPE HTML>
<!-- Calon Template Au.com -->
<html>
    <meta charset="UTF -8">
    <meta name="author" content="Au.com">
    <meta name="keywords" content="Manhaj Salaf,Dunia Islam, Teknologi Informasi, Dunia Bisnis,
    Belajar Website, Tutorial Website, Jual Beli Barang Murah">
    <meta name="description" content="Website bermanfaat, belajar islam sembari belajar website">
    <meta name="viewport" content="width:device-width, initial-scale">
    <meta name="robots" content="noindex, follow">
<head>
    <style>
    figure {
        float : left;
        margin : 10px;
    }
    img {
        border : solid 1px black;
        padding : 6px;
    }
    figcaption {
        text-align : center
    }
    ul {
        list-style : none;
        padding : 0;
        margin : 0;
    }
    ul li {
        float : left;
    }
    ul a {
        text-decoration : none;
        color : green;
        background-color: #000000;
        padding : 15px 30px;
        height : 15px;
        display : block;
    }
    ul a : hover {
        color : white;
        background-color: #ff0000;
    }
</style>
<link rel="icon" href="favicon.png"/>
  <title>Au.Com</title>
</head>
<body background ="none">
<center>
<img src="Au.png" alt="Logo Website Au.com" height="200" width="600"/>
</center>
<hr size="15" color="black">
<ul>
    <li><a href="http://www.dashboard.com">Home</a></li>
    <li><a href="http://www.gmail.com">Konsultasi</a></li>
    <li><a href="http://www.Au.com/materi_koding_website">Koding Website</a></li>
    <li><a href="http://www.TokonyaAndri.com">Toko Andri</a></li>
</ul><br><br>
<p>
    Jakarta, officialy known as the Special Region of Jakarta (Indonesia: Daerah Khusus Ibu Kota Jakarta), is capital and largest city of Indonesia, and one of the <br>
    most populars urban agglomerations in the world
</p>
<figure>
    <img src="Bundaran_HI.jpg" alt="Bundaran HI" height="200"/>
    <img src="Istiqlal_Mosque_Monas.jpg" alt="Masjid Istiqlal" height="200"/>
    <img src="Bus_Transjakarta.jpg" alt="Bus Transjakarta" height="200"/>
<figcaption>Gambar Seputaran Jakarta di ambil dari <a href="http://www.wikipedia.org">wikipedia.org</a></figcaption>
</figure>
<p>
    Located on the nortwest coast of Java, jakarta is the
    country's economic, cultural and political centre, and with a
    population of 9,761,407 as of December 2012, it is the most
    populus city in Indonesia and in Southeast Asia. The official
    metrpolitian area, known as Jadobetabek (a name formed by
    combining the initial syllables of Jakarta, Bogor, Depok,
    Tangerang and Bekasi),is the the second largest in the world, yet
    the metropolis's suburbs still continue beyond it
</p>
<p>
    Established in the fourth century, the city became an important
    trading port for the kingdom of Sunda. It was the de facto capital
    of the Ducth East Indies (known as Batavia at the time).
    Today, the city has continued as the capital of Indonesias since
    the country's independence was declared in 1945.
    The city is currently the seat of the ASEAN Sectetariat.
</p>
</body>
</html>

Ehehe..sepertinya nama daripada admin website Lautan-IT sudah ketahuannya. Ya, salah satu adminnya bernama Andri (nama panjangnya ? cari tau sendiri aja ya). Sebenarnya adminnya ada 2, dan satu bernama....rahasia. 

Post a Comment

0 Comments