Desain Web

Everyone Should Learn To Design
BAB I - IV
A. Busyra Fuadi
MEMBUAT TAMPILAN USER INTERFACE MENGGUNAKAN
BOOTSTRAP
Untuk membuat sebuah web yang pertama yang harus kita lakukan adalah
membuat strukturnya, buatlah sebuah folder lalu buat file index.html lalu
ketikan scriptnya di VS Code seperti dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
</body>
</html>
Setelah itu kita masukan library dari Bootstrap 4 ke dalam projek kita agar
tampilan ( user interface ) lebih menarik. Letakan link css di antara tag
<head>disini linknya</head> dan letakan file js di antara tag <body>disini
linknya</body>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>


<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">


<link href="css/style.css" rel="stylesheet">
</head>
<body>


<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Nah sekarang mari kita coba membuat sebuah navbar dan dropdown untuk
projek kita. Ketikan script di bawah ini di antara tag <body>disini code</body>.


<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-
top">
<div class="container">
<a class="navbar-brand" href="index.html">Html Css Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarResponsive" aria-
controls="navbarResponsive" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Materi Belajar
</a>
<div class="dropdown-menu dropdown-menu-right" aria-
labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="#">HTML5</a>
<a class="dropdown-item" href="#">CSS3</a>
<a class="dropdown-item" href="#">Bootstrap 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</div>
</nav>
Setelah script diatas di input lalu buat script selanjutnya, kita akan membuat
sebuah carousel atau slider. Ketikan script carousel pas dibawah script navbar.

<header>
<div id="carouselExampleIndicators" class="carousel slide" data-
ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-
to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-
to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">

<div class="carousel-item active" style="background-image:
url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Slide Pertama</h3>
<p>ini adalah deskripsi untuk slide pertama.</p>
</div>
</div>

<div class="carousel-item" style="background-image:
<h3>Slide Kedua</h3>
<p>ini adalah deskripsi untuk slide kedua.</p>
</div>
</div>

<div class="carousel-item" style="background-image:
<h3>Slide Ketiga</h3>
<p>ini adalah deskripsi untuk slide ketiga.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
Selanjutnya kita akan membuat sebuah content atau dengan kata lain kita
akan membuat sebuah isi dari website tersebut. Silahkan ketikan script
dibawah ini dan letakan posisinya pas dibawah script penutup </header>.


<h3 class="my-4">Materi Belajar <span class="badge badge-
info">Baru</span></h3>

<div class="row">
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">HTML5</h5>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
<a href="#" class="btn btn-danger">selengkapnya</a>
</div>
</div>
</div>
<h5 class="card-title">CSS3</h5>
<a href="#" class="btn btn-primary">selengkapnya</a>
</div>
</div>
</div>
<h5 class="card-title">Bootstrap 4</h5>
<a href="#" class="btn btn-success">selengkapnya</a>
</div>
</div>
</div>
</div>

<br>

<div class="my-5">
<div class="row">
<div class="col-lg-6">
<h2>Web Desain</h2>
<p>The Modern template by Get Bootstrap includes :</p>
<ul>
<li>
<strong>Bootstrap v4</strong>
</li>
<li>HTML5</li>
<li>CSS3</li>
<li>jQuery</li>
<li>Font Awesome</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Corporis, omnis doloremque non cum id reprehenderit, quisquam totam
aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia
dolorum ducimus unde.</p>
</div>
<img class="img-fluid rounded" src="http://placehold.it/700x450"
alt="">
</div>
</div>
</div>

<br>

<section id="clients" class="section-padding">
<div class="my-5">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<div class="mb-5">
<h3 class="mb-2">Partner Kami</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Debitis, dignissimos?</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-6 col-md-3 text-center">
<img src="img/clients/client03.png" alt="partner"
class="img-fluid">
</div>
class="img-fluid">
</div>
class="img-fluid">
</div>
class="img-fluid">
</div>
</div>
</div>
</div>
</section>

<hr>
</div>
Akhirnya kita sampai di akhir sebuah web atau dengan kata lain dinamakan
footer. Ketikan script dibawah ini pas di bawah script </div> diatas.


<footer class="page-footer font-small mdb-color darken-3 pt-4">


<div class="row d-flex justify-content-center">

<div class="col-md-6">

<div class="embed-responsive embed-responsive-16by9 mb-4">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/H4MkGzoACpQ" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>


