Elemen Kode Komputer HTML dan Fungsinya
Komputer memiliki format unik dan style teks untuk menampilkan pesan yang berhubungan dengan kode. Tag <code> digunakan untuk menampilkan kode komputer pada website dan juga beberapa angka pada elemen yang tersedia untuk markup kode komputer menggunakan HTML.
Tag <code>: digunakan untuk mendefinisikan bagian dari kode komputer. Selama proses pembuatan laman web terkadang dibutuhkan beberapa bentuk tampilan khusus yang digunakan untuk menampilkan kode program. Hal ini dapat dilakukan oleh tag heading dasar dari HTML, tetapi HTML juga menyediakan sebuah tag terpisah lain yang memiliki fungsi yang sama seperti tag tersebut yaitu tag <code>. Tag code adalah tipe spesifik dari teks yang merepresentasikan output kode komputer. HTML menyediakan banyak method untuk teks format tetapi tag <code> akan selalu menampilkannya dengan ukuran kertas, huruf, dan spasi yang sesuai dengan format dari tag tersebut. Elemen <code> adalah elemen dasar yang digunakan untuk menandai teks sebagai kode komputer. Penggunaannya cocok untuk menunjukkan bagian kode dalam kalimat atau paragraf yang berbeda dengan teks biasa. Elemen ini biasanya ditampilkan dalam jenis huruf monospace untuk membedakannya dari teks reguler.
Sintak:
<code> Konten Kode Program Komputer</code>
Contoh:
Sebelum mempelajari materi tentang Elemen Kode Komputer HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Daftar URL Encoding pada HTML, Fungsi SVG pada HTML, dan Penggunaan Canvas pada HTML.
Elemen kode komputer dalam HTML adalah bagian penting dari struktur dokumen web yang digunakan untuk menyoroti dan membedakan potongan kode atau teks yang berkaitan dengan sintaks pemrograman, perintah, atau instruksi komputer. Elemen-elemen ini membantu mengidentifikasi kode secara visual serta memberikan konteks yang jelas kepada pembaca mengenai bagian yang bersifat teknis atau instruksional dalam teks.
<code> Konten Kode Program Komputer</code>
Contoh:
<pre>
<code>
#include<stdio.h>
int main() {
printf("Hello Genks");
}
</code>
</pre>
Output:
#include
int main()
{
printf("Hello Genks");}
Contoh:
<pre>
<code>
class MKN
{
// Program diawali dengan
// memanggil fungsi main()
// Cetak "Hello, World" pada
// layar
public static void main(String args[]){
System.out.println("Hello, World");}
}
</code>
</pre>
Output:
class MKN
{
// Program diawali dengan
// memanggil fungsi main()
// Cetak "Hello, World" pada
// layar
public static void main(String args[]){
System.out.println("Hello, World");}}
Beberapa poin tentang tag <code>:
- Secara umum digunakan untuk menampilkan potongan kode program pada web browser.
- Tag ini mendesain elemennya agar sesuai dengan format teks standar komputer.
- Web browser secara default menggunakan mono space font family untuk menampilkan konten elemen tag <code>.
Tag <kbd>: Elemen <kbd> digunakan untuk menyoroti input keyboard atau tombol yang harus ditekan. Ini berguna untuk menunjukkan pengguna bagaimana cara melakukan input teks, perintah keyboard, atau kombinasi tombol. Elemen <kbd> Merupakan sebuah tag frase yang digunakan untuk mendefinisikan input keyboard. Teks antara tag <kbd> merepresentasikan teks yang mirip yang akan diketik pada keyboard.
Sintak:
<kbd> Konten... </kbd>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
The kbd tag
</title>
<style>
body
{text-align:center;}
</style>
</head>
<body>
<div class = "mkn">
ElfanMauludi
</div>
<kbd>Portal</kbd>
<kbd>Ilmu</kbd>
<kbd>Komputer</kbd>
</body>
</html>
Output:
ElfanMauludi
PortalIlmuKomputer
Beberapa point terkait tag <kbd>:
- Teks yang dilingkupi tag <kbd> biasanya menampilkan default mono-space font pada web browser.
- Sangat dimungkinkan untuk mendapatkan efek yang lebih bagus jika menggunakan CSS.
- Tidak ada atribut tag spesifik.
Elemen <pre> digunakan untuk mendefinisikan block format teks yang membakukan teks space, baris enter, tab, dan karakter format lainnya yang diabaikan oleh web browser. Teks pada elemen <pre> menampilkan ukuran huruf yang sesuai, tetapi tetap dapat diubah dengan menggunakan CSS. Tag <pre> membutuhkan tag awalan dan akhiran.
Sintak:
<pre> Konten... </pre>
Sintak:
<pre> Konten... </pre>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
pre tag
</title>
</head>
<body>
<pre>
blog ElfanMauludi
Portal ilmu komputer
</pre>
</body>
</html>
Output:
blog ElfanMauludi Portal ilmu komputer
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
pre tag with CSS
</title>
<style>
pre
{
font-family: Arial;
color: #009900;
margin: 25px;
}
</style>
</head>
<body>
<pre>
blog ElfanMauludi
Portal Ilmu Komputer
</pre>
</body>
</html>
Output:
blog ElfanMauludi Portal Ilmu Komputer
Sintak:
<samp> Konten... </samp>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
samp tag
</title>
</head>
<style>
body
{
text-align:center;}
.mkn
{
font-size:40px;
font-weight:bold;
color:green;}
.bons
{
font-size:25px;
font-weight:bold;}
</style>
<body>
<div class ="mkn">
ElfanMauludi
</div>
<div class = "bons">
Tag samp
</div>
<samp>
Portal ilmu komputer
</samp>
</body>
</html>
Output:
ElfanMauludi
Tag samp
Portal ilmu komputer
Tag <var>: Elemen <var> digunakan untuk menunjukkan variabel dalam teks. Ini memungkinkan pengguna untuk menyoroti bagian dari teks yang mewakili variabel dalam konteks tertentu. Elemen <var> adalah tag frase dan digunakan untuk menentukan variabel pada persamaan matematika atau pada program komputer. Konten dari tag ditampilkan pada format italic pada sebagian besar web browser.
Sintak:
<var> Konten... </var>
Contoh:
Sintak:
<var> Konten... </var>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
var tag
</title>
</head>
<style>
body
{
text-align:center;}
.mkn
{
font-size:40px;
font-weight:bold;
color:green;}
.bons
{
font-size:25px;
font-weight:bold;}
</style>
<body>
<div class ="mkn">
ElfanMauludi
</div>
<div class = "bons">
Tag VAR
</div>
<var>
Variabel ElfanMauludi
</var>
</body>
</html>
Output:
ElfanMauludi
Tag VAR
Variabel ElfanMauludi
Elemen-elemen ini memberikan kejelasan dalam menampilkan kode komputer, membuatnya lebih mudah dipahami oleh pembaca, serta membantu dalam pembelajaran dan referensi. Dengan menggunakan elemen-elemen kode komputer dalam HTML, pengembang web dapat menyajikan informasi teknis secara lebih terstruktur dan mudah dimengerti bagi pengguna.
Elemen-elemen kode komputer HTML membantu dalam menyoroti bagian kode atau teks teknis di dalam dokumen HTML. Dengan menampilkan kode dalam gaya huruf monospace atau mempertahankan format aslinya menggunakan <pre>, pembaca dapat dengan mudah mengidentifikasi dan membedakan bagian kode dari teks biasa, meningkatkan keterbacaan secara keseluruhan.
- Pembeda Visual: Penggunaan elemen kode komputer memberikan tampilan visual yang berbeda dari teks reguler. Dengan menampilkan teks kode dalam jenis huruf yang berbeda, latar belakang yang mungkin berbeda, atau dengan pemformatan khusus lainnya, elemen-elemen ini membantu dalam membedakan kode dari teks lainnya, membantu pembaca untuk langsung mengidentifikasi bagian-bagian penting.
- Pertahankan Format Asli Kode: Elemen <pre> mempertahankan format asli kode dengan baik. Ini sangat berguna ketika menampilkan kode yang memiliki struktur indentasi yang penting, format yang terjaga, atau yang membutuhkan penampilan sesuai dengan apa yang sebenarnya ada di dalam kode tersebut. <pre> memungkinkan kode ditampilkan tanpa mengalami perubahan secara otomatis.
- Penting untuk Pembelajaran dan Referensi: Bagi pembelajar pemrograman atau yang membutuhkan referensi teknis, elemen-elemen kode ini sangat membantu. Dengan menandai kode dengan elemen seperti <var> untuk menunjukkan variabel atau <kbd> untuk menyoroti input keyboard, pembaca dapat lebih mudah memahami konsep dan proses yang terkait dengan kode tersebut.
- Kesesuaian dengan Standar Aksesibilitas: Meskipun elemen kode komputer bisa memiliki format visual yang berbeda, dan tetap berkaitan dengan standar aksesibilitas. Ketika diimplementasikan dengan benar, elemen kode tidak hanya meningkatkan keterbacaan tetapi juga mempertahankan aksesibilitas bagi pembaca dengan kebutuhan khusus, seperti pembaca layar.
Elemen kode komputer dalam HTML memiliki peran penting dalam menyoroti dan mempresentasikan kode atau instruksi teknis dengan cara yang lebih terstruktur, jelas, dan mudah dimengerti. Dengan penggunaan yang tepat, elemen-elemen ini membantu dalam memudahkan pembaca untuk memahami, mempelajari, dan menggunakan informasi teknis yang terkandung dalam halaman web.
Referensi Tambahan:
Artikel ini didedikasikan kepada: Ayu Putri Kurniasari, Bagas Adi Pamungkas, Delyana Sukahar, Dwi Pratiwiningrum, dan Fahrunisa Rahma Dewi.
5 komentar untuk "Elemen Kode Komputer HTML dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -
Apa yang dimaksud dengan tag code pada html?
BalasHapusTag Code digunakan untuk mendefinisikan bagian dari kode komputer pada halaman website berbasis HTML. Konten yang terdapat didalamnya ditampilkan dalam bentuk font monospace pada browser secara default.
HapusCatatan: Tag ini sudah tidak digunakan lagi pada versi HTML terbaru, namun untuk dapat menggunakan bentuk efek yang sama seperti tag code tersebut maka dapat digunakan dengan menggunakan CSS.
Kenapa harus menggunakan tag code?
BalasHapusDigunakan sebagai bentuk pembeda antara tulisan biasa, dan tulisan bahasa pemrograman.
HapusBagik tag code, ataupun code css yang digunakan dengan bentuk tampilan sama pada tag code adalah bersifat tidak baku.
HapusContoh, bentuk penulisan code program yang ditampilkan pada blog ElfanMauludi.