Tutorial HTML Dasar Part 4: Menjalankan File HTML

Brian Harris / / HTML, HTML Dasar
cara menjalankan file html

Pada pembahasan sebelumnya, kita telah membahas dan menginstall web browser dan juga text editor. Nah pada tutorial kali ini, kita akan membahas tentang cara menjalankan file HTML serta pengertian Tag, Element, dan Atribut pada HTML.


Untuk mempermudah dalam mengakses file kita, sebaiknya kita buat dulu sebuah folder dengan nama “belajarhtmldasar” di Drive C. Folder ini akan berguna untuk meletakkan file-file HTML yang akan kita buat nantinya.

Setelah itu, buka aplikasi Sublime Text, lalu ketikkan teks berikut ini:

Hello world! Ini adalah file HTML pertama saya.

Save file diatas dengan nama coba.html di folder belajarhtmldasar. Selanjutnya jalankan file coba.html yang sudah di buat dengan cara klik 2x (kali) file tersebut.

file html pertama

Sekarang file HTML kita sudah bisa berjalan, meskipun sebenarnya belum terdapat kode-kode HTML didalamnya.

Pada percobaan kita diatas, kita dapat melihat bahwa setiap halaman HTML harus diakhiri dengan ekstensi .html. Yang kita lakukan disini adalah menjalankan file HTML dari komputer lokal. Jadi kita harus perhatikan di bagian alamat pada web browser kita. Hal ini di awali dengan “file:///” lalu diikuti dengan lokasi file HTML yang disimpan dalam komputer kita masing-masing. Sebagai contoh “C:/belajarhtmldasar/coba.html”. Hal ini berarti bahwa kita tidak harus online untuk membuat dan menjalankan file HTML.


Pengertian Tag pada HTML

HTML sebagai sebuah markup, membutuhkan cara untuk memberitahukan web browser untuk apa sebenarnya fungsi sebuah text. Apakah text itu ditulis sebagai sebuah heading, paragraf, list, ataupun link. Pada HTML, tanda ini dikenal dengan tag.

Setiap tag yang ada di HTML, pasti hampir semuanya memiliki pasangan yang disebut sebagai tag pembuka dan tag penutup. Dimana objek yang dikenai pada perintah tag berada di antara tag pembuka dan tag penutup. Objek disini bisa sebagai text ataupun gambar. Penulisan tag berada di antara kurung siku “<“ dan “>”.

Menggunakan Tag pada HTML

Berikut ini adalah contoh penggunaan tag dan format dasar penulisan tag HTML:

ContohHasil
<b>Ini tulisan tebal</b>

<i>Ini tulisan miring</i>

<u>Ini tulisan bergaris bawah</u>

ini baris 1<br>ini baris 2

Ini garis horizontal <hr>

Ini tulisan tebal

Ini tulisan miring

Ini tulisan bergaris bawah

ini baris 1
ini baris 2

ini garis horizontal


Ada beberapa tag yang memiliki atribut didalamnya, seperti tag <font>, <table>, <input> dan lainnya. Pada tag font, dia memiliki beberapa atribut di antaranya atribut: color, size, face. Untuk lebih mengerti atribut tersebut, silahkan lihat contoh berikut ini.
<font color="limegreen" face="lato" size="15px">Ini font Lato yang berwarna limegreen dan mempunyai ukuran 15px</font>
Hasil nya akan seperti ini Ini font Lato yang berwarna limegreen dan mempunyai ukuran 15px

  • Atribut color digunakan untuk memberikan warna pada text.
  • Atribut face digunakan untuk memberikan jenis font/huruf yang ingin dipakai.
  • Atribut size digunakan untuk memberikan ukuran pada text.

Jangan lupa untuk memberikan tag penutup, jika kita tidak menggunakan tag penutup, pada dasarnya web browser akan “memaafkan” kesalahan ini dan tetap menampilkan hasil yang sudah dibuat yang seolah-lah kita menuliskan tag penutup.

Untuk contoh lain, misalnya jika kita ingin membuat suatu text dalam sebuah paragraf yang ditulis miring atau tebal, ataupun keduanya, kita dapat menuliskan di HTML seperti ini:

<p>Ini hanyalah paragraf biasa. <i>yang memiliki beberapa kalimat</i>.
<b> untuk mencoba file HTML</b>. paragraf ini terdiri dari<b><i> 4 kalimat</i></b></p>

Nah, jika file HTML diatas dibuka pada web browser, browser akan menerjemahkan kode tersebut menjadi seperti ini:

“Ini hanyalah paragraf biasa. yang memiliki beberapa kalimat. untuk mencoba file HTML. paragraf ini terdiri dari 4 kalimat“.

Tag <i> singkatan dari italic yang berguna untuk memerintahkan browser untuk menampilkan text secara miring. Sedangkan tag <b> singkatan dari bold yang berguna untuk memerintahkan browser untuk menebalkan text.

[box type=”info” align=”” class=”” width=””]Terdapat pengecualian beberapa tag yang tidak berpasangan, seperti <br> untuk break (pindah baris) atau <hr> untuk horizontal line. Tag ini dikenal dengan sebutan self closing tag atau void tag, untuk penulisannya bisa ditulis dengan <br> ataupun <br/>[/box]

Pada dasarnya, HTML tidak case-sensitif, artinya, jika penulisan <p> dianggap sama dengan <P>. Pada awal kemunculan HTML, programmer web umumnya menggunakan huruf besar untuk seluruh tag agar membedakan dengan text yang berupa isi dari web. Namun HTML mewajibkan huruf kecil untuk semua tag.

Dalam HTML5, aturan ini tidak diharuskan lagi. Tapi karena sudah kebiasaan web programmer saat ini adalah menggunakan huruf kecil untuk seluruh tag.


Pengertian Element pada HTML

Element pada HTML merupakan isi atau objek yang berada pada tag. Maksudnya, isi yang ada diantara tag pembuka dan tag penutup disebut dengan element. Contohnya seperti berikut ini:

<!DOCTYPE html>
<head>
    <title>HTML</title>
</head>
    <body>
        <h2>Element pada HTML</h2>
    </body>
</html>

pada contoh diatas, <h2> merupakan heading dua <h2> yang didalamnya terdapat element h2 dan isinya adalah heading dua. Dalam element ini bisa berupa text ataupun tag yang lainnya seperti <font> dan sebagainya.


Pengertian Atribut pada HTML

Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. Informasi ini bisa berupa instruksi untuk memberikan efek warna, ketebalan, dll. Atribut biasanya memiliki 2 bagian yaitu nama dan nilai(value), yang bisa ditulis dengan (name=”value”). penulisan nilai/value diapit
oleh dua tanda kutip (bisa digunakan kutip satu atau kutip dua).

Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri. Berikut contoh penulisan atribut pada HTML:

<!DOCTYPE html>
<head>
 <title>HTML</title>
</head>
    <body>
     <p align="center">Atribut pada HTML</p>
    </body>
</html>

Kita ulas dan perhatikan sytnax diatas:

  • <p> adalah tag paragraf
  • align adalah nama dari atribut
  • center adalah nilai(value) dari atribut
  • Atribut pada HTML adalah element dari tag p

Pada tutorial kali ini, kita sudah mempelajari salah satu bagian terpenting di dalam HTML, yaitu Cara Menjalankan File HTML serta Pengertian Tag, Element, dan Atribut pada HTML. Pada tutorial HTMLselanjutnya, kita akan mempelajari tentang Struktur Dasar Halaman HTML.

Tinggalkan Komentar

Your email address will not be published. Required fields are marked *