Pada tutorial ini, kita akan mencoba membuat project web kecil-kecilan. Tujuannya untuk berlatih dan memahami bagaimana cara membuat web. Show
Baiklah.. Langsung saja kita mulai. Step 1 – Membuat Desain WebPembuatan web dimulai dengan desain. Kalau tidak ada desain, nanti kita akan kesulitan dan tidak akan tahu mau buat apa. Biasanya desain web dikerjakan oleh desainer, setelah itu diserahkan ke programmer untuk diubah menjadi HTML. Pada project ini, kita akan membuat tiga halaman web, yakni home, contact, dan about. Desain yang digunakan adalah desain dalam bentuk wireframe atau sketsa. Berikut ini desain untuk tiap-tiap halaman: 1. Desain Halaman HomeHalaman home adalah halaman utama yang akan dibuka pertama kali saat pengunjung membuka website. Halaman ini berisi menu, foto, teks, dan tabel. 2. Desain Halaman ContactHalaman contact adalah halaman yang berisi form untuk menghubungi pemilik website. 3. Desain Halaman AboutHalaman about adalah halaman yang berisi informasi lengkap tentang website. Step 2 – Memulai Project WebSilahkan buat folder baru dengan nama Setelah itu buat folder Sehingga nanti stuktur folder kita akan menjadi seperti ini:
File yang perlu kamu persiapkan di tahapan ini adalah 1 dan 3.Berikutnya, kita akan mulai menulis kode. Silahkan buka folder Caranya: Klik menu File, lalu pilih Open Folder dan carilah folder Degan begini, kita sudah siap untuk menulis kode. Step 3 – Membuat Halaman HomeSilahkan buat file baru bernama 5 di dalam folder websiteku.Setelah itu, isi dengan kode berikut:
Jangan lupa untuk mengubah nama 4 dengan nama kamu.Jika kita coba membuka file 5, maka hasilnya akan seperti ini:Gambarnya tidak bisa tampil karena kita belum menambahkan file gambar di dalam folder Silahkan tambahkan file gambar dengan nama 1. Pastikan gambar yang ditambahkan memiliki ukuran persegi atau rasio 1:1. Pada proyek ini, saya menggunakan gambar dengan ukuran 200x200 piksel.
Setelah itu, coba refresh halaman home atau 5.Maka haslinya: Step 4 – Membuat Halaman About MeBuatlah file HTML baru dengan nama 7.Kemudian isi dengan kode berikut:
Sama seperti halaman home, halaman ini juga memiliki konten berupa video untuk ditampilkan. Tapi file videonya belum ada. Sudah pasti videonya tidak akan bisa ditampilkan: Karena itu, silahkan tambahkan file video-nya ke dalam folder 1
Setelah itu, coba buka dan refresh halaman about. Maka hasilnya: Step 5 – Membuat Halaman ContactBuatlah file baru dengan nama 6.Kemudian isi dengan kode berikut:
Hasilnya: Form contact ini belum bisa berfungsi, karena kita belum membuat kode untuk mengirim data. Step 6 – Membuat Fitur Download CVFitur ini sebenarnya paling gampang dibuat. Kita hanya perlu menambahkan file 3 ke dalam folder websiteku.
Setelah itu, coba klik menu Download CV. Jika PDF-nya terbuka, maka link ini sudah benar. Step 7 – Membuat Ikon untuk WebAgar websitenya terlihat menarik, kita akan membuat ikon atau favicon. Silahkan buka favicon-generator.orgkemudian pilih gambar yang akan dijadikan ikon. Setelah itu, kita akan mendapatkan link download dan juga kode HTML yang harus ditambahkan ke dalam tag 4 agar ikon bisa ditampilkan.
Apa saja kode HTML?Berikut adalah 9 kode HTML untuk blog dan arti coding tersebut:. Title Tag. Tag HTML yang pertama yaitu title tag. ... . Meta Description. Berikutnya, ada meta description. ... . 3. Heading Tag. ... . 4. Anchor Text dan Link. ... . Nofollow. ... . 6. Image Alt Text. ... . 7. Tag Kanonikal. ... . 9. Tag Huruf Tebal (Bold). Bagaimana struktur dasar HTML?Setiap halaman HTML sudah pasti mempunyai struktur dasar yang terdiri dari : tag Doctype, tag html, tag head, dan tag body. Ini lah struktur dasar dari HTML. Sebenarnya masih banyak struktur lainnya, untuk awalan teman-teman mempelajari struktur dasar sebagai penunjang materi selanjutnya.
Visual Studio code pakai bahasa apa?Visual Studio Code merupakan penyunting kode-sumber yang dapat digunakan untuk beragam bahasa pemrograman, termasuk Java, JavaScript, Go, Node.js, Python dan C++.
Apakah VSCode text editor?Visual Studio Code adalah text editor yang dikembangkan oleh Microsoft untuk Windows, Linux dan macOS. Visual Studio Code mampu digunakan untuk debugging, Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring.
|