Jika belum mengikuti pembahasan sebelumnya silahkan baca disini : http://bit.ly/HTMLdasar_pendahuluan
HomeSweetHome - Halo sobat Hits. Masih di HTML Dasar. Kita akan menuliskan kode HTML untuk membuat Web yang sederhana sekali, web yang akan kita buat yaitu yang akan menampilkan "Hello World". Kenapa sih masih Hello World? karna rasanya kurang afdol kalau kita belajar bahasa baru tapi tidak membuat Hello World.
Aplikasi yang akan kita gunakan untuk saat ini yaitu Notepad sebelum kita menggunakan Code Editor yang lebih Advanced. Dan Web Browser yang HitsPakuan gunakan ini adalah Mozilla Firefox. Ya! langsung saja.
Sebelum mulai, temen - temen silahkan buat folder, dan setiap pembahasan pun akan difolder-kan agar tidak berantakan. Silahkan buat folder terlebih dahulu terserah mau dimana atau di desktop agar lebih mudah, dan beri nama folder tersebut dengan nama "html". Lalu didalamnya kita buat folder baru lagi dan beri nama "latihan1".
Sekarang, silahkan buka Notepad nya. Sebelum kita menuliskan kode html nya ada baiknya biasakan save terlebih dahulu. Silahkan save file notepad tersebut ke folder "latihan1" tadi.
Nah, pada "Save as Type" nya pilih "All files" agar tidak otomatis berubah jadi tipe text, lalu beri nama "halaman1.html"(dan biasa kan tidak menggunakan spasi pada penamaan file),jangan lupa ekstensi (.html) nya, lalu save.
Sekarang, coba kita ketikan Hello World dulu saja, lalu save. Nah, sekarang file html nya coba sekarang kalian buka, di double-click atau diklik kanan lalu open with browser kalian, terserah. Seperti ini.
Nah, untuk kalian yang file nya secara default terbuka dengan Notepad ketika di double-click, silahkan kalian klik kanan pada file tersebut lalu klik properties dan klik tombol change. Lalu pilih browser kalian. Seperti dibawah ini :
Jika di "Recommended Programs" tidak ada, kalian bisa klik tombol yang diberi tanda panah Nomer 1. atau jika tidak ada juga, kalian bisa klik browse, lalu pergi ke folder dimana browser kalian berada, biasanya berada di Program Files, kalau sudah berada di folder Web Browser kalian, silahkan pilih "firefox.exe" untuk yang menggunakan Mozilla Firefox dan pilih "chrome.exe" untuk yang menggunakan Google Chrome. Semoga bisa yaaa.
Oke kita lanjut -->
Jika sudah terbuka file html yang tadi kita buat, pasti tampilannya akan seperti ini :
Tulisan hello world nya berada di kiri atas. Dan ini adalah halaman Web pertama kalian(yeeyy), meskipun halamnya belum HTML atau masih plain text(teks biasa).
Supaya si browser membaca bahwa ini adalah HTML, kita harus memberikan Struktur Dasar untuk HTML, memberitahu browser bahwa ini adalah halaman HTML. Tuliskan syntax dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> --> berfungsi memberitahu si browser bahwa HTML yang kita gunakan adalah HTML Versi 5
Jika kalian melihat ada yang seperti <html> atau <head>, yang mempunyai siku buka dan siku tutup lalu di dalamnya ada tulisan, maka itu disebut tag. Dan, tag tag tersebut biasanya berpasangan ada tag pembuka dan ada tag penutup, apa bedanya? tag pembuka tidak ada "/" atau slash, sedangkan tag penutup ada "/" atau slash, seperti ini:
<head> --> Pembuka.
....
</head> --> Penutup
<html> --> tag pembungkus dasar yang di dalamnya ada dua tag utama yaitu > tag <head> dan tag <body>. Jadi apapun yang nanti akan kalian tuliskan, harus berada di dalam tag <head> dan tag <body>.
|
<head> --> biasanya diisikan dengan tag <title>, <metadata> dan "linkrel" yang digunakan untuk memanggil file CSS
|
<title> --> Untuk menampilkan Judul Web.
|
<body> --> Segala sesuatu yang akan tampil pada Halaman Web.
Sekarang coba kalian tuliskan "hello world" di dalam tag <body>, seperti dibawah ini, langsung kalian save dan kalian refresh halawan web yang tadi.
<!DOCTYPE html>Tampilannya tetap sama kan? Ya betul, tetapi sekarang browsernya tau bahwa yang kita jalankan ini adalah HTML.
<html>
<head>
<title> </title>
</head>
<body>
hello world
</body>
</html>
Tapi si browser tetap tidak tau mau ditampilkan sebagai apa si "hello world" ini, sebagai paragraf kah? sebagai heading(nanti kita bahas heading) kah? atau apapun.
Kemudian, coba tambahkan kalimat, tetapi di baris baru seperti dibawah ini, ingat ya setiap habis mengedit file HTML dan kalian ingin mengecek perubahannya langsung saja save file tersebut dan menuju ke broswer nya dan langsung refresh.
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
hello world
selamat datang di HitsPakuan
</body>
</htm>
Tetapi, kalimat tersebut berada di sampingnya, padahal kita letakkan berada di bawah "hello world". Karena, lagi lagi si browser tetap belum tau mau diapakan dua kalimat tersebut.
Sekarang kita jadikan 2 kalimat tersebut sebagai paragraf. Bagaimana? dengan menggunakan tag <p>, seperti dibawah(jangan lupa save dan refresh) :
<!DOCTYPE html>Maka, kalimat - kalimat tersebut akan ditampilkan sebagai paragraf.
<html>
<head>
<title> </title>
</head>
<body>
<p>hello world</p>
</p>selamat datang di HitsPakuan</p>
</body>
</html>
Terakhir, kita akan menambahkan Judul dari Web yang kita buat. Dan kita tuliskan judul itu di dalam tag <title>. Seperti di bawah:
<!DOCTYPE html>Judul Web nya sudah berubah yang tadinya hanya tulisan alamat dari file html tersebut :
<html>
<head>
<title> Web Program HitsPakuan </title>
</head>
<body>
<p>hello world</p>
</p>selamat datang di HitsPakuan</p>
</body>
</html>
Yaaa, segitu untuk sesi Hello World. Di sesi - sesi berikutnya kita akan menggunakan tag - tag HTML yang lebih banyak lagi tapi tetap bertahap, dan struktur tag - tag itu sendiri, tag nya bisa di beri Properti, Value dan banyak lagi. Tetapi di pembahasan selanjutnya kita tidak akan menggunakan Notepad melainkan kita akan menggunakan code editor Sublime Text 3, jadi silahkan kalian download dahulu disini http://bit.ly/sublimetext_3 dan install.
Jangan lupa di subscribe biar ngga ketinggalan update dan share ke temen- temennya yang juga lagi berjuang di Web Programming. Sampai ketemu di Postingan berikutnya. Sekian. Terimakasih.
_Salam Hits_
0 comments:
Post a Comment