Menggunakan Code Editor Notepad
Kali ini saya akan membahas lanjutan dari belajar html dasar pada artikel sebelumnya. Pada artikel sebelumnya kalian sudah mengenal apa itu HTML serta sejarah dan beberapa pemaparan singkat mengenai HTML. Jadi bagi kalian yang belum memahami atau belum membaca artikel sebelumnya lebih baik dibaca dulu agar kalian lebih mengerti dan tidak salah kaprah dalam memahami dan mengimplementasikan HTML.Silahkan baca :
Pengenalan Dasar Programming Web
Kali ini kita akan mencoba untuk membuat halaman web sederhana dengan menggunakan notepad sebagai code editornya. Saya memilih notepad karena kita hanya akan belajar membuat halaman web yang sangat sederhana nanti pada artikel berikutnya kita akan menggunakan code editor yang sebenarnya, jadi sekarang kita akan belajar menampilkan "Hello World" pada halaman web yang akan kita buat.
Nah jadi sekarang kalian siapkan dulu Notepad nya dan web browser untuk melihat hasil dari halaman web yang telah kita buat.
Masuk ke tutorial pembelajarannya.
- Buat dulu folder untuk menyimpan halaman web yang nanti akan kita buat, kalian bisa memberikan nama foldenya adalah HTML lalu berikan folder Latihan di dalam folder HTML tersebut.
- Jika sudah membuat folder nya sekarang buka notepad kalian lalu save file tersebut di folder yang sudah dibuat tadi dengan nama halaman1 dan ekstensinya .html dan save type nya ganti dengan all files saja agar tidak berubah menjadi txt saat kita save.
- Sekarang kalian sudah punya folder dan file yang kita butuhkan untuk membuat halaman web. Sekarang kita coba tulis "Hello World!" pada notepad tadi lalu simpan.
- Setelah itu buka file tadi kalian bisa klik kanan > open with > pilih web browser yang ingin kalian pakai untuk melihat hasil dari notepad kita tadi, lalu hasilnya akan seperti ini.
<!doctype html>Sekarang saya akan menjelaskan satu per satu dari tag-tag yang saya tuliskan di atas oh iya sebelum itu untuk membuat sebuah tag kalian harus memberikan tanda kurung siku di awal dan di akhir tag, jangan lupa menutup tag dengan memberikan tanda / pada kurung siku tag penutup.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- <!doctype html> : Digunakan untuk memberi tahu kepada si browser, bahwa kita menggunakan html versi 5 atau versi yang terbaru.
- <html></html> : Tag ini memberi tahu bahwa kita menuliskan halaman web dalam format html.
- <head></head> : Tag ini digunakan untuk memberikan kepala dari halaman web yang salah satu isinya adalah title. Nah title ini adalah nama dari halaman web yang kalian buat contohnya pada halaman web yang kalian buat tadi yaitu halaman satu, coba lihat panah warna merah pada gambar dibawah ini, nah itu adalah title pada html yang kita buat.
- <body></body> : Tag ini digunakan untuk menampilkan isi dari halaman web kita, seperti tadi kita ingin menampilkan hello world maka kita tuliskan hello world tadi di dalam tag body.
Nah langsung saja kita praktekan pada notepad kita tadi.
Tuliskan struktur html yang sudah saya berikan diatas pada notepad kalian hasilnya akan seperti ini
Akan tetapi masih ada yang kurang pada codingan kita di atas, yaitu web browser masih bingung Hello World ini termasuk apa, apakah paragraf, judul atau apa ? nah jika saya tambahkan tulisan lagi dibawahnya seperti pada gambar berikut ini.
nah kalian lihat disitu saya memberikan 1 spasi sebelum kalimat belajar html dasar, maka asumsinya adalah kalimat tersebut berada di bawah kalimat Hello World!. Akan tetapi jika kalian jalankan maka tampilan tulisan belajar html dasar tadi akan berada di samping tulisan Hello World!
<p></p>Maka hasilnya akan seperti ini.
<!doctype html>Selain itu kita coba ganti nama title yang awalnya adalah halaman 1 menjadi Pemrograman Web.
<html>
<head>
<title></title>
</head>
<body>
<p>Hello World</p>
<p>Belajar HTML Dasar</p>
</body>
</html>
<!doctype html>Setelah menuliskan struktur seperti di atas, maka hasilnya akan menjadi seperti ini
<html>
<head>
<title>Pemrograman Web</title>
</head>
<body>
<p>Hello World</p>
<p>Belajar HTML Dasar</p>
</body>
</html>
1 komentar so far
Informasi yang menarik buat bahan pembelajaran gan......
EmoticonEmoticon