Struktur Dasar HTML
Halo teman-teman, pada postingan kali ini saya akan menuliskan contoh koding yang paling dasar dari sebuah bahasa pemrograman HTML.
Karena ini dasar, jadi akan mudah dipahami.
Tapi...
Jangan anggap mudah ya...
Karena dalam belajar apapun kalau kita mengabaikan dasarnya, akan sulit untuk mempelajari step-step selanjutnya.
Jadi...
Biasakan untuk mempelajari hal-hal yang paling mendasar terlebih dahulu, kuasai hingga benar-benar paham.
Baca Juga : Belajar HTML - Pengenalan
Kalau ternyata masih belum paham, teman-teman bisa menuliskan komentar di akhir postingan ini, pasti saya akan membantu. Atau jika teman-teman lain yang lebih tahu harap memberi arahan...
Oke, langsung saja ya... Lihat dan praktekkan ini di komputer teman-teman...
- <!DOCTYPE html>
- <html>
- <head>
- <title>Ini Judul Web Pertamaku</title>
- </head>
- <body>
- <h1>Ini Judul Pertamaku</h1>
- <p>Ini adalah paragraf pertamaku</p>
- </body>
- </html>
Penjelasan Koding
- Baris pertama, <!DOCTYPE html> adalah sebuah kode untuk menjelaskan bahwa ini adalah sebuah kode HTML5
- Baris kedua, <html> adalah kode pembuka HTML, kode ini ditutup dengan kode </html> pada baris ke-sepuluh. Di antara kode ini terdapat sintax-sintax lain yang dikemas.
- Baris ketiga, <head> merupakan kode yang berisi informasi-informasi halaman website yang kita buat, dalam materi kali ini hanya berisi Judul Halaman Website. Kode ini ditutup dengan sintax </head>.
- Pada baris ke enam sampai baris ke sembilan, terdapat kode pembungkus yang dituliskan dengan sintax <body> dan ditutup dengan sintax </body>. Teman-teman bisa menuliskan apa saja di antara sintax tersebut, karena di dalam kode inilah semua konten website kalian akan ditampilkan.
- Baris ke tujuh, <h1> yang ditutup dengan </h1> yaitu koding untuk menampilkan judul. Penjelasan mengenai judul akan dibahas pada postingan yang berjudul "Belajar HTML - Heading"
- Baris selanjutnya, baris ke delapan adalah koding yang berisi teks berbentuk paragraf. Dituliskan dengan sintax <p> dan ditutup dengan </p>.
Mulai Praktek Kode Dasar HTML
Setelah teman-teman mengetahui kode-kode dasar HTML, waktunya sekarang kita mempraktekkannya di komputer kita.
Apa saja yang perlu disiapkan?
- Text editor
- Browser
Untuk text editor teman-teman bisa memilih sesuka hati, dibikin senyaman mungkin agar tidak bosan. Kali ini saya akan mencontohkan dengan menggunakan Notepad dan browsernya menggunakan Google Chrome.
Langkah-langkahnya sebagai berikut :
1. Bukalah notepad
Teman-teman bisa membuka notepad di komputer, dengan cara klik tombol Windows + R. Kemudian ketikkan notepad, lalu enter.
2. Ketikkan kode HTML di atas postingan ini.
Saya sarankan teman-teman tidak copy paste tapi diketik manual, kenapa? karena agar teman-teman terbiasa dengan kode-kode tersebut sehingga bisa lebih mudah dalam memahami setiap kode yang dituliskan.
3. Simpan kode yang telah kalian buat dengan ekstensi .html
4. Bukalah file .html tersebut menggunakan Browser
Setelah teman-teman berhasil menyimpan koding yang sudah diketikkan tadi, sekarang saatnya kita membuka file tersebut menggunakan Browser kita dengan cara :
5. Inilah hasil koding HTML dasar pada Browser kita
1. Bukalah notepad
Teman-teman bisa membuka notepad di komputer, dengan cara klik tombol Windows + R. Kemudian ketikkan notepad, lalu enter.
2. Ketikkan kode HTML di atas postingan ini.
Saya sarankan teman-teman tidak copy paste tapi diketik manual, kenapa? karena agar teman-teman terbiasa dengan kode-kode tersebut sehingga bisa lebih mudah dalam memahami setiap kode yang dituliskan.
3. Simpan kode yang telah kalian buat dengan ekstensi .html
- Klik "File"
- Klik "Save As"
- Pilih tempat dimana file html akan disimpan.
- Ganti nama file pada kolom Name File dengan format .html
- Pilih All Files pada kolom Save As Type
- Kemudian klik Save
4. Bukalah file .html tersebut menggunakan Browser
Setelah teman-teman berhasil menyimpan koding yang sudah diketikkan tadi, sekarang saatnya kita membuka file tersebut menggunakan Browser kita dengan cara :
Klik Kanan pada file > Open With > Google Chrome
5. Inilah hasil koding HTML dasar pada Browser kita
Apabila tampilan pada browser sudah menunjukkan gambar seperti di bawah ini, maka kalian berhasil mempraktekkan Kode Dasar HTML.
***** SELAMAT BELAJAR *****
Ditunggu tutorial selanjutnya ya mas
BalasHapusSegera
Hapustq gan
BalasHapusSama - sama gan
Hapustutorial nya bagus gan rapi :D, yang selanjutnya ditunggu ya gan :D
BalasHapusOke gan,
Hapus