Joshua Filbert(53416759)
1.
Buka Bootstrap di https://getbootstrap.com/
2.
Kemudiian buatlah
folder dengan format html
menggunakan text editor, pada bagian ini saya membuat website sederhana dengan
text editor Visual Studo Code
3.
pada default folder hmtl maka sudah muncul code: <!DOCTYPE html>
<html>
<head>
<title>Softskill</title>
<body>
</body>
</html>
4.
kembali kehalaman bootstrap, kita dapat menggunakan
bootstrap dengan mengimportnya menggunakan link diantara
<head>.....</head> atau kita dapat mengunduhnya secara langsung dan
mengubah link importnya ke folder bootstrap yang sudah didownnload
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="tugassoftskill.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></head>
5.
pertama saya ingin membuat tulisan cover yang besar. Di Bootstrap
sudah disediakan template tersebut dengan nama JUMBOTRON pada bagian
dokumentai dengan link https://getbootstrap.com/docs/4.3/components/jumbotron/
6.
Setelah itu Copy template
yang sudah disediakann oleh bootstrap tersebut ke bagian diantara
<Body>....</body> seperti contoh:
<body>
<!--Jumbotron-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-8
offset-2">
<div class="jumbotron
jumbotron-fluid text-center">
<div class="container">
<h1 class="display-4">Web Science</h1>
<p class="lead">Web Science dapat disimpulkan yaitu segala
sesuatu yang berkaitan dengan ilmu pengetahuan yang diperoleh dari sumber yang
akurat dan dapat di unduh dari dunia maya tanpa kita harus menuju ke sumber
informasi yang ada di informasi yang ingin kita cari, sehingga memudahkan kita
untuk memperoleh informasi.</p>
</div>
</div>
</div>
</div>
</body>
7.
Kita dapat mengubah tulisan yang ada pada jumbotron tersebut
dah menambahkan beberapa option untuk mengubah font dan posisi tulisan yang ada
8.
setelah itu pada bagian bawah kita menambahkan template card
dari bootstrap dan dapat diambil dari link : https://getbootstrap.com/docs/4.3/components/card/
9.
lalu tambahkan link berikut diawah </div> karena kita
akan menambahkan komponenn baru dibawah jumbotron bukan didalam jumbotron
seperti contoh:
body>
<!--Jumbotron-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-8
offset-2">
<div class="jumbotron
jumbotron-fluid text-center">
<div class="container">
<h1 class="display-4">Web Science</h1>
<p class="lead">Web Science dapat disimpulkan yaitu segala sesuatu
yang berkaitan dengan ilmu pengetahuan yang diperoleh dari sumber yang akurat
dan dapat di unduh dari dunia maya tanpa kita harus menuju ke sumber informasi
yang ada di informasi yang ingin kita cari, sehingga memudahkan kita untuk
memperoleh informasi.</p>
</div>
</div>
</div>
</div>
<!--Jumbotron-->
<!--CardPicture-->
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card
style-card-margin">
<img src="balsoft.jpg" class="card-img-top" alt="..." >
<div class="card-body">
<h5 class="card-title">Iqbal Nurfaizi (53416563)</h5>
<p class="card-text">Untukku sukses itu adalah mencari pengalaman
bukan kemapanan </p>
<a href="https://www.instagram.com/iqbal_nurfaizi/?hl=id" class="btn btn-info">Instagram</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card
style-card">
<img src="iqisoft.jpg" class="card-img-top" alt="..." >
<div class="card-body">
<h5 class="card-title">Rifqi Ranadi (NPM)</h5>
<p class="card-text">Sederas ombak lautan, ada rindu yang datang
bersama kenangan</p>
<a href="https://www.instagram.com/rifqiranadi/?hl=id" class="btn btn-info">Instagram</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card
style-card">
<img src="hamidsoft.jpg" class="card-img-top" alt="..." >
<div class="card-body">
<h5 class="card-title">Luthfi Hamid (NPM)</h5>
<p class="card-text">Mereka bilang impian saya terlalu besar, saya
bilang mereka berpikir terlalu kecil</p>
<a href="https://www.instagram.com/mdskb_/?hl=id" class="btn btn-info">Instagram</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card
style-card-margin">
<img src="joshsoft.jpg" class="card-img-top" alt="..." >
<div class="card-body">
<h5 class="card-title">Joshua Filbert (NPM)</h5>
<p class="card-text">Indeed, the great friends are hard to leave,
and difficult to forget</p>
<a href="https://www.instagram.com/joshuafilbert/?hl=id" class="btn btn-info">Instagram</a>
</div>
</div>
</div>
</div>
</div>
<!--CardPicture-->
10. setelah itu kita
dapat mengubah tulisan dan gambar yang telah disediakan
11. untuk menambahkan
gambar pada bagian (src=”#”) dengan mengetikkan nama folder gambar tersebut
beserta formatnya berupa .jpg/png/DLL :
<img src="#" class="card-img-top" alt="..." >
12. Berikut adalah keseluruhannya
<!DOCTYPE html>
<html>
<head>
<title>Softskill</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="tugassoftskill.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></head>
</head>
<body>
<!--Jumbotron-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-8
offset-2">
<div class="jumbotron
jumbotron-fluid text-center">
<div class="container">
<h1 class="display-4">Web Science</h1>
<p class="lead">Web Science dapat disimpulkan yaitu segala
sesuatu yang berkaitan dengan ilmu pengetahuan yang diperoleh dari sumber yang
akurat dan dapat di unduh dari dunia maya tanpa kita harus menuju ke sumber
informasi yang ada di informasi yang ingin kita cari, sehingga memudahkan kita
untuk memperoleh informasi.</p>
</div>
</div>
</div>
</div>
<!--Jumbotron-->
<!--CardPicture-->
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card
style-card-margin">
<img src="balsoft.jpg" class="card-img-top" alt="..." >
<div class="card-body">
<h5 class="card-title">Iqbal Nurfaizi (53416563)</h5>
<p class="card-text">Untukku sukses itu adalah mencari pengalaman
bukan kemapanan </p>
<a href="https://www.instagram.com/iqbal_nurfaizi/?hl=id" class="btn btn-info">Instagram</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card
style-card">
<img src="iqisoft.jpg" class="card-img-top" alt="..." >
<div class="card-body">
<h5 class="card-title">Rifqi Ranadi (NPM)</h5>
<p class="card-text">Sederas ombak lautan, ada rindu yang datang
bersama kenangan</p>
<a href="https://www.instagram.com/rifqiranadi/?hl=id" class="btn btn-info">Instagram</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card
style-card">
<img src="hamidsoft.jpg" class="card-img-top" alt="..." >
<div class="card-body">
<h5 class="card-title">Luthfi Hamid (NPM)</h5>
<p class="card-text">Mereka bilang impian saya terlalu besar, saya
bilang mereka berpikir terlalu kecil</p>
<a href="https://www.instagram.com/mdskb_/?hl=id" class="btn btn-info">Instagram</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card
style-card-margin">
<img src="joshsoft.jpg" class="card-img-top" alt="..." >
<div class="card-body">
<h5 class="card-title">Joshua Filbert (NPM)</h5>
<p class="card-text">Indeed, the great friends are hard to leave,
and difficult to forget</p>
<a href="https://www.instagram.com/joshuafilbert/?hl=id" class="btn btn-info">Instagram</a>
</div>
</div>
</div>
</div>
</div>
<!--CardPicture-->
</body>
</html>
13.
Berikut adalah cara pembuatan website
sederhana dengan bootstrap. Ini adalah sebagian dari front end web, dimana web
web besar sudah menggunakan Bahasa pemograman dan system database yang canggih
14. Untuk melihat webnya bisa dilihat di link: http://softskill.epizy.com/tugassfotskill.html
14. Untuk melihat webnya bisa dilihat di link: http://softskill.epizy.com/tugassfotskill.html
Tidak ada komentar:
Posting Komentar