Belajar HTML Part 1

Bismillahirrohamaanirrohiim ..

Apa itu html? html adalah dasar dari seluruh halaman web yang ada di internet.

html adalah struktur dasar dari sebuah halaman website. kalau kita ingin membuat website pasti menggunakan html.

html singkatan dari hyper text markup languge.

https://id.wikipedia.org/wiki/HTML

oke kita langsung saja menuju ke penggunaan html. fungsi dari html adalah untuk membuat struktur dasar sebuah website. html akan menandai bagian mana saja yang akan jadi paragraf, list, header dan tanda-tanda lainnya.

hal-hal yang perlu disiapkan untuk belajar html:

  • Text editor (Sublime text, notepad++) . adalah tools atau alat yang kita gunakan untuk membuat atau file html.
  • web browser (mozilla,chrome,dll). adalah tools yang di gunakan untuk menampilkan hasil dari file html yang telah kita buat di text editor
  • Web Server (xampp,wamp). opsional. adalah tools yang digunakan sebagai server dari website yang kita buat. untuk mempelajari html sebenarnya tidak harus menggunakan webserver, tapi lebih bagus jika menggunakannya.

jika hal-hal di atas sudah siap, maka kita langsung buat satu file html:

<!DOCTYPE html>
<html>
<head>
<title>Judul Website</title>
</head>
<body>
 <h1>Ini adalah judul besar</h1>
<br>
<p id="paragraf-pertama" >ini adalah paragraf</p>
</body>
</html>

Struktur Dasar HTML

di dalam html ada dua hal yang sering kita sebut dan bahas. yaitu tag dan atribut.

apa itu tag? seperti yang kita lihat di file html yang baru kita buat di atas , terdapat tulisan seperti <p>,<head>,<h1> . itu semua yang di sebut dengan tag.

Apa fungsi dari tag? fungsi nya adalah untuk memberitahu web browser apa dan bagaimana sebuah teks harus di tampilkan. jadi tag <p> akan di tampilakan sebagai sebuah paragraf, tag <h1> akan di tampilkan sebagai header (judul besar).

sebagian besar tag di tulis secara berpasangan, jadi ada tag pembuka dan tag penutup, sebagai contoh di atas adalah tag <p> sebagai tag pembukan dan tag </p> sebagai tag penutup. tanda dari tag penutup adalah adanya tanda back slah ( / ).

Namun ada juga tag yang tidak mempunya pasangan seperti tag <br> yang berfungsi untuk membuat baris baru, atau tag <input> yang berfungsi untuk membuat kolom input.

lalu, apa itu atribut? adalah informasi tambahan yang di tulis pada tag pembuka. contoh bisa kita lihat di tag <p> yang ada di file html yang ada di atas. di situ terdapat atribut id <p id=”paragraf-pertama”> .

Atribut terdiri dari dua hal, yaitu nama atribut dan nilai atribut:

<p nama-atribut="nilai_atribut" >

satu tag bisa mempunya banyak atribut, tapi posisi atau peletakkan atribut pasti selalu berada di tag pembuka nya. lalu bagaimana jika tag nya tidak mempunyai pasangan ? maka langsung di taruh tag nya saja.

lalu, apa fungsi dari atribut ? fungsi nya tergantung dari nama , nilai dan berada di tag mana atribut tersebut berada. atribut ada yang bisa di pakai di seluruh tag dan ada yang yang hanya bisa di pakai di tag tertentu saja.

oke cukup untuk pembahasan tag dan atribut, kita lanjut ke struktur dasar html.

setiap kali kita akan membuat sebuah halaman website dengan html. hal pertama yang harus dibuat adalah membuat struktur dasar nya . sebagaimana jika membuat bangunan maka pasti akan di bangun pondasinya lebih dahulu, baru setelah jadi pondasi bisa di bangun dinding , di cat dan sebagainya.

maka pondasi dari html adalah kode berikut :

<!DOCTYPE html>
<html>
<head>

</head>
<body>
</body>
</html>

struktur dasar html terdiri dari :

DTD : Document Type Declaration

pada baris pertama dari kode di atas terdapat <!DOCTYPE html> , nah itu yang di sebut dtd. fungsi dari dtd adalah untuk memberitahu browser tentang aturan penulisan dari suatu dokumen.

sebenar nya dtd tidak harus di tuliskan di awal file html, artinya jika dtd tidak di tulis pun file html akan tetap bisa di jalankan di browser.

akan tetapi, jika kita tidak menuliskan dtd di awal file html , maka webiste kita akan di tampilkan dalam quirks mode.

https://id.wikipedia.org/wiki/HTML

Tag <html>

setelah dtd, maka kita akan menuliskan tag <html>, kalau kita perhatikan kode html di atas maka kita akan melihat tag <html> akan membungkus seluruh kode html. tag pembuka nya berada di setelah dtd dan tag penutupnya berada di baris paling bawah.

dalam satu file html hanya boleh ada satu pasang tag html.

Tag <head>

tag <head> berfungsi untuk menyimpan tag-tag yang umumnya tidak tampil halaman website kita ketika di akses oleh web browser. di dalam tag head juga sering berfungsi sebagai tempat mereferensikan file-file yang dibutuhkan oleh website kita seperti file css dan js.

tag-tag yang sering berada di tag <head> , <link>,<meta>,<scripts>,<title>

Tag <body>

tag <body> berfungsi untuk menyimpan semua tag yang umumnya akan tampil di halaman website kita ketika di akses oleh web browser, seperti tag <p>, <b>, <h1>.

oke, itu semua adalah struktur dasar dari sebuah website html. dan urutan pembuatannya pasti akan selalu seperti kode yang ada di atas. selalu di awali dengan dtd, lalu di susul dengan <html> , lalu di antara tag pembukan <html> dan penutup </html> , kita isi dengan tag <head> lalu tag <body>.

tidak boleh ada dua tag head dan dua tag body dalam satu halaman website html.

Bagaimana Cara menjalankan file html ?

pertama, kita buka dulu text editor , di sini saya menggunakan sublime text.


karena dalam contoh ini saya menggunakn web server xampp, maka saya akan buat folder di htdocs , jika menggunakan wamp maka buat folder di www. saya buat folder dengan nama belajar_html.

lalu buat 1 file dengan nama index.html , index adalah file yang pertama kali di akses oleh browser ketika pertama kali mengakses website.

Struktur Dasar HTML

lalu kita buat struktur dasar html nya seperti yang ada di gambar atas. ubah kode nya menjadi seperti di bawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Judul Website</title>
</head>
<body>
<h1>Ini adalah judul besar</h1>
<br>
<p>ini adalah paragraf</p>
</body>
</html>

setelah di save , buka web browser yang terinstall di komputer kita. di sini saya menggunakan google chrome. lalu ketikan url berikut : http://localhost/belajar_html . belajar_html adalah folder yang baru kita buat di htdocs, berperan sebagai nama dari aplikasi atau website kita.

maka akan tampil seperti berikut :


alhamdulillah, sejauh ini kita sudah belajar apa itu html beserta fungsi nya , apa itu tag , apa itu atribut,bagaimana struktur dasar html, dan bagaimana cara menjalankan file html di browser kita.

demikian untuk belajar html part 1, untuk part 2 kita akan belajar mengenai tag-tag basic yang akan sering digunakan,html style, html formatting.

Semoga bermanfaat.

Tolong Like dan Share ya !

Leave a Reply

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