Assalamu'alaikum, hallo semuanya! Kembali lagi dengan saya Fadli Mahesa, seorang siswa yang bersekolah di SMKN 4 Bandung dan duduk di bangku kelas XI RPL 3. Kali ini saya akan membagikan lagi sedikit ilmu di dunia percodingan, yaitu tentang CSS untuk bagian form dan video, juga pemahaman Javascript dasar. Mari kita bahas !
A. CSS Untuk Form
Syntax (HTML) Pembuatan CSS Untuk Form :
<html>
<head>
<title>Pengaturan Pada Form Text Area, by Fadli Mahesa</title>
<link href="CssOnForm.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<form name="form1"><table>
<tr>
<td>Nama</td>
<td width="15"><textarea name="textarea" cols="50"></textarea></td>
</tr>
<tr>
<td width="100">Pesan</td>
<td width="15"><textarea name="textarea" cols="50" rows="14"></textarea></td>
</tr>
<tr>
<td width="58">Username</td>
<td width="230"><input type="text" name="nama"></td>
</tr>
<tr>
<td>Password</td>
<td width="230"><input type="password" name="password"></td>
</tr>
</table>
</form>
</body>
</html>
Syntax (CSS) Pembuatan CSS Untuk Form :
td {
color : GhostWhite;
}
form{
border : 2px solid navy;
width : 60%;
margin-left : 0;
background-color : DarkSlateGray;
color : Ivory;
font-family : Aileron Heavy, ArgentSans-Bold;
}
textarea {
color : GhostWhite;
background-color : MidnightBlue;
font-family : Arial Narrow;
}
input {
color : mintcream;
background : midnightblue;
border-color : navy;
border-bottom-color : black;
border-top : 0px solid;
border-bottom : 2px dotted;
border-left : 0px solid;
border-right : 0px solid;
font-family : Arial Narrow;
font-size : 11px;
}
body {
background-color: plum;
}
Hasil
B. CSS Untuk Video
Syntax (HTML) Pembuatan CSS Untuk Video :
<html>
<head>
<title>Testing Video CSS, by Fadli Mahesa</title>
<link href="vidcss.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<h1>Ini Video Offline</h1>
<video controls="controls">
<source src="Media/G-DRAGON MV.mp4" type="video/mp4" />
Your browser doesn't support the video tag.
</video>
<h1>Ini Video Online</h1>
<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/IanxTQ6ay3c" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Syntax (CSS) Pembuatan CSS Untuk Video :
h1 {
color: RebeccaPurple;
text-align: center;
font-family: Impact, Consolas;
}
video {
display: block;
margin: 0 auto;
width: 500px
height: 400;
}
.videoWrapper {
position : relative;
padding-bottom: 56.25%;
padding-top:25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
}
Hasil
Challenge CSS
Syntax (HTML) :
<html>
<head>
<title>Challenge Fieldset with Form, by Fadli Mahesa</title>
<link href="challenge.css" rel="stylesheet" type="text/css">
</head>
<body>
<fieldset action="formform">
<legend><strong>Pendaftaran Anggota English Club</strong></legend>
<table align="center">
<tr>
<td>Nama Lengkap</td>
<td width="15"><textarea name="textarea" cols="30" rows="1"></textarea></td>
</tr>
<tr>
<td>No. Induk Siswa</td>
<td width="15"><textarea name="textarea" cols="30" rows="1"></textarea></td>
</tr>
<tr>
<td>Kelas</td>
<td>
<input type="radio" name="kelas">X
<input type="radio" name="kelas">XI
<input type="radio" name="kelas">XII
</td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>
<input type="date">
</td>
</tr>
<tr>
<td>
<button>Book</button>
<button>Cancel</button>
</td>
</tr>
</table>
</fieldset>
</body>
</html>
Syntax (CSS) :
fieldset{
border: purple dotted;
background-color: RebeccaPurple;
}
legend {
font-size: 20px;
background-color:purple;
color: snow;
}
textarea, input{
border-color: MidnightBlue;
font-family: Cambria;
}
table {
border-spacing: 20px;
}
td {
color : snow;
}
button:hover {
background-color: red;
color : black;
background-color: white;
}
body {
font-family: cambria;
background-image: url(Media/pixels10.gif);
background-attachment: fixed;
background-size: cover;
}
Hasil
JAVASCRIPT
Apa itu Javascript?
Javascript adalah bahasa pemograman yang memberi kita kemampuan untuk menginplementasikan fitur yang kompleks pada website yang kita buat.
Javascript dan Java, apakah memiliki perbedaan?
Jelas memiliki perbedaan, mari kita lihat ada perbedaan apa saja diantara mereka.
Jenis - jenis penggunaan JS
1. Inline
Didalam file html yang sama dan pada masing - masing tagnya. Mari kita lihat contohnya!
Syntax(HTML) Pembuatan Js Inline 1:
<html>
<head>
<title>Contoh JS In, by Fadli Mahesa</title>
</head>
<body>
<script language="javascript">
alert("Punten World!")
</script>
</body>
</html>
Hasil 1
Syntax(HTML) Pembuatan Js Inline 2 :
<html>
<head>
<title>JS Variables, by Fadli Mahesa</title>
</head>
<body>
<h1>Javascript Variables 01</h1>
<p>pada contoh ini x, y, & z yada yada variable</p>
<p id="demo"></p>
<script type="text/javascript">
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Hasil 2
<html>
<head>
<title>JS Variables, by Fadli Mahesa</title>
</head>
<body>
<h1>Javascript Variables 02</h1>
<p id="demo"></p>
<script>
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
document.getElementById("demo").innerHTML ="Totalnya Adalah: " +total;
document.getElementById("demo").innerHTML ="Totalnya Adalah: " +total;
</script>
</body>
</html>
Hasil 3
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VariableONJSWithTypeData, by Fadli Mahesa</title>
</head>
<body>
<h1>Javascript variables dengan tipe data </h1>
<p>Deklarasi string harus dengan tada kutip</p>
<p>Deklarasi Angka tidakperlu disertai kutip</p>
<p>Cobalah dengan tanda komentar</p>
<p id="demo"></p>
<script>
var pi = 3.14;
var person = "John Doe";
var anwser = 'Yes I am';
// document.getElementById("demo").innerHTML = pi
document.getElementById("demo").innerHTML = person
// document.getElementById("demo").innerHTML = anwser
</script>
</body>
</html>Hasil 4
2. External
Diluar file HTML, bisa digunakan di berbagai file HTML, dengan format "file.js". Mari kita lihat contohnya!
Syntax (HTML) Pembuatan Js External :
<html>
<head>
<title>Contoh JS Ext, by Fadli Mahesa</title>
</head>
<body>
<p id="cing">Mencoba
<script src="hellokamu.js"></script></p>
</body>
</html>
Syntax (Js) Pembuatan Js External :
alert('Yooooooooowasaaaaaap aku dari eksternal katanya!')
Hasil
QUIZ JAVASCRIPT
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator by Fadli Mahesa</title>
<style>
input{
border: none;
font-size: 16px;
}
input.isi{
border-bottom: 1px solid black;
background: white;
outline: none;
padding-top: 8px;
}
input.isi:hover{
background-color: rgb(224, 224, 224);
}
input.isi:hover{
background-color: white;
}
select{
border: 0.5px transparent ;
border-radius: 100px;
outline: none;
padding: 3px 6px ;
appearance: none;
font-size: 16px;
font-weight: 600;
}
select:hover{
background-color: rgb(243, 243, 243);
}
.submit{
background-color: rgb(165, 165, 165);
border: 1px thin black;
border-radius: 30px;
cursor: pointer;
outline: none;
}
option{
margin: auto;
}
h4{
text-align : center;
font-family : Aileron Heavy, ArgentSans-Bold;
color : Midnightblue;
}
p{
text-align : center;
font-family : Aileron Thin, ArgentSans-Thin;
color : Midnightblue;
}
.box-calculator{
width: 50%;
height: 50%;
margin: auto;
position: relative;
}
</style>
</head>
<body>
<h4>Kalkulator 1.0</h4>
<p>Klik tanda "+" untuk memilih Operasi Arimatika lainnya.</p>
<div class="box-calculator">
<input type="text" id="angkaSatu" class="isi">
<select id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="x">x</option>
<option value="/">/</option>
</select>
<input type="text" id="angkaDua" class="isi">
<input type="submit" onclick="kalkulator()" value="=">
<input type="text" class="isi disabled" id="hasil" disabled>
</div>
<script language="JavaScript" type="text/javascript">
function kalkulator() {
//variable angka satu
var angkaSatu = parseInt(document.getElementById("angkaSatu").value);
//variable angka dua
var angkaDua = parseInt(document.getElementById("angkaDua").value);
//variable operasi aritmatik
var op = document.getElementById("op").value;
//variable angka hasil
var hasil = document.getElementById("hasil");
//variable untuk total angka satu dan angka dua
var total;
//isNaN berfungsi untuk mendeteksi apakah input berupa teks atau bilangan
if (isNaN(angkaSatu) || isNaN(angkaDua)) {
alert('isi form dengan angka!')
} else {
if (op == "+") {
total = angkaSatu + angkaDua;
} else if (op == "-") {
total = angkaSatu - angkaDua;
} else if (op == "x") {
total = angkaSatu * angkaDua;
} else {
total = angkaSatu / angkaDua;
}
}
hasil.value = total;
}
</script>
</body>
</html>
Hasil
0 komentar: