Desain halaman web dan bahasa pemrograman: HTML, XHTML, XML, CSS, dan JavaScript

Definisi desain situs web

Berapa banyak situs web yang Anda kunjungi setiap hari? Pernahkah Anda berpikir untuk membuat situs web Anda sendiri? Banyak orang dan organisasi membuat situs web untuk berbagi informasi, mendidik, serta membeli dan menjual produk dan layanan.

Desain web adalah pembuatan dan desain visual dokumen yang ditampilkan di World Wide Web. Organisasi mengandalkan situs web dengan konten yang menarik dan merangsang secara visual untuk menarik dan mempertahankan konsumen. Kualitas desain web adalah faktor kunci saat membuat atau merevisi situs web. Siapa pun yang bersiap untuk mengembangkan situs web harus mempertimbangkan beberapa faktor dalam merencanakan kesuksesan. Faktor apa yang menurut Anda akan menjadi penting? Pertimbangkan beberapa situs web yang baru-baru ini Anda kunjungi. Apakah ada hal yang benar-benar Anda sukai atau tidak sukai dari situs web tersebut?

Merencanakan situs web Anda

Membangun website itu seperti membangun rumah. Langkah pertama membutuhkan perencanaan yang tepat. Dengan sebuah rumah, Anda memerlukan seorang arsitek untuk mendesain rumah, seorang kontraktor untuk membangun rumah, dan seorang desainer interior untuk mendekorasi rumah. Meskipun Anda dapat membuat situs web sendiri, banyak organisasi mempekerjakan profesional yang memiliki keterampilan dan bakat untuk membuat situs web yang berfungsi dengan baik dan menarik. Untuk membangun situs web, Anda memerlukan direktur kreatif yang bertindak sebagai arsitek, direktur web yang bertindak sebagai kontraktor, dan direktur konten yang bertindak sebagai desainer interior.

Saat merencanakan situs web, Anda perlu mengetahui audiens Anda dan merancang situs web yang sesuai dengan kebutuhan, minat, dan preferensi tampilan mereka. Saat mendesain situs web, penting untuk diingat bahwa situs web akan dilihat di layar komputer. Mereka harus dirancang dengan tepat untuk media itu. Konten harus diatur sedemikian rupa sehingga bermakna dan mudah dinavigasi. Penting untuk memanfaatkan kekuatan hypertext. Salah satu cara untuk mencapainya adalah dengan menyediakan tautan di dalam konten halaman web sehingga pengguna dapat membuat jalur mereka sendiri menuju informasi.

Perancang situs web harus mempertimbangkan pengguna dengan browser web, sistem operasi, dan platform komputer yang berbeda untuk memastikan aksesibilitas. Halaman juga harus direncanakan dengan mempertimbangkan kecepatan koneksi. Ini bermanfaat untuk merancang bandwidth rendah. Bandwidth adalah jumlah data yang dapat ditransmisikan dalam periode waktu tertentu. Tidak ada yang mau menunggu halaman dimuat dengan lambat karena grafik besar atau animasi yang rumit. Faktanya, rata-rata pengguna hanya akan menunggu 10-20 detik untuk memuat halaman sebelum keluar. Itu bisa menjadi keunggulan yang hilang bagi pesaing!

Membangun fondasi situs web Anda

Setelah perencanaan selesai dan rencana arsitektur diselesaikan, konstruksi dapat dimulai. Apakah Anda sedang mengerjakan rumah baru atau situs web baru, kami mulai dengan yayasan. Bahasa pemrograman web seperti HTML, XML, dan XHTML menyediakan alat untuk membangun fondasi, seperti halnya pembingkaian menyediakan struktur dasar namun penting untuk membangun dan mendesain seluruh rumah.

Hypertext Markup Language (HTML) adalah alat pemrograman yang menggunakan hypertext untuk membuat tautan dinamis ke dokumen lain. Ini dikenal sebagai bahasa pemrograman Web dan menyediakan kerangka kerja umum untuk membuat halaman web. Semua halaman web sebenarnya adalah file HTML. Dokumen HTML hanyalah dokumen teks yang berisi konten halaman web Anda, serta instruksi khusus yang disebut tag. Tag memberikan instruksi tentang cara menampilkan teks atau grafik dan mengontrol input pengguna. Tag diapit tanda kurung siku: <>. Biasanya, ada tag awal dan akhir di sekitar teks. Misalnya, jika kita ingin membuat heading tebal, tag awal kita adalah ‘b’ dalam tanda kurung diikuti dengan header dan diakhiri dengan tag akhir ‘/b’ dalam tanda kurung: <b>’Heading’ </b>. Semua dokumen HTML dimulai dengan HTML dalam tanda kurung dan diakhiri dengan garis miring dan HTML dalam tanda kurung: <html> dan </html>. Tag ini memberi tahu browser web bahwa konten di antara tag harus digabungkan menjadi dokumen HTML. Ada program seperti Dreamweaver yang dirancang untuk membantu Anda membuat kode HTML untuk halaman web. Aplikasi ini menyediakan antarmuka pengguna grafis yang memungkinkan Anda mengklik, menarik, dan menyalin bagian halaman web. Aplikasi ini menghasilkan kode HTML untuk pengguna. Namun jika Anda tertarik mempelajari HTML, mungkin lebih baik membuka program editor teks sederhana, seperti Notepad, dan menulis kode HTML sendiri.

