Selasa, 02 April 2019

Learn HTML5 part 8

Links

HTML link adalah elemen yang digunakan untuk membuat kaitan ke halaman lain. Ketika elemen link diklik maka halaman browser akan berpindah menampilkan halaman lain yang dituju link tersebut.
<a href="url">teks link</a>
Tag <a> menggunakan atribut href untuk menentukan alamat tujuan link. teks link adalah teks yang akan kita jadikan link. Ketika teks link diklik, maka halaman akan berpindah ke alamat tujuan link.
Kita tidak hanya dapat menggunakan teks sebagai link, tapi juga gambar atau elemen lainnya.
<a href="url"><img src="gambar.jpg" /></a>

Atribut Target

Atribut target kita gunakan untuk menentukan dimana alamat link harus dibuka.
  • _self - Membuka alamat link di tab/jendela browser yang sama (nilai bawaan)
  • _blank - Membuka alamat link di tab/jendela browser yang baru
  • _parent - Membuka alamat link di frame induk
  • _top - Membuka alamat link di jendela penuh
  • framename - Membuka alamat link di frame yang namanya sudah ditentukan
Umumnya kita akan sering menggunakan nilai _blank untuk menampilkan halaman di tab browser baru. Bila atribut ini tidak dipasang, maka nilai defaultnya adalah _self, artinya alamat link tersebut akan dibuka di jendela yang sedang aktif.

PRAKTEK

  • Pada editor terdapat contoh penggunaan tag <a> dengan link berupa teks dan juga gambar. Jalankan program dan coba klik contoh link tersebut.
  • Coba ganti nilai atribut target dengan _self dan _parent. Apa yang terjadi saat link diklik? Apa perbedaannya dengan saat atribut target diset dengan _blank?

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
      <p>Contoh link dengan teks:</p>
      <a href="https://www.codepolitan.com" target="_blank">CodePolitan.com</a>
      
      <p>Contoh link dengan gambar:</p>
      <a href="https://www.codepolitan.com" target="_blank">
        <img src="https://i.imgur.com/urfCJFH.png" />
      </a>
</body>
</html>
di Tidak ada komentar:

Senin, 01 April 2019

Lear HTML5 part 7

Text Formatting

Kita dapat menandai bagian-bagian tertentu dari sebuah teks HTML seperti cetak tebal, cetak miring dan lain-lain.
  • <b> - mencetak tebal teks
  • <strong> - menandai teks penting
  • <i> - mencetak miring teks
  • <em> - memberikan penekanan pada teks
  • <mark> - menandai teks dengan sorotan
  • <small> - membuat teks lebih kecil dari ukuran bawaan
  • <del> - memberi coretan pada teks
  • <ins> - mengarisbawahi teks
  • <sub> - membuat tulisan lebih bawah dari garis datar tulisan
  • <sup> - membuat tulisan lebih atas dari garis datar tulisan

PRAKTEK

  • Pada editor terdapat contoh penggunaan masing-masing tag formatting. Jalankan kode program untuk melihat hasil tampilannya.
  • Bila kita perhatikan, tag <b> dan <strong> menampilkan hasil yang serupa, begitu juga dengan tag <i> dan <em>. Mengapa demikian?
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
    <b>mencetak tebal</b> <br />
<strong>teks penting</strong> <br />
mencetak <i>miring</i> teks <br />
memberi <em>penekanan</em> pada teks <br />
<mark>menandai teks</mark><br />
teks <small>lebih kecil</small> dari default <br />
<del>coretan</del> pada teks <br />
<ins>mengarisbawahi</ins> teks <br />
tulisan <sub>di bawah</sub> garis <br />
tulisan <sup>di atas</sup> garis
</body>
</html>
di Tidak ada komentar:

Lear HTML5 part 6

Paragraph

Elemen <p> mendefinisikan sebuah konten paragraf.
<p>Ini adalah sebuah paragraf.</p>
<p>Dan ini adalah paragraf lain.</p>
Suatu konten teks yang kita tulis di dalam sebuah elemen HTML dan kita buat baris baru atau spasi/tab di dalamnya, akan tetap dihitung sebagai satu spasi.
<p>Ini      adalah sebuah 
paragraf.</p>
Kode HTML di atas akan tetap ditampilkan dalam satu baris tanpa ada jarak spasi lebih dari satu di dalamnya. Bila kita hendak membuat baris baru di dalam sebuah teks, maka gunakanlah tag <br> atau <br />.
<p>Ini<br>
adalah<br>
sebuah<br>
paragraf.</p>

PRAKTEK

  • Jalankan kode pada editor. Elemen <p>akan dicetak dalam satu baris, meskipun pada editor ditulis dalam baris yang berbeda. Tambahkan elemen <br> untuk setiap barisnya sehingga konten paragraf dicetak seperti ini:
    Ini
