Jadikan Diri Anda Halaman Awal yang Kustom dan Minimalis!: 10 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:53

Apakah Anda harus beralih ke sebagian besar pekerjaan jarak jauh sejak COVID-19 menjadi sesuatu? Sama!

Bekerja dari rumah dengan komputer dan melalui Internet sering kali berarti bahwa kita harus melacak banyak situs web untuk bekerja, sekolah, atau bahkan…untuk bersenang-senang!

Bookmark tidak selalu sesuai dengan tugas, jadi bagaimana kalau membuat halaman awal khusus yang dirancang khusus untuk Anda, dengan semua tautan yang Anda butuhkan, dan yang terbuka di browser Web Anda setiap kali Anda membutuhkannya?

Inilah yang Anda perlukan:

• Komputer (milik kami menjalankan Windows, tetapi komputer modern mana pun akan melakukannya).
• Koneksi ke Internet.
• Instalasi baru editor teks Notepad++.

Saat Anda siap, mari mulai menggunakan template halaman awal kami sendiri…Atau buat sendiri dari awal!

Langkah 1: Buat Halaman Awal ATAU Unduh Template Khusus Kami

Pada titik ini Anda memiliki dua opsi:

1. Unduh template khusus kami (petunjuknya akan mengikuti beberapa saat kemudian di langkah ini) atau,
2. Ikuti panduan halaman awal dasar ini; itu akan memandu Anda melalui blok bangunan halaman awal yang sederhana langkah demi langkah - dan itulah panduan yang kami ikuti untuk membuat halaman awal kustom ini!

Mengapa merekomendasikan tutorial…dalam tutorial? Pekerjaan kami sebagai fasilitator MakerSpace bukan hanya untuk menunjukkan kepada Anda bagaimana melakukan sesuatu: ini juga untuk menghubungkan Anda dengan budaya Maker dan sumber daya yang tersedia di luar sana. Panduan ini adalah salah satu tempat di mana banyak desainer halaman awal memulai, jadi masuk akal untuk membagikannya kepada Anda!

Jika Anda punya waktu, lanjutkan dengan opsi #2 tetapi jika tidak, Anda selalu dapat merujuk ke panduan halaman awal dasar nanti! Untuk tutorial ini, kami hanya akan menganggap Anda mengunduh template khusus kami! Untuk mengunduhnya:

1. Buka repositori DIY_startpage kami di Github.
2. Klik tombol Kode hijau besar untuk membuka menu tarik-turun.
3. Klik Unduh ZIP untuk mengunduh semua file untuk proyek tersebut.
4. Ekstrak semua file dari file ZIP yang baru saja Anda unduh ke lokasi pilihan Anda.

GitHub adalah situs web tempat programmer dan desainer di seluruh dunia berbagi kode dan kreasi mereka dengan orang lain: ini juga memungkinkan Anda berkolaborasi dengan orang lain dalam segala jenis proyek. Intinya adalah, ini adalah alat hebat yang harus diketahui oleh setiap Pembuat!

Sekarang mulai browser pilihan Anda: Saya sangat suka Firefox, tetapi template kami harus bekerja pada hampir semua browser Web terbaru jadi jangan ragu untuk menggunakan Edge, Chrome atau Safari!

Terakhir, buka file "DIY_startpage.html" di browser Anda DAN di Notepad++, dan mari mulai menyesuaikannya!

Langkah 2: Daftar Favorit Anda

Memiliki halaman awal sangat bagus. Memiliki halaman awal yang bermanfaat bahkan lebih baik dan sekarang, halaman awal kami terlihat sedikit kosong!

Apa saja hal-hal yang secara teratur Anda periksa dan perlu dilacak? Webcomics apa yang kamu baca di pagi hari? Situs web berita apa yang ingin Anda periksa? Ini adalah hal-hal yang harus mendarat di halaman awal Anda.

Untuk tutorial ini, saya hanya akan menggunakan beberapa favorit saya. Peringatan spoiler, banyak tautan dari perpustakaan! Tetapi juga beberapa Pembuat favorit saya untuk inspirasi, dan beberapa hiburan favorit saya. Anda dapat menemukan semua item di bawah ini dengan tautan, sebagai contoh!

Berita dan Bacaan

• Koran Digital
• Buku Digital
• Majalah Digital

Sedang belajar

• Sekolah W3C
• Udemy
• bahasa mangga

Musik

• Dengarkan Lokal
• penghancur lagu
• Radio Musik Jamendo

Budaya pembuat