Extensible Markup Language (XML) adalah bahasa pemrograman yang menandai seperti HTML tanpa elemen yang telah ditentukan sebelumnya. Itu tidak bisa menggantikan HTML tetapi melengkapinya. Sementara HTML mengatur tampilan informasi di browser web, XML melengkapi HTML dengan menambahkan tag untuk mendeskripsikan data. XML adalah apa yang kita sebut metalanguage. Metalanguage berarti tentang bahasa, atau dengan kata lain, XML memungkinkan pengguna untuk menggambarkan bahasa markup untuk memenuhi kebutuhan tertentu. XML memungkinkan Anda membuat atau menemukan tag dan atribut khusus yang sesuai dengan kebutuhan Anda untuk jenis dokumen yang Anda tulis. XML memberikan fleksibilitas yang lebih besar untuk menambahkan elemen dan atribut baru yang akan memperluas kemampuan HTML. Ini juga menyediakan kemampuan untuk mendesain browser atau aplikasi baru.

HTML pertama kali diperkenalkan pada tahun 1993 sebagai standar Internet. Selama bertahun-tahun, banyak versi dengan fitur tambahan telah dirilis. Saat ini, Extensible Hypertext Markup Language (XHTML) menggantikan HTML sebagai standar Internet. XHTML adalah bahasa pemrograman markup yang mirip dengan HTML tetapi ditulis menggunakan XML. Pada dasarnya, saat menggunakan XHTML, Anda menulis XML dengan batasan berdasarkan sekumpulan elemen default. Ini menggabungkan bagian terbaik dari HTML dan XML untuk membuat bahasa pemrograman yang kuat dan fleksibel. XHTML pada dasarnya adalah reformulasi HTML menggunakan sintaks XML. Perbedaan utama antara bahasa pemrograman ini adalah bahwa dokumen XHTML harus dibentuk dengan baik atau dikembangkan sesuai dengan aturan khusus untuk dianggap sebagai dokumen XHTML. XHTML peka terhadap huruf besar-kecil, sedangkan HTML tidak. XHTML bekerja mulus dengan database dan aplikasi alur kerja. XHTML memudahkan desainer untuk berkreasi dan menambahkan elemen baru. Ini memberikan cara berpikir yang lebih terstruktur dan konseptual tentang konten.

Dekorasi situs web Anda

Presentasi itu penting karena hanya ada satu kesempatan untuk membuat kesan yang baik dan bertahan lama. Konsumen akan membuat asumsi tentang perusahaan dan produk atau layanannya berdasarkan situs web. Pikirkan tentang membeli rumah. Tidak hanya penting untuk memiliki kesehatan struktural, tetapi Anda juga memperhatikan penampilan luar dan daya tarik visual. Cara rumah ditata, jenis lantai, warna dinding, dan bahkan semak di luar dapat membuat perbedaan dalam perasaan Anda tentang rumah dan nilainya.

Dua alat yang digunakan dalam desain situs web yang dapat membantu menghias situs web adalah lembar gaya kaskade dan JavaScript .

Cascading Style Sheets (CSS) menggunakan bahasa gaya sederhana yang menyediakan terminologi desktop publishing yang familiar bagi pengguna untuk mengubah tampilan situs web. CSS menjelaskan bagaimana tampilan halaman web di browser. Anda dapat menganggap CSS sebagai hiasan di rumah Anda. Tanpa dekorasi itu cukup hambar dan membosankan tetapi ketika Anda menambahkan dekorasi itu benar-benar membumbui lingkungan dan membuatnya lebih menarik. CSS dikembangkan oleh World Wide Web Consortium (W3C). Anda dapat mengontrol font, warna, latar belakang, dan fitur desain lainnya.

CSS menggunakan sintaks yang mudah dibaca dan ditulis. Ini terdiri dari dua bagian: pemilih dan deklarasi. Pemilih memutuskan elemen yang akan diterapkan aturan, sedangkan deklarasi menentukan dengan tepat apa yang harus dilakukan dengan elemen tersebut. Jika Anda ingin menyetel judul menjadi ungu, aturan gaya Anda akan terlihat seperti ini: h1 {color: purple;}. ‘H1’ adalah pemilih dan ‘warna: ungu’ adalah deklarasi. Deklarasi dapat dibagi menjadi dua bagian: properti dan nilai. Properti adalah kualitas atau karakteristik , seperti warna; nilainya adalah spesifikasi tepat dari properti, seperti ungu. Aturan gaya disimpan dalam lembar gaya. Lembar gaya adalah dokumen eksternal dan independen, digunakan bersama oleh beberapa halaman web. Kontrol gaya dengan mudah di seluruh situs web. Alternatifnya adalah memuat style sheet pada satu halaman web untuk penggunaan eksklusif halaman itu. Aturan CSS dapat digabungkan dengan kode HTML. CSS harus digunakan untuk merepresentasikan informasi presentasi dalam XHTML.

