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

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

Media Penyimpanan Data Eksternal

A. Pengertian Media penyimpanan data eksternal.      Computer Data Storage (Penyimpanan Data Komputer) adalah media yang digunakan dengan fungsi untuk menyimpan berbagai macam data digital yang tersedia pada perangkat komputer dengan waktu tertentu sehingga dapat dibaca dan dibuka kembali untuk diproses ulang pada perangkat. Untuk saat ini Media penyimpanan komputer terbagi menjadi 3 kategori, yaitu Media penyimpanan Magnetik (Magnetic Disk), Media Penyimpanan Optical (Optical Disk), dan Media Penyimpanan Awan (Cloud Storage). Dan selanjutnya akan saya bahas ketiga kategori tersebut secara detail, jenis-jenis dan juga contoh dari setiap kategori tersebut. B. Macam macam Media penyimpanan data eksternal. 1. Magnetic Disc Penyimpanan Magnetik merupakan media penyimpanan yang termasuk ke dalam penyimpanan sekuder (secondary storage) yang paling banyak dipakai pada sistem komputer modern. Kelebihan dan Kekurangan : Kelebihan : Kapasitas ...
31 komentar
Baca selengkapnya

Menganalisis relasi logika dasar, kombinasi dan sekuensial (NOT, AND, OR); (NOR,NAND, EXOR, EXNOR); (Flip Flop, counter)

  A. Relasi Logika. Informasi dalam bentuk sinyal 0 dan 1 saling memberikan kemungkinan hubungan secara logik. Fungsi dasar relasi logik adalah : Fungsi AND, OR, dan Fungsi NOT. Disamping ketiga fungsi dasar tersebut ada beberapa fungsi logik yang sering digunakan yaitu : Fungsi EXCLUSIVE OR ( EX-OR ) dan Fungsi EQUIVALENCE. Di dalam Eletronika, fungsi-fungsi logik diatas dinyatakan dalam bentuk : Simbol, Tabel Kebenaran, Persamaan Fungsi dan Diagram Sinyal Fungsi Waktu. B. Gerbang Logika. Gerbang Logika atau dalam bahasa Inggris disebut dengan Logic Gate adalah dasar pembentuk Sistem Elektronika Digital yang berfungsi untuk mengubah satu atau beberapa Input (masukan) menjadi sebuah sinyal Output (Keluaran) Logis. Gerbang Logika beroperasi berdasarkan sistem bilangan biner yaitu bilangan yang hanya memiliki 2 kode simbol yakni  0  dan  1  dengan menggunakan Teori Aljabar Boolean. C. Jenis-jenis Gerbang Logika Dasar dan Simbolnya. Terdapat 7 jenis Gerbang Logika ...
Posting Komentar
Baca selengkapnya