Angga Gemilang

Nama Saya Angga Gemilang~~~
Kelas X-RPL 1

Saya adalah siswa di kelas X (10) - RPL 1 di SMK Negeri 4 Bandung.
SMK Negeri 4 Bandung

Saya Bersekolah di SMK Negeri 4 Bandung yaang beralamat di Jalan Kliningan No.6, Turangga, Lengkong, Turangga, Lengkong, Kota Bandung, Jawa Barat 40264
Blogger

Sublime better than CMS

Kamis, 30 Agustus 2018

#10 Intermediate Web | Web Programming Tutorial

Agustus 30, 2018 Angga Gemilang No comments Edit

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 11 bab yang akan kita pelajari, yaitu:

EmbedImageCSS
External Image .css & .html
inlinecssforbimage
EmbCSSforBgImage
EmbBgImageAsImage
EmbVideo
EmbVideoYoutube
eXTtablewithcss
eXTtablewithcss2
eXTtablewithcss3
Tugas Mandiri

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

EmbedImageCSS
Penjelasannya...

Nah untuk bab yang ini, digunakan embeded css yang artinya cssnya bersatu dengan html dalam satu file. pertama tama kita inputkan dulu <img> pada file html didalam <body>, lalu lakukan styling pada css tersebut.

<html>
	<head>
	<title>Angga Gemilang Ganteng</title>
	</head>
	<style type="text/css">
		body 
		{
			background: linear-gradient(-45deg, cyan, blue);
			height: 100%;
			overflow-y: hidden;
		}
		h1
		{
			color: #fff;
		}
		img.lg1{
			margin-top: 10px;
			float: left;
			clear: both;
			width: 250px;
			height: 188.5px;
		}
		img.lg2{
			margin-top: 5px;
			float: right;
			clear: both;
			width: auto;
			height: auto;
			border: solid;
			border-color: purple;
		}
		img.lg3{
			margin-top: 10px;
			float: right;
			clear: both;
			width: auto;
			height: auto;
		}
	</style>
	<body>
			<h1>Contoh embedded CSS pada gambar</h1>
			<img class="lg1" src="logo1.png"/>
			<img class="lg2" src="logo2.png"/>
			<img class="lg3" src="logo3.png"/>
	</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

External Image .css & .html
Penjelasannya...

Nah untuk bab yang ini, isi codingan dari project ini kurang lebih sama, namun hanya ditambahkannya tag <link> untuk memanngil file css yang dibuat secara terpisah dari file htmlnya.

Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya. Ada beberapa cara memasukkan kode CSS dari berkas eksternal: Pertama menggunakan tag link

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

HTML :

<!DOCTYPE html>
<html>
	<head>
	<title>Angga Gemilang Ganteng</title>
        <link rel="stylesheet" type="text/css" href="extimg.css">
	</head>
	<body>
		<h1>Contoh embedded CSS pada gambar</h1>
		<img class="lg1" src="logo1.png"/>
		<img class="lg2" src="logo2.png"/>
		<img class="lg3" src="logo3.png"/>
	</body>
</html>

CSS :

		body
		{
			background: linear-gradient(-45deg, cyan, blue);
			height: 100%;
			overflow-y: hidden;
		}
		h1
		{
			color: #fff;
		}
		img.lg1{
			margin-top: 10px;
			float: left;
			clear: both;
			width: 250px;
			height: 188.5px;
		}
		img.lg2{
			margin-top: 5px;
			float: right;
			clear: both;
			width: auto;
			height: auto;
			border: solid;
			border-color: purple;
		}
		img.lg3{
			margin-top: 10px;
			float: right;
			clear: both;
			width: auto;
			height: auto;
		}

Hasil Dari Pengerjaan Embedded CSS :

inlinecssforbimage
Penjelasannya...

Sedangkan untuk inline sendiri, kita tinggal memasukkan styling tersebut pada masing - masing tag yang akan kita suka untuk diubah atau diedit

<!DOCTYPE html>
<html>
	<head>
	<title>Angga Gemilang</title>
	</head>
	<body style="background: url('bg2.jpg'); background-size: cover;">
			<h1 style="color: #fff;">Hello World!</h1>
			<p align="center" style="color: green; font-family:Impact; font-size:24px; background-color:Yellow;">
					Hello World! Ini adalah penggunaan Inline...
			</p>
	</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

EmbCSSforBgImage
Penjelasannya...

