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.

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.

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

...

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!

Menambahkan paragraf di situs kamu

Untuk menambahkan paragraf, kita bisa menggunakan tag

...

letakkan tag p setelah tag h1 yang kamu buat sebelumnya

Sekarang reload browser, kamu akan melihat paragraf baru yang ditambahkan.

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.

Mengubah warna tulisan website

Untuk mengubah warna tulisan website, kita bisa menggunakan kode berikut:

Nah letakkan kode di atas menggantikan ... di antara tag .

Lalu save text-editor kamu dan refresh browsernya. Kamu akan melihat tulisan h1 kamu menjadi merah , sesuai dengan color red yang kamu berikan.

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:

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.

Website kamu sudah jadi! Eh belum ya?

Kabar baiknya file tersebut adalah file website kamu! Meskipun tidak sempurna, itulah yang dibutuhkan untuk membuat website sendiri dari dasar.

Sekarang tugas kamu adalah mempelajari “tag-tag” lain dari HTML untuk membuat website yang lebih kompleks, seperti menampilkan gambar, video dan lainnya.

Tag-tag tersebut bisa dilihat di Referensi HTML atau juga video tutorial di sekolahkoding.com.

Kita tidak akan melihat semua tagnya, tapi akan saya beri beberapa contoh