Belajar HTML dari Nol #01 : Pengenalan Dasar HTML Untuk Pemula

 Mastama.my.id - belajar HTML untuk kedepan adalah salah satu skill yang harus kalian milik i gimana tidak sekarang secara tidak sadar kalian pasti nemu in HTML di blog atau web , di web dan jika kalian ingin jadi web developer kalian wajib belajar html.

Kenapa harus belajar HTML ?

karena HTML adalah dasar dari pembuatan web.

Saya yakin pasti kalian setidaknya sekilas mendengar HTML ini, jika kalian sudah mendengar dan tau tidak salahnya membaca dan mempelajari html lagi biar tidak lupa tapi jika kalian belum pernah tau dan belajar html silakan baca artikel ini sampai selesai saya akan buat dengan bahasa yang mudah di paham i dan kami akan membahas benar benar dari nol hingga kamu bisa membuat html page kamu sendiri.

oke kita mulai belajar 

Apa itu HTML ?


HTML adalah kependekan dari HyperText Markup Language, yaitu merupakan sebuah bahasa markup atau tanda yang di gunakan untuk membuat web. 

Nanti penanda atau markup ini di sebut dengan tag.

Html ini digunakan untuk mengatur sebuah struktur konten atau tampilan web. 
HTML, CSS dan Javascript

Untuk menggatur struktur suatu web html tidak hanya berdiri sendiri, dia harus di teman i teman temannya yaitu CSS dan Js atau Javascript, nanti aku akan bahas css dan js juga ya.

CSS, HTML Dan Javascript

kalau di ibaratkan html adalah kerangka tubuh manusia, menjadi dasar pembuatan blog.

CSS sendiri adalah bisa di ibaratkan dengan kulit atau pakaian untuk kerangkanya agar html ini tidak monoton dan cantik 

Untuk Js di ibaratkan otak atau jaringan otot dimana di gunakan untuk menghidupkan web, karena dengan javascript kita bisa menentukan fungi-fungsi dan elemen di web kita nanti.

tapi di tutorial kali ini saya cuma akan bahas html jika kalian ingin belajar Javascript dan Css kalian bisa baca di link dibawah ini

  • Tutorial belajar Css untuk pemula
  • Tutorial belajar Javascript untuk pemula
semoga kalian paham apa itu html dan apa peranan html untuk pembuatan web, jadi saya anggap kalian paham ya.

berikutnya kita bahas sejarah dan asal usul html ya

Sejarah dan Asal-usul HTML

untuk penjelasan sejarah dan asal-usul html di artikel ini saya akan bahas secara singkat ya tapi jika kalian ingin baca tentang sejarah dan asal-usul html secara lengkap kalian bisa liat di link di bawah ini ya setuju ?

  • Sejarah dan asal usul html Lengkap.
Awalnya html adalah diciptakan pada tahun 1980 an.

Tim Berners-Lee
saat itu ada seorang ilmuan fisika Tim Berners-Lee sedang bekerja di CREN yang berada di swiss, para peneliti di CREN ini kebingungan gimana caranya saling berbagi dokumen penelitian.

Tim kemudian mencoba membuat ENQUIRE.kalau kalian belum tau ENQUIRE , ENQUIRE adalah Software hypertext yang digunakan waktu itu berfungsi sebagai software berbagi dokumen. pada tahun 1989, Tim memperkenalkan ide berlian nya yaitu tentang hypertext berbasis internet, dimana ini akan menjadi awal mula cikal- bakal dari html.

pada tahun 1991 akhir, tim berners-lee menerbitkan dokumen yang berjudul html tag. kalian bisa liat dokumennya di bawah ini.


jika kalian lihat di dalam dokumen di atas dokumen ini berisi 18 tag awal yang menjadi konsep dari Html ini.

kalau kalian tau HTML ini sebenarnya dirancang berdasarkan bahasa markup yang bernama SGML atau kepanjangan dari (Standard Generalized Markup Language).

kita akan singung sedikit SGML

SGML iyalah sebuah standar internasional  yang di gunakan untuk membuat dokumen dengan tanda atau markup contoh seperti paragraf, list, heading dan lain lain, kalau kita lihat beberapa tag SGML juga terdapat di tag html seperti <title>, <p>, <li>, dan <h1> sampai <h6>, jadi bisa di bilang kalau HTML adalah hasil dari implementasi SGML.

tapi tidak semua tag di dalam html merupakan hasil implementasi dari SGML lo salah satunya adalah hyperlink, hyperlink ini murni dari pemikiran berlian seorang fisikawan bernama Tim.

kemudia ide tentang html ini segera disebar luaskan ke seluruh dunia melalui mailing list dan pada saat itu langsung booming dan menjadi pusat perhatian ilmuan komputer dari seluruh dunia.

Perkembangan dan versi html dari masa ke masa