<!DOCTYPE html> 
<html>
	<head>
	<title>Angga Gemilang</title>
	</head>
	<style type="text/css">
		.main{
			font-family: Verdana;
			font-size: 30pt;
			color: Red;
			text-shadow: 2 2 2 red;
			background-image:url('bg2.jpg');
			width: 1920px;
			height: 1080px;
		}
		.main p
		{
			position: absolute;
			top: 40%;
			text-align: center;
		}
	</style>
	<body>
			<div class="main">
				<p>Width sama Height foto sebenarnya 1720x1280 px tapi karena di css ditulis 1920x1080 px maka hasilnya bakal kayak gini....</p>
			</div>
	</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

EmbBgImageAsImage
Penjelasannya...

<!DOCTYPE html>
<html>
	<head>
	<title>Angga Gemilang</title>
	</head>
	<style type="text/css">
		#first	{
			background-image: url('logo1.png');
			background-repeat: repeat-x;
			height: 150px;
			background-position: left top;
			padding-top: 230px;
			margin-bottom: 50px;
		}
		#second	{
			background-image: url('logo2.png');
			background-repeat: no-repeat;
			background-position: right top;
			height: 180px;
			margin-top: -100px;
			padding-top: 240px;
		}
	</style>
	<body>
			<div id="first">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
			<div id="second">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
	</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

EmbVideo
Penjelasannya...

Penulisan pada HTML versi lengkapnya seperti ini :

<h2 style="color:red; font-family: sans;">
<html>
	<head>
	<title>Angga Gemilangt</title>
	</head>
	<body>
			<h1 style="color:Red; text-align:Center;font-family:Consolas;">
				Ini Video Ku
			</h1>
			<video controls="controls" style="display:block;margin:0 auto; width: 640px;heigt:360px;">
				<source src="video.mp4" type="video/mp4"/>
			</video>
	</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

EmbVideoYoutube
Penjelasannya...

Penulisan pada HTML versi lengkapnya seperti ini :

<h2 style="color:red; font-family: sans;">
<!DOCTYPE html>
<html>
	<head>
	<title>Testing Youtube</title>
	</head>
	<style type="text/css">
		.video{
			position: relative;
			padding-bottom: 50%;	/*56.25%; 16:9 */
			padding-top: 25px;
			height: 0;
		}
		.video iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
	<body>
			<div class="video">
				<iframe width="560" height="315" src="https://www.youtube.com/embed/Lrehv8gvXeg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
			</div>
	</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

eXTtablewithcss
Penjelasannya...

Penulisan pada HTML versi lengkapnya seperti ini :

HTML :

<!DOCTYPE html>
<html>
	<head>
	<title>Angga Gemilang</title>
	</head>
	<link rel="stylesheet" href="TabelCSS.css" type="text/css"/>
	<body>
			<table>
				<tr>
					<th>Nama Depan</th>
					<th>Nama</th>
				</tr>
				<tr>
					<td>Thom</td>
					<td>Yorke</td>
				</tr>
				<tr>
					<td>Vanessa</td>
					<td>Carlton</td>
				</tr>
				<tr>
					<td>Jonny</td>
					<td>Greenwood</td>
				</tr>
			</table>
	</body>
</html>

CSS :

table,th{
  border: 2px solid orchid;
  font-family: impact;
  color: violet;
  font-size: 24px;
}
td{
  border: 1px solid hotpink;
  font-family: arial narrow;
  color: orchid;
  font-size: 22px;
}

Hasil Dari Pengerjaan Embedded CSS :

eXTtablewithcss2
Penjelasannya...

Penulisan pada HTML versi lengkapnya seperti ini :

HTML :

<html>
	<head>
	<title>Angga Gemilang</title>
	</head>
	<link rel="stylesheet" href="TabelCSS2.css" type="text/css"/>
	<body>
		<table>
			<tr>
				<th>Nama Depan</th>
				<th>Nama Belakang</th>
				<th>Alamat</th>
			</tr>
			<tr>
				<td>jaja</td>
				<td>ade</td>
				<td>jalan cibiru</td>
			</tr>
			<tr>
				<td>Salman</td>
				<td>Ravi</td>
				<td>jalan gedebage</td>
			</tr>
			<tr>
				<td>Muhammad warko</td>
				<td>nanang</td>
				<td>jalan buah batu</td>
			</tr>
		</table>
	</body>
</html>

CSS :

table,th,td{
  border-top: 2px solid red;
  border-right: 2px groove red;
  border-left: 2px dashed red;
  border-bottom: 2px dotted red;
}
table{
  width: 100%;
}
th{
  height: 50px;
  background-color: MediumPurple;
  color: MintCream;
  font-family: Consolas;
}

Hasil Dari Pengerjaan Embedded CSS :

eXTtablewithcss3
Penjelasannya...

Penulisan pada HTML versi lengkapnya seperti ini :

HTML :

