Sei sulla pagina 1di 37

HTML

TABEL, GAMBAR, WARNA, TULISAN


<html>

<head>

<title>TGWL </title>

</head>

<body>

<table>

<tr>

<td><img src="desain/gambar/index.jpg" width="200" height="150"/></td>

<td><font size="5">SEKOLAH MENENGAH KEJURUAN TEKNOLOGI INFORMASI BALI


GLOBAL</font><br/>

<b><font size="10">SMK TI BALI GLOBAL DENPASAR</font></b><br/>

<i><font size="4">JL. Tukad Citarum No. 44 Denpasar, Bali Telp(0361)249


434</font></i></td>

</tr>

</table><hr/>

<br/>

DAFTAR NAMA SISWA SMK TI BALI GLOBAL DENPASAR<br/><br/>

<table border="10" width="100%"

<tr>

<th>NO</th>

<th>Nama Siswa</th>

<th>Kelas</th>

<th>Jurusan</th>
<th>Alamat</th>

</tr>

<tr>

<td align="center">1</td>

<td>Pradnyana Ambara</td>

<td>X RPL 4</td>

<td>Rekayasa Perangkat Lunak</td>

<td>Denpasar</td>

</tr>

<tr>

<td align="center">2</td>

<td>Putra Darma</td>

<td>X MM 1</td>

<td>Multimedia</td>

<td>Tabanan</td>

</tr>

<tr>

<td align="center">3</td>

<td>Ayu Dewi</td>

<td>X TKJ 1</td>

<td>Teknik Komputer Jaringan</td>

<td>Gianyar</td>

</tr>

<tr>

<td colspan="4" align="center">

<b>Jumlah Data Siswa</b></td>


<td><font color="#FF0000">3 Data Siswa</font></td>

</tr>

</table></br>

</br>

<p align="right">Denpasar, 14 September 2019</p><br/>

<p align="right"><b>(Kepala SMK TI BALI GLOBAL DENPASAR)</b></p>

</body>

</html>
HTML DESAIN FORM
<html>

<head>

<title>Desain Form</title>

</head>

<body>

<form name="Formulir"/>

Isilah Formulir Dibawah ini : <br/>

Masukan Nama Siswa <br/>

<input type="text" name="Namasiswa" size="40"/>

<br/>

Masukan Password <br/>

<input type="password" name="Password"/>

<br/>

Pilih Jenis Kelamin <br/>

<input type="radio" name="JK" value="Laki-laki"/>Laki-laki

<input type="radio" name="JK" value="Perempuan"/>Perempuan

<br/>

Pilih Agama : <br/>

<select name="Agama">

<option value=""></option>

<option value="Hindu">Hindu</option>

<option value="Islam">Islam</option>

<option value="Budha">Budha</option>

<option value="Katolik">Katolik</option>
<option value="Protestan">Protestan</option>

<option value="Khonghucu">Konghucu</option>

</select>

<br/>

Pilih Hobby Anda : <br/>

<input type="checkbox" name="Hobby1" value="Nonton"/>Nonton<br/>

<input type="checkbox" name="Hobby2" value="Makan"/>Makan<br/>

<br/>

Upload foto Anda : <br/>

<input type="file" name="Foto"/>

<br/>

Masukan Alamat : <br/>

<textarea name="Alamat" cols="40" rows="5"></textarea>

<br/>

<input type="submit" value="Simpan"/>

<input type="reset" value="Batal"/>

</form>

</body>

</html>
CSS DESAIN
<html>

<head>

<title>Desain CSS</title>

</head>

<style type="text/css">

#kotak

height:80%;

width:80%;

background-color:#FFF;

margin:5% auto 5% auto;

border-radius:100px;

border:5px solid #00F;

text-align:center;

position:relative

body

background-color:#999;

input[type=text],input[type=password]

width:200px;

padding:4px 20px;
border:1px solid #00F;

border-radius:6px;

text-align:center

.login

