Langsung ke konten utama

HTML Lanjutan

 

Peralatan untuk Belajar HTML

Nah, sekarang.. Tiba saatnya kita praktik!

Tapi sebelum itu, kamu harus siapkan beberapa alat yang akan digunakan untuk praktik.

Adapun peralatan yang harus kamu persiapkan adalah:

1. Teks Editor untuk Menulis HTML

Teks editor akan kita gunakan untuk menulis kode-kode HTML. Kamu bebas menggunakan teks editor apapun.

Notepad boleh, Notepad++ juga boleh..

Notepad++ untuk menulis HTML

Apapun teks editornya, yang penting bisa digunakan untuk membuat dan menulis dokumen HTML.

Namun, pada tutorial ini.. kita akan menggunakan teks editor Visual Studio Code.

2. Web Browser untuk Membuka HTML

Web browser akan kita gunakan untuk membuka HTML. Kamu juga bebeas menggunakan web browser apapun.

Web browser untuk membuka HTML

Saran saya sih.. gunakan web browser yang terbaru, karena kita juga akan menggunakan HTML versi yang terbaru.

Firefox atau Google Chrome, saya kira sudah cukup.

Membuat Dokumen HTML Pertamamu

Kini tiba saatnya, kamu harus mencoba sendiri membuat dokumen HTML. Caranya sangat mudah.

Mari kita mulai dengan membuka teks editor, lalu tulislah kode berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Setelah itu, simpan dengan nama hello-world.html.

Dokumen HTML pertamaku

Tips: buat kamu yang menggunakan Notepad di Windows, simpanlah nama filenya dengan menggunakan tanda petik "hello-world.html" agar ekstensinya .html, bukan .txt.

Atau kamu bisa aktifkan fitur show extension pada Windows Explorer, agar bisa tahu ekstensi filenya.

Caranya.. masuk ke menu View, lalu centang File name extensions.

Windows Explorer file extension

Oke.. lanjut!

Sekarang cobalah buka file hello-world.html dengan web browser.. maka hasilnya:

membuat website dengan HTML

Selamat! 🎉

Kita sudah berhasil membuat halaman web pertama dengan HTML.

Kini giliran saya menjelaskan maksud dari kode di atas, tapi sebelum itu.. saya akan jelaskan dulu tentang nama file untuk HTML.

Nama File untuk HTML

Ada beberapa hal yang perlu diperhatikan dalam membuat nama file HTML:

1. Extensi file HTML

Setiap file HTML harus berekstensi .html, .xhtml (untuk XHTML), dan .htm saja. Jika tidak menggunakan ekstensi ini, maka ia tidak akan bisa dibaca oleh web browser.

Contohnya seperti ini:

Nama filenya adalah hello-world.txt.

File txt pada browser

Sedah jelas, ini bukan file HTML, melainkan sebuah file teks biasa. Maka.. browser akan menampilkan isi file tersebut apa adanya.

2. Nama Khusus untuk Homepage

Jika kamu ingin membuat halaman untuk homepage, maka sebaiknya gunakan nama index.html. Karena ia akan otomatis dibuka saat website dikunjungi.

Contohnya, saat kamu membuka www.petanikode.com.. maka file HTML yang akan dibuka adalah index.html yang berada di server petanikode.

3. Hindari Beberapa Hal ini..

Penggunaan Spasi

Nama file HTML biasanya akan tercantum pada URL, maka sebaiknya hindari menggunakan spasi pada nama file HTML, agar URL yang dibentuk lebih bagus.

Spasi pada URL, biasanya akan otomatis diubah menjadi %20.

Spasi pada URL

Sebagai ganti spasi, kamu bisa gunakan tanda min (-) atau undescore (_).

Jangan Alay!

Berikanlah nama file HTML dengan file yang biasa, hindari menggunakan huruf besar, campuran dari huruf besar dan kecil, dan juga menggunakan simbol.

