Membuat Web Sederhana dan Publish Online

Hello World! Kali ini Virtualiable bakalan ngasih tau seputar membuat web sederhana yang berisi HTML, CSS, dan Js. pertama-tama kenalan dulu yuk sama mereka.

Perkenalan

HTML

Apa itu HTML? HTML (Hypertext Markup Language) html bukanlah sebuah bahasa pemrograman loh! melainkan suatu dokumen untuk menyusun bagian info dari suatu web, seperti identitas web,header, paragraf, link, dan masih banyak lainnya.

Html yang harus kita ketahui adalah Tag dan Atribut

untuk memudahkannya, Tag biasanya memiliki tag pembuka<p> dan tag penutup</p> pastikan setiap kalian membuat suatu Tag pada html selalu isi konten diantara tag pembuka dan tag penutup

<p>Hello World</p>

Atribut adalah pengatur yang ada di tag tersebut, contohnya <a href=”https://virtualiable.com”>Home</a> nah yang dinamakan atribuat adalah href=””

CSS

Lalu CSS tuh apa? CSS (Cascading Style Sheet) merupakan suatu kumpulan perintah yang digunakan untuk menjelaskan tampilan sebuah halaman web. Pasti kalian melihat website Virtualiable kan? Kalian bisa lihat tampilannya keren kan? nah untuk membuat hal keren tersebut dibutuhkan CSS agar membuat suatu tag pada HTML menjadi lebih berwarna dan menarik.

Css yang perlu kita ketahui yaitu cara menerapkannya , caranya ada 3

Swipe to Continue
advertisment
  1. Inline Style Sheet – Penggunaanya didalam Atribut Tag Html <p style=”color:blue”>Virtualiable</p>
  2. External Style Sheet – Penggunaannya memanggil dokumen css diluar dari dokumen html tersebut dan untuk memanggilnya kita perlu tag dan atribut <link href=”namafile.css” rel=”stylesheet”> kenapa tanpa tanda penutup? karena tidak ada text yg akan di isikan diantara tag pembuka dan penutup link
  3. Internal Style Sheet – atau ada yang menyebutnya Embedded /  In document. Css ini di tulis diantara Tag <head></head> dan menggunakan tag <style></style>

JS

Javascript apakah sama dengan java? beda! Javascript ini bukan anak dari java. Javascript Menyempurnakan tampilan dan sistem halaman web

Penggunaan Js dulu digunakan untuk sistem halaman web secara statis saja, sekarang Js sudah dintegrasi kan dengan database, namun kali ini kita bakalan bahas fungsi js di membuat web sederhana

Mencoba Membuat Web sederhana

Sudah kenalan mari kita buka Browser terlebih dahulu sebelum membuat web sederhana.

lalu ketikkan codepen.io atau klik disini

Halaman Utama dari website Codepen

nah kita daftar dulu secara gratis

Halaman daftar dari website codepen

 

Silahkan pilih metode daftar, kalo gw pribadi pake GitHub dan Facebook.

halaman dashboard codepen

setelah itu kita klik Pen di pojok kiri atas.

Halaman membuat web sederhana di codepen.io

Lalu sampai pada halaman membuat pen

nah terlihat kan ada Html, css, dan js. Gw bakalin kasih contoh

membuat web sederhana

Kalin bisa copy-paste source code berikut atau https://codepen.io/iqbalmind/pen/QWjwmXP

atau

Html

<html>
  <head>
    <title>Ini Web Ku</title>
  </head>
  <body align="center">
    <img src="https://s.cdpn.io/profiles/user/2320373/80.jpg?1535683124">
    <h1>Muhamad Iqbal Nurmanditya</h1>
    <p>Saya adalah seorang web developer di salah satu perusahaan di kota Bandung. Hobby saya adalah berbagi cerita, pengalaman, dan apapun yang saya sukai</p>
    <p>Klik dibawah ini untuk menampilan sosial media saya</p>
    <button id="tombol-sosmed">Sembunyikan</button>
<nav id="sosmed">
  <ul>
    <li>Instagram : <a href="https://instagram.com/iqbalmind">@iqbalmind</a></li>
    <li>Youtube : <a href="https://youtube.com/iqbalmind">iqbalmind</a></li>
    <li>Website : <a href="https://iqbalmind.nwr">iqbalmind</a></li>
  </ul>
</nav>
  </body>
  

 

css

body{
  background-color: #3e3e3e;
  color: white;
  font-family: arial;
}

img{
  border-radius: 50%;
}

a{
  text-decoration: none;
  color: cyan;
}

ul,li{
  list-style-type: none;
}

button {
  padding: 0px 5px;
  background-color: #fff;
  color: #333;
  border: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor:pointer;
}

button:hover {
  padding: 0px 5px;
  background-color: #ccc;
  color: #222;
  border: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

JS

// Script to hide/show menu
var button = document.querySelector('#tombol-sosmed');
var menu = document.querySelector('#sosmed');
button.addEventListener('click', function (event) {
      if (menu.style.display == "") {
          menu.style.display = "none";
          button.innerHTML = "Tampilkan";
      } else {
          menu.style.display = "";
          button.innerHTML = "Sembunyikan";
      }
    }
  );

 

Sekian di post kali ini apabila ada yang ingin ditanyakan silahkan berkomentar dibawah

Tinggalkan komentar