<div class="footer-copyright text-center py-3">
Copyright © 2020 Bootstrap inc. All Rights Reserved.
</div>

</footer>
Oke sekian dulu untuk pelajaran Bab I ini, terima kasih.

BAB II
Sekarang kita akan membuat sebuah tampilan untuk link about, pertama-tama
buat file about.html lalu masukan coding navbar setelah itu ketikan code
dibawah ini :




<h1 class="mt-4 mb-3">
About
</h1>


<div class="row">
<img class="img-fluid rounded mb-4"
src="http://placehold.it/750x450" alt="">
</div>
<h2>Modern Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed
voluptate nihil eum consectetur similique? Consectetur, quod, incidunt,
harum nisi dolores delectus reprehenderit voluptatem perferendis dicta
dolorem non blanditiis ex fugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Saepe, magni, aperiam vitae illum voluptatum aut sequi impedit non velit ab
ea pariatur sint quidem corporis eveniet. Odit, temporibus reprehenderit
dolorum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et,
consequuntur, modi mollitia corporis ipsa voluptate corrupti eum ratione ex
ea praesentium quibusdam? Aut, in eum facere corrupti necessitatibus
perspiciatis quis?</p>
</div>
</div>
</div>

<hr>

<div class="footer-copyright text-center py-3 bg-dark text-white">
Copyright © Bootstrap 2020
</div>

Setelah kita membuat link about mari kita lanjut membuat link contact,
buatlah file bernama contact.html lalu masukan coding navbar setelah itu
ketikan code dibawah ini :

<section class="section-padding">
<div class="row">
<div class="col-lg-6 col-sm-12 col-md-12">
<div class="my-3">
<h2 class="mb-3">Contact</h2>
<p>Have a project on mind,want to make an
consultant. Don't hesistate to contact us.Let's have atalk
together.Colaborat eyour project to done quickly</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-sm-12">
<form class="contact__form" method="post"
action="mail.php">

<div class="row">
<div class="col-12">
<div class="alert alert-success
contact__msg" style="display: none" role="alert">
Your message was sent successfully.
</div>
</div>
</div>

<div class="row">
<div class="col-md-6 form-group">
<input name="name" type="text" class="form-
control" placeholder="Name" required>
</div>
<input name="email" type="email"
class="form-control" placeholder="Email" required>
</div>
<input name="subject" type="text"
class="form-control" placeholder="Subject" required>
</div>
<div class="col-12 form-group">
<textarea name="message" class="form-
control" rows="6" placeholder="Message" required></textarea>
</div>
<div class="col-12 mt-4">
<input name="submit" type="submit" class="
btn btn-success" value="Send Message">
</div>
</div>
</form>
</div>
<div class="col-lg-5 pl-4 mt-4 mt-lg-0">

<h4>Office Address</h4>
<p class="mb-3">John lake park 9/12 street park
London</p>
<h4>Contact Info</h4>
<p class="mb-3">+62 812 7920 0707</p>
<h4>Contact Mail</h4>
<p class="mb-3">support@gmail.com</p>
<h4>Website</h4>
<p>www.companyname.com</p>
</div>
</div>
</div>
</section>

<hr>

<div class="footer-copyright text-center py-3 bg-dark text-white">
Copyright © Bootstrap 2020
</div>

Untuk BAB II itu saja dulu yang kita pelajari, terima kasih.
BAB III
Sekarang kita akan belajar menggunakan tools git dan github, oke langsung aja
kita praktek.
1. Silahkan buat akun terlebih dahulu di github.com

2. Download software Git disini. Sesuaikan dengan sistem operasi yang
digunakan, pada tutorial ini kami menggunakan Windows
3. Lakukan instalasi Git seperti software pada umumnya
4. Login ke Github.com dan buatlah sebuah repository baru dengan
mengeklik tombol yang terletak pada kanan atas seperti gambar berikut:
5. Buat repository baru, misalnya dengan nama “test” kemudian klik

tombol Create repository lihat gambar:
6. Sekarang kita bisa mengakses remote repository dengan
url https://github.com/danairwanda/test.git
7. Arahkan pada direktori tempat project akan diupload ke repository di

Github
8. Untuk pengguna Windows klik kanan folder project dan pilih Git Bash.
Berikut gambarnya:
9. Kemudian akan muncul command prompt / CMD

10.Jika baru pertama kali meggunakan software Git, lakukan konfigurasi ke
github.com dengan menulis perintah berikut:
Git config --global user.name "username anda"