Contoh:

  • HeLLoWORLD.html
  • da*#$.html

Meskipun nama ini bisa valid, tapi kurang bagus untuk dibaca.. baik oleh manusia, maupun mesin.

Baiklah, berikutnya kita akan pelajari tentang kode-kode HTML.

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Pemrograman C: Mengenal Fungsi pada Bahasa C

Dalam pemrograman, fungsi sering digunakan untuk membungkus program menjadi bagian-bagian kecil. Logika program yang ada di dalam fungsi dapat kita gunakan kembali dengan memanggilnya. Sehingga tidak perlu menulis ulang. Pada kesempatan ini, kita akan belajar tentang fungsi pada bahasa pemrograman C. Mulai dari cara membuat, memanggil, hingga membuat program CRUD sederhana dengan fungsi. Mari kita mulai… Apa itu Fungsi? Fungsi adalah sub-program yang bisa digunakan kembali baik di dalam program itu sendiri, maupun di program yang lain. Contoh fungsi yang sering kita buat adalah fungsi  main() . Fungsi ini memang wajib ada di setiap program C karena akan dieksekusi pertama kali. Kita juga sebenarnya bisa membuat fungsi yang lain… Bagaimana caranya? Silahkan lanjutkan membaca: Cara Membuat Fungsi pada Bahasa C Fungsi pada bahasa pemrograman C dapat kita buat dengan cara seperti ini: Fungsi biasanya akan mengembalikan sebuah nilai dari hasil prose...
26 komentar
Baca selengkapnya

Konfigurasi Akses Point

  SMK Bisa ! TKJ Juara ! Cara konfigurasi akses point Tp link Pertama jelas, siapkan Access Pointnya, power, kabel LAN pada Access Point dan koneksikan kabel LAN ke komputer. sekarang tinggal penyettingan Access Pointnya. Buka browser misal Firefox, ketikkan IP Address Access Point tadi ( 192.168.0.254 ) pada Address bar tekan Enter. 3. Masukkan username dan password Access Point (username dan password bisa Anda lihat dibagian bawah Access Point). Biasanya username :  admin  , password :  admin . Kemudian tekan Enter.   4. kita telah masuk dihalaman akses point , disinilah kita mengkonfigurasi atau me- manage  semua pengaturan dan fungsi Access Point, selanjutnya klik next   5.Selanjutny kita pilih mode akses point,kemudian next    6. selanjutnya dibagian ini untuk mengubah SSID dan mengisi password isikan(bebas) nama           : XII TKJ  tipe security : wpa 2 password     :12345678 ...
Posting Komentar
Baca selengkapnya

Membuat layanan PBX dengan MizuVoIP

  1. Pastikan komputer server telah terinstal OS minimal Windows 8 dan terkoneksi dengan internet 2. Unduh aplikasi MizuVoIP pada link berikut. 3. Sesuaikan jenis paket instalasi dengan sistem operasi komputer server yang digunakan setelah proses unduhan selesai, jalankan file instalasi tersebut. 4. Pilih Next untuk memulai proses instalasi 5. Pilih opsi I accept the agreement sebagai tanda anda menyetujui lisensi instalasi, kemudian pilih Next. 6. Tentukan lokasi folder instalasi dari Mizu, lalu pilih Next. 7. Berikan nama Start Menu Folder dari Mizu lalu pilih Next 8. Klik Install untuk memulai proses instalasi. 9. Tunggu beberapa saat hingga proses instalasi selesai. 10. Klik Finish untuk mengakihiri proses instalasi dan menjalankan aplikasi Mizu. 11. Berikut adalah tampilan dari aplikasi PBXAdmin Mizu. 12. Pada saat konfigurasi instalasi awal, akan muncul Configuration Wizard, pilih Quick/Auto configuration kemudian pilih Next. 13. Lengkapi detail isian konfigurasi Mizu seperti...
Posting Komentar
Baca selengkapnya