Devsaurus

    Search by
       /belajar-coding/build-app

    Terakhir diperbaharui: Oct 23, 2020

    HTML

    Daftar Isi

    HTML Element HTML Attributes HTML Display HTML id & class Rekap

    HTML = Hypertext Markup Language

    HTML adalah bahasa standard yang digunakan untuk membuat sebuah web.

    Contoh sederhana sebuah HTML document:

    1<!DOCTYPE html>
    2<html>
    3  <head>
    4    <title>Devsaurus</title>
    5  </head>
    6  <body>
    7    <h1>Hello Brachio</h1>
    8  </body>
    9</html>

    html part

    HTML Element

    Sebuah dokumen HTML tersusun dari banyak element HTML.

    Element HTML terdiri dari tag yang berpasangan dan content.

    Contoh

    1<h1>Hello Brachio</h1>

    Pada code di atas <h1> </h1> adalah tag dan Hello Brachio adalah content.

    html element

    HTML Attributes

    HTML attributes berfungsi untuk menampilkan informasi tambahan dari sebuah element HTML.

    1<h1 style="color: blue">Hello Brachio</h1>

    html attributes

    Terdapat banyak sekali HTML tag dan HTML attributes yang bisa kita gunakan mengatur tampilan dari sebuah dokumen HTML/ Web.

    Kita hanya akan bahas yang paling sering ditemui dan digunakan.

    1. Teks

    HTML tag yang sering digunakan untuk mengatur tampilan teks pada sebuah element HTML.

    Heading

    1<h1>H1 Hello Brachio!</h1>
    2<h2>H2 Hello Brachio!</h2>
    3<h3>H3 Hello Brachio!</h3>
    4<h4>H4 Hello Brachio!</h4>
    5<h5>H5 Hello Brachio!</h3>
    6<h6>H6 Hello Brachio!</h4>

    Paragraph

    1<p>
    2  Some people call him the King of The Dinosaurs. T-Rex was one of the best hunters of all time… all the other dinosaurs
    3  ran when they saw him coming
    4</p>
    5<p>
    6  A T-Rex was about 13 feet tall (taller than your parents!), weighed about 9 tons (almost as much a school bus), and
    7  could run almost as fast as a deer!
    8</p>

    Format Teks

    1<p>
    2    <b>Bold Text</b>
    3</p>
    4<p>
    5   <i>Italic Text<i>
    6</p>
    7<p>
    8   <strong>Important Text!<strong>
    9</p>

    2. Attributes Style

    attributes style digunakan untuk mengatur tampilan visual dari sebuah element HTML.

    Seperti menambah border, mengganti warna background dan text, mengubah ukuran dan jenis font/huruf, penataan text (text-align) dll.

    Border

    1<h1 style="border:solid 1px;">Hello Brachio!</h1>

    Border Color

    1<h1 style="border:solid 1px blue;">Hello Brachio!</h1>

    Text Color

    1<h1 style="color:blue;">Hello Brachio!</h1>

    Background Color

    1<h1 style="background-color:blue;">Hello Brachio!</h1>

    Ukuran Font

    1<p style="font-size:20px;">Hello Brachio!</p>

    Jenis Font

    1<p style="font-family:arial;">Hello Brachio!</p>

    Text Alignment ( Tata teks )

    1<p style="text-align:center;">Hello Brachio!</p>

    CSS

    Selain menggunakan attributes style kita juga bisa menggunakan CSS (Cascading Style Sheets).

    1<!DOCTYPE html>
    2<html>
    3  <head>
    4    <style>
    5      p {
    6        color: blue;
    7      }
    8    </style>
    9  </head>
    10  <body>
    11    <p>Hello Brachio</p>
    12  </body>
    13</html>

    CSS akan dibahas lebih detail di materi CSS.

    3. Images

    Menambah gambar ke sebuah element HTML.

    1<img src="brachio.png" alt="Brachio" />

    Menyisipkan tautan.

    1<a href="https://google.com">Klik Disini</a>

    5. List

    Membuat sebuah Daftar atau List.

    Ordered List

    Membuat list dengan item yang berurutan.

    1<ol>
    2  <li>T-rex</li>
    3  <li>Brachio</li>
    4  <li>Tricera</li>
    5</ol>

    Unordered List

    Membuat list dengan item yang tidak berurutan.

    1<ul>
    2  <li>T-rex</li>
    3  <li>Brachio</li>
    4  <li>Tricera</li>
    5</ul>

    6. Tabel

    Membuat tabel.

    1<table border="1">
    2  <tr>
    3    <th>Header 1</th>
    4    <th>Header 2</th>
    5  </tr>
    6
    7  <tr>
    8    <td>Baris 1, Kolom 1</td>
    9    <td>Baris 1, Kolom 2</td>
    10  </tr>
    11
    12  <tr>
    13    <td>Baris 2, Kolom 1</td>
    14    <td>Baris 2, Kolom 2</td>
    15  </tr>
    16</table>

    7. Form

    Halaman login pada suatu web yang sering kita temui merupakan salah satu contoh penggunaan HTML Form element.

    HTML form element digunakan untuk mendapatkan data yang diinput oleh user yang kemudian diproses di backend/server.

    Beberapa element & attributes yang sering digunakan pada form:

    Form Element

    1. input

    element <input> adalah yang paling sering digunakan, terdapat beberapa tipe input:

    • <input type="text">
    • <input type="radio">
    • <input type="text">
    • <input type="checkbox">
    • <input type="text">
    • <input type="submit">
    • <input type="button">

    2. label

    membuat label.

    1<label for="username">Username</label>

    3. textarea

    untuk membuat multiline input.

    1<textarea>
    2  My Name is Brachio 
    3  I'm a devsaurus
    4</textarea>

    4. select

    untuk membuat drop down list.

    1<select id="dino" name="dino">
    2  <option value="brachio">Brachio</option>
    3  <option value="trex">T-rex</option>
    4</select>

    5. button

    untuk membuat button.

    1<button type="button" onclick="alert('Hi Brachio!')">Klik disini</button>

    Form Attribute

    1. name

    name attribute harus ditambahkan pada element input, jika tidak maka value yang ada pada input tidak akan disubmit.

    1<form action="/handlelogin">
    2  <label for="username">Username</label><br />
    3  <input type="text" name="username""><br />
    4  <input type="submit" value="Submit" />
    5</form>

    2. action

    mewakili action yang dijalankan ketika form disubmit.

    1<form action="/handlelogin">
    2  <label for="username">Username</label><br />
    3  <input type="text" name="username""><br />
    4  <input type="submit" value="Submit" />
    5</form>

    3. method

    mendefinisikan HTTP method yang digunakan.

    1<form action="/handlelogin" method="post">
    2  <label for="username">Username</label><br />
    3  <input type="text" name="username""><br />
    4  <input type="submit" value="Submit" />
    5</form>

    Contoh form HTML:

    1<form action="/handlelogin">
    2  <label for="username">Username</label><br />
    3  <input type="text" id="username" name="username" value="username" /><br />
    4  <label for="password">Password</label><br />
    5  <input type="password" id="password" name="password" value="password" /><br /><br />
    6  <input type="submit" value="Submit" />
    7</form>

    form

    HTML Display

    Setiap element HTML memiliki satu bentuk tampilan dasar, yaitu block-level atau inline-level.

    block-level

    Sebuah element HTML block-level akan selalu berukuran full-width sehingga posisi element berada di atas atau dibawah element yang lain.

    Kita bisa analogikan seperti beberapa buku yang ditumpuk secara vertikal, dimana setiap buku berada di atas atau dibawah buku yang lain.

    element div adalah salah satu contoh element block-level.

    1<div>Hello Brachio</div>
    2<div>Hello T-rex</div>

    html block

    Selain div contoh element block-level adalah:

    • <p>
    • <ul>
    • <il>
    • <table>
    • semua heading (<h1> sampai <h6>)

    inline-level

    Sedangkan untuk element HTML inline-level, ukuran dari element ini akan menyesuaikan besar content.

    Jika kita membuat beberapa element inline-level, maka setiap element akan berada disamping kiri atau kanan element lain dan berada di satu baris.

    element span adalah salah satu contoh element inline-level.

    1<span>Hello Brachio</span> <span>Hello T-rex</span>

    inline level

    contoh element inline-level:

    • <a>
    • <b>
    • <i>
    • <img>

    HTML id & class

    Untuk mengubah tampilan dari suatu element HTML kita perlu menandai element tersebut.

    Kita bisa menandai satu element HTML dengan id attributes dan satu grup element HTML dengan class attributes.

    HTML id

    Konsep id disini sama dengan konsep nomor KTP/SIM pada seseorang.

    Setiap orang memiliki nomor KTP/SIM yang berbeda yang tidak mungkin sama antara satu dengan yang lain.

    Begitu juga dengan HTML id, value id pada suatu element tidak mungkin sama antara satu element dengan element yang lain.

    1<div id="sayhi">Hi Brachio</div>
    2<div id="sayhello">Hello Brachio</div>

    HTML class

    class attributes digunakan untuk mengelompokan beberapa HTML element yang memiliki nama class yang sama.

    Konsepnya mirip dengan kelas di sekolah pada umumnya.

    Sebagai contoh, siswa kelas 6 akan dikumpulkan dengan siswa kelas 6 yang lain dalam satu kelas yang sama.

    1<div class="greeting">Hi Brachio</div>
    2<div class="greeting">Hello T-rex</div>

    Mengenal dua attributes di atas sangat penting karena digunakan pada CSS Selector ( dibahas pada materi CSS).

    Rekap

    • HTML merupakan bahasa standard untuk web

    • Beberapa konsep yang perlu untuk diketahui yaitu

      1. Element, Tag & Attributes
      2. HTML default display : block-level dan inline-level
      3. id dan class Attributes
      4. HTML Layout
      5. HTML Form