MyBlog_Kurnia A.K

Dalam perancangan template HTML, kita bisa mengelompokkan berbagai tag HTML dalam satu kesatuan tertentu menggunakan tag <div>……</div>. Biasanya, tag ini digunakan untuk mengelompokkan bagian header, content, sidebar, footer, dan lainnya secara terpisah namun dalam satu tampilan tertentu.

Sebagai contohnya, saat kita membuka sebuah halaman website atau blog maka kita akan dipertemukan dengan tampilan yang biasanya berisi logo, slogan, nama website, menu dan lainnya pada bagian atas, nah Elemen tersebut biasanya dikelompokkan dalam sebuah tag bernama Division (Div). Div biasanya digunakan untuk membuat layar yang akan memudahkan kita untuk membuat layout sesuai dengan design yang diinginkan. Untuk membuat layar kita menggunakan tag Div dan diberi atribut Id ataupun Class.

=>Penggunaan Id dan Class

Setiap tag sebenarnya bisa saja diberikan atribut Id ataupun Class. Namun penggunaan atribut ini secara lumrah digunakan untuk tag pengelompokkan yakni pada Div.

Id: Atribut ini digunakan untuk penamaan elemen pada HTML yang memiliki karakteristik yang unik atau berbeda. Tidak diperbolehkan ada 2 elemen yang memiliki Id yang sama. Salah penggunaan maka akan berdampak pada hasil tampilan web itu sendiri.

Class: Digunakan untuk memberikan penamaan elemen yang memiliki karakteristik atau struktur yang dapat digunakan secara berulang-ulang dalam tag HTML.

Berikut contoh script dan output yang menggunakan tag Div dan atribut Id atau Class dan atribut lainnya :

HTML

<html>

<head>

<title>Project</title>

</head>

<body>

<div class="header"><marquee><img id="lgo" src="D:/HTML/logo stitek.png" width="80" height="80" align="top"><a class="head">KURNIA</a></marquee>

</div>

<ul>

<li><a href="profil.html" class="menu">Profile</a></li>

<li><a href="galeri.html" class="menu">Gallery</a></li>

<li><a href="kontak.html" class="menu">Contact Me</a></li>

</ul>

</div>

<img id="ime" src="D:/HTML/kurnia.jpg" width="200" height="350" align="left"><h1><br>W<br>e<br>l<br>c<br>o<br>m<br>e<br></h1

</div>

</body>

</html>

hasil gambar dari script diatas

hasil gambar dari script diatas setelah Hover

HTML

<html>

<head>

<title>beranda</title>

</head>

<body>

<div class="header"><marquee><img id="lgo" src="D:/HTML/logo stitek.png" width="80" height="80" align="top"><a class="head">KURNIA</a></marquee></div>

<ul>

<li><a href="profil.html" class="menu">Profile</a></li>

<li><a href="galeri.html" class="menu">Gallery</a></li>

<li><a href="kontak.html" class="menu">Contact Me</a></li>

</ul>

</div>

<div id=beranda><a id="tombol" href="project.html">Beranda</a>

<p><b>Assalammualaikum Wr.Wb</b></p>

<b>BELAJAR</b> kata yang tidak asing bagi telinga kita.

<br>Semakin banyak yang kamu baca<br>Semakin banyak yang kamu tau<br>Semakin banyak yang kamu tau, akan semakin sering kamu belajar.<br>Semakin banyak kamu belajar akan semakin berilmu.<br>Semakin kamu berilmu maka semakin banyak relasi.<br>Semakin banyak relasi maka akan semakin mudah bagi kamu untuk sekedar mengelilingi dunia ini.<p>Tujuan utama dari pendidikan adalah mengubah <b><u>Jendela</u></b> menjadi <b><u>Pintu</u></b></p><p>so ada pepatah mengatakan "<b>Tuntutlah ilmu sampai ke Negeri China"</b></p>

</div>

</body>

</html>

hasil gambar dari script diatas

hasil gambar dari script diatas setelah Hover

HTML

<html>

<head>

<title>Profil</title>

</head>

