Script HTML Bucin Ulang Tahun Sederhana untuk Pacar
How to tekno
·waktu baca 5 menit
Tulisan dari How To Tekno tidak mewakili pandangan dari redaksi kumparan
PerbesarJika kamu seorang programmer dan memiliki pujaan hati, script html bucin ulang tahun bisa jadi cara unik untuk mengucapkan selamat ulang tahun ke mereka.
HTML atau Hypertext Markup Language merupakan komponen penting yang digunakan untuk membuat struktur halaman situs web.
Dijelaskan dalam buku HTML 5 Manual Book terbitan Jubilee Enterprise, HTML adalah script pemrograman yang mengatur bagaimana informasi dalam suatu website disajikan.
Script HTML ini berisi karakter angka dan huruf yang membangun halaman situs web agar bisa dibaca oleh program tertentu. Dengan begitu, pembuatnya bisa merancang seperti apa halaman yang akan ditampilkan nantinya.
HTML juga memiliki banyak fungsi canggih. Misalnya, membuat situs web dengan multimedia, diaplikasikan dengan bahasa pemrograman lain, dan mampu menavigasi halaman situs web dengan hyperlink.
Cara Kerja Script HTML
Untuk menggunakan script HTML bucin ulang tahun, kamu tidak perlu menuliskan kode sendiri. Sebab, sudah ada berbagai file script HTML di Internet yang dibuat oleh para programmer andal dan bisa diunduh atau disalin dengan mudah.
Dikutip dari laman Niagahoster, dokumen script HTML bucin ulang tahun tersebut dibuat pada aplikasi editor HTML dan disimpan dalam format .html atau .htm. Ekstensi file ini bisa dibuka menggunakan peramban seperti Google Chrome, Safari, atau Mozilla Firefox.
Agar dapat diakses banyak orang, kamu perlu mengaktifkan HTML link terlebih dahulu dengan cara melakukan hosting situs web. Jika sudah, peramban bisa membaca dan merender file HTML menjadi tampilan halaman situs web.
Hasilnya, ketika orang mengakses situs web atau tautan tersebut, mereka bisa dengan mudah membaca informasi yang ditampilkan.
Contoh Script HTML Bucin Ulang Tahun
Dirangkum dari laman Github Riszki Wahyudi, contoh script HTML bucin ulang tahun sederhana yang bisa digunakan adalah sebagai berikut:
<html>
<head>
<title>Inwepo Fireworks</title>
<style>* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
h1 {
margin-top: 5%;
font-family: 'Segoe UI';
font-size: 60px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>Selamat Ulang Tahun Kamu</h2>
<script>var rnd = Math.random, flr = Math.floor;
let canvas = document.createElement('canvas');
document.getElementsByTagName('body')[0].appendChild(canvas);
canvas.style.position = 'absolute';
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
let ctx = canvas.getContext('2d');
function rndNum(num) {
return rnd() * num + 1;
}
function vector(x, y) {
this.x = x;
this.y = y;
this.add = function(vec2) {
this.x = this.x + vec2.x;
this.y = this.y + vec2.y;
}
}
function particle(pos, vel) {
this.pos = new vector(pos.x, pos.y);
this.vel = vel;
this.finish = false;
this.start = 0;
this.update = function(time) {
let timeSpan = time - this.start;
if (timeSpan > 500) {
this.finish = true;
}
if (!this.finish) {
this.pos.add(this.vel);
this.vel.y = this.vel.y + gravity;
}
};
this.draw = function() {
if (!this.finish) {
drawDot(this.pos.x, this.pos.y, 1);
}
}
}
function firework(x, y) {
this.pos = new vector(x, y);
this.vel = new vector(0, -rndNum(10) - 3);
this.color = 'hsl(' + rndNum(360) + ', 100%, 50%)'
this.size = 4;
this.finish = false;
this.start = 0;
let exParticles = [], exPLen = 100;
let rootShow = true;
this.update = function(time) {
if (this.finish) {
return;
}
rootShow = this.vel.y < 0;
if (rootShow) {
this.pos.add(this.vel);
this.vel.y = this.vel.y + gravity;
} else {
if (exParticles.length === 0) {
flash = true;
for (let i = 0; i < exPLen; i++) {
exParticles.push(new particle(this.pos, new vector(-rndNum(10) + 5, -rndNum(10) + 5)));
exParticles[exParticles.length - 1].start = time;
}
}
let countFinish = 0;
for (let i = 0; i < exPLen; i++) {
let p = exParticles[i];
p.update(time);
if (p.finish) {
countFinish++;
}
}
if (countFinish === exPLen) {
this.finish = true;
}
}
}
this.draw = function() {
if (this.finish) {
return;
}
ctx.fillStyle = this.color;
if (rootShow) {
drawDot(this.pos.x, this.pos.y, this.size);
} else {
for (let i = 0; i < exPLen; i++) {
let p = exParticles[i];
p.draw();
}
}
}
}
function drawDot(x, y, size) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
var fireworks = [],
gravity = 0.2,
snapTime = 0,
flash = false;
function init() {
let numOfFireworks = 20;
for (let i = 0; i < numOfFireworks; i++) {
fireworks.push(new firework(rndNum(canvas.width), canvas.height));
}
}
function update(time) {
for (let i = 0, len = fireworks.length; i < len; i++) {
let p = fireworks[i];
p.update(time);
}
}
function draw(time) {
update(time);
ctx.fillStyle = 'rgba(0,0,0,0.3)';
if (flash) {
flash = false;
}
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.font = "30px Segoe UI";
let newTime = time - snapTime;
snapTime = time;
ctx.fillStyle = 'blue';
for (let i = 0, len = fireworks.length; i < len; i++) {
let p = fireworks[i];
if (p.finish) {
fireworks[i] = new firework(rndNum(canvas.width), canvas.height);
p = fireworks[i];
p.start = time;
}
p.draw();
}
window.requestAnimationFrame(draw);
}
window.addEventListener('resize', function() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
});
init();
draw();
</script>
</body>
</html>
<html>
<head>
<body>
<body bgcolor="black"><center><br>
<font face="Abel" size="6px" color="grey"><b></b>
<br><font size="3px">
<font color="white">[ </font><marquee scrollamount="5" width="630" height="20" behavior="alternate">Selamat ulang tahun Dek. Semoga panjang umur, murah rejeki, dan sehat selalu.</marquee><font color="white"> ]</font>
<br><br><font size="3px" face="Ubuntu Condensed">
</body>
</font>
Itulah contoh script HTML bucin ulang tahun yang bisa dipakai oleh programmer pemula. Semoga bermanfaat.
(IPT)
Frequently Asked Question Section
Apa itu HTML?
Apa itu HTML?
HTML atau Hypertext Markup Language merupakan komponen penting yang digunakan untuk membuat struktur halaman situs web.
Apa fungsi HTML?
Apa fungsi HTML?
HTML memiliki banyak fungsi, yaitu membuat situs web dengan multimedia, diaplikasikan dengan bahasa pemrograman lain, dan mampu menavigasi halaman situs web dengan hyperlink.
Script HTML dibuat di mana?
Script HTML dibuat di mana?
Script HTML bisa dibuat pada aplikasi editor HTML dan disimpan dalam format .html atau .htm.