Kamis, 13 Agustus 2020

HTML

Pengertian HTML

HTML adalah singkatan dari HyperText Markup Language, yaitu bahasa pemrograman  standar yang digunakan untuk membuat sebuah halaman web yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser).

HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut  Standard Generalized Markup Language (SGML).

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML

Fungsi HTML yaitu:

  1. Membuat halaman web.
  2. Menampilkan berbagai informasi di dalam sebuah browser Internet.
  3. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

Persiapan Tool Belajar HTML

Pada langkah ini Anda akan mengetahui hal apa saja yang harus dipersiapkan.

Apa yang Anda Butuhkan?

Hal yang pertama dibutuhkan untuk mempelajari HTML tentunya adalah sebuah browser, seperti yang Anda gunakan untuk membuka artikel ini.

Anda dapat menggunakan berbagai jenis browser yang biasa digunakan, seperti Mozilla, Chrome, dll.

Untuk aplikasi lain Anda hanya memerlukan editor sederhana yang ada pada Windows, yaitu Notepad. Aplikasi ini dapat Anda buka melalui Start Menu. Tapi, untuk memudahkan Anda mengelola code HTML, kami menyarankan Anda menggunakan Notepad++

Pahami Web Browser

Web browser adalah sebuah aplikasi yang dapat digunakan untuk mengakses dan menampilkan halaman website.

Untuk halaman website biasanya dibuat dengan HTML, XML dan lainnya.

Browser akan menerjemahkan sebuah halaman website yang dikirimkan melalui HTTP (Hypertext Transfer Protocol) ke dalam tampilan yang dipahami manusia.

Meskipun setiap web browser memiliki fitur dan tampilan yang berbeda, tapi untuk fungsi secara umum sama.

Mempelajari Element, Tag, dan Attribut

Element pada HTML membentuk sebuah struktur dan memberitahu browser untuk halaman website yang akan ditampilkan. Biasanya untuk element terdiri dari tag pembuka, konten, dan tag penutup.

Tag sendiri digunakan untuk menandai sebuah element pada bagian awal dan akhir, dengan format yang sama diawali dengan tanda < dan ditutup dengan >.

Jika dibedakan, untuk tag terdapat dua jenis, yaitu tag pembuka <html> dan tag penutup </html>. Dua jenis tag ini hanya dibedakan dengan tanda garis miring.

Contoh

Sebagai contoh untuk element em (emphasis) terdiri dari semua code mulai dari tag pembuka <em> dan tag penutup </em>.

Berikut untuk contoh codenya:

<em>Contoh element.</em>

Untuk hasilnya akan terlhat seperti tulisan di bawah:

Contoh element.

Untuk membuat sebuah heading atau subjudul, digunakan element h1, h2, h3, h4, h5, atau h6. Dimana kepanjangan h adalah heading. Untuk ukuran paling besar diawali dengan h1 sampai h6 adalah ukuran terkecil.

Berikut adalah codenya:

<h1>Ini adalah h1</h1>
<h2>Ini adalah h2</h2>
<h3>Ini adalah h3</h3>
<h4>Ini adalah h4</h4>
<h5>Ini adalah h5</h5>
<h6>Ini adalah h6</h6>

Untuk tampilan di browser akan terlihat seperti gambar di bawah:

contoh heading

Seperti yang terlihat dari code di atas, pada sebuah element terdapat tag pembuka dan tag penutup. Ini tidak berlaku untuk beberapa element seperti code untuk membuat enter atau baris baru, yaitu <br>.

Attribute

Setelah Anda memahami element dan tag, Anda perlu memahami apa itu attribute. Seperti diketahui jika sebuah element berupa sturktur pada HTML yang berfungsi untuk memberitahu browser mengenai apa yang akan ditampilkan.

Aturan penulisan sebuah attribute:

  • Nama attribute diikuti oleh tanda sama dengan.
  • Nilai attribut diapit oleh dua tanda petik pembuka dan penutup.
  • Jika lebih dari satu attribut, diberi jarak dengan spasi.

Berikut adalah contoh element yang disertai sebuah attribute:

<p>Berikut adalah <a href="https://www.niagahoster.co.id/" title="Halaman hosting terbaik" target="_blank">hosting terbaik</a>.</p>

Berikut adalah tampilan pada browser:

Berikut adalah hosting terbaik.

Penjelasan:

Dari contoh di atas untuk element <a> berguna untuk memberikan batasan pada hyperlink dengan beberapa attribute di dalamnya:

  • href – Ini adalah attribute untuk menentukan alamat sebuah website, dimana ketika tautan diklik akan diarahkan ke halaman sesuai dengan tautan yang diisi, pada contoh ini adalah halaman href=”https://www.niagahoster.co.id/”.
  • title – Attribute ini berguna untuk menambahkan informasi pada tautan ketika kursor mouse diarahkan pada tautan. Pada contoh ini untuk title yang digunakan adalah title=”Halaman hosting terbaik”.
  • target – Untuk attribute ini berguna untuk memberitahu browser jika tautan diklik akan dibuka pada tab baru. Pada contoh ini adalah target=”_blank”. Jika attribut ini dihilangkan, untuk tautan tidak akan dibuka di tab baru.

Untuk mempercepat pemahaman Anda dalam belajar HTML dasar ini, silakan ikuti langkah selanjutnya.

5. Struktur HTML

Setelah Anda memehami elemet HTML, selanjutnya adalah menggabungkannya menjadi satu di dalam dokumen HTML.

Coba perhatikan code berikut ini:

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>Halaman pertamaku</title>
     </head>
     <body>
          <p>Ini adalah halaman pertamaku</p>
     </body>
</html>

Penjelasan:

  • <!DOCTYPE html> – Merupakan deklarasi dari type dokumen
  • <html></html> – Dikenal dengan element utama karena semua element berada di dalamnya.
  • <head></head> – Element ini berfungsi untuk memasukkan konten yang tidak ingin ditampilkan. Konten tersebut dapat berupa keyword, deskripsi, CSS, dll.
  • <meta charset=”utf-8″> – Berfungsi untuk memberitahu browser mengenai pengkodean karakter yang sesuai dengan ketentuan UTF-8, mengenai UTF-8 silakan baca artikel berikut.
  • <title></title> – Merupakan judul dari halaman website yang muncul pada bagian tab browser.
  • <body></body> – Berisi konten yang ditampilkan pada browser ketika pengunjung mengakes halaman tersebut, contohnya seperti artikel yang sedang Anda baca saat ini.

Diposting oleh di

4 komentar:

Langganan: Posting Komentar (Atom)