Cara Pembuat Website Pemula

Halo sobat semuanya kali ini kita akan membahas tentang pembuatan web. Dan web yang akan kita buat dalam hal ini adalah web yang sederhana jadi sangat cocok untuk anda yang baru belajar sebuah web. Dan web yang akan kita buat kali ini adalah website statis yang sederhana. Jadi kita belum menginjak ke website yang yang dinamis yang sudah mampu mengolah data. Tapi kita akan membahas pembuatan dari website statis. Berikut adalah cara-cara dari pembuatan web tersebut.


1. Buka aplikasi Sublime
2. Buatlah sebuah folder baru
3. Pada folder tersebut buat lah file dengan nama index.html
4. Tuliskan struktur dasar dari file html yaitu seperti berikut ini
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Sebenarnya struktur diatas sudah benar tapi ada beberapa struktur dasar lagi yang biasa dipakai untuk membuat website. Tetapi untuk yang diatas merupakan struktur dasar yang cukup simple. Jika anda ingin yang agak rumit juga akan saya contohkan seperti pada dibawah ini.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
</body>
</html>

Pada kode diatas sebenarnya sama hasilnya dan isinya nanti juga akan sama tapi pada teks yang kedua nanti akan lebih berguna jika kita ingin membuat web yang responsive

5. Isi bagian <title> dengan nama website yang anda inginkan

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Judul dari website</title>
<link rel="stylesheet" href="">
</head>
<body>
</body>
</html>

Anda perhatikan pada yang saya bold yaitu pada bagian title. Anda perhatikan title ini artinya judul jadi yang ada pada tag title ini adalah suatu nama yang akan menjadi judul dari website kita jadi ini yang akan tampil di bagian atas. Seperti pada contoh dibawah ini
6. Masukkan link untuk css
Kemudian yang perlu anda lakukan selanjutnya adalah memasukkan sebuah link. Link yang dimaksudkan disini adalah sebuah link dari file css yaitu file yang akan mengatur tampilan dari website yang kita buat. Dan supaya mudah kita nanti akan meletakkan file css ini pada satu folder dengan file index.html supaya lebih mudah dalam pemanggilannya. Seperti pada contoh dibawah ini.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Website Pemula</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Sudah saya tandai untuk bagian yang saya maksud dengan memberikan sebuah link pada sebuah website. Jadi pada bagian tag link anda bisa mengatur dimana style dari sebuah website ini akan disimpan dan tag inilah yang berfungsi sebagai penghubung.

7. Buatlah isi pertama anda
Untuk pembuatan isi ini anda dapat mengisi nya dengan bebas sesuai dengan keinginan anda lalu dimanakah letak dari isi ini. Isi ini kita letakkan pada bagian body jadi tag body fungsinya adalah meletakkan isi konten dari sebuah website.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Website Pemula</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Ini adalah isi
</body>
</html>

Anda bisa perhatikan pada bagian yang saya tabalkan adalah bagian isi dari website yang kita buat. Nanti pada browser akan tampil juga tulisan yang sama yaitu tulisan ”ini adalah isi”. Jika kita sudah menulis juga bisa kita langsung cek saja pada browser nya. Dan hasilnya seperti pada gambar dibawah ini.
Benar bukan yang kita tulis pada tag tadi sudah berhasil ditambahkan. Jika kita ingin mencoba lagi kita juga bisa mencoba nya yaitu dengan menambah yang lain lagi sebagai contoh membuat nama dan yang lainnya. Contoh kita akan menambahkan tulisan ” nama saya budi” maka kita bisa langsung tambahkan seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Website Pemula</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
ini adalah isi
nama saya budi
</body>
</html>

Selanjutnya kita lihat hasilnya.
Tulisan nama saya budi sudah berhasil kita tambahkan. Sebenarnya anda bisa bebas menambahkan berapa saja kata banyak berapapun untuk mengisi konten ini jadi anda bisa menulis apapun pada bagian ini sebenarnya dalam pembuatan web ini kita akan memakai tag tag html yang banyak jenisnya. Kita coba saja menggunakan <br> dan <p>
<br> = untuk memberi jarak atau meng enter.
<p> = untuk membuat paragraf
Baiklah akan kita praktekkan seperti dibawah.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Website Pemula</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
ini adalah isi
nama saya budi <br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta aliquam dolorum nulla nam ullam soluta, earum nihil eaque libero! Excepturi adipisci, eveniet sed ipsum, odit voluptatum aspernatur delectus quam itaque non voluptatibus velit, laboriosam, veniam laborum vitae! Unde cupiditate facere, asperiores iusto, totam, placeat dolore sunt corporis inventore, ratione accusantium! Unde aliquam ad inventore id impedit labore voluptatibus esse quia architecto, tempora ea libero veritatis eligendi, commodi quam quae laboriosam consequuntur porro natus aut possimus dolorum ipsa. Aperiam nesciunt ad numquam corporis ullam exercitationem velit sequi sint vitae soluta accusantium cumque, dolorem voluptas libero, rem eaque perferendis sed culpa dicta!</p>
</body>
</html>

Selanjutnya seperti biasa kita akan langsung cek pada browse dengan cara klik kanan dan open in browser.
Dan luar biasa hasilnya sesuai yang kita harapkan.
8. Manambahkan file css
Sebelumnya anda buat dahulu file pada folder tadi yaitu folder project tadi dan kita buat file baru new file dengan format css. Kita akan beri nama style.css

9. Memberi warna background pada website
Sebelum kita melakukan pengeditan pada file style.css sebaiknya kita cek dulu pada bagian index sudah benar atau belum isinya seharunya seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Website Pemula</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
ini adalah isi
nama saya budi <br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta aliquam dolorum nulla nam ullam soluta, earum nihil eaque libero! Excepturi adipisci, eveniet sed ipsum, odit voluptatum aspernatur delectus quam itaque non voluptatibus velit, laboriosam, veniam laborum vitae! Unde cupiditate facere, asperiores iusto, totam, placeat dolore sunt corporis inventore, ratione accusantium! Unde aliquam ad inventore id impedit labore voluptatibus esse quia architecto, tempora ea libero veritatis eligendi, commodi quam quae laboriosam consequuntur porro natus aut possimus dolorum ipsa. Aperiam nesciunt ad numquam corporis ullam exercitationem velit sequi sint vitae soluta accusantium cumque, dolorem voluptas libero, rem eaque perferendis sed culpa dicta!</p>
</body>
</html>

Yang perlu anda perhatiikan adalah pada bagian yang saya tebalkan. Baiklah untuk menambah warna background silahkan pada css kita tulis code berikut.

body{
background: red;
}

Dengan kode singkat seperti diatas kita sudah bisa membuat background berganti warna. Dan akan kita langsung lihat hasilnya.

Dan background dari website yang kita buat menjadi warna red. Warna merah. 
Cukup sekian dulu tutorial untuk membuat website untuk pemula semoga bermanfaat dan jika anda ingin melihat terusannya anda bisa melihat lagi di blog ini karena akan ada versi lanjutannya.

Scroll To Top