Belajar HTML 1 Praktikum

Details
Category: Informatika
Hits: 3360

Praktek HTML

 

Tugas 1: Membuat biodata dengan skrip HTML (tag: html, head, body, br)

<HTML>
<head></head>
<body>
Tugas HTML 1<br>
Nama: Nama Lengkap<br>
Absen: 20<br>
Kelas: 8A<br>
Hobi: Membaca<br>
Cita-cita: Ustad

</body>
</html>

Tugas 2: Membuat biodata dengan skrip HTML (tag: marquee, font color size)

<HTML>
<head><title>Html2</title></head>
<body>
<p><font color="red" size=6><marquee>
Tugas HTML 2</marquee></font></p>
<font color="orange">Nama: Nama Lengkap</font><br>
<font color="yellow">Absen: 20</font><br>
<font color="green">Kelas: 8B</font><br>
<font color="cyan">Hobi: Membaca</font><br>
<font color="magenta">Cita-cita: Ustad</font>

</body>
</html>

Tugas 3: Membuat biodata dengan Javascript pada skrip HTML (variable, document.write)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Variabel dalam Javascript</title>
</head>
<body>

<script>
// membuat variabel
var name_lengkap = "Nama Lengkap";
var kelas = "8H";
var no_absen = 1;
var hobi = "Membaca";
var cita_cita = "Ustad";


// menampilkan variabel ke dalam HTML
document.write("<h1>Biodata " + name_lengkap + "</h1>");
document.write("Nama Lengkap: " + name_lengkap + "<br>");
document.write("Kelas: " + kelas + "<br>");
document.write("Nomor Absen: " + no_absen + "<br>");
document.write("Hobi: " + hobi + "<br>");
document.write("Cita Cita: " + cita_cita + "<br>");

</script>
</body>
</html>

 

Tugas 4: Membuat biodata dengan Javascript pada skrip HTML secara berulang(while)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Variabel dalam Javascript</title>
</head>
<body>

<script>
// membuat variabel
var name_lengkap = "Nama Lengkap";
var kelas = "8H";
var no_absen = 1;
var hobi = "Membaca";
var cita_cita = "Ustad";
var x = 0;


// menampilkan variabel ke dalam HTML

while (x < 10)
  {
  x++;
  document.write("<h1>"+ x +" Biodata " + name_lengkap + "</h1>");
  document.write("Nama Lengkap: " + name_lengkap + "<br>");
  document.write("Kelas: " + kelas + "<br>");
  document.write("Nomor Absen: " + no_absen + "<br>");
  document.write("Hobi: " + hobi + "<br>");
  document.write("Cita Cita: " + cita_cita + "<br>");

  }

</script>
</body>
</html>

Penilaian Tengah Semester (PTS), kerjakan tes.btik.web.id

Tugas 5: Menggambar dengan menggunakan Canvas pada skrip HTML (create, getContext, fillStyle, fillRect, document.body)

<!DOCTYPE html>
<html>
<head>
<title>Tugas HTML 5</title>
</head>
<body>
Tugas HTML 5<br>
<h1>Tugas HTML 5</h1>
<h1>Menggambar Dengan Javascript</h1>
Nama: Nama Lengkap<br>
Absen: 20<br>
Kelas: 8H<br>
Hobi: Membaca<br>
Cita-cita: Ustad<br>

<script>
  var x = document.createElement("CANVAS");
  var ctx = x.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 250, 100);
  document.body.appendChild(x);
  var x = document.createElement("CANVAS");
  var ctx = x.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(20, 20, 250, 100);
  document.body.appendChild(x);
</script>
</body>
</html>

Tugas 6: Menggambar dengan menggunakan Canvas pada skrip HTML (moveTo, lineTo, stroke)

<!DOCTYPE html>
<html>
<head>
<title>Tugas HTML 6</title>
</head>
<body>
Tugas HTML 6<br>
<h1>Tugas HTML 6</h1>
<h1>Menggambar Dengan Javascript</h1>
Nama: Nama Lengkap<br>
Absen: 20<br>
Kelas: 8H<br>
Hobi: Membaca<br>
Cita-cita: Ustad<br>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid black;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,20);
ctx.stroke();
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();
</script>

</body>
</html>