<!DOCTYPE html>
<html>
	<head>
	<title>Angga Gemilang</title>
	</head>
	<link rel="stylesheet" href="TabelCSS3.css" type="text/css"/>
	<body>
		<table>
			<tr>
				<th>First Name</th>
				<th>Family Name</th>
				<th>Region</th>
			</tr>
			<tr>
				<td>Ariana</td>
				<td>Grande</td>
				<td>America</td>
			</tr>
			<tr>
				<td>Taylor</td>
				<td>Swift</td>
				<td>America</td>
			</tr>
			<tr>
				<td>Lorde</td>
				<td>Ajah</td>
				<td>New Zealand</del></td>
			</tr>
		</table>
	</body>
</html>

CSS :

table,th,td{
  border: 1px solid salmon;
}
td{
    background-color: lawngreen;
    color: green;
    text-align: right;
    height: 30px;
    vertical-align: middle;
    padding-right: 10px;
}
th{
  background-color: red;
  color: MintCream;
  text-align: right;
  height: 50px;
  vertical-align: bottom;
  padding-right: 15px;
}

Hasil Dari Pengerjaan Embedded CSS :

Tugas Mandiri
Penjelasannya...

Penulisan pada HTML versi lengkapnya seperti ini :

<h2 style="color:red; font-family: sans;">
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.tbl
		{
			border: 1px cyan dashed;
			position: absolute;
			transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
		}
		table tr th .gif
		{
			height: 65px;
		}
		table tr th .gif img
		{
			align-content: center;
			align-items: center;
		}
		table tr th:first-child, table tr th:last-child
		{
			 font-family: verdana, arial, sans-serif;
       		 color: #333333;
        	 border-left: 2px red dashed;
        	 border-right: 2px red dashed;
        	 background-color: #ffeeb1;
        	 border-top: 0.7px red dashed;
        	 border-bottom: 0.7px red dashed;
		}
		table .red td
		{
			color: blue;
			background: #61a5d5;
			border: 2px solid red;
		}
		table tr td
		{
			text-align: center;
			border: 1px solid #000;
		}
	</style>
</head>
<body style="background: linear-gradient(-45deg, #64b6ac, #c9af7c);">
	<table border="2" class="tbl" cellpadding="10" bgcolor="#9b9b9f">
		<tr>
			<th colspan="2">Pendaftaran Acara Porak SMKN 4 Bandung</th>
			<th style="padding: 10px 150px;" colspan="3" ><img class="gif" src="damn.png"></th>
		</tr>	
		<tr class="red">
			<td>No</td>
			<td  style="padding: 1px 100px;">Nama</td>
			<td>Kelas</td>
			<td>X-TKJ</td>
			<tr>
				<td>1.
					<td>Alianso</td>
					<td colspan="2" rowspan="7"><img style="height: 255px;" src="bg2.jpg"></td>
				</td>
				<tr>
					<td>2.
						<td>Al Ghazali</td>
					</td>
					<tr>
						<td>3.
							<td>Bento</td>
						</td>
						<tr>
							<td>4.
								<td>Charli</td>
							</td>
							<tr>
								<td>5.
								</td>
								<td>Dude Herlino</td>
								<tr>
									<td>6.
									</td>
									<td>Falseto</td>
									<tr>
										<td>7.
											<td>Ghafani</td>
										</td>
									</tr>
								</tr>
							</tr>
						</tr>
					</tr>
				</tr>
			</tr>
		</tr>
	</table>
</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

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

Sabtu, 25 Agustus 2018

#9 Intermediate Web | Web Programming tutorial

Agustus 25, 2018 Angga Gemilang No comments Edit

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, dimulai dari cara - cara penulisan CSS yang akan dijelaskan pada postingan ini. Check This Out...

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

Penulisan file CSS
Perbedaan selector id dan class
CSS Atribute Of The Day
Tugas Mandiri

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

Penulisan file CSS
Penjelasannya...

Penulisan kode CSS dalam HTML dibagi menjadi tiga cara, internal, inline, dan eksternal. Pembagian ini berdasarkan letak kode CSS tersebut ditulis.

1. Embedded CSS

Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Embedded CSS juga dikenal dengan sebutan Internal CSS.

Tag <style> biasanya ditulis di dalam tag <head>. Bisa juga ditulis di dalam <body>, namun untuk saya sendiri prefer ditulis di dalam <head>.