karena html udah berkembang pesat dan sudah banyak versi saya akan mengurutkan dari versi jadulnya hingga versi terbarunya .

  1. [Draft] HTML 1.0 (Juni 1993) adalah versi HTML pertama, namun tidak resmi dirilis; 
  2. HTML 2.0 (24 November 1995) adalah versi HTML kedua yang resmi pertamakali beredar di pasaran dan dirilis oleh IETF;
  3. [Draft] HTML 3.0 (28 Maret 1995) versi ini gagal beredar, karena banyak perubahan yang memicu perdebatan; 
  4. HTML 3.2 (14 Januari 1997) versi resmi yang dirilis W3C pertamakali. 
  5. HTML 4.0 (24 April 1998) versi pengembangan dari yang seblumnya; 
  6. HTML 4.01 (24 Desember 1999) versi perbaikan dari HTML 4.0; XHTML 1.0 (26 Januari 2000) pengembangan dari HTML 4.01 dengan mengadopsi XML; 
  7. XHTML 2.0 (Augustus 2002—Juli 2006) versi kedua dari XHTML; 
  8. HTML 5 (28 Oktober 2014)
Note :Versi draft adalah di mana versi ini tidak resmi beredar dipasaran dan versi draft ini masih berbentuk draft spesifikasinya saja

tidak ada yang mengunakan versi draft ini dari sebanyak versi ini mana yang harus kita pakai ? jawabanya adalah versi yang terbaru html 5 tapi jika kemungkinan suatu saat ada update lagi kita harus memakai versi terbaru saat itu.

yuk sekarang kita praktek mengunakan html ini.

Software apa aja yang di pakai ?

Software yang di pakai untuk belajar html

sebelum praktek kalian lengkapi software berikut ini ya 


1. Text Editor 

Text Editor

fungsi dari text editor adalah di gunakan untuk menulis kode-kode html. ada banyak text editor yang bisa kalian pakai berikut ini rekomendasi text editor.

 pilih salah satu kalian bisa download melalui link diatas, kalau kalian bingung pilih mana, gak usah bingung semua text editor sama kok nanti saya mempraktekannya dan memberi contoh mengunakan sublime text kalian bisa ikut pakai sublime atau pakai yang lain senyaman kalian.

2. browser

Browser


untuk web browser sama seperti text editor kalian bebas memilih kalian bisa mengunakan web browser bawaan atau yang sudah kalian download.

saran saya gunakan browser versi terbaru yang sudah mendukung HTML 5 karena tidak semua browser mendukung html versi 5.

kalian bisa gunakan chrome atau firefox.


Membuat Dokumen Html pertama kalian 


 kini saatnya kalian praktek, penting banget praktek karena jika kalian praktek kalian tau feel gimana membuat ini.

pertama buka kode editor kalian dan kalian ketikan sesuai kode di bawah ini.


  
<!DOCTYPE html>
<html lang="en"> 
<head> 
<title>Belajar HTML #01 Bersama Mastama</title> 
</head> 
<body> <p>Hello World!</p> </body> </html>

Setelah itu kalian save dengan nama helloword.html

contoh gambar save

contoh gambar file html



Tips: buat kamu yang menggunakan Notepad di Windows, simpanlah nama filenya dengan menggunakan tanda petik "hello-world.html" agar ekstensinya .html, bukan .txt


jika kalian ingin lihat hasil dari codingan kalian kalian bisa buka file helloword.html yang sudah kalian save tadi  mengunakan browser kalian disini saya mengunakan brave



 

selamat kalian sudah bisa menjalan kode kalian di browser.

oke sekarang kita bedah satu satu maksud kode pasti kalian bingungkan ? 


pertama kita akan bahas cara dan aturan penamaan file html

Penamaan File html


ada beberapa hal yang harus kalian perhatikan dalam penamaan ini.

A.Ekstansi html


setiap file html harus memiliki ekstensi  seperti .html, .xhtml atau bisa menggunakan .htm saja .xhtml digunakan untuk file xhtml.

jika kalian tidak mengunakan ekstansi ini di belakang nama file kalian, file kalian tidak akan terbaca oleh browser.

dengan contoh perbandingan 

jika kalian mengunakan file .txt

contoh helloword.txt



browser kalian tidak akan meruning kode kalian melain kan menampilkan apa adanya di dalam file .txt kalian

B. Hindari beberapa hal ini

 Penggunaan Spasi

untuk nama file html kalian pasti akan menjadi link url jadi hindari penggunaan spasi di nama file kalian agar url kalian menjadi rapi dan lebih bagus.

penggunaan spasi di dalam nama file kalian akan otomatis berubah menjadi %20 itu akan membuat nama file kalian kurang bagus untuk di lihat.