adalah
sebuah
paragraf

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
    <h1>Judul Utama</h1>
      <p>Ini
adalah
sebuah
paragraf</p>

      <p>Ini<br>
adalah<br>
sebuah<br>
paragraf</p>
</body>
</html>
di Tidak ada komentar:

Learn HTML5 part 5

Headings

Headings adalah elemen HTML yang digunakan untuk menampilkan judul dari sebuah konten. Elemen headings ada 6 jenis, yakni <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>.
Elemen <h1> menunjukkan tingkat kepentingan yang lebih tinggi daripada <h2> dan seterusnya. Elemen <h1> umumnya akan ditampilkan dengan ukuran huruf yang lebih besar dibanding <h2>, dan begitu seterusnya sampai <h6>.
Bila kita hendak membuat judul sebuah konten, maka gunakanlah <h1> sebagai prioritas utama. Bila hendak membuat subjudul di dalam konten, maka gunakan <h2>, dan bila hendak membuat sub-subjudul, maka gunakan <h3>, dan seterusnya.

PRAKTEK

  • Pada editor terdapat contoh kode berisi <h1> dan <h2>. Jalankan kode dan lihat hasilnya.
  • Buatlah elemen <h3> hingga <h6> di bawah paragraf kedua. Jalankan dan bandingkan tampilan heading 1 sampai 6.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
    <h1>Judul Utama</h1>
      <p>Paragraf pertama.</p>
        
        <h2>Subjudul 1</h2>
        <p>Paragraf kedua.</p>
      <h3>Subjudul 2</h3>
        <h4>Subjudul 3</h4>
      <h5>Subjudul 4</h5>
      <h6>Subjudul 5</h6>
      <p> lebih gede paragraf daripada subjudul</p>
</body>
</html>
di Tidak ada komentar:

Learn HTML5 part 4

Atribut HTML

Atribut HTML adalah informasi tambahan yang diperlukan oleh sebuah elemen HTML.
Pada pembahasan sebelumnya kita sudah melihat contoh elemen <img>. Elemen ini memiliki konten tambahan di dalam tagnya, yakni src.
<img src="image.jpg" />
src yang terdapat di dalam tag <img> adalah salahsatu contoh atribut HTML.
Atribut HTML selalu didefinisikan di dalam tag pembuka suatu elemen. Atribut biasanya ditulis dalam bentuk pasangan nama dan nilai atribut dengan format seperti ini: nama="nilai".
Semua elemen HTML dapat mengandung atribut, baik itu atribut yang umum yang dapat dimiliki oleh semua elemen HTML, maupun atribut khusus untuk elemen HTML tertentu. Contoh atribut umum adalah id dan class. Contoh atribut khusus adalah src pada elemen <img> dan href pada elemen <a>.

Nama Atribut

Nama atribut dapat ditulis baik menggunakan huruf kapital maupun huruf kecil, akan tetapi sangat dianjurkan menggunakan huruf kecil semua sebagai sebuah standar sejak versi XHTML.

Nilai Atribut

Nilai dari atribut HTML dapat ditulis tanpa menggunakan tanda kutip. Namun dalam banyak kasus tanda kutip harus digunakan untuk membungkus nilai atribut yang mengandung spasi.
<h1 title=judul konten>Pendahuluan</h1>
Pada contoh di atas, atribut title bernilai 'judul' dan kata 'konten' akan dianggap sebagai sebuah atribut lain karena antara kata 'judul' dan 'konten' terpisah oleh koma. Bila kita hendak mengisi nilai atribut title di atas dengan 'judul konten', maka kita harus menulisnya dengan tanda kutip:
<h1 title="judul konten">Pendahuluan</h1>

Tanda Kutip atau Petik?

Nilai atribut dapat menggunakan baik tanda kutip "maupun tanda petik '. Bila kita membuka dengan tanda kutip, maka tutup juga dengan tanda kutip. Begitu pula bila membuka dengan tanda petik, maka tutuplah dengan tanda petik.
Hal ini sangat berguna bila nilai atribut mengandung tanda kutip atau petik. Bila nilai atribut mengandung tanda kutip, maka gunakanlah petik untuk membungkus nilai atribut. Dan bila nilai atribut mengandung tanda petik, maka gunakanlah kutip untuk membungkus nilai atribut.
<h1 title='Bosnya "Microsoft"'>Bill Gates</h1>

PRAKTEK

  • Pada editor terdapat elemen <h1> dan <img>. Pada elemen <img> terdapat atribut title dengan nilai teks 'Gambar Anjing'. Jalankan kode dan perhatikan output. Arahkan mouse ke atas gambar anjing yang ada di kolom output dan biarkan sejenak. Apa yang muncul?
     Tampilkan Petunjuk
  • Pada elemen <img> terdapat atribut src, yakni atribut berisi URL dari gambar yang hendak ditampilkan. Cari gambar lain dari internet dan salin (copy) URL gambar tersebut, lalu ganti nilai atribut src pada elemen <img> dengan URL gambar yang sudah Kamu punya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
    <h1>Contoh Elemen HTML</h1>
      <img src="https://i.imgur.com/s2YreFg.jpg"
        title="gambar anjing" />