background-color:#00F;

border:none;

color:#FFF;

padding:7px 22px;

text-align:center;

font-size:14px;

border-radius:10px;

.batal

background-color:#00F;

border:none;

color:#FFF;

padding:7px 22px;

text-align:center;

font-size:14px;

border-radius:10px;

p.italic{font-style:italic;}

p{font-weight:bold;}
p.lala{font-family:Georgia, "Times New Roman", Times, serif;}

</style>

<body>

<div id="kotak">

<h2 align="center"><p class="italic">Halaman Login</p></h2>

<form name="formlogin">

<table align="center">

<tr>

<td><p class="bold">Username :</p></td>

<td><input type="text" name="username" placeholder="Masukan Username" /></td></tr>

<tr>

<td><p class="bold">Password :</p></td>

<td><input type="password" name="password" placeholder="Masukan Password"/></td>

</tr>

<tr>

<td align="left"><p class="lala"><input type="submit" value="Login"


class="login"\></p></td>

<td align="left"><p class="lala"><input type="reset" value="Batal" class="batal"\></p></td>

</tr>

</table>

</form>

</body>

</html>
CSS INPUT TYPE TEXT
<html>

<head>

<style>

input[type=text] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

box-sizing: border-box;

</style>

</head>

<body>

<p>Desai CSS </p>

<form>

<label for="name">Name</label>

<input type="text" id="name" name="name">

</form>

</body>

</html>
CSS INPUT TYPE TEXTAREA
<html>

<head>

<style>