JavaScript adalah bahasa pemrograman yang dirancang untuk menyediakan konten web interaktif. Ini adalah komponen penting dari desain halaman web. JavaScript tertanam dalam kode HTML dan membuat halaman web menjadi dinamis. JavaScript yang terdapat dalam kode HTML sering disebut script. JavaScript dapat mengambil dokumen HTML statis dan membuatnya interaktif, sehingga meningkatkan pengalaman pengguna. Mengizinkan konten web berubah setelah halaman dimuat di browser. Ini memungkinkan halaman web untuk berinteraksi dengan pengguna melalui formulir dan kontrol. JavaScript juga menyediakan animasi dan efek visual. JavaScript mewujudkan banyak hal di halaman web Anda. JavaScript ke halaman web seperti engsel ke pintu yang membuka dan menutup atau sakelar lampu yang menyalakan dan mematikan lampu di rumah.

Untuk membuat situs web yang menarik secara visual, seseorang harus mempertimbangkan tata letak, font, dan warna yang akan muncul di layar. Saat mendesain situs web Anda, gunakan tema dan struktur pemersatu yang menyatukan halaman. Pengunjung akan menyukai konsistensi dan keakraban yang disediakan oleh tema terpadu. Pertimbangkan untuk menggunakan kisi atau perangkat tata letak konseptual untuk mengatur halaman web ke dalam kolom dan baris untuk tampilan yang dipoles. Cara teks disajikan adalah komponen penting lainnya dari desain situs web. Anda perlu membatasi jumlah font yang digunakan, ukuran font Anda dengan tepat, sisakan ruang putih yang cukup, dan gunakan warna kontras, seperti latar belakang terang dengan teks gelap. Ruang putih membentuk area kosong halaman Anda. Ruang putih dapat dengan sengaja digunakan untuk memandu pembaca dan menentukan area halaman.

Penyelesaian situs web Anda

Setelah perencanaan, pembangunan dan dekorasi, diperlukan pemeriksaan akhir. Seperti halnya sebuah rumah diperiksa untuk memastikan sesuai dengan kode dan diselesaikan sesuai spesifikasi, sebuah situs web harus diperiksa dan ditinjau ulang. Anda harus mematuhi spesifikasi yang dibuat selama tahap perencanaan. Itu harus tepat dalam hal konten. Itu harus menarik secara visual, menarik, dan mudah dinavigasi. Situs web harus diuji di berbagai browser web, seperti Internet Explorer, Mozilla Firefox, Google Chrome, atau Safari, untuk memastikan tampilan dan fungsinya sebagaimana mestinya. Fungsionalitas situs web harus diperiksa pada berbagai platform seperti Windows dan Mac.Klien akan meninjau situs web dan memastikannya memenuhi kepuasan mereka. Pada titik ini, setiap perubahan atau koreksi yang perlu dilakukan akan dilakukan. Setelah situs web disetujui,

Ringkasan Pelajaran

Singkatnya, desain web adalah pembuatan dan desain visual dokumen yang ditampilkan di World Wide Web. Langkah pertama membutuhkan perencanaan yang tepat. Ini termasuk desain, media tampilan, kemudahan navigasi, penggunaan hypertext, dan pertimbangan bandwidth.

Selanjutnya adalah tahap konstruksi. Situs web dibangun dengan HTML, XML, dan XHTML. Hypertext Markup Language (HTML) adalah alat pemrograman yang menggunakan hypertext untuk membuat tautan dinamis ke dokumen lain. Extensible Markup Language (XML) adalah bahasa pemrograman yang menandai seperti HTML tanpa elemen yang telah ditentukan sebelumnya. XHTML adalah bahasa pemrograman markup yang mirip dengan HTML tetapi ditulis menggunakan XML.

Setelah struktur situs web selesai, sekarang saatnya untuk bagian desain dan dekorasi. Ini termasuk desain informasi, tema pemersatu, penggunaan ruang putih, dan penampilan dan daya tarik keseluruhan. Kami mengandalkan CSS dan JavaScript untuk menghias halaman web. Cascading Style Sheets (CSS) menggunakan bahasa gaya sederhana yang menyediakan terminologi desktop publishing yang familiar bagi pengguna untuk mengubah tampilan halaman web. JavaScript adalah bahasa pemrograman yang dirancang untuk menyediakan konten web interaktif. Terakhir, tes dan ulasan dilakukan untuk memastikan akurasi. Kemudian, situs web diluncurkan.

Tujuan Pelajaran

Setelah melihat pelajaran ini, Anda harus dapat:

• menentukan desain web
• Identifikasi langkah-langkah yang diperlukan untuk merancang situs web.
• Bedakan antara berbagai bahasa pemrograman yang digunakan untuk membuat situs web.