<!DOCTYPE html>
<html>
<head>
	<title> Contih Embedded, Selector Class dan ID </title>
	<style type="text/css">

		#Indo{
			background-color: ghost;
			border: solid;
			padding: 5px;
			font-family: Tw Cen MT;
			font-size: 25px;
		}

		.kotak{
			text-shadow: 5px 5px 5px yellow;
		}

		#Basasunda{
			background-color: salmon;
			border: dashed;
			padding: 5px;
			font-family: Adobe Arabic;
			font-size: 80px;
		}

		#English{
			background-color: grey;
			border: double;
			padding: 5px;
			font-family: Calibri;
			font-size: 30px;
		}

	</style>
</head>
<body>

	<div id="Indo" class="kotak">SELAMAT PAGI!!!</div>
	<div id="Basasunda"> WILUJENG ENJING!!!</div>
	<div id="English" class="kotak">GOOD MORNING!!!</div>
</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

SELAMAT PAGI!!!

WILUJENG ENJING!!!

GOOD MORNING!!!

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.nanang p
		{
			text-indent: 2cm;
                        color: #000;
			text-align: justify;
		}
		p #kanan 
		{
			text-align: right;
			color: chartreuse;
		}
		p .besar
		{
			text-transform: uppercase;
		}
		p .kapital
		{
			text-transform: capitalize;
		}
		p .kecil
		{	text-transform: lowercase;

		}
	</style>
</head>
<body> 
<div class="nanang>
	<p>Dengan text indent.
		form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web. baik secara server side scripting (misalkan PHP, JSP) ataupun client-side scripting (javascript).
	</p>

	<p id="kanan">
		form adalah salah satu bentuk halamn web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tesebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting (Misalkan PHP, JSP), ataupun client - side
	</p>
	<p class="besar">Pengubahan menjadi huruf besar</p>
	<p class="kecil">Pengubahan menjadi huruf kecil</p>
	<p class="kapital">huruf kapital pada setiap awal kata</p>
</div>
</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

Dengan text indent. form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web. baik secara server side scripting (misalkan PHP, JSP) ataupun client-side scripting (javascript).

form adalah salah satu bentuk halamn web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tesebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting (Misalkan PHP, JSP), ataupun client - side

Pengubahan menjadi huruf besar

Pengubahan menjadi huruf kecil

huruf kapital pada setiap awal kata

2. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis disebuah file khusus yang berekstensi .css.

Sebagai contoh, saya akan membuat sebuah file bernama index.css. Berikut ini cuplikan isi file index.css.

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya. Ada beberapa cara memasukkan kode CSS dari berkas eksternal: Pertama menggunakan tag link

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

Atau bisa juga bisa menggunakan @import.

<style type="text/css"> @import "index.css"; </style>

Penulisan pada HTML versi lengkapnya seperti ini :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style-ku.css">
</head>
<body>
    <h2>Ini judul artikel</h2>
    <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Hasilnya pun akan sama seperti contoh internal CSS, karena kode CSS-nya sama. Hanya saja berbeda tempat penulisannya.

3. Inline-CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis. Contohnya seperti ini:

<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>

Contoh Lengkap

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Inline CSS</title>
</head>
<body>
  <h2 style="color:red;font-family:sans">Ini judul artikel</h2>
  <p style="color:maroon">Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Perbedaan Class Dan Id
Penjelasan Class dan Id

Selector ID

selector ID ini merupakan selector untuk menentukan bagian yang hanya ada satu pada halaman dan juga menentukan style nya. Jadi selector ID ini tidak bisa dipanggil lebih dari satu. Jika ada dua, maka hanya bekerja pada bagian pertama saja. selector ini juga bisa untuk me link pada section dalam satu halaman, misalnya kalau kalian men klik navigasi dengan selector id=“contact” , maka mas vroh akan dibawa ke section contact pada satu halaman. Bisa dengan effect scroll ataupun fade tergantung dari developernya. selector ID dituliskan dengan awalan pagar atau sharp atau kres “#” pada css. Untuk HTML nya menggunakan penulisan seperti id=“namaID”.

Pada HTML

<p id=“content”>Sebuah content dengan id </p>

Pada CSS

#content {
    text-align:center;
    color:snow;
}

Selector Class

Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .

Pada HTML

<div class=“container center-content”>Sebuah element dengan class </div>

Pada CSS

container {
    width=960px;
}
.center-content{
    text-align:center;
    color:snow;
    font-family:serif;
}

Perbedaan Antara Id dan Class Selector dalam bentuk gif

Tugas Mandiri
Hasil pengerjaan dari tugas mandiri

Hasil Dari Pengerjaan Tugas Mandiri :

Wassalamualaikum wr, wb

Jumat, 17 Agustus 2018

#8 Basic Web | Web Programming Tutorial

Agustus 17, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang Basic Web. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Saya akan menjelaskan sedikit tentang Tag - tag dasar pada pemrograman web (Seperti cara membuat list, membuat biodata dengan dan tanpa CSS)

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