<body>

<a class="head">KURNIA</a><br></marquee>

</div>

<ul>

<li><a href="profil.html" class="menu">Profile</a></li>

<li><a href="galeri.html" class="menu">Gallery</a></li>

<li><a href="kontak.html" class="menu">Contact Me</a></li>

</ul>

</div>

<tr>

</tr>

<tr>

<td>Nama Lengkap</td>

<td>Kurnia</td>

</tr>

<tr>

<td>Nama Panggilan</td>

</tr>

<tr>

<td>Tempat Lahir</td>

<td>Bontang</td>

</tr>

<tr>

<td>Tanggal Lahir</td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td>Perempuan</td>

</tr>

<tr>

<td>Agama</td>

<td>Islam</td>

</tr>

<tr>

<td>Alamat</td>

<td>Jl. Selat Badung Rt.14 No.32 Lengkol Bontang Selatan</td>

</tr>

<tr>

<td>Status</td>

<td>Mahasiswa</td>

</tr>

<tr>

<td>Kewarganegaraan</td>

</tr>

<tr>

<td colspan="1"><b>B. RIWAYAT PENDIDIKAN</b></td>

</tr>

<tr>

<td>SMK Putra Bangsa Bontang</td>

<td>Tahun Masuk</td>

<td>Tahun Lulus</td>

</tr>

<tr>

<td>SMP YPPI Bontang</td>

<td>Tahun Masuk</td>

<td>Tahun Keluar</td>

</tr>

<tr>

<td>SD-SMP Negeri 7 terpadu</td>

<td>Tahun Masuk</td>

<td>Tahun Keluar</td>

</tr>

<tr>

<td colspan="3"><b>C. DATA ORANG TUA</b></td>

</tr>

<tr>

<td>Kamistan.M</td>

</tr>

<tr>

<td>Maemuna</td>

</tr>

<tr>

<td>Aalamat</td>

<td>Jl. Selat Badung Rt.14 No.32 Lengkol Bontang Selatan</td>

</tr>

<a id="tombol" href="project.html">Beranda</a>

</table>

</div>

</body>

</html>

hasil gambar dari script diatas

hasil gambar dari script diatas setelah Hover

HTML

<html>

<head>

<title>Galeri</title>

</head>

<body>

<div class="header"><marquee><img id="lgo" src="D:/HTML/logo stitek.png" width="80" height="80" align="top"><a class="head">KURNIA</a></marquee></div>

<ul>

<li><a href="profil.html" class="menu">Profile</a></li>

<li><a href="galeri.html" class="menu">Gallery</a></li>

<li><a href="kontak.html" class="menu">Contact Me</a></li>

</ul>

</div>

<div class="galeri"><a id="tombol" href="project.html">Beranda</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

hasil gambar dari script diatas

hasil gambar dari script diatas setelah Hover

HTML

<html>

<head>

<title>Kontak</title>

</head>

<body>

<div class="header"><marquee ><img id="lgo" src="D:/HTML/logo stitek.png" width="80" height="80" align="top"><a class="head">KURNIA</a></marquee></div>

<ul>

<li><a href="profil.html" class="menu">Profile</a></li>

<li><a href="galeri.html" class="menu">Gallery</a></li>

<li><a href="kontak.html" class="menu">Contact Me</a></li>

</ul>

</div>

<tr>

<td>Email</td>

<td>Kurnia_amai@yahoo.co.id</td>

</tr>

<tr>

<td>Facebook</td>

<td>Kurnia AmAi</td>

</tr>

<tr>

<td>Twitter</td>

<td>@Kurnia2106</td>

</tr>

<tr>

<td>Instagram</td>

</tr>

<tr>

</tr>

<tr>

<td>Wechat</td>

</tr>

<tr>

<td>Kurnia Amai</td>

</tr>

<a id="tombol" href="project.html">Beranda</a>

</table>

</div>

</body>

</html>

hasil gambar dari script diatas

hasil gambar dari script diatas setelah Hover

Dari gambar yang didapat diatas tentu saja di link ke CSS.

CSS:

.header{

width:700px;

margin:0 auto;

height:100px;

line-height:100px;

border-radius:50px 50px 50px 50px;

color:darkblue;

text-align: bottom;

}

a.head{

padding:10px;

font-size: 40px;

margin-left:10px;

font-family:courier;

font-weight:bold;

text-shadow:4px 4px 4px grey;

}

body{

}

.nav{

padding:10px;

width:1000px;

background-color:transparent;

margin:0 auto;

width:700px;

border-radius:50px 50px 50px 50px;

text-align: center;

float:bottom;

}

ul{

margin:0 auto;

}

li{

list-style:none;

display:inline-block;

padding-top:10px;

padding-bottom:10px;

}

a.menu{

text-decoration:none;

margin-left:10px;

font-weight:bold;

cursor:pointer;

border-radius: 10px 50px 10px 50px;

padding:10px 20px;

color:lightcyan;

}

a.menu:hover{

color:darkred;

}

.content{

margin:0 auto;

padding:10px;

background:-webkit-linear-gradient(top,lightyellow,lightgrey,darkkhaki,darkgreen);

width:700px;

height:400px;

border-radius:50px 50px 50px 50px;

padding-top:10px;

padding-bottom:10px;

color:blue;

border-top:5px solid silver;

box-shadow:6px 10px 10px grey;

text-align: center;

}

.content:hover{

}

#profil{

margin: 0 auto;

padding:10px;

background-color:darksalmon;

width:900px;

height:auto;

border-radius:50px 50px 50px 50px;

padding-top:10px;

padding-bottom:10px;

color:red;

border-top:5px solid silver;

box-shadow:6px 10px 10px grey;

text-align: center;

}

#profil:hover{

color:blue;

}

#kontak{

margin: 0 auto;

padding:10px;

background-color:darkcyan;

width:700px;

height:auto;

border-radius:50px 50px 50px 50px;

padding-bottom:10px;

padding-left:30px;

border-top:5px solid silver;

box-shadow:6px 10px 10px grey;

text-align: center;

}

#kontak:hover{

}

.kontak{

color:black;

font-weight:bold;

}

.galeri{

margin: 0 auto;

padding:10px;

background-color:yellowgreen;

width:700px;

height:1700px;

border-radius:50px 50px 50px 50px;

padding-top:10px;

padding-bottom:10px;

border-top:5px solid silver;

box-shadow:6px 10px 10px grey;

text-align: center;

}

.galeri:hover{

}

#beranda{

margin: 0 auto;

padding:10px;

background-color:coral;

width:700px;

height:300px;

border-radius:50px 50px 50px 50px;

padding-top:20px;

padding-bottom:10px;

border-top:5px solid silver;

box-shadow:6px 10px 10px grey;

text-align: center;

font-weight: bold;

color: blue;

}

#beranda:hover{

font-weight: bold;

color: blue;

}

#tombol{

border:0px solid black;

padding:5px 10px;

background-color:greenyellow;

color:black;

font-weight:bold;

font-family:courier;

border-radius:5px 50px 5px 50px;

text-decoration: none;

cursor: pointer;

text-align: right;

}

#tombol:hover{

color:darkred;

}

#table{

padding-top: 56px;

padding-left: 10px;

color: darkgreen;

}

#img{

padding-top:20px;

padding-right: 20px;

}

#lgo{

padding-top:10px;

padding-left:30px;

}

#ime{

padding-top:20px;

padding-left:20px;

}

#gambar{

float: left;

width: 150px;

-moz-border-radius:50px;

-webkit-border-radius:10px;

margin: 90px 5px 5px 50px;

padding: 3px;

border:solid;

background-color:lightgrey;

cursor: pointer;

}

#gambar:hover{

float: bottom;

width: 150px;

-moz-border-radius:50px;

-webkit-border-radius:10px;

margin: 0px 15px 15px 0px;

padding: 10px;

border:solid;

background-color:blue;

}

--Sekian Terimakasih--

MyBlog_Kurnia A.K

Minggu, 22 Mei 2016

Tag Division (Div)