Hello, World!

By



Selamat datang di Learn HTML, cara termudah untuk belajar HTML & CSS secara online dan interaktif.

Mempelajari HTML & CSS adalah hal yang penting bagi setiap web developer, dan tidak membutuhkan kemampuan pemrograman JavaScript.

Sebelum memulai, saya menyarankan Anda untuk mengunduh sebuah IDE HTML & CSS. Pilihan pribadi saya adalah IDE dari JetBrains. Anda dapat mengunduh PyCharm Community Edition secara gratis, yang memiliki dukungan pengembangan HTML, CSS, dan JavaScript yang sangat baik, lengkap dengan fitur yang biasanya dimiliki IDE berkualitas—integrasi kode sumber, refactoring kode, indentasi otomatis, penyorotan sintaks, alat perbandingan, dan lainnya.

Berikut adalah daftar editor HTML, CSS, dan JavaScript yang bisa Anda gunakan:

Dalam tutorial ini, Anda sebenarnya tidak perlu IDE, karena semua kode akan ditulis secara online.

Pendahuluan

HTML (HyperText Markup Language) adalah standar yang dikembangkan selama bertahun-tahun untuk menyampaikan informasi melalui internet menggunakan “hyperlink” — atau yang kita kenal sekarang sebagai link. Tidak seperti PDF, halaman HTML bersifat jauh lebih dinamis, memungkinkan Anda menjelajahi web dengan mengklik link dan berinteraksi dengan halaman. Link bisa membawa Anda ke bagian lain dari halaman yang sama, atau ke halaman lain di internet.

Versi terbaru HTML adalah HTML 5.0, yang memiliki jauh lebih banyak kemampuan daripada yang awalnya direncanakan untuk web. HTML5 adalah platform yang sangat komprehensif yang memungkinkan pembuatan antarmuka pengguna kelas tinggi bersama dengan kekuatan CSS dan JavaScript. HTML5 begitu kuat hingga berhasil menggantikan Adobe Flash, Microsoft Silverlight, dan hampir semua plugin HTML seperti video player, Java applet, dan lainnya.

Lalu apa perbedaan antara HTML, CSS, dan JavaScript? Pertama-tama, semuanya dapat disertakan dalam satu halaman HTML, artinya browser memulai dengan memuat halaman HTML, dan dari situlah ia mengetahui apa yang harus dimuat selanjutnya.

  • Halaman HTML adalah dokumen HTML yang mendefinisikan konten halaman menggunakan markup khusus yang mirip dengan XML.

  • CSS adalah stylesheet yang menentukan tampilan elemen HTML pada halaman. CSS dapat ditanamkan langsung di dalam HTML atau dimuat menggunakan tag <link>.

  • JavaScript adalah bahasa pemrograman yang digunakan untuk berinteraksi dengan halaman HTML melalui API bernama DOM (Document Object Model) Bindings. DOM berfungsi sebagai perantara antara bahasa pemrograman dengan halaman HTML yang dimuat di browser.

Dasar tutorial ini mencakup HTML dan CSS. Bagian lanjutan mengasumsikan Anda sudah memahami pemrograman dan JavaScript. Untuk belajar JavaScript, Anda dapat mengunjungi:
https://www.learn-js.org

Kita akan menggunakan sebuah framework CSS bernama Bootstrap dari Twitter, salah satu pustaka CSS paling populer saat ini. Prinsip dasar pustaka CSS pada umumnya sama—mereka berbasis pada grid system, cara mudah untuk mengatur tata letak halaman HTML, sebuah metode yang dikembangkan dalam dunia web selama bertahun–tahun.

Halaman HTML Pertama Anda

Mari kita mulai dengan membuat halaman HTML sederhana. Halaman HTML memiliki struktur dasar sebagai berikut:

<!DOCTYPE html>
<html>
    <head>
        <!-- definisi head di sini -->
    </head>
    <body>
        <!-- konten halaman di sini -->
    </body>
</html>

Sekarang mari kita buat halaman sederhana yang berisi kalimat “Hello, World!” di dalam bagian body. Halaman ini juga akan memiliki judul — teks yang muncul pada tab browser Anda. Elemen <title> digunakan untuk mendefinisikan judul halaman HTML.

Tag <!DOCTYPE html> mendefinisikan tipe dokumen yang akan dirender browser. Ini digunakan untuk kebutuhan kompatibilitas. Untuk memastikan halaman menggunakan versi HTML terbaru (HTML5), sangat disarankan untuk menggunakan tag ini.

Elemen <p> mendefinisikan sebuah “paragraf”, yaitu blok teks dengan jarak kecil di bagian atas dan bawah.

Perhatikan bahwa setiap tag memiliki tag pembuka dan penutup, yang ditandai dengan garis miring (</p>). Semua yang berada di antaranya adalah konten tag tersebut. Konten ini juga dapat berisi tag HTML lainnya.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <p>Ini adalah contoh halaman HTML sederhana dengan satu paragraf.</p>
    </body>
</html>

Anda dapat menyalin dan menempelkan kode ini ke file baru di text editor atau IDE Anda, lalu simpan sebagai "index.html". File "index.html" adalah file default yang dicari web server saat Anda mengakses sebuah website. Setelah menyimpannya, Anda bisa membukanya dengan mengklik dua kali untuk melihatnya di browser.

Sekarang kita sudah memahami struktur dasar halaman HTML, mari kita coba.

Latihan

  1. Tambahkan tag <title> dengan teks "Hello, World!"

  2. Tambahkan paragraf (<p>) di dalam body dengan teks "Hello, World!"

No comments:

Post a Comment