Mengenal Pengertian HTML dan Belajar HTML Dasar

HTML adalah singkatan dari Hypertext Markup Language yaitu standar yang digunakan untuk membuat sebuah halaman website. Ketika membuat sebuah website otomatis anda akan belajar HTML dasar. HTML ini tidak bekerja sendiri namun dibantu dengan bahasa bahasa lainnya seperti CSS (Cascading Style Sheet) dan Javascript. HTML sendiri bertugas untuk menyusun kerangka halaman web, CSS (Cascading Style Sheet) nantinya yang akan merapihkan dan memperindah tampilan halaman web, dan Javascript bertugas untuk membuat tampilan web menjadi lebih interaktif.

Perlu diperhatikan, HTML bukanlah sebuah bahasa pemrograman. HTML merupakan bahasa markup yang berisi perintah-perintah dengan format tertentu yang terstruktur untuk menampilkan tampilan tertentu. Untuk dapat membuat sebuah halaman web dan dapat ditampilkan oleh browser harus mengikuti aturan dan formatnya tersendiri. Untuk menulis baris kode HTML dapat menggunakan software text editor seperti sublime, atom, notepad++ dan lainnya. Agar bisa dibaca oleh browser hal yang harus paling diperhatikan adalah ekstensi filenya yaitu menggunakan format .html.

Mengenal Pengertian HTML dan Belajar HTML Dasar

Pengertian HTML adalah

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

  • Hypertext adalah sebuah metode dimana ada perpindahan disekeliling web, dengan mengklik sebuah  text dengan penamaannya hyperlink. Hyperlink adalah sebuah text khusus di internet yang mana saat text tersebut diklik akan nanti dibawanya ke halaman web selanjutnya yang telah ditentukan.
  • Markup adalah suatu hal yang dilakukan oleh sebuah tag HTML kepada text yang ada didalam file tertentu. HTML menandai text yang berada didalamnya sebagai tipe text tertentu. Misalnya jika telah menandai sebuah text dengan tag HTML contoh <u> maka text tersebut akan mengalami perubahan dengan adanya underline (huruf berada diatas garis). Dan sedangkan menandai dengan tag <i> maka text nantinya akan berubah menjadi italic (garis miring).
  • Language yang berarti bahasa. HTML adalah sebuah bahasa, yang memiliki kata kata berupa kode dan syntax seperti bahasa yang lain.

Supaya  HTML menghasilkan tampilan wujud yang terintegerasi maka pemformatan hypertext sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML. Sampai saat ini HTML juga masih dikembangkan, dikarenakan ada hal yang perlu diperhatikan dari segi pengguna internet juga semakin pesat perkembangannya. Oleh karena itu HTML juga harus meningkatkan dan menciptakan agar bisa membuat halaman web yang lebih berkualitas. Untuk itulah dibentuk sebuah badan organisasi yang bertanggung jawab unuk mengembangakan HTML yang dinamakan W3C.

Belajar HTML Dasar

1. Apa itu HTML?

Halaman web yang hampir setiap harinya pengguna mengaksesnya seperti webhostingterbaik.id, facebook.com, google.com dan lain sebagainya itu  ditampilkan dengan menggunakan HTML. Jadi bisa dikatakan HTML adalah bahasa dasar untuk menampilkan halaman web pada web browser.

Sebagai contohnya dari web google yang dipastikan menggunakan file HTML untuk menjalankan di browser, bisa dilihat untuk struktur dari tampilan inti google. Untuk mempermudah dalam belajar html kali ini mari kita lihat contoh dibawah.

  • Buka web google lalu lakukan klik kanan pada mouse dan pilih inspect element, inspect elemen selain bisa untuk melihat syntax dari tampilan web, bisa juga untuk mengetahui dibagian mana web itu.
  • Anda akan melihat tampilan dari hasil inspect element seperti pada gambar dibawah.

Baris pertama pasti diawali dengan tag <!DOCTYPE HTML>, yang intinya menandakan bahwa dokumen yang sedang di buka saat ini adalah HTML. Begitu juga dengan tag baris kedua <HTML>, kode tersebut menandakan bahkan kode-kode yang ditulis di dalamnya adalah kode HTML.

2. Pengenalan tag HTML