jika file kalian membutuh kan spasi untuk penamaan dalam file kalian bisa menganti spasi kalian menjadi "-" atau kalian bisa menggunakan "_" 


C.Nama Khusus Homepage


penamaan homepage ini sangat  khusus, kami saran kan beri nama index.html untuk menamai file homepage kalian karena jika kalian buka akan langsung membuka halaman utama. nama index ini digunakan di semua website.


Struktur Kerangka Dasar Html

sekarang saya butuh daya ingat kalian sedikit aja, kenapa ? saya berharap kalian menginggat struktur kerangka dasar ini agar kalian tidak kebalik penempatan stuktur kerangkanya.

seperti ini gambaran struktur kerangka html 


Struktur dasar html


Seperti manusia kerangak manusia dibagi mulai dari head, body dan footer untuk footer ini menyesuaikan ya karena beberapa web tidak mengunakan footer.


penulisan html di mulai dari deklarasi <!DOCTYPE html> lalu didalam nya ada <html> didalam <html> terdapat <head> dan <body>.


oke kita bedah satu satu mulai dari deklarasi sampai akhir

1. Deklarasi

jika kalian lihat ada tag <!DOCTYPE html > ini adalah tag deklarasi html versi 5 fungsi dari deklarsi adalah digunakan untuk kalian menyatakan type dokumen dan versinya didalam html banyak sekali type deklarasi yang berbeda.

untuk type deklarasi html versi 4 beda juga cara mendeklarsikanya

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Lebih panjang ya versi4 dari pada html versi 5

terus apa hukum nya memasang deklarasi hukumnya sunnah ya bisa kalian pasang atau tidak tapi untuk tag lain seperti <html>, <head> , <body> adalah untuk lainya menyesuaikan kebutuhan sepeti <p>, <br> dan kawan kawannya nanti kita bahas barang barang lagi tag tag lainya .

oke kembali ke deklarasi

meskipun pemasangan deklarasi sunnah dan kodingan html kalian masih bisa berjalan di browser tapi ini melanggar kaidah standart yang telah diatur oleh w3c.

kalian bisa mengecek deklarasi kalin penulisan nya sudah benar atau tidak di  Validator w3c

Tampilan Bowser W3C validator

kalian bisa lihat tampilannya di gambar diatas

Gambar Jika terjadi kesalahan

Seperti ini jika kalian membuat file tanpa deklarasi dan di cek di validator w3c.

oke kita lanjut kebawah 

Sebelum masuk ketag tag ada sedikit catetan beberapa tag di dalam html itu harus berpasangan dan tidak boleh jomblo dan beberapa tag bisa jomblo kayak saya hehehe.


conroh tag yang harus berpasangan yaitu <html> sebagai pembuka dan </html> sebagai penutup ini wajib ya kalau tag yang tidak perlu pasangan contohnya iya lah kayak <br>


2. Tag html

tag <html> adalah tag pembuka yang wajib berada di file codingan kalian ya 

      <html lang="en">   
disini yang wajib hanya <html>nya untuk tag lang = "en" digunakan untuk memberi tau kalau dokumen ini mengunakan bahasa english kalian bisa menganti kode en menjadi id untuk Indonesia atau kode negara lainya lang ini bersifat sunnah.
peletakan <html>  dan </html> berada di antara <head> dan <body>

seperti ini gambarannya


Tanpa menggunakan lang



Html menggunakan lang





kalian bisa pilih terserah mengunakan versi dengan lang atau tanpa lang


3. Bagian Tag Head

tag head ini biasa di gunakan untuk menempatkan tag tag yang di baca mesin dan biasanya tidak muncul dalam tampilan

seperti tag

  • Tag meta untuk SEO; 
  • Tag <title> untuk judul; 
  • Tempat menulis kode CSS dan Javascript; 
  • dan lain-lain

untuk berikut cara penempatan dan penulisan tag <title> dan <head>

cara Penulisan head dan title

dan dimana sih jika kalian ingin liat judul kalian di browser.

Judul Di browser


kalian bisa liat judulnya berada di atas halaman bowser kalian

4. Bagian tag Body

bagian tag body ini paling banyak di tampikan di web browser kalian  sama dengan tag wajib berpasangan lainya tag ini ditulis berawal dari <body> dan di tutup dengan </body>


di body kalian bisa mengisi beberapa tag seperti tag <p> yang di gunakan untuk mengisi konten paragraft jika kalian liat  gambar dari awal kita baru mengunakan <p> untuk tutorial .

seperti ini cara penulisan <body> dan <p>

cara penulisan body dan p

dan seperti ini hasil yang di tampilkan

hasil tampilan html

Penutup


akhirnya selesai juga tutorial part pertama kita selanjutnya kita bahas apa di part berikutnya tunggu ya part kedua dst dalam proses semoga tutorial saya membatu kalian dan mudah di mengerti 

List Part Html