Hari ini saya akan sharing tentang Membuat halaman utama website reponsive.
Apa sih Responsive itu ?
Responsive
adalah teknik untuk membuat layout website dapat secara otomatis
menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun
orientasinya. Jadi tampilan yang berada di desktop komputer dengan
tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda
tampilannya.
Disini saya akan membuat halaman utama website reponsive.
1.Saya akan membuat tampilan nav / (bagian atas) reponsiv.
Contoh scriptnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="LIA" >
<title>2 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/2-col-portfolio.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
background-color:aqua ;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Profil</a>
</li>
<li>
<a href="#">Ekskul</a>
</li>
<li class="disabled">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">jurusan<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Rekayasa perangkat lunak</a>
</li>
<li>
<li class="divider">
</li>
<li>
<a href="#">Teknik komputer dan jaringan</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Multi media</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Animasi</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Teknik sepeda motor</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Teknik kendaraan ringan</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Keperawatan</a>
</li>
<li class="divider">
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="LIA" >
<title>2 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/2-col-portfolio.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
background-color:aqua ;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Profil</a>
</li>
<li>
<a href="#">Ekskul</a>
</li>
<li class="disabled">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">jurusan<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Rekayasa perangkat lunak</a>
</li>
<li>
<li class="divider">
</li>
<li>
<a href="#">Teknik komputer dan jaringan</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Multi media</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Animasi</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Teknik sepeda motor</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Teknik kendaraan ringan</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Keperawatan</a>
</li>
<li class="divider">
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
*Hasil contoh script di atas/ tampilan nav.
2.Membuat tampilan header / gambar .
Contoh script header :
<!-- Page Header -->
<div class="row">
<div class="col-lg-6">
<img class="img-responsive" src="gambar1.png" alt="gambar1.png" style="width:1200px;height:160px;">
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-6">
<img class="img-responsive" src="gambar1.png" alt="gambar1.png" style="width:1200px;height:160px;">
</div>
</div>
<!-- /.row -->
*Hasil contoh script header /gambar.
3.Membuat tampilan projects Row / isi.
Contoh script
<!-- Projects Row -->
<div class="row">
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="guru.jpg" alt="guru.jpg" style="width:304px;height:228px;">
</a>
<h3>
<a href="#">Penjemputan Mahasiswa KPL Univ. Negeri Malang </a>
</h3>
<p>Setelah melaksanakan KPL selama 1,5 bulan lamanya di SMKN 11 Malang akhirnya pada tanggal 29 Februari 2016 mahasiswa Universitas Negeri Malang dijemput oleh Bpk. Heru selaku dosen pembimbing.Setelah melaksanakan KPL selama 1,5 bulan lamanya di SMKN 11 Malang akhirnya pada tanggal 29 Februari 2016 mahasiswa Universitas Negeri Malang dijemput oleh Bpk. Heru selaku dosen pembimbing..</p>
</div>
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="rapat.jpg" alt="rapat.jpg" style="width:304px;height:228px;">
</a>
<h3>
<a href="#">Try Out Online dan Bimtek Proktor SMK Ujian Nasional Berbasis Komputer Tahun 2015/2016 </a>
</h3>
<p>Untuk merealisasikan pelaksanaan ujian nasional berbasis komputer (UNBK) tahun pelajaran 2015/2016 dinas pendidikan provinsi jawa timur membekali pengetahuan dan ilmu kepada proktor SMK Negeri/Swasta se Jawa Timur dengan melaksanakan Bimtek proktor yang dilaksanakan di hotel sahit montana 2 kota malang pada hari kamis-jumat 25-26 februari 2016. Pada kegiatan ini SMKN 11 Malang berkesempatan menjadi narasumber dengan kegiatan sosialisasi software try out online yang rencananya akan digunakan untuk pelaksanaan try out online se Jawa Timur..</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="uas.jpg" alt="uas.jpg" style="width:304px;height:228px;">
</a>
<h3>
<a href="#">Simulasi UNBK Tahap 2 </a>
</h3>
<p>Ujian Nasional Berbasis Komputer (UNBK) disebut juga Computer Based Test (CBT) adalah sistem pelaksanaan ujian nasional dengan menggunakan komputer sebagai media ujiannya. SMKN 11 Malang telah melaksanakan simulasi UNBK tahap 2 pada hari senin – kamis tanggal 22-25 Februari 2016 dan berjalan lancar..</p>
</div>
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="evercos.jpg" alt="evercos.jpg" style="width:304px;height:228px;">
</a>
<h3>
<a href="#">Sosialisasi Kerjasama SMK Teknologi (RPL, TKJ, TEI, TAV,MM) Dengan DNA, EVERCOSS, MERUVIAN </a>
</h3>
<p>Sosialisasi Kerjasama SMK Teknologi (RPL, TKJ, TEI, TAV,MM) Dengan DNA, EVERCOSS, MERUVIAN talah dilaksanakan pada hari kamis, 11 Februari 2016 bertempat di SMKN 11 Malang. Sosialisasi ini dihadiri oleh Kepala Sekolah SMK Se-Jatim yang ingin melakukan kerjasama dengan DNA, EVERCOSS, MERUVIAN.</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="guru.jpg" alt="guru.jpg" style="width:304px;height:228px;">
</a>
<h3>
<a href="#">Penjemputan Mahasiswa KPL Univ. Negeri Malang </a>
</h3>
<p>Setelah melaksanakan KPL selama 1,5 bulan lamanya di SMKN 11 Malang akhirnya pada tanggal 29 Februari 2016 mahasiswa Universitas Negeri Malang dijemput oleh Bpk. Heru selaku dosen pembimbing.Setelah melaksanakan KPL selama 1,5 bulan lamanya di SMKN 11 Malang akhirnya pada tanggal 29 Februari 2016 mahasiswa Universitas Negeri Malang dijemput oleh Bpk. Heru selaku dosen pembimbing..</p>
</div>
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="rapat.jpg" alt="rapat.jpg" style="width:304px;height:228px;">
</a>
<h3>
<a href="#">Try Out Online dan Bimtek Proktor SMK Ujian Nasional Berbasis Komputer Tahun 2015/2016 </a>
</h3>
<p>Untuk merealisasikan pelaksanaan ujian nasional berbasis komputer (UNBK) tahun pelajaran 2015/2016 dinas pendidikan provinsi jawa timur membekali pengetahuan dan ilmu kepada proktor SMK Negeri/Swasta se Jawa Timur dengan melaksanakan Bimtek proktor yang dilaksanakan di hotel sahit montana 2 kota malang pada hari kamis-jumat 25-26 februari 2016. Pada kegiatan ini SMKN 11 Malang berkesempatan menjadi narasumber dengan kegiatan sosialisasi software try out online yang rencananya akan digunakan untuk pelaksanaan try out online se Jawa Timur..</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="uas.jpg" alt="uas.jpg" style="width:304px;height:228px;">
</a>
<h3>
<a href="#">Simulasi UNBK Tahap 2 </a>
</h3>
<p>Ujian Nasional Berbasis Komputer (UNBK) disebut juga Computer Based Test (CBT) adalah sistem pelaksanaan ujian nasional dengan menggunakan komputer sebagai media ujiannya. SMKN 11 Malang telah melaksanakan simulasi UNBK tahap 2 pada hari senin – kamis tanggal 22-25 Februari 2016 dan berjalan lancar..</p>
</div>
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="evercos.jpg" alt="evercos.jpg" style="width:304px;height:228px;">
</a>
<h3>
<a href="#">Sosialisasi Kerjasama SMK Teknologi (RPL, TKJ, TEI, TAV,MM) Dengan DNA, EVERCOSS, MERUVIAN </a>
</h3>
<p>Sosialisasi Kerjasama SMK Teknologi (RPL, TKJ, TEI, TAV,MM) Dengan DNA, EVERCOSS, MERUVIAN talah dilaksanakan pada hari kamis, 11 Februari 2016 bertempat di SMKN 11 Malang. Sosialisasi ini dihadiri oleh Kepala Sekolah SMK Se-Jatim yang ingin melakukan kerjasama dengan DNA, EVERCOSS, MERUVIAN.</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<!-- /.row -->
<hr>
<!-- Pagination -->
<!-- /.row -->
<hr>
*Hasil tampilan script di atas tampilan project Row / isi.
4.membuat tampilan footer / bawah.
contoh script :
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<img src="index.jpeg" alt="">
<p>SMKN 11 Malang</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
<footer>
<div class="row">
<div class="col-lg-12">
<img src="index.jpeg" alt="">
<p>SMKN 11 Malang</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
*Hasil tampilan script di atas footer / bawah.
*Responsive tampilan mobile.
*Responsive tampilan desktop.
Selesai.
Wassalamualaikum wr.wb.
Wassalamualaikum wr.wb.
0 komentar:
Posting Komentar