Menggunakan Brackets sebagai tools menulis HTML

Agar dapat menulis kode HTML dengan efektif, maka kita memerlukan program yang dapat membantu kita dalam menulis kode-kode HTML, sehingga kita tidak perlu mengingat satu-persatu kode HTML, dan hasil dari pengetikan dapat segera dilihat, semua ini di dapat dengan menggunakan program code editor yang bernama Brackets, program ini dibuat oleh team Adobe dan dapat di download secara gratis. Pada bagian ini siswa akan diajarkan cara melakukan install program brackets dan melakukan instalasi program tambahan yang sangat berguna dalam mempercepat menulis kode HTML

Menggunakan Brackets

Install program editor bracket

  • Proses Download dan Install
    • buka website link Bracket
    • klik pada tombol download, program ini tersedia untuk mac, windows dan linux
    • Lakukan install
    • untuk user windows, dapat langsung melakukan double klik pada file yang baru saja di download
    • Jalankan program
    • Buka website Filehippo
    • cari google chrome pada kotak pencarian
    • dan lakukan download
    • Bila anda menggunakan komputer berbasis windows, lakukan double klik pada file yang baru saja di download.
    • Bila anda menggunakan komputer berbasis mac, lakukan double klik pada file dmg yang baru saja di download.
  • Install emmet dan Brackets Surround
    • Kembali ke program Brackets
    • Pilih menu File, Extension manager
    • ketik emmet, bila sudah ketemu tekan tombol install
      • emmet digunakan untuk mempercepat proses pengetikan
      • bisa dilihat demo penggunaan di Web emmet
      • ketik surrround, bila ketemu bracket Surround, tekan tombol install
        • bracket surround digunakan untuk memudahkan kita memberi tag pada teks yang kita blok
  • Install tema warna (Pilihan dan tidak harus dilakukan)
    • Anda dapat memilih pilihan warna background program bracket dengan klik pada themes
    • pilih salah satu tema warna yang menarik menurut anda, kemudian klik pada tombol install
    • Selanjutnya anda dapat mengganti dengan memilih menu View, Themes
      • untuk pilihan font yang saya gunakan adalah Menlo dengan ukuran 16 px

Mulai membuat struktur dasar HTML 5 dengan sublime dan emmet

  • pilih menu File, new,
  • Simpan dengan ctrl + S, dan beri nama index.html
  • ketik ! lalu tekan tombol tab
    • maka secara otomatis emmet akan menambahkan kode struktur html 5
    • disinilah terletak hebatnya sublime + emmet
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 5, CSS 3 dan SASS</title>
</head>
<body>

</body>
</html>
  • semua data html harus diawali dengan tag dan diakhiri tag
  • html dibagi menjadi 2 area yaitu head dan body
    • head digunakan untuk
    • title (judul halaman), meta
    • memanggil file css
    • body digunakan untuk
    • isi digunakan untuk mengatur isi dokumen
  • <!DOCTYPE html>, menunjukkan kalau tipe dokumen ini adalah HTML versi 5
  • , language = english
    • perlu diketahui istilah-istilahnya
    • html = tag
    • lang = attribute
    • en = value

Praktek Siswa

  • Lakukan instalasi program Brackets dan google Chrome
    • bila belum ada filenya silakan melakukan download sesuai dengan link yang diberikan
  • Lakukan instalasi 2 program tambahan untuk brackets yaitu
    • emmets
    • brackets surround
  • Lakukan instalasi salah satu theme (tema warna) dan pasang sesuai dengan selera anda.
  • Buat folder praktek anda misalnya di dalam My Document
    • buat folder dengan nama HTML-CSS
    • pada folder inilah nantinya akan ditempatkan seluruh hasil kerja anda
  • buka link berikut untuk download gambar foto,
    • simpan di folder HTML-CSS
  • buat file index.html
    • cobalah menggunakan html berikut dengan menggunakan teknik emmet
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML 5, CSS 3 dan SASS</title>
</head>
<body>

  <h1>ini adalah judul H1</h1>
  <h2>ini adalah judul H2</h2>
  <h3>ini adalah judul H3</h3>
  <h4>ini adalah judul H4</h4>
  <h5>ini adalah judul H5</h5>
  <h6>ini adalah judul H6</h6>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quisquam cupiditate veritatis, assumenda iure itaque deleniti a in velit dolores eligendi, veniam animi earum odio soluta dolorem recusandae nemo aspernatur neque magnam ullam doloribus pariatur. Laborum ipsam commodi, sequi impedit quidem dolor fugiat repellendus asperiores et, minima non excepturi autem!</p>

  <ul>ini adalah daftar nama makanan
    <li>Nasi</li>
    <li>Roti</li>
    <li>Kerupuk</li>
  </ul>

  <ol>ini adalah daftar nama minuman
    <li>Coca cola</li>
    <li>Susu</li>
    <li>Teh Manis</li>
  </ol>

  <a href="http://www.google.com">Google</a>

  <img src="tesla-saroni.jpg" alt="gambar tesla saroni">
  </body>
</html>