Kategori
Pemrograman

Dasar HTML

Definisi

HTML bukanlah bahasa pemrograman (programming language), tetapi bahasa markup (markup language). Dalam HTML tidak akan ditemukan struktur yang biasa di temukan dalam bahasa pemrograman seperti IF, LOOP, maupun variabel. HTML hanya sebuah bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman. xHTML merupakan versi lama dari HTML (sebelum era HTML5 seperti saat ini).

HTML Editor

Struktur Dasar HTML

Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari : Tag DTD atau DOCTYPE,  tag html,  tag head, tag body.

DTD adalah singkatan dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML.

Setelah DTD, tag berikutnya adalah tag <html>. Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>

Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.

•Judul Halaman <title> •CSS <style> •JavaScript <script> •Metadata <meta>

Tag <title> dalam contoh kita sebelumnya digunakan untuk menampilkan title dari sebuah halaman web. Title ini biasanya ditampilkan pada bagian paling atas web browser. Contohnya pada tampilan halaman.html, ‘Title dari Websiteku’ akan ditampilkan pada tab browser.

Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>. Sebagian besar waktu kita dalam merancang web akan dihabiskan di dalam tag <body> ini.

•Teks <h1>, <h2>, …, <p> •Pendukung teks <br>, <hr>, <em>, <strong>, … •Gambar <img> •Hyperlink <a> •List <ul>, <ol>, <li>, <dl>, … •Tabel <table>, <thead>, <tbody>, … •Form <form>, <input>, <select>, <button> •Script <script> •Object <object> •Grouping <div>, <span>

Pengertian DOCTYPE (DTD)

DOCTYPE atau document type declaration (DTD) adalah sebuah keterangan yang ditulis untuk memberitahu web browser tentang aturan penulisan dari dokumen yang sedang ditampilkan. doctype ditulis pada baris pertama halaman HTML. •Keharusan penulisan doctype berasal dari bahasa yang dinamakan SMGL dan XML. Keduanya adalah bahasa markup dimana HTML dan XHTML dikembangkan.  •HTML5 tidak lagi bagian dari bahasa SMGL yang mengharuskan penulisan doctype berserta alamat DTD-nya.

HTML TAG

•Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text •Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link. Dalam HTML, tanda ini dikenal dengan istilah tag. •ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”. Contoh HTML Tag

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup> •Sebagai contoh, perhatikan kode HTML berikut : <p> Ini adalah sebuah paragraf </p>, <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf. </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda forward slash (/)

self closing tag

  • self closing tag atau void tag adalah tag yang tidak perlu berpasangan
  • Contoh : •<br> untuk break (pindah baris) •<hr> untuk horizontal line (garis horizontal)
  • HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>

Element 

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu sendiri dan atribut yang dimilikinya (jika ada). Contoh <p> Ini adalah sebuah paragraf </p>

Pada contoh diatas, “<p>Ini adalah sebuah paragraf</p>” merupakan elementp. Element tidak hanya berisi text, namun juga bisa tag lain. <p> Ini adalah sebuah <em>paragraf</em> </p>. Dari contoh diatas,<p> Ini adalah sebuah <em>paragraf</em> </p> merupakan elemen p. Tidak jarang istilah “tag” dan “element” saling dipertukarkan.

HTML Attribute

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki pasangan nama dan nilai (value) yang ditulis dengan name=”value”. Value diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).

Contoh HTML Attribute

<a href=”https://www.bagiteknologi.com”>ini adalah sebuah link</a>.

Pada kode HTML diatas, href=”https://www.bagiteknologi.com” adalah atribut. href merupakan nama dari atribut, dan  https://www.bagiteknologi.com adalah value atau nilai dari atribut tersebut.

HTML Heading

HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML lebih di kenal dengan istilah: heading.  Heading dirancang terpisah dari paragraf.  Tag Heading biasanya digunakan untuk judul dari paragraf, atau bagian dari text yang merupakan judul. Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>.  Tag heading secara default akan ditampilkan oleh web browser dengan huruf tebal (bold). Tampilan dari tag header juga dibuat bertingkat. Tag header <h1> memiliki ukuran huruf paling besar,  sedangkan <h6> terkecil.

Paragraf di HTML

HTML menyediakan tag khusus untuk membuat paragraf. Penulisannya menggunakan huruf p, sebagai berikut : <p>. Mari kita revisi contoh kode HTML sebelumnya, dan menambahkan tag <p>.

HTML List

HTML list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). 1.Ordered list akan ditampilkan dengan angka atau huruf, 2.Unordered list dengan bulatan atau kotak. Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>.

HTML Link

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya.  HTML menggunakan tag <a> merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference). Alamat Absolute (penulisan alamat file dengan menyertakan nama website) dan Alamat Relatif (mencantumkan alamat file yang dituju relatif kepada file saat ini).

HTML Image

Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>. Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser.

HTML Table

Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>, dan tag <td>:

  1. Tag <table> digunakan untuk memulai tabel.
  2. Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
  3. Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.

HTML Comment

Untuk membuat komentar di HTML, kita menggunakan awalan

<!– dan penutup –>

Tag komentar ini juga akan berlaku selama belum di temukan tag penutup. Selain sebagai pengingat atau catatan, tag komentar juga akan berguna untuk membuat sebagian isi web tidak tampil untuk sementara. hal ini sangat berguna jika kita ingin mencoba berbagai tampilan kode HTML yang akan dibuat, tetapi tidak ingin menghapus kode sebelumnya.

HTML Form

Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di dalam tabel MySQL. tag form, diawali dengan <form> dan diakhiri dengan </form>.

Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form. Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post. Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol submit, semuanya dalam bentuk tag <input>. Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan dapat berisi banyak baris. Panjang dan banyak baris untuk text area di atur melalui atribut rows dan cols, atau melalui CSS.

Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari nilai yang ada. Tag select digunakan bersama-sama dengan tag option untuk membuat box pilihan. Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses oleh web server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa PHP atau ASP), nilai dari atribut name inilah yang akan menjadi variabel form.

Ref : [1][2]

Satu tanggapan untuk “Dasar HTML”

Komentar ditutup.