#11 Intermediate Web | Web Programming Tutorial ~ Angga Gemilang Blog

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, mengapa tidak lagi bereada di level begginer? karena mulai sekrang kita akan mulai untuk memasuki materi CSS. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Untuk penjelasannya, saya akan menjelaskan materi tentang CSS dari paling dasar, Yang pada postingan ini saya akan menjelaskan seluk beluk tentang css multimeda. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 7 bab yang akan kita pelajari, yaitu:

ExtCSSonForm1
ExtCSSonForm2
ExtCSSonForm3
ExtCSSonButton
ExtCSSonButtonHover
ExtCSSonButtonRadio
Quiz

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

ExtCSSonForm1
Penjelasannya...

Pada bab ke satu ini, menjelaskan tentang pembuatan form versi satu, tidak terlalu modern & menarik, namun lumayan untuk dipelajari.

untuk file CSSnya kita inputkan href file yang bernama "cssOnForm.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="cssOnForm.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Pengaturan Pada Form Text Area</title>
	<link rel="stylesheet" type="text/css" href="cssOnForm.css">
</head>
<body>
	<form name="form1" method="post" action="">
		<table>
			<tr>
				<td width="50">Nama</td>
				<td width="175">
					</textarea name="textarea" cols="50"></textarea>	
				</td>
			</tr>
			<tr>
				<td width="50">Pesan</td>
				<td width="175">
					<textarea name="textarea" cols="50" rows="14"></textarea>	
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS :

form{
	border:2px solid Yellow;
	width: 70%;
	margin-left: 0;/*jarak fieldset dari batas kiri layout */
	background-color: Green;
	color: Pink;
	font-family: Arial Narrow;
}
body{
	background-color: Salmon ;
}

Hasil Dari Pengerjaan ExtCSSonForm1 :

ExtCSSonform2
Penjelasannya...

Pada bab kedua ini, menjelaskan tentang pembuatan form versi kedua, tidak terlalu modern & menarik, namun lumayan untuk dipelajari.

untuk file CSSnya kita inputkan href file yang bernama "cssonform2.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="cssonform2.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Ganteng</title>
	<link rel="stylesheet" type="text/css" href="cssonform2.css">
</head>
<body>
	<form name="form1" method="post" action="index.html">
		<table bordercolor="1">
			<tr>
				<td width="50">Nama</td>
				<td width="175">
					<textarea name="textarea" cols="50"></textarea>
				</td>
			</tr>
			<tr>
				<td width="50">Pesan</td>
				<td width="175">
					<textarea name="textarea" cols="50" rows="14"></textarea>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS :

body
{
	background: pink;
	color: red;
	font: impact;
}
textarea
{
	color: yellow;
	background: blue;
	font-family: Arial;
}

Hasil Dari Pengerjaan ExtCSSonForm2 :

ExtCSSonForm3
Penjelasannya...

Pada bab ketiga ini, menjelaskan tentang pembuatan form versi ketiga, tidak terlalu modern & menarik, namun lumayan untuk dipelajari.

untuk file CSSnya kita inputkan href file yang bernama "cssOnForm3.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="cssOnForm3.css"></link>

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Pengaturan pada Form</title>
	<link rel="stylesheet" type="text/css" href="cssOnForm3.css"></link>
</head>
<body>
	<form name="form1" method="post" action="">
		<table>
			<tr>
				<td width="58">Nama</td>
				<td width="230">:
					<input type="text" name="nama">
				</td>
			</tr>
			<tr>
				<td width="58">Alamat</td>
				<td width="230">:
					<input type="text" name="alamat">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS :

input{
	color: red;
	background: yellow;
	border-color: green;
	border-bottom-color: black;
	border-top: 0px solid;
	border-bottom: 2px dotted;
	border-left: 0px solid;
	border-right: 0px solid;
	font-family: consolas;
	font-size: 11px;
}

Hasil Dari Pengerjaan ExtCSSonForm3

ExtCSSonButton
Penjelasannya...

Pada bab keempat ini, menjelaskan tentang pembuatan sebuah form dengan menggunakan input text dan submit. hanya menggunakan sedikit style yakni untuk megganti warna background, padding dan margin button, dll. overall merupakan default html

untuk file CSSnya kita inputkan href file yang bernama "extCSSonbutton.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="extCSSonbutton.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
	<link rel="stylesheet" type="text/css" href="extCSSonbutton.css">
</head>
<body>
	<form name="form1" method="post" action="index.html">
		<table>
			<tr>
				<td width="50">Nama</td>
				<td width="230"><input type="text" name="Nama"></td>
			</tr>
			<tr>
				<td width="50">Alamat</td>
				<td><input type="text" name="alamat"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" name="button" value="Submit"></td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS :

