Pertama-tama download css dan javascript pada http://twitter.github.io/bootstrap/ , kemudian setelah didownload buat rancangan design website dengan html.
Langkah kedua copy source code dibawa ini
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>#About.me</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link href='http://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="index.html" class="brand">#about.me</a>
<a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="collapse nav-collapse">
<form action="" class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="search..." />
</form>
<ul class="nav pull-right">
<li><a href="index.html">#home</a></li>
<li><a href="" data-toggle="modal" data-target="#modal-contact-form">#contactme</a></li>
</ul>
</div>
</div>
</div>
</div> <!-- end navbar -->
<!-- MODAL CONTACT FORM -->
<div class="modal hide fade" id="modal-contact-form">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>#ContactMe</h3>
</div>
<div class="modal-body">
<form action="" class="form-horizontal">
<div class="control-group">
<label for="contact-name" class="control-label">Name:</label>
<div class="controls">
<input type="text" id="contact-name" />
</div>
</div>
<div class="control-group">
<label for="contact-email" class="control-label">Email:</label>
<div class="controls">
<input type="email" id="contact-email" />
</div>
</div>
<div class="control-group">
<label for="contact-message" class="control-label">Message:</label>
<div class="controls">
<textarea name="contact-message" id="contact-message" cols="30" rows="10"></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary" value="Send Message" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<a href="" data-dismiss="modal" class="btn">Cancel</a>
</div>
</div> <!-- end modal -->
<div class="container">
<!-- TESTIMONIALS -->
<h3>Welcome</h3>
<div class="carousel slide" id="runtexts">
<ol class="carousel-indicators">
<li data-target="#runtexts" data-slide-to="0" class="active"></li>
<li data-target="#runtexts" data-slide-to="1"></li>
<li data-target="#runtexts" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<blockquote>
<small>This is yudo's homepage</small>
</blockquote>
</div>
<div class="item">
<blockquote>
<small>Thank you</small>
</blockquote>
</div>
<div class="item">
<blockquote>
<small>For Visited</small>
</blockquote>
</div>
</div>
</div> <!-- end carousel -->
<hr />
<!-- PAGE CONTENT -->
<section>
<div class="row c-product-showcase">
<div class="span4">
<a href="#"><img src="img/custom/facebook-logo.jpg" alt="Demo" class="img-polaroid" /></a>
<h4><a href="#">#Facebook</a></h4>
<p>On Facebook</p>
<a href="http://facebook.com/yudo.rahadya" class="btn btn-primary" target="_blank" >See More <span class="icon-chevron-right"></span></a>
</div>
<div class="span4">
<a href="#"><img src="img/custom/twitter-logo.jpg" alt="Demo" class="img-polaroid" /></a>
<h4><a href="#">#Twitter</a></h4>
<p>On Twitter</p>
<a href="http://twitter.com/yudo_rahadya" class="btn btn-info" target="_blank" >See More <span class="icon-chevron-right"></span></a>
</div>
<div class="span4">
<a href="#"><img src="img/custom/google-plus-logo.jpg" alt="Demo" class="img-polaroid" /></a>
<h4><a href="#">#Google +</a></h4>
<p>On Google +</p>
<a href="https://plus.google.com/106634119865811515446" class="btn btn-danger" target="_blank" >See More <span class="icon-chevron-right"></span></a>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<section>
<hr />
<p class="text-center muted">© Copyright 2013 <a href="http://twitter.com/yudo_rahadya"
target="_blank">
@yudo_rahadya</a></p>
</section>
</div> <!-- end container -->
<!-- JavaScript -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 5000
});
});
</script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Finger+Paint::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
</body>
</html>
langkah ketiga menghosting website caranya sebagai berikut ini
1. membuat akun hostingan terlebih dahulu. hosting yang saya pakai disini hosting yang gratis alias free. hostingan yang saya pakai disini adalah idhostinger.com. disini saya akan menjelaskan bagaimana cara mendaftarnya.
pertama buat akun terlebih dahulu
2. langkah kedua isikan form berikut ini:
3. Jika dalam mengisi form buat akun ini berhasil maka akan mendapatkan notifikasi, bahwa hosting tersebut sudah mengirimkan sebuah link yang berisi tentang verifikasi akunnya.
Setelah melakukan verifikasi akun maka link akan mendirect langsung ke cpanel : cpanel.idhostinger.com
4. jika sudah muncul maka tampilannya akan seperti dibawah ini :
5. Setelah itu pilih tab control panel maka akan muncul seperti berikut ini
6. Kemudian klik create new untuk melakukan pemilihan domain.
7. karena saya disini ingin membuat domain yang free maka saya pilih yang gratis dah kemudian klik order.
maka akan muncul form Create a New Account dan isi form tersebut seperti dibawah ini :
8. Jika data sudah benar maka klik create, maka akan muncul seperti berikut ini
9. Disana terdapat notifikasi diatasnya yang berarti domain anda akan aktif dalam 12 jam, tetapi kenyataannya saya hanya menunggu beberapa menit saja sudah bisa dibuka. Setelah menunggu beberapa menit, refesh page tersebut maka akan muncul button switch. fungsi button switch tersebut adalah sebagai management website kita dimana terdapat informasi domain, ip address, username dan password.
10. Setelah itu maka akan saya upload data html dan image, pasti anda bingung upload data nya bagaimana. Saya akan menjelaskan bagaimana cara menguploadnya. Pertama tama anda harus mempunyai software FTP server dahulu. Software yang saya pakai disini adalah FilleZilla. Jika ingin mendownload software tersebut saya akan memberikan link dibawah ini :
Jika sudah didownload dan diinstal maka tampilannya akan seperti berikut ini :
11. Setelah itu isi mesin, nama pengguna, kata kunci, dan port setelah itu klik koneksi cepat. Kemudian dibawahnya terdapat dua buah kolom direktori. kolom direktori sebelah kiri adalah kolom direktori komputer saya dan sebelah kanan adalah kolom direktori server. Sebelumnya saya belum menjelaskan jika sudah berhasil terkoneksi maka akan muncul folder public_html didalam folder tersebut terdapat file yang bernama default.php, setelah itu hapus default.php tersebut dan kemudian baru lah anda dapat mengupload file html dan image anda kedalam server. Jika sudah Siapkan root direktori komputer kita dan kemudian klik file html klik kanan dan pilih upload.
12. Jika File sudah terupload semua maka website sudah bisa diakses.Ini adalah url website yang baru saja saya buat http://yudorahadya.vv.si/
atau jika ingin download source codenya bisa disini
screenshot
atau jika ingin download source codenya bisa disini
screenshot
Nama : Yudo Rahadyatmo
Npm : 57411634
Kelas : 2IA12
Comments
Post a Comment