Kali ini saya akan membuat halaman utama yaitu tampilan website responsive. dan maaf jika saya tidak menampilkan scripnya karena saya tidak coding manual tapi menggunakan bootstrap template.
Apa itu responsive ?
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.
1. kita download terlebih dahulu template di bootstrap template http://startbootstrap.com/template-categories/all/ kalian bisa memilih template yang kalian suka dan saya juga sudah memilih template yang saya suka, jika kalian sudah memilih kalian download.
2. jika downloadnya sudah selesai kita tinggal extact dan tinggal kita edit tapi jangan langsung edit kita liat dulu isi folder yang lainnya.
3. jika sudah kita masuk klik kanan index.html
4. Sebelum kita masuk ke script kita ke tampilannya terlebih dahulu.
5. Kan tampila menu atau nav(bagian atas) "tentang kami","About","Contact" saya akan menjelaskan dari masing halaman utama yang ada, di gambar yang atas.
6. kalian bisa melihat secriptnnya di index.html, ini script dari tampilan halaman utama dulu ya.
Script:
<!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="">
<title>Halaman utama reponsif</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- 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]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="file:///home/otto/Downloads/sekolah/index.html">SMK NEGERI 11 MALANG</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 navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#portfolio">Tentang Kami</a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#contact">contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="depan.jpg" alt="">
<div class="intro-text">
<span class="name">SMK NEGERI 11 MALANG</span>
<hr class="star-light">
<span class="skills">Sekolah Menegah Kejuruan 11 Malang</span>
</div>
</div>
</div>
</div>
Hasil:
7. sekarang kita masuk ke proses penbuatan link yang ada di halaman utama.
#Tentang Kami#
Hasil:
8. Kemudian kita masu ke lilnk "contact"
Hasil :
9. Kemudian kita masu ke lilnk "About", about bisa berisi tentang berita ataupun tentang yang lainnya.
Hasil :
10. dan dibawah ini adalah sebagai tambahan script yang selanjutnya
Hasil:
11.dan yang membuat halaman bisa menjadi responsif
12. Dan ini tampilanyang responsif:
# tampilan komputer:
# tampilan tablet:
#dan tampilan menu ada di bagian samping yang bertuliskan " SMK NEGERI 11 MALANG"
13. Tampilan hp :
# dan bagian menunya ada di atas yang bertuliskan "SMK NEGERI 11 MALANG"
Maaf jika ini masih berantakkan karena saya masuh dalam teknik belajar jadi masih sedikit berantakkan:)
Wassalamualaikum Wr.Wb
Komentar ini telah dihapus oleh pengarang.
BalasHapus