#10 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 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

Angga Gemilang Blog

Kamis, 30 Agustus 2018

#10 Intermediate Web | Web Programming Tutorial

Assalamualaikum wr, wb

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