Tutorial Membuat HTML Dengan 2 Kolom
1. Pertama
buka aplikasi PHP editor disini saya memakai adobe Dreamweaver, jika tidak
punya dapat menggunakan PHP editor lain seperti Bracket, Sublim dan lain lain.
Untuk membuat file baru Klik file > new > pilih html > kemudian
create. Maka akan terbuka file kerja baru Kemudian ketik source code seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title> // menampilkan nama pada tab browser
</head>
<body> // Menampilkan tubuh/ keseluruhan web
<div class="wrapper"> // kelas
wrapper untuk mengatur tampilan keseluruhan halaman web
<header> // membuat kepala halaman web
<h1></h1> // membuat judul pada header
<nav> // bagian menempatkan kolom dan baris pada header, untuk
membuat jumlah laman web
<ul> // membuat daftar kolom
<li></li> // membuat daftar baris
</ul>
</nav>
</header>
<section class="courses"> // kelas ini merupakan isi dari halaman 1 untuk menempatkan gambar artikel
dan keterangannya
<article> // tempat menulis artikel
<figure> //bagian yang digunakan untuk gambar artikel
</figure>
<hgroup> // bagian yang digunakan untuk isi artikel
</hgroup>
</article>
</section>
<aside> // ini merupakan bagian untuk isi halaman 2, berisi
post popular dan kontak
<section class="popular-rexipes"> </section> // kolom ini
berisi post popular
<section class="contact-details">
</section> // kolom ini
berisi kontak
</aside>
<footer> // membuat bagian bawah halaman web
</footer>
</div><!--
.wrapper -->
</body> </html>
2. Lalu buat
file CSS yang akan mengatur bentuk tampilan halaman web, pertama buat file CSS
dengan cara klik file > New > CSS, kemudian masukan struktur CSS seperti
SOURCE CODE dibawah :
@charset
"utf-8";
/* CSS Document */
<style type="text/css">
header, section, footer, aside, nav, article, figure, figcaption
{
display: block;
}body{
color :#66666;
background-color: #f9f8f6;
}.wrapper{
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;
}header{
height: 160px;
background-color:#999;
}h1{
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;
}nav, footer{
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;
}nav ul{
margin: 0px;
padding: 5px 0px 5px 30px;
}nav li{
display: inline;
margin-right: 40px;
}nav li a{
color: #ffffff;
}nav li a:hover, nav
li a.current{
color: #000000;
}section.courses{
float: left;
width: 659px;
border-right: 1px solid #eeeeee;
}article{
clear: both;
overflow: auto;
width: 100%;
}hgroup{
margin-top: 40px;
}figure{
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}figcaption{
font-size: 90%;
text-align: left;
}aside{
width: 230px;
float: left;
padding: 0px 0px 0px 20px;
}aside section a{
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;
}aside section a:hover{
color: #985d6a;
background-color: #efefef;
}a{
color: #de6581;
text-decoration: none;
}h1, h2, h3{
font-weight: normal;
}h2{
margin: 10px 0px 5px 0px;
padding: 0px;
}h3{
margin: 0px 0px 10px 0px;
color: #de6581;
}aside h2{
padding: 30px 0px 10px 0px;
color: #de6581;
}footer{
font-size: 80%;
padding: 7px 0px 0px 20px;
}
</style>
Jika sudah, kita harus menyimpan File CSS tersebut dengan nama “main”
kemudian mentautkan File CSS dengan html yang kita buat sebelumnya dengan cara
ketik
<link rel="stylesheet" type="text/css" href="main.css"/>
Diletakan setelah <title>, jika sudah Maka tampilan halaman web akan
seperti ini :
3. Kemudian
isi bagian halaman web agar sesuai dengan yang kita inginkan pada file html
yang kita buat sebelumnya :
a.
Pertama buat isi dari hedear dengan isi seperti dibawah ini :
<header>
<h1>Berita
Kampus</h1>
<nav>
<ul>
<li><a href="" class="current">beranda</a></li>
<li><a href="">berita terkini</a></li>
<li><a href="">berita populer</a></li>
<li><a href="">tentang kami</a></li>
<li><a href="kontak_1.php">kontak</a></li>
</ul>
</nav>
</header>
maka tampilannya akan seperti ini :
b.
Untuk menambahkan gambar dan tulisan atau isi pada
artikel bisa mengetik source coe berikut :
<section class="courses">
<article>
<figure>
<img src="images/pnbit.jpg alt="soto" />
<figcaption>PNB IT Cempetition</figcaption>
</figure>
<hgroup>
<h3>PNB IT Competition</h3>
</hgroup>
<p>PNT IT Competition merupakan event
tahunan yang diselenggarakan oleh
jurusan Teknik Elektro Politeknik
Negeri Bali, juga merupakan ajang kompetisi
di bidang IT yang meliputi 14 cabang
lomba untuk tingkat pelajar SMP, SMA/SMK
(atau sederajat), dan juga mahasiswa.</p>
</article>
<Figure>digunakan
untuk nemempatkan gambar dan <figcaption> untuk memberi judul gambar
tersebut. <Hgroup> untuk menambahkan judul artikel dan <p> untuk
isi artikel. Jika sudah maka tampilannya akan seperti ini :
Untuk membuat artikel kedua dapat mengetikan SOURCE CODE diatas dengan
gambar dan artikel yang berbeda
c.
Untuk
kolom kedua, kita akan mengisinya dengan berita popular dan kontak :
<aside>
<section class="popular-rexipes">
<h2>Berita Populer</h2>
<a href="">PNB IT
Competition</a>
<a href="">PORSENIMA</a>
<a href="">FKNPI</a>
<a href="">PNB Fair</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>Politeknik Negeri Bali<br /></p>
</section>
</aside>
d.
Terakhir
menambahkan <footer> untuk mengisi copyright sumber web :
footer>©
2016 Politeknik Negeri Bali</footer>
Maka tampilannya akan seperti ini :
Tidak ada komentar:
Posting Komentar