Seperti yang sudah di singgung sebelumnya, bahwa HTML adalah bahasa Markup, yang artinya bahasa HTML hanya digunakan untuk me-markup suatu dokumen. Sebagai penyederhanaan bisa analogikan dengan pembuatan dokumen di Microsoft Word atau aplikasi Word Processing lainnya.

Mengenal Pengertian HTML dan Belajar HTML Dasar

Jika sedang membuat sebuah halaman dokumen word, biasanya melakukan formatting pada teks. seperti memiringkan teks (italic), menebalkan teks (bold), memberi garis bawah (underline), membuat penjudulan (Heading), membuat list (Daftar) dan lain sebagainya. Pada HTML, formatting ini bisa kita sebut dengan Proses Markup dan akan dilakukan dengan menggunakan tag HTML.

Ada 2 jenis cara penulisan pada tag HTML

  1. Closing Tags

Tag yang bergantung dengan tag penutup agar dapat dieksekusi pada web browser dan sudah menjadi aturan pada Bahasa HTML itu sendiri. Berikut ini contoh beberapa daftar elemen yang berada dalam HTML:

  • <b>/</b>
  • <p><p/>
  • <h1></h1>
  • <u></u>

2. Self-Closing Tags

Tag yang dapat berdiri sendiri tanpa adanya tag penutup. Berikut ini contoh beberapa daftar elemen tanpa penutup dalam HTML:

  • <img>
  • <hr>
  • <input>
  • <br>

Biasanya tag itu terdiri dari beberapa bagian-bagian, perintah dibawah ini sesuai dengan instruksi dalam pemakaian aturan tag:

  • Diawali dengan karakter <
  • Nama tag elemen.
  • Secara opsional, satu atau beberapa atribut, yang masing-masing harus didahului oleh satu atau beberapa karakter spasi.
  • Secara opsional, satu atau beberapa karakter spasi.
  • Opsional, jika karakter / yang mungkin hadir hanya bersifat elemen yaitu elemen kosong.
  • Dan karakter penutup pada tag yaitu >.

Bisa diambil contoh untuk membuat format text menjadi tebal di HTML dapat ditambah dengan tag <b>.

Selamat <b>Datang</b>

<b>..</b> tulisan disamping bisa disebut tag HTML yang dapat digunakan untuk me-markup(memformat) dokumen HTML. Terdapat / (garis miring) untuk sebuah penulisan yang ada pada contoh tag diatas yang berfungsi sebagai penutup agar dapat dieksekusi oleh browser.

Berikut adalah gambaran dari tag HTML:

<nametag attribute=”value”>

       contents

</nametag>

Pada setiap tag HTML bisa menjadi isi atau konten dari tag HTML lainnya dan untuk membuat suatu hierarki dari dokumen HTML.

Pada setiap tag HTML juga dapat menyisipkan berbagai atribut yang berfungsi untuk menampung informasi-informasi tertentu, misalnya atribut id dan class yang berfungsi untuk memberi nama suatu tag sebagai referensi CSS atau javascript nantinya.

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.

3. Struktur dasar HTML

Belajar HTML dasar berikutnya adalah dengan mengetahui strukturnya. Suatu dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag yang harus di tuliskan dan sudah menjadi ketentuan dari sebelumnya. Jika melihat pada struktur HTML yang sudah dibahas diatas dapat dijadikan menjadi murni seperti berikut ini:

<!DOCTYPE HTML>

<HTML>

        <HEAD>

                        <TITLE>…..</TITLE>

        </HEAD>

        <BODY>

                        <h2>Hello World</h2>

        </BODY>            

</HTML>

Pada setiap baris kode diatas memiliki arti masing masing.

<!DOCTYPE HTML>

Merupakan tag paling awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan kepada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan pada setiap dokumen HTML yang nantinya akan dibuat.

<HTML> </HTML>

Dibagian ini awal dari isi dokumen HTML dimulai. Semua kode yang nantinya akan dibuat pastinya akan ditulis didalam tag ini. Perhatikan juga untuk bagian penutup dari tag di atas.

<HEAD> </HEAD>

Tag Head ini akan digunakan untuk menyimpan berbagai sumber informasi tentang dokumen HTML, Apa yang terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web browser karena sebagian tag yang tertera nantinya di dalam tag ini akan membantu proses dari konten atau isi pada file HTML.

