HTML Dasar Part 2 - Membuat Halaman Website Pertama Untuk Pemula With "Hello World"

HTML Dasar Part 2 - Membuat Halaman Website Pertama Untuk Pemula With "Hello World" - Pengalaman pertama saya membuat halaman website dengan menggunakan Aplikasi Notepad yang ada di windows, buat saya sesuatu sekali. Amazing in my imagine, notepad yang selama ini saya pakai hanya untuk mencatat sesuatu secara sementara, ternyata punya kemampuan yang jauh lebih besar dan powerful lebih dari yang saya bayangkan. maklum saya menggunakan komputer memang sudah cukup lama, tapi hanya sebatas untuk mengerjakan pekerjaan dengan menggunakan aplikasi Microsoft Office saja, dan sisanya paling saya pakai hanya untuk berselancar di dunia maya atau hanya untuk game saja.

Notepad pada dasarnya bisa digunakan untuk membuat halaman website, namun karena memang tidak diperuntukkan untuk membuat website, seperti Code Editor yang memang dikhususkan untuk membuat program atau website, karena itu untuk penggunaan notepad dalam membuat halaman website kita harus menggunakannya dengan mengetik semua kode program secara manual.

Hello World

Selain saya membutuhkan notepad, untuk membuat suatu halaman website pertama, saya membutuhkan web browser. Web browser apapun bisa digunakan, untuk pengalaman pertama saya ini, saya menggunakan google chrome untuk menampilkan halaman website pertama saya, dengan menampilkan keyword Hello World pada browser.

Berikut merupakan hal-hal yang saya lakukan saat aku memulai menciptakan page website pertama saya dengan memakai notepad :

1. Membuat Folder khusus

Saya membuat folder baru khusus dengan nama HTML yang saya simpan di dekstop, tujuan sementara-nya agar saya lebih mudah mencari filenya selama saya sedang belajar programming dan yang tentunya agar arsipnya juga lebih rapih. Berikutnya di dalam folder tersebut saya membuat folder lagi dengan nama ‘html1’.

2. Membuat file baru pada notepad

Tahap ini aku membuka aplikasi notepad saya, dan menciptakan arsip baru sebelum aku memulai membuat halaman website. Untuk tahapan ini sebagai berikut :

1. Klik menu arsip pada atas notepad.

2. Pilih save as.

Notepad

3. Lalu simpan file baru tersebut dalam folder ‘html1’ tadi, dengan nama ‘helloworld’. Jangan lupa selalu menuliskan ekstensi filenya html. Type file nya ganti menjadi ‘All Files’

Windows Explorer

Noted : buat membuat nama file, usahakan jangan menggunakan spasi. Memang tidak akan error, tetapi nanti akan menjadi masalah dibrowser, karena browser akan menambahkan karakter baru pada address bar-nya.

Tiga. Tuliskan istilah ?Hello World?

Tuliskan kata pertama di notepad Hello World , lalu save. Kemudian kita cek difolder yang kita buat. Di file yang kita buat tadi sudah muncul icon google chrome, karena secara default setting sistem operasi saya untuk browser menggunakan google chrome. Lakukan double click untuk membuka file tersebut.

Windows Explorer & Notepad

4. Halaman website pertama sudah jadi

Ini adalah halaman website pertama saya, even type-nya masih plain text atau text biasa. Finally, saya berhasil membuat halaman pertama website saya. Browser blm menganggap halaman website ini sebagai halaman HTML, karena tulisan yang diketikkan masih tulisan biasa. Karena itu supaya browser menganggap sebagai halaman HTML, hal yang harus kita lakukan adalah membuat struktur HTML .

Web Browser

5. Membuat struktur HTML

Tahap ini saya membuat struktur HTML, dengan menuliskan kode tag HTML-nya secara manual, seperti dibawah ini :

1 === penulisan DOCTYPE dibaris pertama, fungsinya untuk memberi tahu browser, versi HTML berapa yang akan digunakan. Kalau penulisan seperti yang di notepad, berarti kita akan menggunakan versi HTML 5.

2 === penulisan , ini adalah tag HTML. Setiap satu tag selalu dimulai dengan kurung siku buka, kemudian diikuti tulisan, dan diakhiri dengan kurung siku tutup. Setiap tag di HTML juga biasanya berpasangan, dimana ada tag pembuka dan tag penutup. Untuk no. 2 adalah tag HTML pembuka. Bedanya dengan tag penutup, kalau tag penutup setelah kurung siku buka, ada tanda / ( slash ).

3 === penulisan . Ini adalah tag penutup HTML dari tag pembuka HTML no.2

4 === nama judul dari suatu halaman website

5 === tag head

6 === tag body

Struktur HTML

Noted :

• Dalam tag HTML pembuka dan penutup, selalu ada berpasangan tag head dan tag body. Jadi apapun bisa dituliskan di dalam tag head atau tag body. Tidak bisa diantar tag head dan tag body.
• Title di dalam tag head, untuk memberikan judul satu halaman website, yang akan muncul di tab, pada saat membuka halaman website. Title ini tidak akan berpengaruh dengan isi website.
• Isi website yang ditampilkan di browser adalah hasil tulisan yang di ketik di dalam tag body.
• Dalam tahap ini browsernya sudah tahu isi yang tampil pada browser adalah halaman webiste HTML, namun masih menganggap text yang ditampilkan adalah plain text, karena browser blm tahu text yang dibuat untuk apa, apakah akan dibuat sebagai heading, link, paragraph atau yang lain. Karena itu pada saat penulisan didalam suatu text, kita harus membungkusnya dengan tag pembungkus.

Web Browser & Notepad

6. Tag pembungkus

Apabila text ‘Hello World’ akan ditampilkan sebagai paragraph, maka text tersebut harus dibungkus dengan tag

dan diakhir dengan tag </>, agar browser tahu, sekarang text tersebut akan ditampilkan sebagai apa.

My First Website

7. Halaman website pertama SUKSES

Finally, browser sudah berhasil tahu, halaman HTML website yang kita buat, ada 2 paragraph.

Sedikit demi sedikit saya belajar HTML, ternyata belajar HTML tidak sesulit yang saya bayangkan, akhirnya saya bisa membuat halaman website untuk pertama kalinya. Untuk artikel selanjutnya saya akan menulis mengenai tag apa saja yang ada dalam HTML. Semoga apa yang saya tulis bisa bermanfaat buat teman-teman yang baru belajar HTML. Tetap semangat untuk selalu belajar hal baru, karena dengan begitu adalah tanda kalau kita mau berkembang sebagai manusia yang berkualitas. upppsss dalam banget... see you on my next articles

Referensi:

https://www.w3schools.com

https://www.w3schools.com/html/default.asp

• kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
• the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.

Bagikan Artikel ini