Dinsi saya akan menjelasakan tentang cara membuat website
dengan menggunakan tools tools yang digunakan untuk membantu dalam pembuatan
website ini. Tools yang digunakan untuk tmapilan yaitu menggunakan Bulma
jika kita membuat website dengan menggunakan css aja maka akan memakan
waktu yang lama untuk menentukan posisinya dan lain lain.
Source link:
ketika
menghostingnya ada nama karena itu adalah username, jika tidak ada usernamenya
makan tidak akan biasa dihosting
-
Pada link 1, kita mengambil cdn atau API pada
bulma karena untuk bias menggunakan bulma.
-
Link 2 dan script 2, kita juga menggunakan
fontawesome dari google untuk memakai font dari google
-
Script 2, mengambil API pada jquery untuk
selanjutnya akan dijelaskan dibawah
2.
Langkah selanjutnya kita membuat struktur
struktur pada html seperti gambar dibawah:
-
Kegunaanya adalah supaya ketika membuat code
lebih terstruktur
3.
Ketika kita sudah membuat struktur strukturnya
kita langsung saja membuat Navigation:
-
Pada class class tersebut merupakan dari class
bulma.
Maka hasilnya akan seperti gambar dibawah
ini:
4.
Lalu kita membuat untuk tampilan Body atau isinya
Untuk membuat
tampilan diatas maka codenya seperti berikut:
-
Untuk gambar seperti facebook dan lainya.
Menggunakan gambar yang dimasukan pada folder yang sama
-
Sama seperti diatas website ini menggunakan
class class pada bulma
Untuk membuat
tampilan diatas maka codenya seperti berikut:
Untuk membuat
tampilan diatas maka codenya seperti berikut:
Untuk membuat
tampilan diatas maka codenya seperti berikut:
-
Kegunaan form adalah untuk button submit ketika
kita sudah mengisi data yang dinginkan maka kita akan menuju ke Gmail aplikasi.
Ketika seorang ingin menghubungi maka akan melalui gmail
5.
Kita menggunakan javascript supaya pada
navigartion diatas ketika kita klik maka akan smooth scroll untuk memperindah
website
6.
Untuk Hosting website ini menggunakan Github
karena supaya kita tahu ketika ada perubahan kita bias melakukan perubahan
terserbut. Dan juga ketika ada kesalahan kita bias kembali ke project
sebelumnya.
-
Kita harus mempunyai account github tersebut
-
Jika sudah maka kita melakukan perintah pada
coloum 1
-
Kegunaanya
o
Git init : untuk mengisisialiasi
o
Git add README.md : untuk menambahkan
o
Git commit : untuk commit ketika sudah dimasukan
o
Git remote: untuk menentukan origin mana yang
mau kita pakai
o
Git push: untuk push pada remote
Full Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Pengantar Web
Sience</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar is-fixed-top" role="navigation" aria-label="main
navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#dafa">
<h2 class="nav-name"> <b> Pengantar Web Sience
</b> </h2>
</a>
<span class="navbar-burger
burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-end">
<a href="#about" class="navbar-item">About</a>
<a href="#skill" class="navbar-item">Dev tool</a>
<a href="#contact" class="navbar-item">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</nav>
<!--Intro-->
<section class="hero" id="dafa">
<div class="hero-body">
<div class="container">
<h1 class="title" id="titone">
Selamat Datang
Semuanya Di Website Kami
</h1>
<h2 class="subtitle" id="subone">
i design code
beutifully simple things, and i love what i do.
</h2>
<div class="
is-horizontal-center">
<a href="#"> <img src="image/facebook.png" alt="my facebook"> </a>
<a href="#"> <img src="image/instagram.png" alt="my instagram"> </a>
<a href="#"> <img src="image/github.png" alt="my github"> </a>
<a href="#"> <img src="image/google-plus.png" alt="my google+"> </a>
</div>
</div>
<img src="image/backgroundimg2.jpg" alt="my image
profile" width="480" height="20" class="center">
</div>
</section>
<!--the content-->
<section class="hero is-light" id="about">
<div class="hero-body">
<div class="container">
<h1 class="title" id="tittwo">
Hi, Saya
Mahasiswa Gunadarama
</h1>
<h2 class="subtitle"id="subtwo">
<br>
I study at
Gunadarma University Informatics Engineering.<br>
I'm exploring
and learning about make website <br>
</h2>
</div>
</div>
</section>
<!--the column-->
<section class="hero"id="skill">
<div class="hero-body">
<div class="container">
<h1 class="title" id="titone">
Website
Developer
</h1>
<h2 class="subtitle"id="subfour">
I tend to
code things from scratch,
and enjoy
bringing ideas
to life in
the browser.
</h2>
<h5 class="title is-5" id="titfour">Website ini
Menggunakan : </h5>
<h2 class="subtitle"id="subfour">
HTML, CSS,
javascript
</h2>
<h5 class="title is-5" id="titfour"> Dev Tools:
</h5>
<ul>
<li>Visual Studio
Code</li>
<li>Bulma</li>
<li>Github</li>
<li>Terminal</li>
</ul>
</div>
</div>
</section>
<!--contact-->
<section class="hero is-light"id="contact">
<div class="hero-foot">
<div class="container">
<h1 class="title">
Let’s create
something you will love.
</h1> <br><br><br>
<form action="mailto:dafailyasa25@gmail.com" method="post" enctype="text/plain">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" name="name" placeholder="Your Name">
</div>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="text" name="mail" placeholder="Your Email"> <br>
</div>
</div>
<div class="field">
<label class="label">Message</label>
<div class="control">
<input class="input" type="text" name="comment" placeholder="Your Message">
<br> <br>
<input class="button
is-link" type="submit" value="Send">
</div>
</div>
</form>
</div>
</section>
</body>
<!--script for menu in
mobile-->
<script type="text/javascript">
(function() {
var burger = document.querySelector('.burger');
var nav = document.querySelector('#'+burger.dataset.target);
burger.addEventListener('click', function(){
burger.classList.toggle('is-active');
nav.classList.toggle('is-active');
});
})();
</script>
<script>
$(document).ready(function(){
// Add smooth scrolling
to all links
$("a").on('click', function(event) {
// Make sure this.hash
has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor
click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's
animate() method to add smooth page scroll
// The optional number
(800) specifies the number of milliseconds it takes to scroll to the specified
area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL
when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
</html>
