Halooo,,,sobat bloger,
Baiklah, pada materi kali ini, saya akan menjelaskan tutorial sederhana template website beserta coding-an Yang simple.
Disini saya akan menjelaskan pada template website yang sederhana dan model design web yang akan saya tampilkan adalah tentang web perusahaan " bank Mandiri ".
Oke langsung saja kita mulai ya guys...^_^………^_^
Pertama-tama, pastikan anda harus punya aplikasi sublimetext atau pun Notepad ++ dan kebetulan disini saya menggunakan aplikasi sublimetext.
Lalu silahkan ketik codingan serti tampilan pada gambar di bawah ini atau anda dapat melihat langsung pada codingan yg sudah saya aertakan di bawah gambar.
Berikut step by stepnya :
1. Ini adalah tampilan syntax css dari sublime text.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>RIRIN WEBSITE HTML</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
line-height: 1,5em;
font-family: Calibri;
}
#baris1 {
background:#fff;
padding: 5px 0;
position: fixed;
width: 100%;
top: 0;
font-size: 15px;
padding-bottom: 40px;
color: white;
}
.contaiter {
width: 900px;
margin: 0 auto;
}
#title{
display: inline;
float: left;
}
#menu{
padding: 10px 0;
list-style: none;
float: right;
}
#menu li {
display: inline;
margin-left: 20px;
text-transform: uppercase;
}
.fix {
clear: both;
}
.btn1{
border: 1px solid#fff;
color: blue;
text-decoration: none;
padding-right: 20px;
text-transform: uppercase;
}
b{
color: green;
font-size: 20px;
text-transform: uppercase;
}
h2, p {
margin-bottom: 40px;
}
#baris2 {
background-image: url(ground.jpg);
background: cover;
padding: 250px 0;
margin-top: 50px;
color: pink;
}
.btn {
border: 1px solid#fff;
padding: 10px 20px;
color: #fff;
text-transform: uppercase;
}
.btn:hover {
color: #66a0ff;
background: #fff;
text-decoration: underline;
}
#baris3 {
background-size: cover;
margin-top: 10px;
padding-left: 60px;
}
#baris4 {
padding: 15px;
color: #fff;
}
</style>
</head>
2. Ini adalah tampilan syntax html dari sublime text.
<body>
</div>
<div id="baris1">
<div class="container">
<img src="logomandiri.jpg" width="150" height="120" id="title" >
<h1>Axa Mandiri</h1>
<ul id="menu">
<li><a href="#" class="btn1"><b>Solusi Kami</b></a></li>>
<li><a href="#" class="btn1">Direktory</a></li>
<li><a href="#" class="btn1">Layanan Nasabah</a></li>
<li><a href="#" class="btn1">Tentang AXA Mandiri</a></li>
<li><a href="#" class="btn1">Nilai Kurs</a></li>
<li><a href="#" class="btn1">Keamanan</a></li>
<li><a href="#" class="btn1"><b>Scedule</b></a></li>
</ul>
<ul id="menu">
<li><a href="#" class="btn">Join bersama kami>
</div>
</div>
<div id="baris2">
<div class="container">
<img src="mandiri.jpg" width="600" height="600">
<img src="kantor.jpg" width="600" height="600">
</div>
<div id="baris3">
<div class="container">
<a href="#" color="red">Read More</a>
<h2>SOLUSI ADA BERSAMA KAMI UNTUK ANDA<br>AXA MANDIRI</h2>
<p>Solusi untuk Mendapat Berbagai pelayanan dari kami untuk kenyamanan anda beserta keluarga besar.
untuk itu mari Join bersama kami dan segera daftarkan diri anda menjadi seorang nasabah setia kami.
Solusi untuk mendapatkan perlindungan layanan kesehatan menyeluruh untuk anda dan keluarga.
Mari Menabung untuk masa depan yang akan datang agar menjadi masa depan yang lebih cerah seperti yang anda inginkan.</p>
<a href="#" color="red" class="btn">Solusi Konsultasi</a>
</div>
</div>
<div id="baris4">
<div class="container" align="center">
<h4>copyright 2019, Ririn TYA</h4>
</div>
</body>
</html>
Nah..... Setelah codingan css & html selesai, Selanjutnya langsung ke browser dan disini saya menggunakan " Firefox " untuk melihat tampilan website yg sudah ada codinganya tadi.
3. Tampilan Hasil Website, seperti gambar di bawah ini.
Disini saya menampilkan Logo perusahaan dan berbagai pelayanan jasa di website ini
Selain itu, di website ini saya juga menampilkan judul besar yaitu sekilas mengenai Perusahaan. Terdapat judul dan kalimat pelengkap lainya sebagai penjelas untuk mengetahui tentang perusahaan ini.
Untuk lebih jelasnya lagi dalam mengetahui website ini. Saya juga menampilkan situs longin
" solusi konsultasi "
yang mana fungsinya untuk lebih tau tentang layanan lainya.
lalu disertai dengan " Copyright Ririn Tya ".
Sekian tutorial yang bisa saya buat.
Mohon maaf jika terdapat kesalahan & kekurangan, karena disini saya masih dalam tahap pembelajaran. Silahkan tinggalkan kritik, saran, komentar mengenai lebih dan kurangnya materi pembahasan pada postingan ini.
SEKIAN & TERIMAKASIH
~Ririn_Tya_Ningsi
~Arsip : July 2019
Tidak ada komentar:
Posting Komentar