Learn Create Website
Introduction

Situs Web (Website) adalah sekumpulan halaman web yang saling berhubungan yang umumnya pada layanan yang sama berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisai. Halaman web merupakan berkas yang ditulis sebagai berkas teks biasa (plain text) yang diatur dan dikombinasikan sedemikian rupa dengan instruksi-instruksi berbasis HTML atau XHTML, kadang-kadang pula disisipi dengan sekelumit bahasa skrip. Berkas tersebut kemudian diterjemahkan oleh peramban web dan ditampilkan seperti layaknya sebuah halaman pada monitor komputer. Selengkapnya baca di Wikipedia.

Technical Documentation ini membahas tentang apa yang dilakuan oleh pembuat Website Responsive sederhana diawal instalasi code HTML Dasar, CSS, Javascript, dan Framework. Bukan keseluruhan pembuatannya. Documentation ini dibuat untuk Challenge kemampuan diri yang diberikan oleh freeCodeCamp.org bagian seri Responsive Web Design Certification. Materi Pembahasan yang ada didalamnya itu saya buat sendiri, dibuat dengan sebagaimana benarnya. Apabila ada kakurangan dalam penyampaian atau salah dalam penyampaian. Saya mohon maaf yang sebesar-besarnya, terima kasih.

Code Editor

Code Editor adalah sebuatan apikasi pengolah text bahasa code (Bahasa Pemograman). Sebelum membuat website/apps anda harus punya aplikasi yang biasa disebut dengan CodeEditor. Seperti: Notepad++, Sublime Text, Visual Studio Code dan lain sebagainya. CodeEditor merupakan Aplikasi yang bisa membuat/mengolah file Teknologi Bahasa Pemrograman Seperti: HTML, CSS, Javascript, PHP dan lain sebagainya. Berikut ini 5 Aplikasi Code Editor yang paling sering digunakan:

Create HTML Dasar

Pertama siapkan folder untuk menyimpan data-data Website anda di File Exploler, setelah itu buka CodeEditor apa aja yang anda Install lalu Open Folder yang baru disiapkan tadi, setelah itu buat file dengan nama "index.html".

Cara mengunakan CodeEditor untuk membuat HTML Dasar dengan mudah, Aplikasi Sublime Text tinggal ketikan "html -lalu- Tab" dan yang menggunakan Aplikasi Visual Studio Code tinggal ketikan "! -lalu- Tab" aplikasi tersebut akan membuat structure HTML secara otomatis untuk yang menggunakan aplikasi lain selain yang diatas, Saya tidak tahu karena belum pernah menggunakannya. Berikut ini structure html dasar: 

<!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Title Website</title>
          </head>
          <body>

          </body>
          </html>
Hello World

Cara membuat hello world agar tampil diwebsite cukup ketik "hello world" didalam tag h1, p, dan sebagainya didalam tag body. Seperti ini: 

<h1>Hello World<h1>
Create CSS

Sebelum membuat Cascading Style Sheet (CSS). Ketahui terlebih dahulu bahwa CSS bisa digunakan dengan berbagai metode. Seperti Inline Style Sheet, Embedded Style Sheet (Internal), dan External CSS. Tiap-tiap penggunaannya sebagai berikut:

  • CSS Inline

    • Metode Inline ini CSSnya yang langsung didefinikan disetiap tag/element dan stylenya hanya berlaku pada tag itu sendiri. 

    <h1 style="color: Green; font-weidth: bold;">Hello World</h1>
        <h1>Hello World</h1>

    Maka ketika dijalankan dibrowser style dari h1 langsung di didefinikan warna green, dan textnya bold. Jika dibawahnya ada h1 lagi tanpa Inline Style Sheet maka stylenya tidak ikut berubah.

  • CSS Internal

    • Meto

  • CSS External

    • Metode External ini CSS yang menggunakan file sendiri secara terpisah dari HTML dengan format file (.css), dan dipanggil didalam HTMLnya. Cara untuk memanggilnya dengan ketikan "link -lalu- Tab". Maka akan dibuatkan element link secara otomatis, kemudian tinggal masukan lokasi file cssnya didalam atribute herf.

    1. Jika file CSS lokasinya tidak didalam folder, atau letaknya sama dengan index.html.
      2. <link rel="stylesheet" herf="style.css">
    2. Jika file CSS lokasinya ada didalam folder css, atau file cssnya ada didalam folder css yang ada didalam folder asset.
      3. <link rel="stylesheet" herf="css/style.css">
            
                  <link rel="stylesheet" herf="asset/css/style.css">

    Link harus terletak didalam head pada html. 

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title Website</title>
        <link rel="stylesheet" herf="asset/css.style.css"
        </head>

    Cara menggunakannya dengan memanggil element, class, id, dll. Didalam file style.css tersebut. Seperti berikut ini: 

    index.html<h1>Hello World</h1>
        
    style.cssh1 {
        00Color: blue;
        00Font-wegiht: bold;
        }

    Jika memanggil dengan menggunakan nama class.

Create Javascript

JavaScript (disingkat: JS) adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. JavaScript merupakan salah satu teknologi inti World Wide Web (www) selain HTML dan CSS. JavaScript membantu membuat halaman web interaktif dan merupakan bagian aplikasi web yang esensial. Selengkapnya baca di Wikipedia.

Framework CSS & Javascript

Framework merupakan kerangka kerja untuk mengembangkan aplikasi atau situs web. Fungsinya untuk membantu dan mempermudah kinerja developer. Framework itu memiliki berbagai jenis, seperti:

  1. Framework CSS
  2. Framework JavaScript
  3. Framework PHP dan Lain Sebagainya.