Cara Membuat TextArea & TextFild

Pencodean Textarea

Cara Membuat TextField

Pencodean TextField
Membuat form signup

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

Cara Membuat TextArea
Tag dan atribut pada pembuatan TextArea

Textarea adalah sebuah kolom area teks yang dapat menampung karakter teks dengan jumlah yang tidak terbatas, dan teks membuat dalam font fixed-width (biasanya berukuran Kurir). Ukuran kolom textarea dapat ditentukan oleh atribut cols dan rows. Atau lebih jelasnya bisa kalian lihat pada table di bawah ni :

Ringkasan tag - tag dalam membuat sebuah textarea
Tag	Atribut	Value	Keterangan
Textarea	Autofocus	autofocus	Area tertentu pada text area, dimana kursor y otomatis mengarah ke daerah tersebut ketika halaman web diload.
Textarea	Cols	number	Menentukan lebar text area
Textarea	Rows	number	Menentukan tinggi text area
Textarea	Disable	disable	Text area dapat diubah
Textarea	Form	form_id	Satu atau lebih form pada text area
Textarea	MaxLength	number	Menentukan panjang karakter pada text area
Textarea	Name	text	Nama dari text area
Textarea	PlaceHolder	text	Memberikan gambaran singkat tentang nilai pada tex tarea
Textarea	Readonly	readonly	Text area bersifat read-only
Textarea	Required	required	Menentukan text area tersebut harus diisi atau tidak.
Textarea	Wrap	Hard / soft	Menentukan bagaimana cara teks dikemas dalam text area sebelum teks tersebut dikirimkan

Pencodean TextArea
Praktek Percobaan

Macam - macam Pengcodean pada tag <textarea>

1. Hanya menggunakan atribut cols dan row

2. Hanya menggunakan atribut cols dan row

Textarea ini menggunakan atribut readonly sehingga hanya bisa di baca dan dicopy

3. Hanya menggunakan atribut cols dan row

4. Hanya menggunakan atribut cols dan row

Cara Membuat Text Field
Tag - tag Dalam Membuat Text Field

Secara umum, kedua type tag input ini berfungsi sebagai kolom isian dari user. Dengan perbedaan untuk type=password, text isian tidak akan ditampilkan, namun diganti dengan karakter khusus.

Kedua tag ini biasanya digunakan di dalam form HTML, namun anda juga bisa menggunakannya di luar tag form, terutama jika anda akan memprosesnya menggunakan javascript.

Ringkasan tag - tag dalam membuat sebuah input
Tag	Atribut	Type	Keterangan
input	-	Text	Type text ini berfungsi untuk membuat inputan text di html
input	-	Radio	Ttype text ini berfungsi untuk membuat suatu pilihan di html
input	-	number	Type text ini berfungsi untuk membuat inputan nomo rdi html
input	-	checkbox	Type text ini befungsi untuk membuat beberapa inputan di html
input	-	password	untuk membuat inputan sebuah password di html
input	-	submit	Untuk membuat sebuah tombol submit atau kirim pada html
input	Placeholder	-	Untuk membuat kalimat instruksi yang akn menghilang pada sebuah tag input
input	name	-	untuk memberi nama sebuah input pada html
select	-	-	Merupakan tag induk dengan option untuk membuat sebuah satu inputan dari sekian banyak pilihan
option	-	-	Merupkan tag anak dari select untuk memberkan pilihan inputan yang banyak
input	value	-	atribut untuk memberikan nama yang nantinya akan dikirim ke file php

Pencodean tag input
Praktek Percobaan

Contoh dari pencodean tag input

1. Input Text

Nama :

2. Input Password

Password :

3. Input radio

Jenis kelamin : Laki-lakiPerempuan

4. Input Checkbox

Hobby : Main Bola Main Game Ngoding Baca Buku

5. Input Number

Jumlah :

6. Input Submit

7. Input untuk select dan option

Membuat Form SignUp
Praktek Percobaan

Hasil dari pengerjaan membuat form signup

Wassalamualaikum wr, wb

Kamis, 16 Agustus 2018

#7 Basic Web | Web Programming Tutorial

Agustus 16, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Cara Membuat Tabel

Menampilkan Audio
Menampilkan Video
Mencoba Adobe Flash
Gabungan dari Photo, Video, dan Audio

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

Menampilkan Audio dan Video
Tag - tag untuk menampilkan audio dan video

