Pengertian, Fungsi, Setruktur, Cara membuat ,Menjalankan, Dan Contoh sederhana penggunaan HTML (HyperText Markup Language)
Pengertian, Fungsi, Setruktur, Cara membuat ,Menjalankan, Dan Contoh sederhana penggunaan HTML (HyperText Markup Language)
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.
Supaya dapat menghasilkan tampilan
wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas
format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.
HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai
di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup
Language (SGML).
Sekarang ini HTML merupakan standar Internet yang dikendalikan dan didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika energi tinggi di Jenewa)
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke web browser. Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web.
Fungsi HTML (HyperText Markup Language)
HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.
Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.
Fungsi HTML yang lebih spesifik yaitu :
- Membuat halaman web.
- Menampilkan berbagai informasi di dalam sebuah browser Internet.
- Membuat link menuju halaman web lain dengan kode tertentu (hypertext).
Struktur Dasar HTML
Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari : Tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Inilah yang merupakan struktur paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.
Agar lebih mudah memahaminya, silahkan buka text editor (Notepad++), lalu ketikkan kode berikut ini:
Contoh struktur dasar HTML:
|
1 2 3 4 5 6 7 8 9 |
|
Save sebagai halaman.html dan jalankan file dengan cara double klik file tersebut, atau klik kanan –> Open With –> Firefox. Kita akan membahas tag-tag yang ditulis tersebut pada tutorial kali ini.
Pengertian DTD atau DOCTYPE
Tag paling awal dari contoh HTML diatas adalah DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML.
DTD memiliki banyak versi tergantung kepada versi HTML yang digunakan. Pada contoh diatas, saya menggunakan DTD versi HTML 5. Sebelum HTML 5, DTD terdiri dari text panjang yang hampir mustahil dihafal. Contohnya, DTD untuk xHTML 1.0 adalah:
|
|
Jika kita tidak menuliskan DTD, browser akan tetap menampilkan dan memproses halaman web kita seperti tidak terjadi apa-apa. Namun browser sebenarnya menjalankan halaman HTML tersebut pada mode khusus yang disebut quirk mode.
Pada quirk mode, web browser menerjemahkan halaman web (terutama kode CSS) sedikit berbeda dari seharusnya. Ini karena web browser menganggap bahwa ketika DTD tidak ditemuka, halaman tersebut kemungkinan besar merupakan halaman web usang. Agar halaman ‘usang’ ini tetap tampil baik, web browser perlu menggunakan aturan-aturan yang berbeda, yakni: quirk mode.
Cara untuk mengetahui apakah web browser berjalan pada quirk mode atau standard mode lebih mudah jika menggunakan web browser Mozilla Firefox. Pada Firefox, klik kanan pada halaman web, lalu pilih Page Info. Pada bagian Render Mode akan terlihat apakah quirk mode, atau standard mode.
Tag <html>
Setelah DTD, tag berikutnya adalah tag <html>.
Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>
Tag <head>
Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.
Tag <title> dalam contoh kita sebelumnya digunakan untuk menampilkan title dari sebuah halaman web. Title ini biasanya ditampilkan pada bagian paling atas web browser. Contohnya pada tampilan halaman.html, ‘Title dari Websiteku’ akan ditampilkan pada tab browser.
Tag <body>
Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>. Sebagian besar waktu kita dalam merancang web akan dihabiskan di dalam tag <body> ini.
Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk <html> yang merupakan tag paling awal dari sebuah halaman web.
Cara membuat dokumen file html sederhana
Dokumen html adalah sebuah format extensi file .html atau .htm dan mempunyai struktur dokumen html.
Persiapan
Untuk membuat dokumen file HTML sebenarnya sangat mudah. Pertama-tama kita harus mempersiapkan sebuah peralatan yang akan kita pakai seperti Browoser. Berikut listnya:
- Google Chrome
- Internet Explored
- Mozilla Firefox
- Safari
- Opera
- dan yang lainnya.
Persiapkan juga teks editor seperti:
- Notepad
- Notepad++
- Sublime Text
- Atom
- Visual Studio Code
Langkah 1: buka notepad
Untuk pengguna Windows 8 atau ke atas:
Buka Layar Start (gambar jendela di bagian kiri
bawah pada layar Anda). Ketik Notepad .
Untuk pengguna Windows 7 atau sebelumnya:
Buka Start > Programs> Accessories> Notepad
Langkah 2: menulis tag HTML
<!DOCTYPE html><html><head><title>Judul post</title>
</head><body> <h1>Hello Word</h1>
<p>Paragraf pertama.</p>
</body></html>
Berikut penjelasan disetiap baris code:
<!DOCTYPE html>
mendefinisikan jenis dokumen HTML.<html>
mendefinisikan elemen akar pertama pada halaman HTML.<head>
mendefinisikan berisi informasi header pada dokumen HTML.<title>
mendefinisikan judul halaman untuk dokumen HTML.</title>
penutup tag title.</head>
penutup tag head.<body>
mendefinisikan berisi konten halaman yang akan terlihat.</body>
penutup tag body.</html>
penutup tag html.
Silakan Anda salin script di atas ke di file kosong dikomputer Anda.
Langkah3: Simpan file HTML
Simpan file yang tadi Anda buat: Pilih File> Save as.
Nama filenya bebas asal menggunakan extensi .html atau .htm
sebagai contoh: “index.html” tanpa tanda kutip
Langkah 4: buka file HTML dengan browser
Buka file HTML yang tadi Anda buat dengan browser seperti: Google, Mozilla, Opera dll.
Hasilnya akan terlihat seperti ini:
Cara Menjalankan File HTML, CSS, dan JavaScript dengan Notepad++
1. Aktifkan aplikasi Notepad++ di komputer atau laptop kamu. Tunggu beberapa saat sampai tampilan aplikasi tersebut muncul.
2. Klik file – Open. Pilihlah file data yang berisi coding yang kamu ingin eksekusi. Setelah itu, klik Open.
3. Klik Run – Pilih Launch in (nama aplikasi web browser). Pada Launch in itu memiliki 4 aplikasi web browser yang bisa kamu gunakan dengan memilih salah satunya. Setelah tunggu beberapa saat sampai terbuka aplikasi web browser hasil dari pilihan kamu tadi.
Namun, fitur Launch in, ini tidak berfungsi apabila aplikasi web browser belum ada di dalam komputer atau laptop kamu.
4. Berikut tampilan hasil dari web browser Mozilla.
Contoh sederhana penggunaan HTML
Inputan yang di buat di aplikasi Notepad++
Hasil dari coding HTML di atas
Jika kalian tertarik mau belajar lebih lanjut mengenai pengetahun di bidang informatika mari bergabung dengan kami Klik disini Kalian bisa tau soal seputar Jurusan Pendidikan Teknologi Informasi di Universitas Muhammadiyah Tasikmalaya
Komentar
Posting Komentar