Apa yang akan kita lakukan di panduan tutorial ini?
Kamu akan terjun langsung merasakan bagaimana membuat website dari dasar dengan HTML dan CSS. Tentu kita tidak akan menjadi ahli hanya dengan satu artikel.
Tapi tujuannya, agar kamu bisa merasakan langsung dan menghilangkan tanda tanya selama ini seputar pembuatan situs.
Ini adalah awal dari kamu nanti bisa membuat berbagai situs lain seperti, profil perusahaan, blog, toko online, aplikasi, sosial media dan masih banyak lagi!
Sudah siap? mari kita mulai!
Bagaimana latihan membuat website selanjutnya ?
Kamu bisa mulai membuat website yang kamu inginkan sendiri. Bisa mencari contoh desain dari situs yang kamu suka, atau melihat inspirasi di Dribble, Pinterest, atau Behance.
Jika kamu ingin sekedar latihan (tidak mendesign sendiri), gunakan situs ini:
Konsep Logika dan Algoritma 1. Logika
Logika adalah sebuah cabang ilmu dari filsafat yang merupakan induk dari semua ilmu pengetahuan seperti matematika, fisika, kimia, dan ekonomi. Logika berasal dari kata Yunani kuno “logos” yang berarti hasil pertimbangan akal pikiran yang dijelaskan lewat kata dan dinyatakan dalam bahasa.Secara sederhana kata logika dapat diartikan dengan masuk akal. Secara singkat, manfaat logika dalam ilmu pengetahuan dapat dikategorikan sebagai berikut :
Algoritma adalah sekumpulan langkah rinci yang ditujukan untuk komputer dalam menyelesaikan suatu masalah. Langkah-langkah tersebut dibuat supaya dapat dituangkan kedalam program sehingga program dapat dieksekusi oleh komputer. Tapi tentu sebelum dituangkan dalam program, algoritma ini dapat juga diuji secara manual.
Untuk Menggambar atau membuat Flowchart kita bisa saja menggambar dengan cara manual yang penting simbol-simbolnya benar. Untuk mendesain flowchart dan langsung mengujinya kita dapat menggunakan aplikasi Flowgorithm. Flowgorithm ini merupakan aplikasi gratis yang dapat digunakan untuk mempelajari algoritma pemrograman komputer melalui diagram alir (flowchart).
Aplikasi ini dikembangkan oleh
pada Tahun 2017 lalu. Untuk mengunduh aplikasi Flowgorithm silahkan menuju ke website resminya di
Untuk cara menggunakannya silahkan menuju ke dokumentasinya.
Dan sekarang saatnya melihat Contoh Algoritma untuk Menghitung Luas Persegi Panjang:
Cara lain atau alternatif untuk menyajikan algoritma adalah dengan diagram alir (flowchart). Flowchart merupakan cara lain untuk menuangkan algoritma dengan menggunakan gambar atau simbol-simbol tertentu. Jika kita menggambar flowchart di Flowgorithm kita bisa membuatnya menjadi seperti ini:
Contoh selanjutnya adalah menghitung Luas Segitiga
Langkah-langkah yang harus dilakukan :
1. Masukkan 3 buah integer yang terdiri dari alas, tinggi, dan luas
2. Untuk output judul dan keterangan tambahan bias dimasukkan setelah algoritma sukses dibuat dan dijalankan
3. Buatlah bagian input dua buah yang pertama merupakan input alas dan yang kedua input tinggi
4. Buatlah bagian atribut yang merupakan bagian yang memuat rumus/perhitungan luas segitiga
5. Terakhir adalah memasukkan bagian output yang akan menampilkan hasil perhitungan.
Pelajaran selanjutnya yang lebih sederhana, kita buat algoritma penghitungan luas bujur sangkar/persegi. Maka yang dibutuhkan hanyalah dua buah integer dan satu input. Deklarasi dari integer pertama adalah menyakana sisi bujur sangkar, deklarasi dari integer kedua adalah luas. Input hanya untuk menentukan sisi bujur sangkar, sedangkan perhitungannya luas = sisi * sisi, terakhir adalah membuat output yang akan menampilkan hasil perhitungan.
Mudah bukan, untuk selanjutnya kita akan belajar menggunakan if. untuk menentukan siswa lulus atau tidak lulus.
Ini adalah contoh flowchart untuk menentukan predikat dari sebuah nilai yang dimasukkan. Dengan menggunakan gabungan beberapa fungsi if.
Penggunaan fungsi if yang lain adalah memilih Konversi Suhu
Flowchart dasar, sebelum diberi flowchart untuk konversi masing-masing suhu.
Flowchart ini nanti yang akan kita sisipkan ke flowchart utama, direncanakan nanti jika kita memasukkan angka 1 maka kita akan melakukan konversi suhu dari Celsius ke Fahrenheit.
Melihat hasil kode tersebut
Klik dua kali file index.html yang kamu buat tadi, maka akan otomatis membuka browser dan menampilkan hasilnya. Kamu akan melihat tulisan “Halo, Selamat Datang!” di sana.
Untuk mengubah konten yang ditampilkan, kamu bisa mengubah konten di antara tag
...
. Contohnya:Apa yang perlu kamu pelajari selanjutnya ?
Itu dia gambara membuat website sendiri dengan HTML dan CSS.
Kita barus melihat sedikit dari luasnya kemampuan HTML dan CSS. Kamu bisa menggunakan link-link di bawah sebagai referensi lanjutan untuk belajar lebih jauh.
Bagaimana agar website kamu bisa diakses oleh orang lain ?
Untuk membuat website kamu bisa diakses oleh orang lain, kamu perlu mengupload kode kamu ke sebuah server atau dikenal dengan istilah hosting.
Setelah itu menyambungkannya dengan nama domain agar mudah diingat dan dibuka oleh orang lain.
Referensi artikel terkait ini:
Kode lengkap tutorial singkat ini
Jika kamu mengalami masalah mengikuti panduan di atas, kamu bisa menggunakan kode ini sebagai referensi:
Berapa lama waktu yang dibutuhkan untuk membuat website ?
Sangat bervariasi. Jumlah waktu belajar orang berbeda-beda, karena itu tidak ada patokan waktu yang pasti.
Jangan terburu-buru, selama kamu tekun dan sabar, kamu akan bisa membuat website kamu sendiri. Jika mudah, maka skill ini tidak akan lagi spesial. Hanya orang-orang yang sabar belajar akan lolos dan bisa menguasai skill ini.
Menambahkan gambar di situs kamu
Untuk menambahkan gambar, kita bisa menggunakan tag .
Sebelumnya, siapkan sebuah gambar dan letakkan di folder yang sama dengan file index.html yang kamu buat tadi.
Lalu, tambahkan kode ini:
Ganti sumbergambar.png dengan nama file gambar yang kamu letakkan tadi.
Kamu bisa mencoba meletakkan tag img ini di setelah atau sebelum tag lain.
Jangan takut untuk coba-coba! tidak akan ada masalah kalau error, kamu bisa undo tulisan kamu jika ada masalah
Karena nanti artikelnya bisa terlalu panjang dan sulit diikuti, kita sudahi dulu untuk membuat konten HTMLnya. Sekarang kita lihat cara menghias website kita dengan CSS.
Cara menulis CSS, letakkant tag di dalam tag
... . Contohnya:Kita perlu mengisi bagian ... dengan kode CSS sebenarnya.
Mengubah warna background website
Untuk mengubah warna background website, kita bisa menggunakan kode berikut:
Letakkan setelah kode blok CSS sebelumnya, lalu save dan refresh browser.
Sekarang warna latar belakang website kamu berubah menjadi biru.
Persiapan membuat website dari dasar
Berikut alat yang kita butuhkan untuk membuat website sendiri:
Jika kamu ingin mengikut panduan ini, mari install Visual Studio Code.
Kamu bisa menemukan tombol download di halamannya.
Baca kelebihan Visual Studio Code untuk coding
Untuk membuat stuktur dasar websitenya, kita perlu menulis kode HTML. Dalam membuat kode sudah ada syntax atau aturan baku bagaimana caranya.
Kamu tidak harus menghafal atau mengingat ini, ada internet yang bisa kamu gunakan untuk mencari informasi tersebut sewaktu-waktu.
Nama `index` bisa kamu ubah dengan nama apa saja
Kamu tidak perlu langsung paham semuanya. Pola penulisan