Git config --global user.email "email anda"
11.Setelah melakukan konfigurasi lakukan inisiasi dengan menulis perintah

berikut:
Git init
12.Setelah kita buat commit untuk projectnya, remote repository yang telah
dibuat tadi, contoh https://github.com/danairwanda/test.git ,
ketikan : Git remote add origin
https://github.com/danairwanda/test.git
Setelah itu ketikan Git status untuk melihat statusnya
13.Kemudian tambahkan semua file yang ada di dalam folder project kita,
yang ingin di upload ke github dengan mengetikan :
Git add .\index.html (untuk menambahkan 1 file)
Git add . (untuk menambahkan semua file) lalu ketikan Git

status untuk melihat statusnya
14.Buat commit projectnya, sebagai contoh disini commitnya saya buat

dengan :
Git commit –m "first commit" setelah itu ketikan Git log untuk
melihat statusnya
15.Kirim project ke repository kita di Github dengan mengetikan perintah :
Git push -u origin master

16.Terakhir, kita akan diminta username dan password kita. Untuk password
mungkin kita tidak akan melihat password yang kita ketikan
17.Jika terjadi error setelah mengetikan Git push -u origin master

seperti dibawah ini :
! [rejected] master -> master (fetch first)
error: failed to push some refs to 'https://github.com/busyrafuadi/testing.git'
18.Lakukan langkah-langkah ini :

git fetch origin master
git merge origin master
Setelah mengetikan code di atas saya mendapatkan error lain setelah saya melakukan
git push origin master :
! [rejected] master -> master (non-fast-forward)
error: failed to push some refs to 'https://github.com/busyrafuadi/testing.git'
untuk penyelesaian nya lakukan langkah-langkah dibawah ini :

git fetch origin master:tmp
git rebase tmp
git push origin HEAD:master
git branch -D tmp
19.Setelah itu cek pada Github lalu refresh repository, maka file kita sudah
terupload disana
Oke sekian dulu untuk pelajaran Git dan Github ini, terima kasih.
BAB IV
CSS adalah dunianya web desain. Jika ingin mempelajari cara mendesain
web, CSS wajib dikuasai. CSS singkatan dari Cascading Style Sheet. CSS
digunakan untuk mengubah tampilan dari halaman web. Perhatikan code di
bawah ini :
h1 {
font-size: 18px;
color: green;
}
Arti dari kode diatas adalah: temukan seluruh tag <h1> di dalam halaman HTML, kemudian
set ukuran font sebesar 18 pixel dan set warna teks menjadi hijau.
Buatlah sebuah file lalu masukan code dibawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style>
h1 {
color: purple;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>Belajar CSS</h1>
<p>
Mohon jangan diganggu, lagi serius belajar CSS.
</p>
<div>
<h2>Header h2 di dalam tag div</h2>
<p>Sebuah paragraf di dalam tag div</p>
</div>
</body>
</html>
Class Selector
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: purple;
}
p {
color: blue;
}
.sukses {
color: green;
}
</style>
</head>
<body>
<p class="sukses">
</p>
<div>
</div>
</body>
</html>
ID Selector
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: purple;
}
#pesan {
color: blue;
}
.sukses {
color: green;
}
</style>
</head>
<body>
<p class="sukses">
</p>
<div>
<p id="pesan">Sebuah paragraf di dalam tag div</p>
</div>
</body>
</html>
Group Selector
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
color: purple;
}
</style>
</head>
<body>
<p>
</p>
<div>
</div>
</body>
</html>
Keyword Sakti CSS : !important

Seperti judul sub bab ini, !important adalah kata kunci (keyword) sakti jika anda
mengalami masalah dengan selector maupun property CSS yang ‘tidak berjalan
sebagaimana mestinya’. Dengan menambahkan perintah !important, sebuah property CSS
akan memiliki prioritas paling tinggi, yang hanya bisa dikalahkan oleh perintah !important
lain yang lebih spesifik.
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: green;
}
body #paragrafPertama{
color: brown;
}
</style>
</head>
<body id="homepage">
<p class="paragraf" id="paragrafPertama">
Paragraf ini akan berwarna merah? hijau? biru?
</p>
</body>
</body>
</html>
Nah sekarang kita coba tambahkan !important dan lihat perbedaan hasil
warna paragraf nya.
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: green !important;
}
body #paragrafPertama{
color: brown;
}
</style>
</head>
<body id="homepage">
<p class="paragraf" id="paragrafPertama">
Paragraf ini akan berwarna merah? hijau? biru?
</p>
</body>
</body>
</html>
Background Image
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 960px;
height: 500px;
border: 2px solid green;
margin: 0 auto;
background-image: url('gambar/apel.jpg');
background-repeat: no-repeat;
background-size: 500px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
Coba ganti background-size dengan 50% 50%; dan hapus background-