body
{
	background: lightcoral;
}
input.button
{
	color: salmon;
	background: lightblue;
	border-color: white;
	border-bottom-color: black;
	border-top: 1px dotted;
	border-bottom: 1px solid;
	border-left: 1px dotted;
	border-right: 2px dotted;
	font-family: verdana;
	font-size: 12px;
}

Hasil Dari Pengerjaan ExtCSSonButton :

ExCSSonButtonHover
Penjelasannya...

Pada bab ke kelima ini, menjelaskan tentang pembuatan form defaul html namun dibantu dengan sedikit style dari hover CSS. hover sendiri merupakan salah satu dari sekian banyak atrbiut dari css, yang berguna untuk mengubah atau mengganti sesuatu dari mouse cursor yang kita arahkan

untuk file CSSnya kita inputkan href file yang bernama "cssOnButtonHover.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="cssOnButtonHover.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Pengaturan Pada Form Tombol Hover</title>
	<link rel="stylesheet" type="text/css" href="cssOnButtonHover.css">
</head>
<body>
<form name="form1" method="post" action="">
	<table>
		<tr>
			<td width="58">Nama</td>
			<td width="230">:<input type="text" name="nama"></td>
		</tr>
		<tr>
			<td width="58">Alamat</td>
			<td width="230">:<input type="text" name="alamat"></td>
		</tr>
		<tr>
			<td></td>
			<td><input class="button" type="submit" name="Submit" value="Simpan"><input class="button" type="submit" name="Submit2" value="Submit"><br><br><a href="ExtCssOnButton.html" class="linknya">Kembali</a></td>
		</tr>
	</table>
</form>
</body>
</html>

CSS :

body
{
	background: lightcoral;
}
input.button
{
	color: salmon;
	background: lightblue;
	border-color: white;
	border-bottom-color: black;
	border-top: 1px dotted;
	border-bottom: 1px solid;
	border-left: 1px dotted;
	border-right: 2px dotted;
	font-family: verdana;
	font-size: 12px;
}

Hasil Dari Pengerjaan ExtCSSonButtonHover :

ExtCSSonButtonRadio
Penjelasannya...

Pada bab keenam ini, menjelaskan tentang pembuatan form dengan menggunakan input radio. tidak terlalu modern. basicly merupakan tag bawaan html.

untuk file CSSnya kita inputkan href file yang bernama "extCSSonRadioButton.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="extCSSonRadioButton.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
	<link rel="stylesheet" type="text/css" href="extCSSonRadioButton.css">
</head>
<body>
	<form name="form1" method="post" action="index.html" class="f1">
		<table bordercolor="1">
			<tr width="120">
				<td width="58">Kelamin</td>
				<td width="150">
					<input type="radio" name="radiobutton" value="radiobutton" class="rb1">Pria/Male
				</td>
			</tr>
			<tr>
				<td width="58"> </td>
				<td width="150" class="k1">
					<input type="radio" name="radiobutton" value="radiobutton" class="rb2">Wanita/Female
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS :

input.rb1
{
	color: black;
	background: dodgerblue;
	border-color: lime;
	font-family: verdana;
	font-size: 12px;
}
input.rb2
{
	color: red;
	background: coral;
	border-color: yellow;
	font-family: verdana;
	font-size: 12px;
}
td
{
	color: midnightblue;
	background: bisque;
	border-color: yellow;
	font-family: verdana;
	font-size: 12px;
}
form.f1
{
	background: sienna;
}

Hasil Dari Pengerjaan ExtCSSonButtonRadio :

Quiz
Penjelasannya...

Nah, pada bab ketujuh alias bab terakhir ini, menjelaskan tentang pembuatan sebuah form yang saya buat sendiri, lumayan modern, colorful dan menarik. form ini dibuat dengan menggunakan tag <fieldset> dan tag <legend> yang digunakan untuk membuat border dengan sedikit tambahan fitur jika dibandingkan dengan border biasa.

untuk file CSSnya kita inputkan href file yang bernama "cssonform2.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="quiz.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
	<link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
