DASAR HTML PART 2 :
HELLO WORLD !!
HELLO WORLD !!
Bismillahirahmanirrahim
Assalamualaikum warahmatullahi wabarakatuh.
Selamat pagi siang sore atau malam !! Selamat datang di website Catatan Harian Mahasiswa Halo Teman - teman semua apa kabar ?? selamat datang kembali di seri HTML di website Catatan Harian Mahasiswa.
Di part ke 2 ini kita akan mulai menuliskan code HTML untuk membuat web yang sangat sederhana sekali, nanti web yang akan kita buat yaitu web yang akan menampilkan tulisan “Hello World” ke layar karena rasanya kurang afdol kalau kita mulai belajar bahasa baru tanpa membuat aplikasi yang menampilkan “Hello World” hehe :D.
Disini aplikasi yang saya gunakan adalah notepad jadi kita pake notepad dulu sebelum pake code editor yang bener. Saya asumsikan temen-temen juga sudah install web browser ,disini saya menggunakan firefox Developer Edition, kalian bisa pake browser apa aja yang kalian sukai misal chrome , opera , dll.
Oke kita mulai saja siapkan laptop kalian !! Sebelum kita mulai menuliskan code HTML saya pengen temen-temen membuat folder baru ya supaya nanti filenya tidak tercecer kemana-mana karena nanti tiap-tiap postingan saya akan menyimpan latihannya rapi tersimpan di dalam folder.
Jadi yang pertama kita membuat folder dulu , saya buat di Dekstop biar gampang dengan cara klik kanan pada Desktop -> New -> Folder , beri nama folder “HTML” karena ini seri HTML.
Lalu didalamnya kita buat folder baru lagi kita kasih nama “Latihan 1”. Jadi latihannya akan bertambah terus seiring kita belajar sesuatu yang baru, file-file yang kita buat akan disimpan di folder ini.
Oke sekarang yang akan kita gunakan adalah notepad , sebenarnya bikin web itu pake notepad juga bisa sih cuman notepad tidak diperuntukkan untuk membuat halaman HTML. Sebelum kita menuliskan halaman HTML kita save dulu ya biarpun masih kosong kita save dulu aja.
Setelah itu kita save ,filenya kita beri nama “halaman1” di folder “HTML” yang sebelumnya kita buat, kasih ekstensi filenya itu harus .html jadi jangan lupa selalu menuliskan .html ,lalu type save as nya kita ganti aja jadi All files supaya nanti tidak otomatis berubah jadi teks. nah jadi nama filenya “ halaman1.html ” lalu biasakan juga memberi nama tidak menggunakan spasi contoh seperti ini “halaman 1.html ” jika sudah ,save !.
Sebelum kita menuliskan code HTML nya coba kita tulis dulu Hello World biasa seperti dibawah lalu kita save.
Setelah itu kita buka folder “HTML” yang telah dibuat sebelumnya kita cek ada atau tidak filenya dan ternyata adaa :D
Maka icon nya akan berubah menjadi firefox karena saya buat firefox sebagai default browser untuk sistem operasi saya, Selanjutnya kita coba lihat di browser kalian bisa double click filenya.
Nah ini tampilannya, jadi ini adalah halaman web pertama kalian meskipun isinya belum HTML.
Jadi masih plaint text / teks biasa, browser-nya belum menganggap sebagai halaman HTML, Nah supaya browser-nya membaca dia sebagai halaman HTML kita harus membuat struktur dasar HTML terlebih dahulu ,cara bagaimana ?? tinggal mengetikkan script seperti dibawah.
Oke dibaris pertama kalian harus menuliskan apa yang disebut dengan "<!doctype html>" ini berfungsi untuk ngasih tau browser untuk membuat HTML menggunakan versi berapa , kalau kalian menuliskan seperti script yang diatas artinya kalian akan menuliskan HTML versi 5 yaitu versi terbaru.
Kedepannya kalau kalian ketemu ada kurung siku buka “ < “ , tulisan ( HTML ) dan kurung siku tutup “ > “ ini akan kita namakan sebagai satu tag.
Seperti ini.
Kebanyakan tag -tag yang ada di HTML ini berpasangan ada tag pembuka dan tag penutup apa bedanya ?? tag penutup ada slash-nya “/“.
Didalamnya terdapat dua tag pertama
Yang pertama ada tag head.
script :
Yang kedua ada tag body.
script :
Jadi apapun yang akan kalian tuliskan nantinya harus berada di dalam tag head atau tag body contoh :
Jika sudah save lalu kembali ke browser dan refresh maka akan muncul seperti gambar di bawah.
Tampilannya sama persis kaya tadi ya, tetapi bedanya sekarang browsernya tau yang akan ditampilkan adalah halaman HTML meskipun tetap masih ada yang kurang, browser-nya tidak tau Hello World ini akan ditampilkan sebagai apa, dia lagi-lagi akan menampilkannya sebagai plain text / teks biasa.
Contoh saya akan menampilkan lagi satu baris saya kasih enter dua kali terus saya tulis “Selamat datang Clever Friends ! ” lalu save ! kembali ke browser maka coba lihat.
Tulisannya berada di kanannya , karena lagi-lagi browser-nya tidak tau akan ditulis sebagai apa ? jadi dia nganggap teks biasa saja, nah supaya kata “Hello World” jadi judul misalnya, kita harus bungkus kata “Hello world” ini dengan tag <h1></h1> dan kata “Selamat datang Clever Friends !” menjadi paragraf kita bungkus menggunakan tag <p></p>.
Jika sudah save !! buka kembali browser-nya maka akan terlihat seperti ini, jadi sekarang browser-nya tau bahwa di dalam tag body ada judul dan paragraf.
Lalu terakhir ada title , apa gunanya title ?? title ini digunakan untuk memberikan judul dari halaman misal saya akan memberi judul halaman “web pemograman” , save !!
Lalu kembali ke browser dan refresh maka tab halaman akan berubah seperti gambar dibawah ini.
Dan...Selamat !! ini adalah website sederhana pertama kalian :D ,di materi selanjutnya kita akan bahas tag apa saja sih yang ada di body ?? dan tag apa saja yang ada di head ?? lalu struktur dari tag itu sendiri , jadi nanti ada yang namanya property atau attribut,dll. dimateri selanjutnya itu kita sudah tidak lagi menggunakan notepad kita akan pakai code editor, yang akan saya pakai adalah visual studio code, jadi nanti akan ada satu postingan dulu dimana kita mungkin sama-sama download dulu , lalu install baru setelah itu kita bahas lagi HTML lebih lanjut.
Sampai disini dulu mungkin materi untuk seri Dasar HTML Part 2 ini ,sampai bertemu lagi di materi berikutnya saya Alian hakim selaku penulis mengucapkan terima kasih.
Dan Jangan Lupa Keep Learning And Stay Awesome !!
0 Komentar