Atributes and Block Element

*Frontend — HTML Series From Website Development Path MySkill.id*

***Yuk subscribe*** untuk mendapatkan email notifikasi setiap ada artikel terbaru oleh MySkill

Atributes and Block Element

Pengenalan Atribut HTML

Atribut HTML adalah informasi tambahan yang digunakan untuk mengatur dan memodifikasi elemen HTML. Dengan atribut HTML, Anda dapat membuat website Anda lebih interaktif dan menarik. Berikut adalah beberapa atribut HTML yang sering digunakan dan cara menggunakannya.

1. Atribut id

Atribut id digunakan untuk memberikan nama unik kepada elemen HTML. Atribut id hanya dapat digunakan sekali dalam halaman HTML. Berikut adalah contoh penggunaan atribut id:

<h1 id="judul">Judul Halaman</h1>

Dalam contoh di atas, atribut id digunakan untuk memberikan nama unik "judul" kepada elemen <h1>. Anda dapat menggunakan atribut id untuk mengidentifikasi elemen tertentu dan mengatur tata letak halaman.

2. Atribut class

Atribut class digunakan untuk memberikan nama kelas kepada elemen HTML. Atribut class dapat digunakan lebih dari sekali dalam halaman HTML. Berikut adalah contoh penggunaan atribut class:

<p class="teks-besar teks-merah">Paragraf besar dan merah</p>

Dalam contoh di atas, atribut class digunakan untuk memberikan nama kelas "teks-besar" dan "teks-merah" kepada elemen <p>. Anda dapat menggunakan atribut class untuk menggabungkan beberapa elemen HTML dan mengatur tata letak halaman.

3. Atribut style

Atribut style digunakan untuk memberikan style langsung kepada elemen HTML. Atribut style dapat digunakan untuk mengatur warna, ukuran, dan posisi elemen HTML. Berikut adalah contoh penggunaan atribut style:

<p style="color: blue; font-size: 20px;">Paragraf biru dan besar</p>

Dalam contoh di atas, atribut style digunakan untuk memberikan warna biru dan ukuran font 20px kepada elemen <p>. Anda dapat menggunakan atribut style untuk mengatur tampilan elemen HTML secara langsung.

4. Atribut title

Atribut title digunakan untuk memberikan tooltip atau deskripsi singkat kepada elemen HTML. Atribut title akan muncul ketika mouse di hover ke atas elemen HTML. Berikut adalah contoh penggunaan atribut title:

<a title="Halaman Utama" href="index.html">Halaman Utama</a>

Dalam contoh di atas, atribut title digunakan untuk memberikan tooltip "Halaman Utama" kepada elemen <a>. Anda dapat menggunakan atribut title untuk memberikan informasi lebih lanjut kepada pengguna.

5. Atribut href

Atribut href digunakan untuk menentukan alamat atau lokasi dari elemen HTML. Atribut href sering digunakan pada elemen <a> dan <link>. Berikut adalah contoh penggunaan atribut href:

<ahref="https://www.wikipedia.org/">A link to Wikipedia!</a>

Dalam contoh di atas, atribut href digunakan untuk menentukan alamat dari elemen <a>. Anda dapat menggunakan atribut href untuk membuat hyperlink ke halaman lain atau resource lainnya.

6. Atribut src

Atribut src digunakan untuk menentukan sumber dari elemen HTML. Atribut src sering digunakan pada elemen <img>, <video>, dan <audio>. Berikut adalah contoh penggunaan atribut src:

<img src="gambar.jpg" alt="Gambar">

Dalam contoh di atas, atribut src digunakan untuk menentukan sumber dari gambar. Anda dapat menggunakan atribut src untuk menampilkan gambar, video, atau audio pada halaman web.

7. Atribut alt

Atribut alt digunakan untuk memberikan deskripsi alternatif kepada elemen HTML. Atribut alt sering digunakan pada elemen <img>. Berikut adalah contoh penggunaan atribut alt:

<img src="gambar.jpg" alt="Gambar">

Dalam contoh di atas, atribut alt digunakan untuk memberikan deskripsi alternatif kepada gambar. Anda dapat menggunakan atribut alt untuk membantu pengguna yang tidak dapat melihat gambar atau menggunakan teknologi asistif.