• inti77
• Lumecluster
• Melapropisme

Saya memilih tiga favorit saya untuk setiap kategori, tetapi Anda seharusnya dapat memilih lebih atau kurang dari itu tanpa masalah - tata letak halaman awal Anda akan menyesuaikan dengan jumlah atau sumber daya secara otomatis!

Setelah Anda memiliki semua favorit Anda terdaftar, mari kita sisihkan sebentar dan bekerja untuk membuat template halaman awal generik kami sedikit lebih Anda.

Langkah 3: Sesuaikan Font Anda

Mulai Notepad++, klik File > Open untuk membuka file "DIY_startpage.html" Anda. Apa yang Anda lihat terlihat sangat berbeda dari halaman di browser Anda, bukan? Ini adalah kode halaman Anda, dan browser menafsirkan kode itu agar terlihat sedikit lebih ramah mata dan melakukan semua hal yang kami perlukan.

Kode untuk proyek halaman awal kami ditulis dalam dua bahasa terkait: HTML dan CSS. HTML biasanya bertanggung jawab atas konten halaman, dan CSS bertanggung jawab atas tampilan halaman.

Cari bagian pertama ini untuk menyesuaikan halaman awal Anda:

html {

align-item: tengah; warna: #313131; tampilan: fleksibel; font: 22px "Kurir Baru", Kurir, monospace; tinggi: 100%; justify-content: pusat; margin: 0; }

Bagian halaman awal kami ini berfokus pada tampilan umum item di halaman kami. Garis:

font: 22px "Kurir Baru", Kurir, monospace;

secara khusus tentang font yang kami gunakan di halaman awal dan memiliki dua parameter yang menentukan seperti apa teks pada halaman Anda: ukuran dan jenis font.

• size - Itulah "22px" itu. Ukuran teks Anda di layar ditentukan dalam "px", kependekan dari piksel.
• font family - Di situlah kami mencantumkan font yang ingin kami gunakan. Biasanya ide yang baik untuk membuat daftar beberapa, dari font yang Anda benar-benar ingin menggunakan keluarga yang paling umum. Font ini bergantung pada browser yang Anda gunakan, jadi jika yang paling khusus tidak tersedia, browser akan mencoba yang berikutnya, dan seterusnya.

Halaman CSS Web Safe Fonts dari w3schools memiliki daftar kombinasi font yang tampak hebat, berpegang pada gaya yang Anda cari dan akan berfungsi di sebagian besar browser modern.

Misalnya, Anda dapat mengganti:

"Kurir Baru", Kurir, monospace;

dengan:

"Palatino Linotype", "Buku Antiqua", Palatino, serif;

atau:

"Comic Sans MS", kursif, sans-serif;

Simpan file Anda, dan segarkan halaman di browser Anda untuk melihat perubahannya! Tidak suka? Tidak masalah! Bermain-main dengan CSS Web Safe Fonts sampai Anda menemukan kombinasi yang Anda sukai.

Langkah 4: Sesuaikan Kutipan Judul Anda

Cari bagian ini di file HTML Anda:

Ini adalah halaman awal Anda! Menikmati

Pilih kutipan yang Anda suka, dan ganti kodenya! Untuk saya sendiri, saya memilih

Sekali lagi ke pelanggaran

Tata letak halaman awal Anda harus beradaptasi dengan cepat agar sesuai dengan kutipan Anda segera setelah Anda memuat ulang halaman di browser Anda: di Firefox, itu berarti menekan CTRL+R pada keyboard Anda, atau mengklik ikon Muat Ulang. Pilih kutipan yang Anda suka sekarang (atau pilih sesuatu nanti!) dan mari mulai menyesuaikan bagian halaman awal Anda!

Langkah 5: Sesuaikan Bagian Anda

Sekarang setelah Anda menemukan kombinasi font yang Anda sukai dan Anda memiliki kutipan yang bagus untuk menginspirasi Anda, mari lanjutkan dan sesuaikan bagian Anda.

Jika Anda mengunduh halaman awal kami dari Github, Anda memiliki 6 bagian yang tersedia untuk disesuaikan: panduan asli hanya memiliki 4 bagian, tetapi karena semakin banyak aspek kehidupan kita yang pindah online baru-baru ini, saya melanjutkan dan menambahkan lebih banyak untuk berjaga-jaga.

Temukan bagian pertama dan ketik saja apa yang kita butuhkan. Sebagai pengingat, bagian pertama saya adalah "Berita dan Bacaan":

Dengan file Anda masih terbuka di Notepad++, temukan baris kode berikut:

Bagian 1

dan ganti dengan kategori dalam daftar Anda yang menurut Anda paling sering Anda gunakan.

Karena banyak dari kita yang terbiasa membaca dokumen dari kiri atas, ke sanalah mata Anda mungkin tertuju secara alami - jadi manfaatkan itu dan pertahankan tujuan terpenting kami di sana! Tetapi jika Anda berasal dari budaya dengan arah membaca yang berbeda, atau jika Anda hanya bekerja secara berbeda, sesuaikan ini untuk diri Anda sendiri. Bagaimanapun, ini adalah halaman awal Anda: Anda tahu apa yang terbaik untuk Anda!

Satu bagian judul turun, lima lagi! Cari baris kode yang mengatakan:

Seksi 2

Ubah, lalu terus cari judul bagian dan ubah hingga Anda mencapai akhir daftar. Jika Anda tidak menggunakan semua bagian, biarkan saja! Kami akan melakukan sedikit pembersihan di akhir tutorial ini juga.

Setelah Anda selesai menyesuaikan bagian, simpan saja perubahan Anda di Notepad++ dan muat ulang halaman di browser Anda. Semua judul bagian harus muncul di tempat Anda meletakkannya: sekarang kami dapat menyesuaikan tautan di setiap bagian!

Langkah 6: Sesuaikan Tautan Anda

Menyesuaikan tautan di setiap bagian sedikit lebih rumit, tetapi tentu saja tidak jauh lebih sulit!

Kali ini kami tidak hanya mengubah nama tautan, kami juga mengubah apa yang dapat Anda lakukan dengan tautan tersebut! Setiap item di setiap bagian akan menjadi dapat diklik, tautan ke situs web yang berbeda. Bonusnya, Anda juga dapat memutuskan apakah Anda ingin membukanya di jendela baru atau tidak!

Pertama, cari garis yang terlihat seperti:

link_one_name

Pilih bit "link_one_name" itu dan ganti dengan teks Anda sendiri. Misalnya, tautan pertama di bagian pertama berdasarkan daftar saya dari langkah X adalah "Koran Digital" sehingga kita mendapatkan:

Koran Digital

Selanjutnya, mari bekerja menyesuaikan tautan! Ganti bit "link.one" dengan tautan pertama Anda. Bagi saya, itu akan menjadi tautan ke surat kabar digital kami, sehingga akan terlihat seperti:

Koran Digital

Simpan pekerjaan Anda di editor teks, dan muat ulang halaman di browser Anda

Anda sekarang seharusnya dapat mengklik tautan pertama yang Anda sesuaikan. Jika tidak diambil, tidak apa-apa! Mulai dari awal lagi atau telusuri kembali langkah Anda hingga tautan terbuka saat Anda mengekliknya.

Setelah Anda mendapatkan link pertama Anda bekerja … Nah, yang perlu Anda lakukan adalah mengulangi langkah-langkah ini untuk setiap link di setiap bagian, sampai Anda telah menyesuaikan semua nama dan link di halaman awal Anda! Hanya ada satu hal: kemungkinan ketika Anda mengklik tautan, halaman awal Anda hilang begitu saja saat tautan baru terbuka di tab atau jendela yang sama.

Ini sangat tidak nyaman… Jadi bagaimana dengan mengubah cara membuka tautan? Mari kita gunakan link pertama kita sebagai contoh! Anda mungkin ingat bahwa di sini kami memberi tahu browser Anda untuk membuka tautan saat Anda mengekliknya:

Koran Digital

Tapi coba tebak - di situlah kami memutuskan bagaimana tautan akan dibuka! Ubah ke:

Koran Digital

Sekarang simpan pekerjaan Anda, dan muat ulang halaman di browser Anda: tautan sekarang akan terbuka di tab baru ketika Anda mengkliknya! Dengan begitu Anda dapat menjaga halaman awal tetap terbuka saat Anda membutuhkannya.

Langkah 7: Tambahkan Gambar Ke Halaman Awal Anda

Sekarang setelah semua tautan kami disiapkan, saatnya untuk menghias halaman awal kami! Template ini memiliki ruang untuk gambar khusus di sisi kanan layar. Sekarang kembali ke Notepad++, cari baris ini:

sepanjang jalan di akhir template. Pilih gambar yang Anda suka, pindahkan ke folder yang sama dengan file halaman awal Anda, dan ganti "library_picture.jpg" dengan nama file gambar Anda. Misalnya, jika nama file saya adalah "your_picture.jpg", barisnya menjadi:

Simpan perubahan Anda dan, sekali lagi, muat ulang halaman awal di browser Anda.

Karena kode halaman awal dan file gambar Anda berada di folder yang sama, gambar akan dimuat secara otomatis saat Anda me-refresh halaman. Jika tidak, periksa nama file Anda - biasanya di situlah saya salah!

Wallpaper ponsel cerdas sangat cocok untuk proyek itu. Secara umum, gambar vertikal apa pun (atau seperti yang dikatakan orang mewah "gambar orientasi potret" dengan rasio 16:9) dalam hal ini! Tetapi tata letak halaman awal kami akan beradaptasi apa pun yang Anda lakukan.

Jika gambar Anda muncul, selamat, Anda sudah selesai!

Langkah 8: Membersihkan Sedikit

Jika Anda memiliki bagian tambahan yang tidak Anda gunakan pada saat itu, jangan ragu untuk menghapusnya! Misalnya, Anda tidak menggunakan Bagian 6. Temukan:

• Bagian 6
• Barang 1
• Butir 2
• Butir 3

Pilih dan hapus baris ini, simpan file Anda dan segarkan file di browser Anda untuk memastikan semuanya hilang.

Ini biasanya langkah di mana saya merusak segalanya karena saya terlalu cepat, jadi jika sesuatu tiba-tiba tidak berhasil, ingat: tarik napas dalam-dalam, dan batalkan apa yang baru saja Anda lakukan dengan kombinasi tombol CTRL+Z pada keyboard Anda!

Langkah 9: Menjadikannya Halaman Awal yang Sebenarnya

Sekarang halaman awal membuka semua tautan yang kita inginkan, dan terlihat seperti yang kita inginkan, saatnya untuk membukanya saat Anda memulai browser!

Pada saat itu, saya ingin menjauhkan semuanya dari Desktop komputer saya dengan memotong dan menempelkan folder halaman awal saya ke folder Dokumen Windows. Jadi, jika Anda sudah selesai mengerjakan halaman awal Anda, lakukan itu!

Berikutnya: kemungkinan besar browser Anda terbuka dengan mesin pencari favorit Anda, atau bahkan halaman kosong.

Anda dapat menemukan petunjuk untuk menyesuaikan Firefox serta browser lain di bawah ini:

• instruksi Firefox
• Petunjuk Google Chrome
• Petunjuk Safari
• Instruksi Microsoft Edge

Setelah Anda selesai mengikuti instruksi untuk browser Anda, tutup semuanya dan buka kembali. Jika halaman awal Anda muncul saat browser Anda diluncurkan, Anda berhasil!

Jika tidak berhasil, baca kembali instruksi untuk browser Anda dan pastikan Anda tidak melewatkan apa pun. Lebih buruk menjadi yang terburuk, kemudian restart komputer Anda setelah menyimpan semua pekerjaan Anda. 9 kali dari 10, itu menyelesaikan segalanya!

Langkah 10: Semua Selesai! Dan, Apakah Anda Ingin Tahu Lebih Banyak?

Selamat telah menyelesaikan halaman awal Anda! Ini mungkin tidak terlihat banyak, tetapi Anda baru saja belajar membuat kode salah satu blok bangunan paling penting dari sebuah situs web seperti yang saya lakukan…Sekitar 20 tahun yang lalu!

Jika Anda menikmati ini dan ingin mempelajari lebih lanjut tentang halaman awal, ini adalah lubang kelinci yang dalam untuk diikuti! Berikut adalah sedikit pilihan untuk membantu Anda dalam perjalanan halaman awal Anda:

• Apakah Anda mencoba panduan halaman awal Dasar? Kabar baik, masih ada lagi dari mana asalnya! Lihat panduan lain dari /stpg/ untuk inspirasi dan fitur lanjutan lainnya!
• Lihat katalog Perpustakaan Johnson County untuk buku-buku tentang HTML dan CSS - dan dengan kartu perpustakaan atau kartu elektronik Anda, Anda juga memiliki akses ke eBuku!
• Kartu perpustakaan Anda juga memberi Anda akses ke Udemy, dan memiliki beberapa kelas yang sangat lengkap tentang HTML, CSS, dan desain web juga.

Jika Anda sangat bangga dengan kreasi Anda, mengapa tidak Anda screenshot dan membagikannya kepada kami melalui Twitter atau Instagram dengan tagar #jocomakes? Kami selalu senang melihat apa yang muncul dari pelanggan kami!