Coding HTML website merupakan bahasa markup yang digunakan untuk membuat halaman web. HTML sendiri memiliki kepanjangan Hypertext Markup Language yang memiliki arti menggunakan symbol tertentu (tag) yang nantinya akan diterjemahkan oleh browser ke halaman web. Untuk mengetahui lebih lanjut Coding HTML maka simak penjelasan berikut sampai selesai.
Pengertian Coding HTML Website
Coding HTML website adalah kode yang digunakan dalam beberapa struktur halaman web dan beberapa konten di dalamnya. Lebih dari 90% website di internet menggunakan pemrograman HTML. HTML dapat juga dijadikan sebagai kerangka situs web yang Anda buka. Karena apabila tidak ada HTML maka struktur halaman website akan kosong.
Contoh Coding HTML Website Sederhana
Bagi pemula yang baru mempelajari serta mengenal coding HTML website sebaiknya Anda memahami terlebih dahulu contoh coding HTML sederhana, berikut contohnya:
Dokumen HTML
Dokumen HTML merupakan coding website HTML dasar yang berfungsi untuk membuat satu halaman. Di mana isi dokumen HTML mencangkup beberapa struktur dan konten yang nantinya akan ditampilkan pada website.
Berikut contoh gari dokumen HTML:
- <!DOCTYPE html>
- <html>
- <body>
- <h1> Heading pertama </h1>
- </body>
- <html>
Untuk penjelasannya sebagai berikut:
- untuk bagian awal dokumen HTML yaitu <!DOCTYPE html> yang memiliki fungsi untuk menginfokan kepada browser bahwa penulisan pada dokumen menggunakan HTML.
- Selanjutnya menggunakan tag <html>, tag tersebut merupakan elemen semua konten yang ada pada seluruh halaman, di mana elemen ini mengandung pengaturan bahasa utama dalam dokumen.
- Selanjutnya ada tag <head>, tag ini memuat beberapa hal yang masuk ke halaman HTML tetapi tidak termasuk konten audiens. Hal-hal tersebut hanya meliputi keywords dan juga deskripsi halaman.
- Selanjutnya ada Tag <body>, tag ini memuat bagan atau isi dari konten halaman web. Konten halaman web biasanya tersusun dari heading, paragraph, gambar, tabel, dan juga yang lainnya.
Heading
Heading digunakan untuk menandai judul dan juga sub judul. Dengan adanya coding HTML website heading ini dapat mengatur tingkat prioritas umum ke khusus. Di mana heading memiliki 6 tingkatan. Dimulai dari yang paling tinggi ada <h1>, dan paling rendahnya ada <h6>. Berikut merupakan contoh dari penggunaan heading yang dapat Anda simak:
- <h1> Heading 1</h1>
- <h2>Heading 2</h2>
- <h3>Heading 3</h3>
- <h4>Heading 4</h4>
- <h5> Heading 5</h5>
- <h6> Heading 6</h6>
Paragraf
Paragraf memiliki fungsi untuk memisahkan teks agar informasi penting tidak tercampur dengan kata tambahan, sehingga informasinya dapat tersampaikan dengan baik kepada pembaca.
Tanpa adanya paragraf, pembaca akan sulit menangkap ide pokok informasi yang dibaca karena tidak ada jeda sama sekali. Berikut merupakan contoh dari coding HTML website paragraph:
- <p> teks paragraf pertama </p>
- <p> teks paragraf kedua </p>
- dan seterusnya
Link
Adanya link digunakan untuk membuat eksternal atau internal yang dapat mengarahkan pembaca ke website tertera. Link diawali dengan tag <a> atau dapat disebut juga dengan anchor. Berikut merupakan contoh coding HTML pada link,
<a>
Href = “https ://www.pargrafarikel.com/host ing” >hosting murah </a>
Berani atau Kuat
Pasti Anda sudah tahu kalau tag HTML akan memberikan efek berani atau kuat pada tulisan. Namun apakah Anda tahu bedanya tag berani dengan tag tebal atau bold ?
Hal yang membedakannya adalah tag bold hanya akan memberikan efek tebal namun tag berani akan memberikan sinyal pada Google karena ada kata kunci yang dapat memperkuat info atau konten website.
Dapat Menambahkan Gambar
Dengan bantuan HTML Anda bisa menambahkan gambar di halaman web yang Anda inginkan. Berikut contoh menambahkan gambar di web.
<img src=”wp-
Content/uploads/2029/04/sunlit-birds.jpg” >
Penjelasannya, susunan HTML di atas menyertakan tag <img> yang dapat menentukan sumber gambar. Dengan begitu gambar yang Anda sertakan akan muncul di halaman web.
Button
Button adalah tombol yang digunakan oleh pengunjung website untuk memicu perintah tertentu. Selain itu, Button mengandung teks yang ditempatkan setelah tag pembukaan <button> dan juga penutup </button>.
Untuk penggunaannya sebagai berikut:
<button>Klik Di Sini </button>
Garis Horizontal
Garis horizontal berperan sebagai elemen pemisah visual dalam konten atau transisi elemen tertentu. Contoh penggunaannya, tambahkan tag <hr> di antara konten yang ingin Anda pisahkan.
<p>paragraph pertama </p>
<hr>
<p>paragraph kedua</p>
Highlighted
Highlighted merupakan penekanan visual pada teks tertentu yang dianggap penting, atau dapat juga dikatakan sebagai stabilo online. Untuk menggunakannya, ikuti tata cara berikut.
Tambahkan elemen <mark> pada teks yang ingin disorot. Berikut cara praktiknya:
<p>ini adalah <mark>contoh highlighted</mark>yang benar</p>
Coding HTML Website untuk Penjualan
Adanya coding HTML website penjualan di samping mempermudah dalam melakukan pekerjaan dan juga melayani pelanggan, namun sayangnya hal ini dapat memakan waktu yang cukup lama. Coding HTML penjualan Anda dapat menampilkan informasi di website mengenai toko, produk terbaru yang dijual, cara pembayaran dan juga lokasi toko.
Bukan hanya itu, Anda juga bisa menambahkan fitur sesuai kebutuhan, halaman produk yang terperinci, sistem pemasaran, dan lain sebagainya. Sebetulnya code HTML tidaklah sulit digunakan, hanya saja ketika menggunakannya Anda harus teliti dan mengingat berbagai macam tag serta atribut yang benar.
Contoh Coding HTML Website untuk Berita
Untuk membuat HTML website berita, Anda perlu membuat struktur dasar sebuah halaman web termasuk judul, paragraf, tautan, gambar, dan juga elemen-elemen pendukung yang lain. berikut 3 contoh coding HTML website berita:
Membuat judul dengan Heading
Dengan menggunakan tag heading pada judul dapat membedakan judul utama dengan sub judul dalam berita. Sehingga pembaca dapat dengan mudah memahami dan juga mencari informasi di berita tersebut.
Mempercantik Tampilan
Proses mempercantik tampilan pada berita dapat Anda lakukan dengan cara menambahkan gambar. Selain itu, gambar juga dapat digunakan untuk meningkatkan visualisasi dan juga memperkuat pesan di dalamnya. namun perlu diperhatikan untuk tidak terlalu banyak menggunakan gambar dalam berita, karena akan memberi kesan tidak serius.
Membuat Daftar dalam Berita
Menggunakan tag list merupakan cara yang tepat untuk menyusun sebuah berita agar dapat mengikuti informasi dengan jelas, sehingga pembaca dapat memahami dan menemukan poin-poin penting yang ingin disampaikan.
Coding HTML dan CSS Website
Menggunakan HTML dan CSS dapat menciptakan tampilan yang menarik serta interaktif untuk pengguna. Namun perlu diperhatikan juga desain yang baik merupakan desain yang fungsional, mudah digunakan, dan juga dapat mencantumkan informasi dengan jelas. Berikut contoh coding HTML dan CSS website:
Untuk membuat judul utama berwarna merah dengan font yang besar, Anda dapat menggunakan tag <h1> dan kemudian memberikan CSS dengan property color red dan ukuran font kurang lebih 24 px. dengan begitu tampilan judul terlihat mencolok, dan juga menarik perhatian.
Berikut merupakan beberapa contoh mengenai coding HTML website yang dapat Anda pelajari untuk meningkatkan kreativitas Anda dalam dunia IT.
Bagi Anda yang sangat tertarik dengan pengetahuan seputar coding HTML website, kami rekomendasikan Anda untuk mengikuti kursus ITBOX. Mengapa ITBOX? Mengingat ITBOX merupakan tempat pelatihan IT offline maupun online terbaik di Indonesia.