repeat nya, setelah itu lihat hasilnya.
CSS3 Multiple Column
<!DOCTYPE html>
<html>
<head>
<style>
html {
padding:0;
margin:0;
}
body{
width: 960px;
margin: 0 auto;
font-family: Georgia, "Times new Roman", serif;
}
.content {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
</style>
</head>
<body>
<h2>CSS3 Multiple Column</h2>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
mitortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
accumsan odio ac lectus mollis finibus. Maecenas imperdiet feugiat felis,
sit amet ullamcorper elit vulputate in.
</p>
<p>liquam a lectus porta, bibendum enim id, dictum nunc. Duis
tincidunt sed turpis non suscipit. Nunc id mi molestie, porta leo id,
vulputate eros. Donec scelerisque vitae justo finibus imperdiet. Curabitur
eget nibh dignissim ipsum interdum maximus at scelerisque odio.
</p>
<p>Morbi ac fermentum risus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Praesent gravida
luctus leo sit amet vehicula. Donec luctus sit amet justo vel pretium.
Mauris id elit et sem semper convallis non eu nibh. Nullam ultrices
molestie lectus ut ultricies. Nam nec risus nunc.
</p>
</div>
</body>
</html>
Table_style
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 720px;
margin: 0 auto;
}
table {
border-collapse:collapse;
border-spacing:0;
font-size:18px;
}
table th {
padding:10px;
color:#fff;
background-color:#2A72BA;
border-top:1px black solid;
border-bottom: 1px black solid;
}
table td {
padding:10px;
border-top:1px black solid;
border-bottom:1px black solid;
}
tr:nth-child(even) {
background-color: #DFEBF8;
}
</style>
</head>
<body>
<div class="container" >
<table border=1>
<tr>
<th>No</th><th>Nama</th><th>Umur</th><th>Tempat Lahir</th>
</tr>
<tr>
<td>1.</td><td>Andi Susanto</td><td>21
Tahun</td><td>Semarang</td>
</tr>
<tr>
<td>2.</td><td>Joko Hermawan</td><td>25
Tahun</td><td>Jakarta</td>
</tr>
<tr>
<td>3.</td><td>Santri Putria</td><td>17
Tahun</td><td>Bandung</td>
</tr>
<tr>
<td>4.</td><td>Joni Manurung</td><td>19
Tahun</td><td>Medan</td>
</tr>
</table>
</div>
</body>
</html>
Oke kya nya cukup sampai sini aj belajar css nya, terima kasih.

Desain Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Desain Web

Uploaded by

Copyright:

Available Formats

Everyone Should Learn To Design

<li class="nav-item dropdown">

Oke sekian dulu untuk pelajaran Bab I ini, terima kasih.

<div class="col-lg-5 pl-4 mt-4 mt-lg-0">

1. Silahkan buat akun terlebih dahulu di github.com

5. Buat repository baru, misalnya dengan nama “test” kemudian klik

7. Arahkan pada direktori tempat project akan diupload ke repository di

9. Kemudian akan muncul command prompt / CMD

Git config --global user.name "username anda"

11.Setelah melakukan konfigurasi lakukan inisiasi dengan menulis perintah

Setelah itu ketikan Git status untuk melihat statusnya

Git add .\index.html (untuk menambahkan 1 file)

Git add . (untuk menambahkan semua file) lalu ketikan Git

14.Buat commit projectnya, sebagai contoh disini commitnya saya buat

15.Kirim project ke repository kita di Github dengan mengetikan perintah :

Git push -u origin master

17.Jika terjadi error setelah mengetikan Git push -u origin master

18.Lakukan langkah-langkah ini :

git merge origin master

untuk penyelesaian nya lakukan langkah-langkah dibawah ini :

Buatlah sebuah file lalu masukan code dibawah ini :

Keyword Sakti CSS : !important

Coba ganti background-size dengan 50% 50%; dan hapus background-

You might also like