8. Atribut target

Atribut target digunakan untuk menentukan target dari hyperlink. Atribut target sering digunakan pada elemen <a>. Berikut adalah contoh penggunaan atribut target:

<a target="_blank" href="https://www.wikipedia.org/">A link to Wikipedia!</a>

Dalam contoh di atas, atribut target digunakan untuk membuka hyperlink dalam tab atau jendela baru. Anda dapat menggunakan atribut target untuk menentukan target dari hyperlink.

9. Atribut action

Atribut action digunakan untuk menentukan aksi dari form. Atribut action sering digunakan pada elemen <form>. Berikut adalah contoh penggunaan atribut action:

<form action="proses.php" method="post">
  <!-- Form elements -->
</form>

Dalam contoh di atas, atribut action digunakan untuk menentukan aksi dari form. Anda dapat menggunakan atribut action untuk mengirim data ke server atau halaman lain.

10. Atribut method

Atribut method digunakan untuk menentukan metode dari form. Atribut method sering digunakan pada elemen <form>. Berikut adalah contoh penggunaan atribut method:

<form action="proses.php" method="post">
  <!-- Form elements -->
</form>

Dalam contoh di atas, atribut method digunakan untuk menentukan metode dari form. Anda dapat menggunakan atribut method untuk menentukan cara mengirim data ke server.

11. Atribut name

Atribut name digunakan untuk memberikan nama kepada elemen HTML. Atribut name sering digunHTML Atribut

HTML atribut adalah informasi tambahan yang digunakan untuk mengatur dan memodifikasi elemen HTML. Dengan atribut HTML, Anda dapat membuat website Anda lebih interaktif dan menarik. Berikut adalah beberapa atribut HTML yang sering digunakan dan cara menggunakannya.

Pengenalan Elemen Blok di HTML

Elemen Blok adalah jenis elemen HTML yang memakai seluruh ruang lebar kontainer dan selalu dimulai pada baris baru. Beberapa contoh elemen Blok di HTML adalah:

• <h1> hingga <h6>
• <div>
• <ul>, <ol>, dan <li>
• <p>
• <form>

Elemen Blok memiliki beberapa sifat yang unik, yaitu:

1. Memakai seluruh ruang lebar kontainer

Elemen Blok memakai seluruh ruang lebar kontainer, sehingga elemen Blok akan selalu dimulai pada baris baru. Ini berbeda dengan Elemen Inline, yang hanya memakai ruang yang diperlukan untuk kontennya dan tidak dimulai pada baris baru.

2. Memiliki margin dan padding

Elemen Blok memiliki margin dan padding, yang dapat digunakan untuk mengatur jarak antara elemen Blok dan elemen lainnya. Ini berbeda dengan Elemen Inline, yang tidak memiliki margin dan padding.

3. Memiliki lebar dan tinggi

Elemen Blok memiliki lebar dan tinggi, yang dapat digunakan untuk mengatur ukuran elemen Blok. Ini berbeda dengan Elemen Inline, yang tidak memiliki lebar dan tinggi.