<div class="separator">	
	<fieldset>
		<legend>Formulir Pendaftaran Calon Peserta</legend>
			<form method="get" class="form1" name="form1">
				<table align="center">
					<tr>
						<td><label>Nama</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="Nama"></td>
					</tr>

					<tr>
						<td><label>No. Induk Penduduk</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="No. Induk Penduduk"></td>
					</tr>

					<tr>
						<td><label>Kelamin</label></td>
						<td><span style="font-size: 20pt;">:    </span><label class="container" class="lbl">Laki - Laki
 								<input type="radio" checked="checked" name="radio">
  								<span class="checkmark"></span>
							</label>
							<label class="container" class="lbl">Perempuan
  								<input type="radio" name="radio">
  								<span class="checkmark"></span>
							</label></td>
					</tr>

					<tr>
						<td><label class="ttl">Tempat Tanggal Lahir</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="ttl" class="Ttl"></td>
					</tr>

					<tr>
						<td><label>Agama</label></td>
							<td><span style="font-size: 20pt;">:    </span><select>
								<option>Agama</option>
								<option>Islam</option>
								<option>Kristen</option>
								<option>Buddha</option>
								<option>Hindu</option>
								<option>Konghucu</option>
							</select></td>
					</tr>

					<tr>
						<td><label>Status</label></td>
							<td><span style="font-size: 20pt;">:    </span><select>
								<option>Status</option>
								<option>Kawin</option>
								<option>Jomblo</option>
							</select></td>
					</tr>
				</table>
				<table align="center"> 
					<tr>
						<td><input type="submit" name="Browse" value="Browse" class="sbmt1"></td>
						<td><input type="submit" name="Submit" value="Submit" class="sbmt2"></td>
					</tr>
				</table>
		</form>
	</fieldset>
</div>
</body>
</html>

CSS :

		body
		{
			background: #33bcdc;
		}
		.separator
		{
			width: 60%;
			height: 60%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 2px solid #33bcdc;
		}
		fieldset
		{
			border-top: 3px dashed green;
			border-bottom: 2px dashed blue; 
			border-left: 3px dashed blue;
			background: #fff;
			box-shadow: 0 10px 30px rgba(0,0,0,.8); 
			border-radius: 10px;
			border-right: 2px dashed green;
		}
		legend
		{
			padding: 15px 25px;
			font-weight: bold;
			font-family: arial;
			background: #046f88;
			font-size: 13pt;
			text-transform: uppercase;
			color: #fff;
			border-radius: 10px;
		}
		table{
			width: 100%;
		}
		input[type="text"]
		{
			border: 2px solid green;
			width: 60%;
			padding: 3px 10px;
			border: none;
			border-bottom: 2px solid #ababab;
			height: 25px;
			font-size: 20pt;
			background: #fff;
			transition: .5s;
		}	
		input[type="text"]:focus
		{
			border-bottom: 2px solid #000;
		}
		label
		{
			font-size: 18pt;
			text-transform: uppercase;
		}
		table tr td
		{
			padding: 15px;
		}
		table tr td:first-child
		{			
			padding-left: 15%;
			width: 50%;
		}
		table tr td:last-child
		{
			width: 50%;
		}
		input[type="submit"]
		{
			margin-left: 20%;
			padding: 5px 10px;
			text-align: center;
			align-items: center;
			align-content: center;

		}
		.container {
   			position: relative;
    		        padding-left: 35px;
    		        margin-bottom: 12px;
    		        cursor: pointer;
    		        font-size: 22px;
    		        user-select: none;
		}
		.container input {
    		        position: absolute;
    		        opacity: 0;
    		        cursor: pointer;
		}
		.checkmark {
    		        position: absolute;
	    	        top: 0;
    		        left: 0;
  			height: 25px;
   	 		width: 25px;
    		        background-color: #eee;
    		        border-radius: 50%;
		}
		.container:hover input ~ .checkmark {
    		        background-color: #ccc;
		}
		.container input:checked ~ .checkmark {
    		        background-color: #2196F3;
		}
		.checkmark:after {
    		        content: "";
    		        position: absolute;
    		        display: none;
		}
		.container input:checked ~ .checkmark:after {
    		        display: block;
		}
		.container .checkmark:after {
 			top: 9px;
			left: 9px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: white;
		}
		select
		{
			border: 2px solid #5299d3;
			background: #5299d3;
			cursor: pointer;
			font-size: 12pt;
			color: #fff;
			width: 30%;
			text-transform: uppercase;
			padding: 10px 20px;
		}
		option
		{
			background: #90bee3;
			color: #000;
		}
		input[type="submit"]
		{
			padding: 10px 15px;
			background: #046f88;
			cursor: pointer;
			color: #fff;
			font-weight: bold;
			border-radius: 10px;
			transition: .5s;
			text-transform: uppercase;
			font-size: 13pt;
			margin-top: 3%;
		}
		input.sbmt1
		{
			margin-left: 70%;
		}
		input.sbmt2
		{
			margin-left: 2%;
			margin-top: 14px;
		}
		input[type="submit"]:hover
		{
			background: #5299d3;
			color: #000;
		}

Hasil Dari Pengerjaan Quiz :

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #3 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

Angga Gemilang Blog

Sabtu, 01 September 2018

#11 Intermediate Web | Web Programming Tutorial

Assalamualaikum wr, wb

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

0 komentar:

Posting Komentar

Follow Me

Clock

Calendar

Popular Posts

Blog Archive

About Me

Sent Quick Message

Translate

Translator's Flag

SMK Negeri 4 Bandung

Pesan Dari Admin

About