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 .
- [Draft] HTML 1.0 (Juni 1993) adalah versi HTML pertama, namun tidak resmi dirilis;
- HTML 2.0 (24 November 1995) adalah versi HTML kedua yang resmi pertamakali beredar di pasaran dan dirilis oleh IETF;
- [Draft] HTML 3.0 (28 Maret 1995) versi ini gagal beredar, karena banyak perubahan yang memicu perdebatan;
- HTML 3.2 (14 Januari 1997) versi resmi yang dirilis W3C pertamakali.
- HTML 4.0 (24 April 1998) versi pengembangan dari yang seblumnya;
- 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;
- XHTML 2.0 (Augustus 2002—Juli 2006) versi kedua dari XHTML;
- 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
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 |
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 |
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
Yudha Wahyu Pratama
Humanity Balanced Religion ⤵️ Success Before 30 Mahasiswa, Investor , Pecinta Hewan,IT & Alam, Aktivis