textarea {

width: 100%;

height: 150px;

padding: 12px 20px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

background-color: #f8f8f8;

font-size: 16px;

resize: none;

</style>

</head>

<body>

<form>

<textarea>Text</textarea>

</form>

</body>

</html>
CSS INPUT TYPE BUTTON
<html>

<head>

<style>

input[type=button]{

background-color: #4CAF50;

border: none;

color: white;

padding: 16px 32px;

text-decoration: none;

margin: 4px 2px;

cursor: pointer;

</style>

</head>

<body>

<p>Text</p>

<input type="button" value="Button">

</body>

</html>
CSS HALAMAN LOGIN
<html>

<head>

<title>Halaman Login</title>

</head>

<style type="text/css">

#kotak

height:80%;

width:80%;

background-color:#FFF;

margin:5% auto 5% auto;

border-radius:100px;

border:5px solid #00F;

text-align:center;

position:relative

body

background-color:#999;

input[type=text],input[type=password]

width:200px;

padding:4px 20px;
border:1px solid #00F;

border-radius:6px;

text-align:center

.login

background-color:#00F;

border:none;

color:#FFF;

padding:7px 22px;

text-align:center;

font-size:14px;

border-radius:10px;

.batal

background-color:#00F;

border:none;

color:#FFF;

padding:7px 22px;

text-align:center;

font-size:14px;

border-radius:10px;

p.italic{font-style:italic;}

p{font-weight:bold;}
p.lala{font-family:Georgia, "Times New Roman", Times, serif;}

</style>

<body>

<div id="kotak">

<h2 align="center"><p class="italic">Halaman Login</p></h2>

<form name="formlogin">

<table align="center">

<tr>

<td><p class="bold">Username :</p></td>

<td><input type="text" name="username" placeholder="Masukan Username" /></td></tr>

<tr>

<td><p class="bold">Password :</p></td>

<td><input type="password" name="password" placeholder="Masukan Password"/></td>

</tr>

<tr>

<td align="left"><p class="lala"><input type="submit" value="Login"


class="login"\></p></td>

<td align="left"><p class="lala"><input type="reset" value="Batal" class="batal"\></p></td>

</tr>

</table>

</form>

</body>

</html>
CSS NAVIGASI BAR
<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

li {

float: left;

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

li a:hover:not(.active) {

background-color: #111;

.active {
background-color: #4CAF50;

</style>

</head>

<body>

<ul>

<li><a class="active" href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>
CSS DROPDOWN MENU
<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

li {

float: left;

li a, .dropbtn {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

li a:hover, .dropdown:hover .dropbtn {

background-color: red;

li.dropdown {
display: inline-block;

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {

display: block;

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>

<li class="dropdown">

<a href="javascript:void(0)" class="dropbtn">Dropdown</a>

<div class="dropdown-content">

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

</li>

</ul>

<h3>Dropdown </h3>

<p>Dropdown menu.</p>

</body>

</html>
CSS BORDERS
<html>

<head>

<title>Borders</title>

</head>

<style type="text/css">

.border {

border-width: 5px;

border-top-style: solid;

border-bottom-style: dotted;

border-left-style: dashed;

border-right-style: double;

</style>

<body>

<div class="border">

Menentukan gaya garis tepi elemen

</div>

</body>

</html>
CSS BACKGROUND
<html>

<head>

<title>Merubah warna background dengan CSS</title>

</head>

<style type="text/css">

body{

background: blue;

color: white;

</style>

<body>

<h1>Tutorial mengubah warna background dengan CSS</h1>

</body>

</html>
CSS TABLE
<html>

<head>

<title>Cara Design Table Dengan CSS</title>

</head>

<style type="text/css">

.table1 {

font-family: sans-serif;

color: #232323;

border-collapse: collapse;

.table1, th, td {

border: 1px solid #999;

padding: 8px 20px;

/*design table 1*/

.table1 {

font-family: sans-serif;

color: #232323;

border-collapse: collapse;

.table1, th, td {

border: 1px solid #999;

padding: 8px 20px;

}
</style>

<body>

<h1>Cara Design Table Dengan CSS</h1>

<h4>Design table 1</h4>

<table class="table1">

<tr>

<th>No</th>

<th>Nama</th>

<th>Alamat</th>

<th>Usia</th>

</tr>

<tr>

<td>1</td>

<td>Andi Saputra</td>

<td>Magelang</td>

<td>21</td>

</tr>

<tr>

<td>2</td>

<td>Budi Budiman</td>

<td>Jakarta</td>

<td>24</td>

</tr>

<tr>

<td>3</td>

<td>Calvin Sanusi</td>
<td>Malang</td>

<td>29</td>

</tr>

<tr>

<td>4</td>

<td>Diki</td>

<td>Bandung</td>

<td>24</td>

</tr>

<tr>

<td>5</td>

<td>Malas Ngoding</td>

<td>Medan</td>

<td>23</td>

</tr>

</table>

</body>

</html>
CSS IMAGE GALLERY
<html>

<head>

<title>Gallery</title>

</head>

<style>

div.gallery {

margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

div.gallery:hover {

border: 1px solid #777;

div.gallery img {

width: 100%;

height: auto;

div.desc {

padding: 15px;

text-align: center;

</style>

<body>
<div class="gallery">

<a target="_blank" href="nama_gambar.jpg">

<img src="Joie Bleue Necklace by Lampwork Glass Artist Jenelle Aubade.png"


alt="nama_alternatif_gambar" width="600" height="400">

</a>

<div class="desc">Tambahkan deskripsi gambar disini</div>

</div>

<div class="gallery">

<a target="_blank" href="nama_gambar.jpg">

<img src="Joie Bleue Necklace by Lampwork Glass Artist Jenelle Aubade.png"


alt="nama_alternatif_gambar" width="600" height="400">

</a>

<div class="desc">Tambahkan deskripsi gambar disini</div>

</div>

<div class="gallery">

<a target="_blank" href="nama_gambar.jpg">

<img src="Joie Bleue Necklace by Lampwork Glass Artist Jenelle Aubade.png"


alt="nama_alternatif_gambar" width="600" height="400">

</a>

<div class="desc">Tambahkan deskripsi gambar disini</div>

</div>

<div class="gallery">

<a target="_blank" href="nama_gambar.jpg">

<img src="Joie Bleue Necklace by Lampwork Glass Artist Jenelle Aubade.png"


alt="nama_alternatif_gambar" width="600" height="400">

</a>
<div class="desc">Tambahkan deskripsi gambar disini</div>

</div>

</body>

</html>
CSS WEBSITE LAYOUT
<html>

<head>

<title>Website Layout</title>

</head>

<style type="text/css">

.wrap{

background: blue;

width: 900px;

margin: 10px auto;

.wrap .header{

background: green;

padding: 2px 10px;

.wrap .menu{

background: yellow;

.wrap .menu ul{

padding: 0;

margin: 0;

background: yellow;

overflow: hidden;

.wrap .menu ul li{


float: left;

list-style-type: none;

padding: 10px;

.clear{

clear: both;

.badan{

height: 450px;

.wrap .badan .sidebar{

background: orange;

float: left;

width: 25%;

height: 100%;

.wrap .badan .content{

background: red;

float: left;

height: 100%;

width: 75%;

.wrap .footer{

width: 100%;

padding: 10px;

}
.wrap{

background: blue;

width: 900px;

margin: 10px auto;

.wrap .header{

background: green;

padding: 2px 10px;

.wrap .menu{

background: yellow;

.wrap .menu ul{

padding: 0;

margin: 0;

background: yellow;

overflow: hidden;

.wrap .menu ul li{

float: left;

list-style-type: none;

padding: 10px;

.clear{

clear: both;

}
.badan{

height: 450px;

.wrap .badan .sidebar{

background: orange;

float: left;

width: 25%;

height: 100%;

.wrap .badan .content{

background: red;

float: left;

height: 100%;

width: 75%;

.wrap .footer{

width: 100%;

padding: 10px;

</style>

<body>

<div class="wrap">

<div class="header">

<h1>Source Code</h1>

<p>layout website sederhana</p>

</div>
<div class="menu">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Java</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">PHP</a></li>

<li><a href="#">Javascript</a></li>

</ul>

</div>

<div class="badan">

<div class="sidebar">

sidebar

<ul>

<li><a href="#">Tutorial HTML dasar</a></li>

<li><a href="#">Tutorial CSS dasar</a></li>

<li><a href="#">Tutorial PHP dasar</a></li>

<li><a href="#">Tutorial Java dasar</a></li>

</ul>

</div>

<div class="content">

content

</div>

</div>

<div class="clear"></div>

<div class="footer">

footer
</div>

</div>

</body>

</html>
CSS ANIMATIONS
<html>

<head>

<title>Membuat efek animasi dengan css</title>

</head>

<style type="text/css">

body{

background: #35A9DB;

font-family: roboto;

color: #fff;

h1{

width: 550px;

.kotak{

background: blue;

width: 200px;

height: 200px;

animation-name: animasi_kotak;

animation-duration: 2s;

@keyframes animasi_kotak{

from{ background: blue;}

to{background: red;}

}
</style>

<body>

<h1>Membuat efek animasi dengan css</h1>

<h2>Contoh penggunaan @keyframe</h2>

<div class="kotak"></div>

</body>

</html>
CSS TRANSITIONS
<html>

<head>

<title>Tutorial CSS3 Transition</title>

</head>

<style type="text/css">

body{

background: #35A9DB;

font-family: roboto;

text-align: center;

h1{

color: #fff;

div{

margin: 10px;

.kotak{

background: #fff;

width: 100px;

height: 100px;

transition: width 1s;

-webkit-transition: width 1s;

.kotak:hover{
width: 300px;

.kotak2{

background: #fff;

width: 100px;

height: 100px;

transition: width 1s, height 2s;

-webkit-transition: width 1s, height 2s;

.kotak2:hover{

width: 300px;

height: 300px;

</style>

<body>

<h1>Tutorial CSS3 Transition</h1>

<div class="kotak">ini kotak</div>

<div class="kotak2">ini kotak 2</div>

</body>

</html>