Untuk membuat sebuah tampilan Video atau Audio di HTML mudah saja, untuk audio kita membutuhkan tag <audio> untuk mengatur tampilannya, dan menggunakan tag <source> untuk memasukkan file yang dibutuhkan. Sedangkan untuk video kita juga memerlukan tag <video> untuk tampilan video dan tag <source> untuk memasukkan file video yang diperlukan. Untuk selengkapnya, kita bisa lihat kumpulan tag - tag tersebut di bawah ini :

Ringkasan tag - tag untuk menampilkan audio dan video
No	Nama Tag	Fungsi
1.	Video <video>	Tag untuk membuat tampilan video
2.	Audio <audio>	Tag untuk membuat tampilan audio
3.	Source <source>	Tag untuk memasukkan sebuah file

Ringkasan atribut - atribut untuk menampilkan audio
No	Nama Atribut	Fungsi
1.	Autoplay	Agar musik berjalan secara otomatis
2.	Control	Untuk menampilkan tampilan
3.	Bufferedt;	Untuk mendelay

Ringkasan atribut - atribut untuk menampilkan video
No	Nama atribut	Fungsi
1.	Autoplay	Agar video berjalan secara otomatis
2.	Control	Untuk menampilkan tampilan
3.	Width and Height	Mengatur panjang dan lebar

Menampilkan Audio
Praktek Percobaan

NOTICE!!!

"type audio tersebut harus ditulis secara benar (audio/mpeg), karena jika penulisan type tersebut salah tampilan audio tidak akan muncul"

Hasil dari pengerjaan menampilkan audio

Nella Kharisma = Jaran Goyang

Menampilkan Video
Praktek Percobaan

NOTICE!!!

"type video tersebut harus ditulis secara benar (video/mp4), karena jika penulisan type tersebut salah tampilan video tidak akan muncul"

Hasil dari pengerjaan menampilkan video

Nella Kharisma = Jaran Goyang

Menampilkan Flash
Praktek Percobaan

NOTICE!!!

"File ini saya ambil dari google, karena jujur saja. sama sekali saya belum mengerti tentang cara pembuatan file - file seperti ini."

Hasil dari menampilkan file SWF

Karya Gabungan
Praktek Percobaan

NOTICE!!!

"File ini saya ambil dari google, karena jujur saja. sama sekali saya belum mengerti tentang cara pembuatan file - file seperti ini."

Hasil dari pengerjaan Praktek Gabungan

Wassalamualaikum wr, wb

Sabtu, 11 Agustus 2018

#6 Basic Web | Web Programming Tutorial

Agustus 11, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

LeftIndex
TopIndex
BottomIndex
Layoutsplit
my.Biodata

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

Cara Membuat LeftIndex
Praktek Percobaan

Hasil dari pengerjaan leftindex

Home Profile About Us Blog Contact Us	Elctronik Shop
Selamat datang di web kami, penjualan produk online ini adalah yang pertama di kota kami. kualitas dan harga dapat dipercaya langsung saja pesan dan menjadi langgana kami
Profil kami

Elctronik Shop

Selamat datang di web kami, penjualan produk online ini adalah yang pertama di kota kami. kualitas dan harga dapat dipercaya langsung saja pesan dan menjadi langgana kami

Profil kami

Cara Membuat Top Index
Praktek Percobaan

Hasil dari pengerjaan TopIndex

Cara membuat bottom index
Praktek Percobaan

Hasil dari pengerjaan bottomindex

Cara Membuat Split layout
Praktek Percobaan

Hasil dari pengerjaan Split Layout

Cara Membuat my.Biodata
Praktek Percobaan

Hasil dari pengerjaan my.Biodata

NOTICE!!!

Mohon Maaf Karena tidak semua dari Source mengandung nama saya, karena ketidakingatan, alias Kelupaann

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #6 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

Kamis, 09 Agustus 2018

#5 Basic Web | Web Programming Tutorial

Agustus 09, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Cara Membuat Tabel

Lat12abel
Lat13tabel
Lat14tabel
Lat15tabel
Lat16tabel
Lat17tabelTanah
Lat18tabelTanah
Lat19tabelBenua
Lat20tabelBenua
Lat21tabelBuah

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

Cara Membuat Table
Tag - tag pada pembuatan table

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi baris-baris, dan tiap baris dibagi ke dalam cell-cell.

Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag <td>.Dalam konteks HTML, table mempunyai peranan yang sangat penting. Selain digunakan untuk menampilkan tabel berisi data, table juga digunakan untuk menyusun teks dalam kolom, ataupun membuat laporan terstruktur lainnya.

Seringkali table digunakan dalam halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Melihat begitu banyaknya manfaat yang didapat dengan menggunakan tabel ini maka tabel mulai diterapkan pemakaiannyaoleh HTML dan kemudian didukung oleh Nescape (browser pertama yang mempelopori penggunaan table).

