Elemen Kode Komputer HTML dan Fungsinya
 |
| Ilustrasi Elemen Kode Komputer HTML |
Sintak:
<code> Konten Kode Program Komputer</code>
Contoh:
<pre>
<code>
#include<stdio.h>
int main() {
printf("Hello Genks");
}
</code>
</pre>
#include
int main()
{
printf("Hello Genks");}
<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>
class MKN
{
// Program diawali dengan
// memanggil fungsi main()
// Cetak "Hello, World" pada
// layar
public static void main(String args[]){
System.out.println("Hello, World");}}
- 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>: 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>
- 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.
Tag <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>
<!DOCTYPE html>
<html>
<head>
<title>
pre tag
</title>
</head>
<body>
<pre>
blog ElfanMauludi
Portal ilmu komputer
</pre>
</body>
</html>
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>
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>
Tag <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:
<!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>
- Cara Membuat Teks Bidireksional Menggunakan Tag Tag Bdi HTML5 [klik]
- 2 Contoh Cara Memberikan Informasi Tambahan Menggunakan Tag Details HTML5 [klik]
- Cara Sederhana Menambahkan Kotak Dialog pada HTML5 [klik]
- 2 Contoh Cara Mudah Mengatur Figcaption HTML5 [klik]
- Cara Mudah Menambahkan Ilustrasi atau Foto Menggunakan Tag Figure HTML5 [klik]
- 2 Contoh Sederhana Cara Mendefinisikan Footer pada HTML5 [klik]
- 6 Kegunaan Utama Tag Header pada HTML5 [klik]
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.