</body>
</html>
di Tidak ada komentar:

Learn HTML5 part 3

Elemen HTML

Sebuah elemen HTML umumnya tersusun dari tag pembuka dan tag penutup, dengan konten yang disimpan diantara keduanya.
<namatag>Konten di dalam tag</namatag>
Tag HTML adalah nama dari elemen HTML, ditulis di antara tanda kurung sudut < dan >, misalnya <h1>dan <p>.
Tag penutup ditulis seperti tag pembuka, dengan diawali karakter garis miring / sebelum nama tagnya, misalnya </h1> dan </p>.
Konten elemen adalah semua konten yang ada di antara tag pembuka dan tag penutup.
Tag mendefinisikan maksud konten yang ada di dalamnya. Ketika kita menuliskan sebuah konten menggunakan tag <h1>, misalnya <h1>Halo Coder!</h1> berarti kita mendefinisikan konten "Halo Coders!" sebagai sebuah heading besar. Ketika kita menulis konten di dalam tag <p> maka berarti kita mendefinisikan konten tersebut sebagai sebuah paragraf.
Tag sendiri tidak akan ditampilkan di browser. Tag hanya menjadi pengenal untuk browser dalam menentukan seperti apa sebuah konten ditampilkan. Misalnya, ketika kita menulis <strong>Kereeen!</strong>, maka konten di dalam tag tersebut akan ditampilkan sebagai tulisan yang dicetak tebal, seperti ini:
Kereen!
Meski demikian tidak semua elemen html ditulis dengan tag pembuka dan penutup. Ada juga elemen yang ditulis tanpa penutup, misalnya:
<br />
<img src="image.jpg" />
Elemen <br> dan <img> di atas tidak memiliki tag penutup, melainkan menutup dirinya sendiri dengan diakhiri karakter />.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
    <h1>Contoh Elemen HTML</h1>
      <img src="https://i.imgur.com/U1Khgbm.jpg" />
</body>
</html>
di Tidak ada komentar:

Learn HTML5 part 2

Struktur HTML

Struktur minimum dari sebuah dokumen HTML dapat diamati pada kolom editor di samping.
  • Deklarasi <!DOCTYPE html> mendefinisikan dokumen sebagai sebuah halaman HTML5
  • Elemen <html> adalah induk elemen dari sebuah halaman HTML
  • Elemen <head> berisi informasi seputar dokumen
  • Elemen <title> menetapkan judul dari dokumen HTML
  • Elemen <body> adalah induk dari konten halaman yang akan ditampilkan
  • Elemen <h1> dan <p> adalah contoh konten yang tampil pada layar
Bila kita memanggil dokumen HTML tersebut di browser, maka konten dari elemen <title> akan tampil di bagian headbar/tab browser dan semua konten yang ada di dalam body akan ditampilkan di dalam jendela browser.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h1>Ini Judul Konten</h1>
<p>Ini paragraf konten.</p>
</body>
</html>
di Tidak ada komentar:

Learn HTML5 part 1

Apa itu HTML?

Setiap website yang ada di dunia ini dibangun menggunakan bahasa yang dinamakan HTML. HTML menjadi sebuah kerangka membentuk struktur sebuah halaman website.
HTML adalah singkatan dari Hyper Text Markup Language. HTML mendeskripsikan struktur halaman sebuah website. Sebuah halaman HTML dibangun oleh blok-blok konten yang disebut elemen HTML.
Dokumen HTML ditampilkan oleh aplikasi yang dinamakan browser. Browser tidak akan menampilkan kode HTML, tetapi menggunakan kode HTML untuk menentukan bagaimana konten dokumen tersebut seharusnya ditampilkan.
Sejak pertama kali web ditemukan, sudah muncul dan berkembang versi dari HTML, yakni bermula dari versi 1 di tahun 1991. Kemudian HTML 2.0 lahir pada tahun 1995 dan HTML 3.2 pada tahun 1997. HTML 4.01 muncul pada tahun 1999 dan disempurnakan dengan XHTML pada tahun 2000. Versi terakhir HTML adalah HTML5 yang diperkenalkan pada tahun 2014 dan digunakan hingga saat ini.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h1>Ini Judul Konten</h1>
<p>Ini paragraf konten.</p>
</body>
</html>
di Tidak ada komentar:
Langganan: Postingan (Atom)

503 valid RCPT Command Must Precede DATA

Jika suatu saat program email Anda (terutama Microsoft Outlook) mengalami error “503 valid RCPT Command Must Precede DATA” pada saat pengir...