Ringkasan tag - tag dalam membuat sebuah table
No	Nama Tag	Fungsi
1.	Table <table>	Tag utama dalam mebuat table, tempat dari td dan tr
2.	Table Data <td>	Tempat untuk menyimpan data
3.	Table Row <tr>	tempat dalam membuat sebuah baris

Lat12Tabel
Praktek Percobaan

Hasil dari pengerjaan Lat12Tabel

Baris 1 kolom 1	Baris 1 kolom 2
Baris 2 kolom 1
Baris 3 kolom 1	Baris 3 Kolom 2

Lat12Tabel
Praktek Percobaan

Hasil dari pengerjaan Lat12Tabel

Baris 1 kolom 1	Baris 1 kolom 2
Baris 2 kolom 1
Baris 3 kolom 1	Baris 3 Kolom 2

Lat13(1)Tabel
Praktek Percobaan

Hasil dari pengerjaan Lat13(1)Tabel

Baris 1 kolom 1	Baris 1 kolom 2
Baris 2 kolom 1
Baris 3 kolom 1	Baris 3 Kolom 2

Lat13(2)Tabel
Praktek Percobaan

Hasil dari pengerjaan Lat13(2)Tabel

Daftar wiraniaga
Wiraniaga		kota
Wiraniaga		Pati	Kudus	Solo
Jenis Kelamin	Pria	30 orang	30 orang	30 orang
Jenis Kelamin	Wanita	30 orang	30 orang	30 orang

Lat14Tabel
Praktek Percobaan

Hasil dari pengerjaan Lat14Tabel

Nama	Usia
Ali	25
Fahmianto	27

Lat15Tabel
Praktek Percobaan

Hasil dari pengerjaan Lat15Tabel

Nama

Usia
Ali	25
Fahmianto	27

Lat16Tabel
Praktek Percobaan

Hasil dari pengerjaan Lat16Tabel

No	Nama	Pertemuan
No	Nama	1	2	3	4	5
1	Neymar	Check	Check	Check	Check	s
2	Cristiano	a	check	i	s	check
3	Bale	a	check	check	check	check

Lat17TabelRumah
Praktek Percobaan

Hasil dari pengerjaan Lat17Tabel

Nama Perusahaan	Tipe / Luas tanah (m²)
Griya Indah Permai	21 / 60
	36 / 90
	45 / 120
	54 / 120

Lat18TabelTanah
Praktek Percobaan

Hasil dari pengerjaan Lat18TabelTanah

perumahan	Tipe / Luas tanah (m²)
Griya Permai Indah	21/60	36/90	45/120	54/120

Lat19TabelBenua
Praktek Percobaan

Hasil dari pengerjaan Lat19Benua

Benua	Negara
Asia	Arab Saudi
	India
	Indonesia
	Singapura
Eropa	Belanda
	Italia
	Jerman
	Inggris

Lat20TabelBenua
Praktek Percobaan

Hasil dari pengerjaan Lat19Benua

Benua	Eropa		Asia
Negara	Belanda	Italia	Indonesia	India

Lat21TabelBuah
Praktek Percobaan

Hasil dari pengerjaan Lat19Benua

Apel	Jeruk	Mangga
Pisang	Jeruk	Nanas
Leci

NOTICE!!!

Mohon Maaf Karena tidak semua dari Source mengandung nama saya, karena ketidakingatan, alias Kelupaann

Wassalamualaikum wr, wb

Jumat, 03 Agustus 2018

#4 Basic Web | Web Programming Tutorial

Agustus 03, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang Basic Web. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Saya akan menjelaskan sedikit tentang Tag - tag dasar pada pemrograman web (Seperti cara membuat list, membuat biodata dengan dan tanpa CSS)

Akan ada 4 sub bahasan kita kali ini, antara lain :

Membuat List
Biodata With CSS
Biodata Without CSS

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

Membuat List
Tag - tag pada pembuatan list / daftar

Dalam pembuatan sebuah dokumen, list (daftar) merupakan sebuah hal yang tidak dapat dihindari. Daftar mengenai berbagai hal selalu dapat ditemukan dalam penulisan dokumen. Resep masakan memiliki daftar bahan yang diperlukan, serta langkah-langkah memasak yang harus diikuti. Penunjuk jalan memiliki daftar tempat yang dapat dituju, sesuai dengan arah yang akan diambil. Seorang mahasiswa yang ingin memilih mata kuliah akan dihadapkan dengan daftar mata kuliah. Banyaknya kegunaan daftar ini menjadikan HTML memberikan sekumpulan elemen khusus untuk membuat daftar.