<TITLE> </TITLE>

Berikut salah satu contoh tag yang dapat memberikan informasi di dalam tag head. Title akan menampilkan text pada judul browser atau pada tab browser.

<BODY> </BODY>

Inti dari konten web itu ada pada tag ini. Dimana didalam tag inilah semua informasi yang nantinya akan ter publish itu dicantumkan dalam tag ini.

Perkembangan Versi HTML

a. Dimulainya HTML dari versi 1.0 itulah versi yang paling pertama dengan nama HTML. Versi awal ini memiliki kemampuan untuk heading, paragraph, hypertext, bold dan italic text seta wrapping yang memiliki dukungan dalam peletakan sebuah gambar.

b. Versi 2.0 release pada 14 Januari 1996 dengan beberapa tambahan yang memiliki kemampuan tambahan diantaranya form comment, hal ini yang menyebabkan adanya interaktif dari mulainya versi yang menjadikan sebuah pionner dalam perkembangan homepage interaktif.

c. HTML 3.0 juga memiliki kemampuan fasilitas dalam penambahan fitur table dalam paragraph yang tak bertahan cukup lama di versi ini.

d. HTML 3.2, versi ini adalah penyempurnaan dari HTML versi 3.0. keluarnya versi ini dikarenakan adanya beberapa kasus yang timbul pada pengembang browser yang telah melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi popular. Maka dibakukan versi 3.2 untuk mengakomodasi praktek  yang banyak digunakan oleh pengembang browser dan diterima secara umum. Dapat dikatakan versi 3.2 ini merupakan versi 3.2 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.

e. HTML versi 4.0 di release 18 Desember 1997. Versi ini sendiri sudah terdapat penambahan pada link, meta, image dan lain-lain sebagai penyempurnaan versi 3.2.

f. Pengembangan dari versi 4.0. HTML versi 4.01 menjadi rekomendasi W3C. HTML 4.01 adalah minor update-koreksi dan perbaikan bug dari HTML 4.0.

g. XHTML versi 1.0 ( 20 Januari 2000 ). XHTML 1.0 merumuskan HTML 4.0 dalam XML.

h. Versi yang saat ini paling top adalah HTML versi 5 pada 22 Januari 2008 telah diresmikan untuk dipakai secara public. HTML 5 juga meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang tepat tentang bagaimana untuk menangani sebuah elemen HTML dan dapat memulihkan dari kesalahan. Banyak fitur terbaru dari versi 5 ini adalah fungsi pada audio embedding, video, grafik, sisi penyimpanan data client dan dokumen interaktif. Ada penambahan unsur-unsur baru seperti <nav>, <header>, <footer> dan <figure> yang dapat memudahkan pengguna dalam pembuatan sebuah tampilan web. Banyak berbagai vendor bekerja sama dalam mendukung HTML 5 ini termasuk AOL, Google, Apple, IBM, Microsoft, Opera, Nokia dan masih banyak lagi vendor lainnya.

Cara kerja HTML

HTML lebih memfokuskan pada penggambaran komponen-komponen struktur dan format dalam halaman situs dari pada menentukan penampilannya. Sementara, web browser digunakan untuk menginterpretasikan susunan halaman ke web browser dengan menggunakan jenis tulisan, warna, garis, dan teks yang dikehendaki ke komputer yang menampilkan halaman situs.

Bisa diambil contoh dalam penggunaan unsur baru dari HTML yaitu heading.

Pada proses heading biasanya kita akan menemukan sebuah tulisan yang dari segi bentuk bisa mengecil atau membesar. Penggunaan heading ini untuk memberikan penjudulan pada suatu dokumen HTML. Untuk melakukan pemformatan pada HTML sudah disediakan beberapa tag bantuan seperti penggunaan tag <h1> untuk judul utama dan untuk judul subheading-nya dapat menggunakan tag <h2> sampai dengan<h6> untuk melakukan proses heading.

Baca juga artikel terkait lainnya mengenai PHP: Mengenal Pengertian PHP dan Belajar PHP Dasar

Bergabung dengan tim webhostingterbaik semenjak website ini mulai dirilis. Selalu antusias mencari berbagai informasi dan membagikan informasi yang diketahuinya kepada semua orang melalui tulisannya secara lengkap.

Dapatkan posting terbaru :