Pengertian Hardware dan Software
1. Membuat Web Blog dengan postingan materi dibawah ini
Klik Materi Blog kalian salin dan pindahkan materi berikut ini ke blog kalian yang sudah jadi
2. Membuat Kalkulator : Copy kan HTML berikut ini ke Blog kalian
<html>
<head>
<script>
function dis(val)
{
document.getElementById("result").value+=val
}
function solve()
{
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
}
function clr()
{
document.getElementById("result").value = ""
}
</script>
<!-- Style Kalkulator -->
<style>
table{
border-radius: 2%;
box-shadow: 0px 6px 12px #000;
}
tr{
border-radius: 7%;
}
td{
width: 60px;
border-radius: 7%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
color: aliceblue;
font-weight: bold;
}
input[type="button"]
{
height: 50px;
background-color:rgb(23, 167, 23);
color: white;
font-weight: bold;
font-size: 22px;
width:100%
}
.title{
margin-bottom: 10px;
height: 70px;
text-align:center;
border-radius: 2%;
background-color:rgb(23, 167, 23);
width: 210px;
color:white;
}
input[type="text"]
{
font-size: 22px;
border-radius: 7%;
background-color:white;
height: 50px;
width:100%
}
input[type="button"].ekor{
background-color:rgb(218, 23, 23);
}
input[type="button"].kode{
background-color:rgb(243, 170, 13);
}
</style>
</head>
<body bgcolor="grey">
<table align="center" border="5" width="330px">
<tr>
<td colspan="4" class="title">Praktik kelas 8</td>
</tr>
<tr>
<td colspan="3"><input type="text" id="result"/></td>
<td><input class="ekor" type="button" value="C" onclick="clr()"/> </td>
</tr>
<tr>
<td><input type="button" value="1" onclick="dis('1')"/> </td>
<td><input type="button" value="2" onclick="dis('2')"/> </td>
<td><input type="button" value="3" onclick="dis('3')"/> </td>
<td><input class="kode" type="button" value="+" onclick="dis('+')"/> </td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"/> </td>
<td><input type="button" value="5" onclick="dis('5')"/> </td>
<td><input type="button" value="6" onclick="dis('6')"/> </td>
<td><input class="kode" type="button" value="-" onclick="dis('-')"/> </td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"/> </td>
<td><input type="button" value="8" onclick="dis('8')"/> </td>
<td><input type="button" value="9" onclick="dis('9')"/> </td>
<td><input class="kode" type="button" value="/" onclick="dis('/')"/> </td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/> </td>
<td><input type="button" value="0" onclick="dis('0')"/> </td>
<td><input class="ekor" type="button" value="=" onclick="solve()"/> </td>
<td><input class="kode" type="button" value="x" onclick="dis('*')"/> </td>
</tr>
</table>
</body>
</html>3. Membuat Bacaan Berjalan : Copy kan HTML berikut ini dan ganti bacaan berjalan yang kalian inginkan
<marquee>Ini Tulisan Berjalan</marquee>
<marquee scrolldelay="700">Ini Tulisan Berjalan</marquee>
<marquee scrolldelay="700" title="Ini Muncul Saat Hover">Ini Tulisan Berjalan</marquee>
<marquee scrolldelay="700" title="Ini Muncul Saat Hover" behavior="slide">Ini Tulisan Berjalan</marquee>
<marquee title="Ini Muncul Saat Hover" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()" direction="right"><a href="https://posciety.com" target="_blank">Ini Tulisan Berjalan</a></marquee>
4.Membuat jam dinding atau jam digital: copykan HTML dibawah ini
<!DOCTYPE html>
<html>
<body>
<canvas id="mycanvas" width="400" height="400"
style="background-color:#0fff">
</canvas>
<script>
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(gambarjam, 1000);
function gambarjam() {
drawFace(ctx, radius);
angkajam(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#00ff');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#00ff');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#00ff';
ctx.fill();
}
function angkajam(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
jarumjam(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
jarumjam(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
jarumjam(ctx, second, radius*0.9, radius*0.02);
}
function jarumjam(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Atribut Width dan Height di Tag Marquee</title> </head> <body> <marquee width="500" height="40">Teks ini berjalan</marquee> </body> </html>
<!DOCTYPE html> <html> <head> <title>Default Width dan Height di Tag Marquee</title> </head> <body> <marquee>Teks ini berjalan</marquee> </body> </html>
<!DOCTYPE html> <html> <head> <title>Atribut Direction di Tag Marquee</title> </head> <body> <marquee direction="right">Teks ini ke kanan</marquee> <marquee direction="left">Teks ini ke kiri</marquee> </body> </html>
<!DOCTYPE html> <html> <head> <title>Atribut Direction di Tag Marquee</title> </head> <body> <marquee direction="up" height="50">Teks ini bergerak dari bawah ke atas</marquee><br> <marquee direction="down" height="50">Teks ini bergerak dari atas ke bawah</marquee> </body> </html>
<!DOCTYPE html> <html> <head> <title>Atribut Behavior di Tag Marquee</title> </head> <body> <marquee behavior="scroll" width="400">Welcome</marquee><br> <marquee behavior="slide" width="400">Welcome</marquee><br> <marquee behavior="alternate" width="400">Welcome</marquee><br> </body> </html>
Pengertian Hardware dan Software 1.Pengertian Hardware (Perangkat Keras) Hardware adalah komponen perangkat keras, yang terdapat pada suat...