Ringkasan Tag - tag yang ada pada pembuatan daftar
No	Nama Tag	Fungsi
1.	Ordered List <ol>	Membuat sebuah daftar yang tersusun baik dengan angka / huruf
2.	Unordered List <ul>	Membuat sebuah daftar yang tidak tersusun dengan bentuk
3.	List <li>	Adalah tag yang digunakan untuk mengisi tag ol dan ul
4.	Definition List <dl>	Singkatnya, tag ini mampu menampung daftar pengertian.
5.	<dt>	Tag untuk mengisi tag dl
6.	<dd>	tag untuk menjorokkan paragraf

Membuat List
Atribut - atribut dalam pembuatan daftar

Ringkasan Atribut - atribut yang digunakan dalam pembuatan daftar
No	Nama Atribut	Fungsi
1.	Type	Atribut untuk menentukan bentuk list yang diinginkan
2.	Size	Atribut untuk menentukan ukuran.
3.	Width	Atribut untuk menentukan lebar.
4.	height	Atribut untuk menentukan tinggi.
5.	Face	Atribut untuk font, menentukan jenis font mirip seperti font-family.
6.	Align	Atribut untuk mengatur pragraf (center, left, right, justify)
7.	BG Color	Atribut untuk menentukan warna background

Membuat List
Pengcodingan

1. Pembuatan List dengan sederhana

Contoh Penggunaan Tag List secara sederhana

Berikut merupakan mata pelajaran yang saya pelajari :

Matematika
B.Indonesia
Basa Sunda

PPL
BDAT
PPWPB

Agama
bahasa Inggris
Olahraga

2. Pembuatan List dengan kombinasi <ol> dan <ul>

Contoh Penggunaan Tag List secara sederhana

Daftar Seragam Sekolah

Baju Putih Abu
Baju Praktek
Baju Batik
Baju muslim

Daftar Game Terfavorit

PUBG
Fortnite
CS : GO

Daftar Weekend

Sabtu
Minggu

3. Definition List

Selain daftar terurut dan tidak terurut, kita juga seringkali menjumpai daftar definisi, yang memberikan kita penjelasan singkat terhadap sebuah kata atau istilah yang mungkin tidak kita ketahui. Dalam dunia menulis, daftar ini dikenal dengan nama glosarium.

Membuat glosarium dalam HTML dilakukan dengan menggunakan elemen dl (definition list), dan kemudian alih-alih menggunakan li untuk mengisikan daftar, kita menggunakan dua elemen lain, yaitu dt (definition term - istilah yang akan didefinisikan) dan dd (definition description - penjelasan dari istilah).

Contoh Penggunaan Tag Definition List

lorem Ipsum: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
Lorem Ipsum: um dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
Lorem Ipsum
Lorem Ipsum: um dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt

Bab 2
Biodata With CSS

Berikut biodata saya yang dibuat menggunakan html dan css sebagai penghiasnya...

Hasil dari Pengerjaan Biodata With CSS

Biodata With CSS

Bab 2
Biodata Without CSS

Berikut biodata saya yang dibuat menggunakan html dan css sebagai penghiasnya...

Hasil dari Pengerjaan Biodata Without CSS

Biodata Without CSS

NOTICE!!!

Mohon Maaf Karena tidak semua dari Source mengandung nama saya, karena ketidakingatan, alias Kelupaann

Wassalamualaikum wr, wb

Kamis, 30 Agustus 2018

Assalamualaikum wr, wb

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

Sabtu, 25 Agustus 2018

Assalamualaikum wr, wb

1. Embedded CSS

2. Eksternal CSS

3. Inline-CSS

Contoh Lengkap

Selector ID

Pada HTML

Pada CSS

Selector Class

Pada HTML

Pada CSS

Perbedaan Antara Id dan Class Selector dalam bentuk gif

Jumat, 17 Agustus 2018

Assalamualaikum wr, wb

1. Hanya menggunakan atribut cols dan row

2. Hanya menggunakan atribut cols dan row

3. Hanya menggunakan atribut cols dan row

4. Hanya menggunakan atribut cols dan row

1. Input Text

2. Input Password

3. Input radio

4. Input Checkbox

5. Input Number

6. Input Submit

7. Input untuk select dan option

Kamis, 16 Agustus 2018

Assalamualaikum wr, wb

Sabtu, 11 Agustus 2018

Assalamualaikum wr, wb

Kamis, 09 Agustus 2018

Assalamualaikum wr, wb

Jumat, 03 Agustus 2018

Assalamualaikum wr, wb

1. Pembuatan List dengan sederhana

2. Pembuatan List dengan kombinasi <ol> dan <ul>

3. Definition List

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