Berikut adalah contoh penggunaan elemen Blok:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Elemen Blok</title>
    <style>
        .container {
            width: 500px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Judul</h1>
        <p>Paragraf pertama.</p>
        <p>Paragraf kedua.</p>
        <ul>
            <li>Item pertama.</li>
            <li>Item kedua.</li>
        </ul>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

Dalam contoh di atas, elemen <div> dengan class container memiliki lebar tetap dan memiliki batas. Elemen <h1>, <p>, <ul>, dan <div> dengan class box merupakan elemen Blok.

Untuk membuat elemen HTML menjadi elemen Blok, Kita bisa menggunakan properti CSS display: block;. Properti ini akan membuat elemen HTML menjadi elemen Blok dan memiliki sifat-sifat yang unik seperti yang telah dijelaskan di atas.

Elemen Blok sangat berguna dalam pembuatan tata letak web, karena dapat digunakan untuk mengatur tata letak kontainer dan konten. Selain itu, elemen Blok juga dapat digunakan untuk mengatur jarak antara elemen dan mengatur ukuran elemen.

Perbedaan Elemen Blok dan ElemenInline di HTML

Elemen Blok dan Elemen Inline adalah dua kategori elemen HTML yang berbeda. Elemen Blok memakan ruang seluruh lebar kontainer, sedangkan Elemen Inline hanya memakan ruang yang diperlukan untuk kontennya.

Elemen Blok

Elemen Blok memakai seluruh ruang lebar kontainer dan selalu dimulai pada baris baru. Beberapa contoh elemen Blok di HTML adalah:

• <h1> hingga <h6>
• <div>
• <ul>, <ol>, dan <li>
• <p>
• <form>

Berikut adalah contoh penggunaan elemen Blok:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Elemen Blok</title>
    <style>
        .container {
            width: 500px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Judul</h1>
        <p>Paragraf pertama.</p>
        <p>Paragraf kedua.</p>
        <ul>
            <li>Item pertama.</li>
            <li>Item kedua.</li>
        </ul>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

Dalam contoh di atas, elemen <div> dengan class container memiliki lebar tetap dan memiliki batas. Elemen <h1>, <p>, <ul>, dan <div> dengan class box merupakan elemen Blok.

Elemen Inline

Elemen Inline hanya memakai ruang yang diperlukan untuk kontennya dan tidak dimulai pada baris baru. Beberapa contoh elemen Inline di HTML adalah:

• <a>
• <span>
• <img>
• <b>, <i>, <u>, <s>

Berikut adalah contoh penggunaan elemen Inline:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Elemen Inline</title>
    <style>
        .container {
            width: 500px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: inline-block;
        }
        .text {
            display: inline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text">Judul</h1>
        <p class="text">Ini adalah paragraf pertama.</p>
        <p class="text">Ini adalah paragraf kedua.</p>
        <div class="box"></div>
        <div class="box"></div>
        <a href="#" class="text">Tautan</a>
        <span class="text">Teks biasa</span>
    </div>
</body>
</html>

Dalam contoh di atas, elemen <h1>, <p>, <a>, dan <span> merupakan elemen Inline. Elemen <div> dengan class box memiliki display: inline-block untuk memakan ruang yang diperlukan hanya seperti elemen Inline, meskipun lebarnya masih tetap 100px.

Untuk memilih antara elemen Blok dan Inline, Anda bisa menggunakan properti CSS display: block; untuk elemen Blok dan display: inline; untuk elemen Inline. Elemen Inline yang memiliki gambar bisa menggunakan display: inline-block; untuk memakan ruang yang diperlukan hanya seperti elemen Inline, tetapi lebarnya tetap sesuai dengan lebar gambar.

Pengenalan Paragraf, Heading, dan List di HTML

Paragraf, Heading, dan List adalah elemen HTML yang sangat penting dalam membuat tata letak dan konten pada halaman web. Berikut adalah penjelasan lengkap mengenai paragraf, heading, dan list di HTML.

Paragraf

Paragraf adalah elemen HTML yang digunakan untuk menampilkan teks dalam satu blok. Paragraf dapat dibuat dengan menggunakan tag <p>. Berikut adalah contoh penggunaan paragraf:

<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>

Heading

Heading adalah elemen HTML yang digunakan untuk menampilkan judul atau subjudul pada halaman web. Heading dapat dibuat dengan menggunakan tag <h1> hingga <h6>. Heading <h1> adalah heading yang paling besar dan heading <h6> adalah heading yang paling kecil. Berikut adalah contoh penggunaan heading:

<h1>Judul Utama</h1>
<h2>Subjudul 1</h2>
<h3>Subjudul 2</h3>
<h4>Subjudul 3</h4>
<h5>Subjudul 4</h5>
<h6>Subjudul 5</h6>

List

List adalah elemen HTML yang digunakan untuk menampilkan daftar item pada halaman web. List dapat dibuat dengan menggunakan tag <ul> untuk list tanpa urutan dan tag <ol> untuk list dengan urutan. Berikut adalah contoh penggunaan list:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Dalam contoh di atas, tag <ul> digunakan untuk membuat list tanpa urutan dan tag <ol> digunakan untuk membuat list dengan urutan. Tag <li> digunakan untuk membuat item dalam list.

Untuk membuat list dengan subitem, Anda bisa menggunakan tag <ul> atau <ol> di dalam tag <li>. Berikut adalah contoh penggunaan list dengan subitem:

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Dalam contoh di atas, tag <ul> digunakan untuk membuat list tanpa urutan dengan subitem. Tag <ul> di dalam tag <li> digunakan untuk membuat subitem.

Paragraf, heading, dan list adalah elemen HTML yang sangat penting dalam membuat tata letak dan konten pada halaman web. Dengan menggunakan paragraf, heading, dan list, Anda dapat membuat halaman web yang mudah dibaca dan mudah dipahami oleh pengguna.

Membuat Halaman Profil dengan HTML

Membuat halaman profil dengan HTML adalah hal yang mudah dan menyenangkan. Berikut adalah langkah-langkah yang dapat Anda ikuti untuk membuat halaman profil yang menarik:

1. Membuat Struktur Dasar HTML

Pertama, Anda perlu membuat struktur dasar HTML. Berikut adalah contoh struktur dasar HTML yang dapat Anda gunakan:

<!DOCTYPE html>
<html>
  <head>
    <title>Halaman Profil</title>
  </head>
  <body>
    <!-- Konten halaman profil disini -->
  </body>
</html>

2. Menambahkan Gambar Profil

Selanjutnya, Anda dapat menambahkan gambar profil. Anda dapat menggunakan tag <img> untuk menambahkan gambar profil. Berikut adalah contoh cara menambahkan gambar profil:

<img src="gambar-profil.jpg" alt="Gambar Profil">

3. Menambahkan Nama dan Bio

Setelah itu, Anda dapat menambahkan nama dan bio. Anda dapat menggunakan tag <h1> untuk menambahkan nama dan tag <p> untuk menambahkan bio. Berikut adalah contoh cara menambahkan nama dan bio:

<h1>Nama Anda</h1>
<p>Bio Anda</p>

4. Menambahkan Daftar Keahlian

Anda juga dapat menambahkan daftar keahlian. Anda dapat menggunakan tag <ul> untuk membuat daftar dan tag <li> untuk menambahkan item keahlian. Berikut adalah contoh cara menambahkan daftar keahlian:

<ul>
  <li>Keahlian 1</li>
  <li>Keahlian 2</li>
  <li>Keahlian 3</li>
</ul>

5. Menambahkan Kontak

Terakhir, Anda dapat menambahkan kontak. Anda dapat menggunakan tag <p> untuk menambahkan alamat email dan nomor telepon. Berikut adalah contoh cara menambahkan kontak:

<p>Email: email@example.com</p>
<p>Nomor Telepon: 08123456789</p>

6. Menambahkan Gaya CSS

Setelah Anda menambahkan semua konten, Anda dapat menambahkan gaya CSS untuk membuat halaman profil lebih menarik. Berikut adalah contoh cara menambahkan gaya CSS:

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  .container {
    width: 80%;
    margin: auto;
    overflow: hidden;
  }
  .profile-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: #fff 10px solid;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .profile-info h2 {
    position: relative;
    font-size: 20px;
    text-align: center;
    margin-top: -15%;
  }
  .profile-info p {
    text-align: center;
    padding: 10px;
  }
  .skills ul {
    list-style: none;
    padding: 0;
  }
  .skills li {
    display: inline;
  }
  .skills li span {
    background-color: #ddd;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
  }
</style>

Dalam contoh di atas, Anda dapat melihat bagaimana Anda dapat menambahkan gaya CSS ke halaman profil. Selain itu, Anda dapat mengubah warna latar belakang, warna teks, dan ukuran font sesuai keinginan Anda. Selain itu, Anda dapat menambahkan efek hover dan transition pada elemen-elemen lainnya.

Untuk menambahkan gaya CSS, Anda dapat menulis kode CSS di antara tag <style> dan </style>. Selain itu, Anda juga dapat menambahkan file CSS eksternal dengan menggunakan tag <link>.

Learn More Via: myskill.id/course/prediction-model-use-case* from Mobile Automation Path MySkill.id*