Pengenalan Code HTML Membuat Teks Code

Pengenalan Code HTML Membuat Teks Code. Hai ! Tutorial lalu kita sudah mempelajari tentang Pengenalan Code HTML Caption Table , jika anda ingin lebih jelas mengenal HTML anda bisa mengunjungi halaman berikut : https://www.dicloud.id/tutorial/categories/perkenalan-html, disini kita akan mempelajari tentang Pengenalan Code HTML Membuat Teks Code , berikut penjelasannya :

disini kita akan mempelajari tentang Pengenalan Code HTML Membuat Teks Code , berikut penjelasannya :

Code HTML Membuat Teks Code

Disini saya akan memberikan contoh code HTML untuk menambahkan sebuah Teks Code sederhana pada web, berikut contoh nya :

<!DOCTYPE html>
<html>
<head>

	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">


	<style type="text/css">
		
		.bg {
	font-family: 'Libre Franklin', sans-serif;
    font-size: 30px;
    background-color: #28e9ed;
    color: black;
    padding: 10px;
    text-align: justify;
    	}
    	.gd {
    border: 2px solid;
    border-color: #28e9ed;
    padding: 100px;
    color: #ffffff;
    background-image: url(text.jpg);	
    	}
    	.btn {
    background-color: #292cc6;
    padding: 10px;
    color: #ffffff;
    border: 14px;
    size: 13px;
    	}
    	.cmark{
    		background-color: #292cc6;
    	}
    	table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
		}
	td, th {
    border: 10px solid #dddddd;
    text-align: left;
    padding: 8px;
		}
	caption {
		border:5px solid #000000;
		text-shadow: 2px 2px #000000;
		color: #292cc6;
		font-size: 34px;
		font-family: 'Libre Franklin', sans-serif;

		}
	code {
		border:5px solid #000000;
		font-size: 15px;
	}

	</style>
	<title>Test</title>
</head>
<body>
<h3 align="center"><i class="bg">What is Lorem Ipsum?</i></h3>
<p align="center"><i class="material-icons" style="font-size: 70px">wb_sunny</i></p>

<center>
	<code>	border:5px solid #000000;
		text-shadow: 2px 2px #000000;
		color: #292cc6;
		font-size: 34px;
		font-family: 'Libre Franklin', sans-serif;
	</code>
</center>

<blockquote class="gd"><h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<small>It has survived not only five centuries, <sup>but also the leap into electronic typesetting, remaining essentially unchanged.</small></sup>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h1>
</blockquote>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

rel="stylesheet">

.bg {

font-family: 'Libre Franklin', sans-serif;

font-size: 30px;

background-color: #28e9ed;

color: black;

padding: 10px;

text-align: justify;

}

.gd {

border: 2px solid;

border-color: #28e9ed;

padding: 100px;

color: #ffffff;

background-image: url(text.jpg);

}

.btn {

background-color: #292cc6;

padding: 10px;

color: #ffffff;

border: 14px;

size: 13px;

}

.cmark{

background-color: #292cc6;

}

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 10px solid #dddddd;

text-align: left;

padding: 8px;

}

caption {

border:5px solid #000000;

text-shadow: 2px 2px #000000;

color: #292cc6;

font-size: 34px;

font-family: 'Libre Franklin', sans-serif;

}

code {

border:5px solid #000000;

font-size: 15px;

}

</style>

</head>

<body>

<h3 align="center"><i class="bg">What is Lorem Ipsum?</i></h3>

<p align="center"><i class="material-icons" style="font-size: 70px">wb_sunny</i></p>

<code> border:5px solid #000000;

text-shadow: 2px 2px #000000;

color: #292cc6;

font-size: 34px;

font-family: 'Libre Franklin', sans-serif;

</code>

</center>

<blockquote class="gd"><h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<small>It has survived not only five centuries, <sup>but also the leap into electronic typesetting, remaining essentially unchanged.</small></sup>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h1>

</blockquote>

</body>

</html>

Dan akan menampilkan hasil seperti gambar dibawah ini :

Pengenalan Code HTML Membuat Teks Code

Disini kita menggunakan elemen baru yaitu code atau <code> , elemen ini digunakan untuk menambahkan atau snippet code ke dalam HTML , misa code HTML anda sendiri anda bisa tambahkan menggunakan elemen ini.

Kesimpulan

Jika anda ingin menambahkan sebuah contoh code anda bisa menggunakan elemen ini pada HTML web anda.

Sekian Terima Kasih.

Author: Dicloud Support

Technical Support in dicloud.id

Panduan & Tutorial

Pengenalan Code HTML Membuat Teks Code