Setiap halaman web berisi serangkaian elemen standar tertentu yang merupakan komponen wajib dari setiap sumber daya Internet. Tentu saja, jangkauan dan jumlah objek tersebut dapat bervariasi tergantung pada fokus tematik situs, volume materi yang diterbitkan di dalamnya, serta pada tujuan dan sasaran yang ditetapkan oleh pembuat sumber daya ini untuk dirinya sendiri. Tata letak elemen-elemen tersebut, mendesain posisi relatifnya adalah salah satu tugas utama webmaster.

Elemen pertama dari sebuah halaman web yang perlu kita perhatikan adalah judulnya. Itu dapat dilakukan dalam teks dan versi grafis, namun, dalam kedua kasus, itu harus ditempatkan di bagian atas dokumen. Terkadang judul digabungkan dengan menu pilihan pengkodean Cyrillic dan tombol untuk beralih dari situs versi bahasa Rusia ke bahasa Inggris, jika sumber daya web ini disajikan dalam dua bahasa. Sebagai aturan, ruang yang dialokasikan untuk menempatkan spanduk iklan terletak langsung di subjudul dokumen. Dimasukkannya spanduk di bagian atas halaman web dalam banyak kasus merupakan prasyarat untuk mendaftarkan situs di layanan pertukaran spanduk - sistem yang mengiklankan sumber daya yang Anda buat dengan imbalan menampilkan iklan anggota lain dari jaringan pertukaran spanduk di Anda halaman situs. Ukuran standar spanduk yang diterbitkan di bawah judul dokumen biasanya 468x60 piksel. Jika Anda menggunakan tata letak halaman statis, lebar judul dokumen Anda akan menjadi sekitar 640 piksel: nilai ini terutama karena kebutuhan untuk memastikan bahwa dokumen ditampilkan dengan benar pada monitor dengan resolusi layar 640x480 piksel dan untuk menghindari bilah gulir horizontal yang membuat sulit untuk melihatnya. Jelas, lebar spanduk dalam hal ini akan jauh lebih sedikit daripada lebar tajuk, karena itu, di bagian halaman tempat Anda berencana mengalokasikan ruang untuk iklan, terbentuk ruang kosong yang dapat diisi dengan logo perusahaan pemilik situs ini atau tautan ke server yang mengimplementasikan situs web hosting. Tentu saja, logo tidak selalu diperlukan: sebagai aturan, logo disertakan dalam halaman web hanya jika situs memiliki fokus komersial.

Bagian utama dokumen ditempati oleh apa yang disebut bidang teks - area di mana konten semantik halaman ditempatkan: teks dan ilustrasi informasional yang bermakna. Elemen yang terdaftar juga disebut "konten" (dari bahasa Inggris, konten - konten). Lokasi bidang teks tergantung terutama pada bagaimana desainer web akan menempatkan sisa elemen dokumen.

Komponen wajib berikutnya dari halaman web adalah elemen navigasi - hyperlink yang menghubungkan dokumen ini dengan bagian lain dari situs. Elemen navigasi dapat berupa string teks, objek grafis, yaitu tombol, atau komponen aktif, seperti applet Java. Yang terakhir adalah tombol yang sama yang, tidak seperti saudara perempuan "tradisional", dapat merespons gerakan mouse, melakukan beberapa tindakan sederhana ketika kursor diarahkan ke atasnya (menyalakan lampu latar, menciptakan efek "klik", mengubah bentuk , dll.). d.). Seperti yang telah saya sebutkan di bagian "Dasar "postulat" desain web, elemen navigasi harus diposisikan sedemikian rupa sehingga selalu "terlihat", "di tangan", yaitu, sehingga pengguna tidak memiliki untuk "memundurkan" halaman kembali , jika bidang teks memiliki tinggi beberapa layar fisik, maka cari tautan ke bagian lain untuk waktu yang lama. Pendekatan yang paling mapan adalah menempatkan elemen navigasi di batas kiri halaman.

Di bagian bawah dokumen, biasanya mempublikasikan informasi tentang pengembang situs dan alamat email di mana pengunjung sumber daya dapat mengirim tanggapan, saran, dan keinginan mereka kepada pemilik halaman. Jika halaman web adalah dokumen awal, penghitung klik juga ditempatkan di bagian bawah halaman web - skrip kecil yang memanggil skrip CGI yang diinstal pada server yang menangkap setiap kali dokumen dibuka di browser pengguna, mengubah nilai indikator counter. Berkat ini, webmaster dapat dengan mudah menentukan jumlah pengunjung yang mengunjungi halamannya setiap saat. Saya perhatikan bahwa penghitung hit hanya diatur pada halaman pertama yang dipanggil saat mengakses situs, itu tidak ada dalam dokumen sumber daya lainnya.

Jadi, kami telah menganalisis semua komponen utama halaman web dan kemungkinan lokasinya relatif satu sama lain. Contoh tata letak situs yang berisi satu set lengkap komponen yang dijelaskan di atas ditunjukkan pada gambar. 3.6. Itu telah memilih posisi elemen navigasi di sepanjang batas kiri dokumen.

Beras. 3.6. Contoh tata letak halaman web dengan elemen navigasi posisi kiri

Dalam praktiknya, seringkali ada situs web dalam desain yang elemen navigasinya diposisikan di sepanjang batas kanan layar. Dalam hal ini, bidang teks digeser ke kiri, sisa komponen dokumen disusun berdasarkan prinsip estetika maksimum dari kombinasinya. Contoh implementasi situs seperti itu ditunjukkan pada Gambar. 3.7.

Beras. 3.7. Contoh tata letak halaman web dengan elemen navigasi posisi kanan

Seperti yang dapat dilihat dari gambar, logo dalam hal ini ditempatkan pada tingkat yang sama dengan judul dokumen, dan spanduk iklan diposisikan relatif di tengah halaman. Dengan pendekatan ini, disarankan untuk mempertahankan desain grafis judul, logo, dan bidang periklanan dalam satu warna dan gaya artistik - maka asimetri posisi benda-benda ini tidak akan begitu jelas dan tidak akan menyakiti mata pendukung. dari estetika desain tabular yang ketat.

Elemen navigasi dapat ditempatkan tidak hanya di dekat batas kanan dan kiri halaman, tetapi juga di bagian atas dokumen. Opsi tata letak ini paling cocok, menurut saya, saat membuat halaman beranda: dalam hal ini, semua objek halaman secara harmonis "pas" dengan lebar yang ditentukan dari tabel tak terlihat, sambil menyiapkan tabel itu sendiri sangat disederhanakan. Satu-satunya kelemahan dari pendekatan ini adalah kebutuhan untuk menduplikasi elemen navigasi di bagian bawah dokumen, karena ketika menggulir secara vertikal pada halaman, mereka menghilang di luar bagian atas layar, dan untuk mendapatkannya, pengguna harus “ mundur” layar kembali, yang, Anda lihat, sangat merepotkan. Contoh desain halaman dengan elemen navigasi teratas ditunjukkan pada Gambar. 3.8.

Beras. 3.8. Contoh tata letak halaman web dengan elemen navigasi posisi teratas

Tentu saja, semua yang telah dikatakan di bagian ini bukanlah obat mujarab, tetapi panduan untuk bertindak. Saya hanya mencoba untuk mengungkapkan prinsip-prinsip umum, yang digunakan saat menyusun struktur situs, keputusan akhir selalu berada di tangan webmaster. Pada akhirnya, tidak peduli desain apa yang Anda masukkan ke dalam dasar proyek masa depan Anda, hasil pekerjaan Anda akan tetap benar: tidak ada penyensoran di Internet, atau peraturan apa pun yang mendorong pembuat situs ke dalam satu atau lain kerangka kerja yang kaku. Contoh solusi desain yang tidak termasuk dalam salah satu kategori di atas adalah apa yang disebut tata letak campuran, diagram perkiraan yang ditunjukkan pada Gambar. 3.9.

Seperti yang dapat dilihat dari gambar, di contoh ini bagian dari kontrol dibangun langsung ke tajuk halaman - kita berbicara tentang tombol untuk beralih antara versi situs Rusia dan Inggris, serta tombol navigasi: ini bisa berupa tautan ke alamat email pembuat sumber daya , digandakan di bagian bawah dokumen, dan tautan ke salah satu bagian tematik, seperti halaman berita. Blok utama elemen navigasi diposisikan relatif terhadap batas kiri dokumen, tetapi menu pilihan pengkodean Cyrillic terletak tepat di bawah spanduk iklan di bagian atas halaman. Bidang teks dibagi menjadi dua kolom asimetris, dan di sebelah kanan ada pengumuman singkat tentang judul tematik yang membentuk sumber daya, termasuk tautan ke bagian ini.

Jelas, ada banyak sekali opsi untuk "tata letak campuran" dari halaman web: solusi spesifik tergantung pada jumlah bagian yang membentuk sumber daya, volume teks yang disiapkan untuk penempatan di situs, dan, akhirnya, pada imajinasi perancang itu sendiri. Ini hanya penting bahwa penampilan situs tidak menimbulkan keluhan dari pengunjung. Pada akhirnya, hanya Anda sebagai pengembang, Anda dan tidak ada orang lain, yang berhak menggunakan semua kemampuan dan bakat Anda dan menyusun halaman sesuai keinginan Anda. Pembuat beberapa beranda, tanpa ragu-ragu, menempatkan penghitung klik di sudut kanan atas dokumen, menulis nama situs dalam cetakan kecil dan kecil dan mempublikasikannya di bawah spanduk iklan, dan untuk beberapa alasan elemen navigasi tiba-tiba ditemukan tepat di tengah blok teks, antara cerita tentang diri mereka sendiri dan foto-foto anjing favorit penulis proyek. Untuk rasa dan warna, seperti yang mereka katakan, tidak ada kawan. Tetapi secara pribadi, penyakit ini tampaknya tidak dapat disembuhkan bagi saya.

Beras. 3.9. Contoh tata letak halaman web "campuran"

elemen halaman web

Setiap halaman web berisi serangkaian elemen standar tertentu yang merupakan komponen wajib dari setiap sumber daya Internet. Tentu saja, jangkauan dan jumlah objek tersebut dapat bervariasi tergantung pada fokus tematik situs, volume materi yang diterbitkan di dalamnya, serta pada tujuan dan sasaran yang ditetapkan oleh pembuat sumber daya ini untuk dirinya sendiri. Tata letak elemen-elemen tersebut, mendesain posisi relatifnya adalah salah satu tugas utama webmaster.

Elemen pertama dari sebuah halaman web yang perlu kita perhatikan adalah judulnya. Itu dapat dibuat dalam versi teks dan grafik, namun, dalam kedua kasus, itu harus ditempatkan di bagian atas dokumen. Terkadang judul digabungkan dengan menu pilihan pengkodean Cyrillic dan tombol untuk beralih dari situs versi bahasa Rusia ke bahasa Inggris, jika sumber daya web ini disajikan dalam dua bahasa. Sebagai aturan, ruang yang dialokasikan untuk menempatkan spanduk iklan terletak langsung di subjudul dokumen. Dimasukkannya spanduk di bagian atas halaman web dalam banyak kasus merupakan prasyarat untuk mendaftarkan situs di layanan pertukaran spanduk - sistem yang mengiklankan sumber daya yang Anda buat dengan imbalan menampilkan iklan anggota lain dari jaringan pertukaran spanduk di Anda halaman situs. Ukuran standar spanduk yang diterbitkan di bawah judul dokumen biasanya 468x60 piksel. Jika Anda menggunakan tata letak halaman statis, lebar judul dokumen Anda akan menjadi sekitar 640 piksel: nilai ini terutama karena kebutuhan untuk memastikan bahwa dokumen ditampilkan dengan benar pada monitor dengan resolusi layar 640x480 piksel dan untuk menghindari bilah gulir horizontal yang membuat sulit untuk melihatnya. Jelas, lebar spanduk dalam hal ini akan jauh lebih sedikit daripada lebar tajuk, karena itu, di bagian halaman tempat Anda berencana mengalokasikan ruang untuk iklan, terbentuk ruang kosong yang dapat diisi dengan logo perusahaan pemilik situs ini atau tautan ke server yang mengimplementasikan situs web hosting. Tentu saja, logo tidak selalu diperlukan: sebagai aturan, logo disertakan dalam halaman web hanya jika situs memiliki fokus komersial.

Bagian utama dokumen ditempati oleh apa yang disebut bidang teks - area di mana konten semantik halaman ditempatkan: teks dan ilustrasi informasional yang bermakna. Elemen yang terdaftar juga disebut konten (dari bahasa Inggris, konten - konten). Lokasi bidang teks terutama bergantung pada bagaimana perancang web akan menempatkan elemen dokumen lainnya.

Komponen wajib berikutnya dari halaman web adalah elemen navigasi - hyperlink yang menghubungkan dokumen ini dengan bagian lain dari situs. Elemen navigasi dapat dibuat dalam bentuk baris teks, objek grafik, yaitu tombol, atau komponen aktif, Misalnya applet jawa. Yang terakhir adalah tombol yang sama yang, tidak seperti saudara perempuan tradisional mereka, mampu merespons gerakan mouse, melakukan beberapa tindakan sederhana saat mengarahkan kursor (menyalakan lampu latar, membuat efek klik, mengubah bentuk, dll.). Seperti yang telah saya sebutkan di "postulat" Dasar bagian desain web, elemen navigasi harus diposisikan sedemikian rupa sehingga selalu terlihat, di tangan, yaitu, sehingga pengguna tidak perlu memundurkan halaman kembali jika bidang teks mengambil beberapa layar fisik, dan kemudian mencari tautan ke bagian lain untuk waktu yang lama. Pendekatan yang paling mapan adalah menempatkan elemen navigasi di batas kiri halaman.

Di bagian bawah dokumen, biasanya mempublikasikan informasi tentang pengembang situs dan alamat email di mana pengunjung sumber daya dapat mengirim tanggapan, saran, dan keinginan mereka kepada pemilik halaman. Jika halaman web adalah dokumen awal, penghitung klik juga ditempatkan di bagian bawah halaman web - skrip kecil yang memanggil skrip CGI yang diinstal pada server yang mencatat setiap kali dokumen dibuka di browser pengguna, mengubah nilai indikator counter. Berkat ini, webmaster dapat dengan mudah menentukan jumlah pengunjung yang mengunjungi halamannya setiap saat. Saya perhatikan bahwa penghitung hit hanya diatur pada halaman pertama yang dipanggil saat mengakses situs, itu tidak ada dalam dokumen sumber daya lainnya. Juga tidak disarankan untuk menempatkan beberapa penghitung berbeda pada satu halaman.

Jadi, kami telah menganalisis semua komponen utama halaman web dan kemungkinan lokasinya relatif satu sama lain.

Dalam praktiknya, seringkali ada situs web dalam desain yang elemen navigasinya diposisikan di sepanjang batas kanan layar. Dalam hal ini, bidang teks digeser ke kiri, sisa komponen dokumen disusun berdasarkan prinsip estetika maksimum dari kombinasinya.

Seperti yang dapat dilihat dari gambar, logo dalam hal ini ditempatkan pada tingkat yang sama dengan judul dokumen, dan spanduk iklan diposisikan relatif di tengah halaman. Dengan pendekatan ini, disarankan untuk mempertahankan desain grafis header, logo, dan bidang periklanan dalam satu warna dan gaya artistik - maka asimetri posisi benda-benda ini tidak akan begitu jelas dan tidak akan menyakiti mata pendukung. dari estetika desain tabular yang ketat.

Elemen navigasi dapat ditempatkan tidak hanya di dekat batas kanan dan kiri halaman, tetapi juga di bagian atas dokumen. Opsi tata letak ini, menurut saya, paling cocok untuk membuat halaman beranda: dalam hal ini, semua objek halaman secara harmonis masuk ke dalam lebar tabel tak terlihat yang ditentukan, sementara menyiapkan tabel itu sendiri sangat disederhanakan. Satu-satunya kelemahan dari pendekatan ini adalah kebutuhan untuk menduplikasi elemen navigasi di bagian bawah dokumen, karena ketika menggulir secara vertikal pada halaman, mereka menghilang di luar bagian atas layar, dan untuk mendapatkannya, pengguna harus mundur layar, yang, Anda lihat, sangat merepotkan.

Tentu saja, semua yang telah dikatakan di bagian ini bukanlah obat mujarab, tetapi panduan untuk bertindak. Saya hanya mencoba menguraikan prinsip-prinsip umum yang berlaku ketika meletakkan struktur situs, tetapi keputusan akhir selalu diserahkan kepada webmaster. Pada akhirnya, tidak peduli desain apa yang Anda gunakan sebagai dasar untuk proyek masa depan Anda, hasil pekerjaan Anda akan tetap benar: tidak ada penyensoran di Internet, atau peraturan apa pun yang memaksa pembuat situs ke dalam satu atau lain kerangka kerja yang kaku. Contoh solusi desain yang tidak termasuk dalam salah satu kategori di atas adalah yang disebut tata letak campuran.

Seperti yang dapat Anda lihat dari gambar, dalam contoh ini, bagian dari kontrol dibangun langsung ke tajuk halaman - kita berbicara tentang tombol untuk beralih antara versi situs Rusia dan Inggris, serta tombol navigasi: ini bisa berupa tautan ke alamat email pembuat sumber daya, digandakan di dokumen bawah, dan tautan ke salah satu bagian tematik, misalnya, halaman berita. Blok utama elemen navigasi diposisikan relatif terhadap batas kiri dokumen, tetapi menu pilihan pengkodean Cyrillic terletak tepat di bawah spanduk iklan di bagian atas halaman. Bidang teks dibagi menjadi dua kolom non-simetris, dan kolom kanan berisi pengumuman singkat tentang judul tematik yang membentuk sumber daya, termasuk tautan ke bagian ini.

Jelas, mungkin ada berbagai macam opsi tata letak campuran untuk halaman web: solusi spesifik bergantung pada jumlah bagian yang membentuk sumber daya, jumlah teks yang disiapkan untuk penempatan di situs, dan, akhirnya, pada imajinasi desainer itu sendiri. Yang penting tampilan situs tidak menimbulkan keluhan dari pengunjung. Pada akhirnya, hanya Anda sebagai pengembang, Anda dan tidak ada orang lain, yang berhak menggunakan semua kemampuan dan bakat Anda dan menyusun halaman sesuai keinginan Anda. Pembuat beberapa beranda, tanpa ragu-ragu, menempatkan penghitung klik di sudut kanan atas dokumen, menulis nama situs dalam cetakan kecil dan kecil dan mempublikasikannya di bawah spanduk iklan, dan untuk beberapa alasan elemen navigasi tiba-tiba ditemukan tepat di tengah blok teks, antara cerita tentang diri mereka sendiri dan foto-foto anjing favorit penulis proyek. Untuk rasa dan warna, seperti yang mereka katakan, tidak ada kawan. Tetapi secara pribadi, penyakit ini tampaknya tidak dapat disembuhkan bagi saya.

Setiap halaman Web harus mengandung setidaknya empat elemen: , , Informasi di halaman web

DASAR-DASAR DESAIN WEB

Dasar-dasar desain web

Sejarah perkembangan internet. Munculnya Internet di Belarus. Desain web. Sejarah kejadian. Persyaratan desain situs web sesuai dengan standar W3C. Browser utama. Struktur situs, skrip, dan tag.

Internet ( Bahasa inggris Internet, Jaringan Terhubung - jaringan yang terhubung) - raksasa jaringan komputer, terdiri dari banyak jaringan kecil yang terhubung satu sama lain dan mencakup seluruh dunia.

Sejarah Internet dimulai pada pertengahan abad terakhir: di 1957 Badan Pengembangan Lanjutan (ARPA) dibuat di Amerika Serikat, yang terlibat dalam pengembangan militer.

Pada tahun 1989, Tim Berners-Lee menciptakan bahasa HTML.

Pada tahun 1961 Defense Advanced Research Agency (DARPA) atas nama Departemen Pertahanan AS telah memulai proyek untuk membuat jaringan transmisi paket eksperimental. Jaringan ini disebut ARPANET, pada awalnya dimaksudkan untuk mempelajari metode untuk memastikan komunikasi yang andal antara komputer dari berbagai jenis.

Di Januari 1969 Hanya dalam beberapa menit, sebuah sistem diluncurkan yang menghubungkan empat komputer di berbagai bagian Amerika Serikat. Itu terjadi melalui saluran telepon dial-up berkecepatan rendah.

PADA 1973 tahun melalui Arpanet untuk pertama kalinya komputer "berbicara" negara lain. Jaringan telah menjadi internasional.

Perkembangan jaringan berjalan dengan pesat. Pada tahun 1987, jumlah host melebihi 10.000. Pada tahun 1988, Kanada, Islandia, Denmark, Norwegia, Prancis, Finlandia, dan Swedia bergabung dengan NSFNET. Pada tahun 1989, jumlah host melebihi 100.000. Inggris, Jepang, Jerman, Austria, Israel, Italia, Meksiko, Selandia Baru, dan Belanda bergabung dalam jaringan. Rusia bergabung dengan NETWORK pada tahun 1990. Belarus juga di awal 90-an.

Jumlah pengguna yang terhubung telah berkembang pesat setiap tahun. Pada tahun 1995 Web telah menjadi media komunikasi massa terbesar, paling dinamis dan mudah diakses.

Desain web. Sejarah kejadian.

Desain web (dari desain web bahasa Inggris) adalah desain visual halaman web. Ini memainkan peran yang sama untuk situs sebagai desain cetak dan tata letak untuk edisi kertas. Seringkali "desain web" disebut pengembangan web: desain antarmuka (grafik dan konten teks situs), desain struktur, navigasi, dan mesin situs (bagian yang disorot kode program untuk mengimplementasikan tugas terapan tertentu).

Saat ini, istilah "desain web" dipahami secara tepat sebagai merancang struktur, integritas ideologis sumber daya Internet, memastikan kenyamanan penggunaan sumber daya Internet bagi pengguna. Bagian penting dalam mendesain situs web adalah kepatuhan mereka terhadap standar W3C (English World Wide Web Consortium, World Wide Web Consortium - sebuah organisasi yang mengembangkan dan menerapkan standar teknologi untuk World Wide Web), yang memastikan ketersediaan konten situs untuk penyandang disabilitas , serta untuk pengguna perangkat portabel.

Juga, dengan desain situs yang terkait langsung dengan pemasaran di Internet (pemasaran Internet), yaitu, promosi dan periklanan sumber daya yang dibuat, Optimisasi Mesin Pencari

Desain web, meskipun didasarkan pada komponen grafis, masih sangat berbeda dari desain cetak. Hal ini terutama disebabkan oleh dinamisme dan interaktivitas gambar visual halaman web.

Hampir setiap halaman web memiliki hyperlink, menu navigasi, dan elemen lain yang menyediakan transisi antar bagian informasi. Data interaktif (yaitu, memerlukan beberapa tindakan dari pengguna dan menanggapinya) elemen membedakan antarmuka elektronik dari antarmuka buku, majalah, atau surat kabar biasa.

Saat mendesain halaman web, elemen-elemen ini adalah kuncinya. Pengembangan tata letak halaman yang kompeten, struktur logis situs dan rute navigasi membentuk dasar desain web dan kegunaan

Kegunaan(Kegunaan bahasa Inggris - secara harfiah "kemudahan penggunaan", "penerapan") - dalam kaitannya dengan teknologi komputer, istilah kegunaan mengacu pada konsep pengembangan antarmuka pengguna perangkat lunak, yang berfokus pada kenyamanan psikologis dan estetika maksimum bagi pengguna.

Persyaratan desain situs web sesuai dengan standar W3C

Desain situs web harus ramah pengguna , dimengerti, ditampilkan dengan benar di browser apa pun. Situs harus memiliki desain grafis asli yang menyediakan fungsionalitas yang tepat.

Situs harus memberikan kemudahan dan kelengkapan elemen navigasi.

Informasi dasar, menu, dan elemen navigasi lainnya harus dapat diakses tanpa pengguliran horizontal penuh Buka jendela browser dengan resolusi layar 1024x768 piksel.

Desain (lokasi blok informasi, desain visual) halaman utama mungkin berbeda dari desain halaman biasa dengan tetap mempertahankan kesatuan gaya situs.

Kehadiran objek grafis yang indah, penggunaan elemen grafis kecil namun bergaya (piktogram, "visual") dalam desain halaman situs dipersilakan.

Penyertaan kecil elemen animasi diterima.

Desain situs harus cukup "ringan" dalam hal volume elemen grafis dan memberikan kecepatan pemuatan halaman setinggi mungkin.

Berikan identifikasi yang mudah dari bagian dan subbagian di mana pengguna berada.

Menampilkan informasi dengan benar di komputer tanpa plugin flash pra-instal, dengan dukungan yang dinonaktifkan untuk skrip, grafik, templat gaya.

Desain harus menyediakan kemungkinan untuk mengembangkan struktur situs melalui pengembangan dan penyertaan bagian dan subbagian baru ke dalamnya.

Peramban web, atau peramban.

Saat ini, setiap pengguna memilih sendiri browser "nya". Yang paling populer adalah Opera dan Firefox. Mengikuti mereka Internet Explorer(YAITU).

Peramban web atau peramban (dari peramban Web bahasa Inggris) adalah perangkat lunak untuk mencari, menjelajahi situs web, yaitu, untuk meminta halaman web (terutama dari Web), untuk memprosesnya, menampilkan, dan berpindah dari satu halaman ke halaman lainnya.

Situs lintas-browser adalah situs profesional dan kompeten yang terlihat sama jika dilihat di browser yang berbeda. Situs harus memastikan tampilan data yang benar di browser berikut:

Internet Explorer (versi 5.5 ke atas):

Opera (versi 7.0 ke atas);

Mozilla Firefox(versi 1.0 ke atas).

Dasar mode warna monitor di mana situs harus dilihat dengan benar - 15 bit warna dan lebih banyak (jumlah warna adalah 65536 dan lebih banyak lagi).

Pengembangan struktur proyek web

Menurut konsep umum proyek, tujuan dan sasaran yang ditetapkan, struktur proyek web ditentukan, yaitu:

struktur data, definisi hubungan antara tabel database, struktur transfer data dari sumber eksternal;

penentuan tingkat otomatisasi pengolahan data, pengembangan struktur manajemen data;

spesifikasi bentuk dan urutan penampilannya dilakukan;

struktur antarmuka pengguna: item menu dan elemen navigasi, tingkat bersarang yang diperlukan;

pengembangan sketsa desain proyek (jumlah opsi disetujui sebelumnya).

Perkembangan.

desain: solusi artistik dan teknis. Penciptaan gaya asli situs: solusi warna, produksi elemen desain, spanduk, elemen grafis;

pemrograman: pembuatan elemen program;

implementasi navigasi dalam kerangka model proyek yang disetujui;

konten dasar;

Bahasa Markup Hypertext HTML

• (dari Bahasa Inggris Hypertext Markup Language - “hypertext markup language”) adalah bahasa markup standar untuk dokumen di World Wide Web. Semua halaman web dibuat menggunakan HTML (atau XHTML). bahasa HTML ditafsirkan oleh browser dan ditampilkan sebagai dokumen yang dapat dibaca manusia.
• Seiring dengan XML, HTML biasanya disebut sebagai "bahasa markup teks". Faktanya, peran kedua bahasa ini, serta formatnya sendiri yang disebut "teks biasa", jauh melampaui pemrosesan informasi teks.
• Studi apa saja bahasa komputer dimulai dengan pengenalan blok bangunan dasarnya - operator, ekspresi, variabel. Dari sudut pandang ini, bahasa HTML sangat sederhana, belum lagi primitif: kecuali teks biasa, file HTML hanya berisi satu jenis struktur kontrol, yang disebut tag.

Kata-kata yang diapit tanda kurung siku “<” и “>” disebut deskriptor HTML atau tag HTML.

Komponen Utama Halaman Web

Bilah navigasi utama situs (menu). Menu alternatif dan menduplikasi menu utama. Tautan, jenis tautan dan pelaksanaannya. Elemen dasar desain situs web. Tata letak halaman situs web. Skema warna situs. Optimalisasi grafis web, persiapan gambar untuk halaman Web. Prinsip bekerja dengan gambar.

Bilah navigasi utama situs (menu). Bilah navigasi situs, yang mencakup tautan ke bagian utama situs (dan, mungkin, ke subbagian dari bagian saat ini), harus ditempatkan di setiap halaman situs dan tidak boleh mengubah lokasinya, yang dianggap paling mencolok pelanggaran standar kegunaan.

Ada dua pilihan akomodasi yang diterima secara umum. bilah navigasi: vertikal di kolom kiri atau inline in header halaman. Seringkali Anda dapat menemukan kombinasi metode ini, ketika kolom kiri dan baris atas digunakan untuk mengatur bilah navigasi. Pada saat yang sama, di garis atas, sebagai aturan, tautan ke bagian yang paling penting, menurut pengembang, ditempatkan.

Beberapa item menu utama dapat diduplikasi di menu alternatif. Jika horizontal utama - maka di vertikal, atau sebaliknya.

Menurut standar kegunaan, Anda tidak boleh dan dalam kasus apa pun membuat tautan menu - tautan ke file yang dapat diunduh, misalnya, ke daftar harga. Segala sesuatu yang tidak mengarah ke halaman standar situs harus didahului dengan tulisan: "unduh".

Partisi aktif menu (halaman tempat pengguna berada) harus menonjol, jelas berbeda dari item lain, misalnya, dalam warna.

Bagian yang dikunjungi harus disorot dengan warna yang berbeda sehingga pengunjung dapat melihat di mana dia berada dan di mana dia tidak berada.

Tautan ke halaman utama. Sangat diinginkan untuk memiliki tautan ke halaman utama di semua halaman situs. Aturan yang berlaku umum telah menjadi penggunaan logo situs sebagai tautan ke halaman utama atau sebagai ikon dalam bentuk rumah.

Selamat datang kehadiran duplikat menu utama di bagian bawah halaman.

Elemen dasar desain situs web.

Rancangan- ini adalah desain barang, mobil, interior, berdasarkan prinsip menggabungkan kenyamanan, ekonomi, dan keindahan.

seni grafis- seni melukis objek dengan garis kontur dan guratan, tanpa cat (terkadang menggunakan bintik warna) (Kamus Ozhegov).

Ide utama dari desain grafis adalah untuk menggabungkan prinsip-prinsip estetika dan tugas-tugas fungsional dalam satu eksekusi. Keberhasilan setiap proyek sangat bergantung pada kepatuhan terhadap prinsip internal, yang memandu spesialis saat membuat desain grafis.

Tugas utama desain web adalah menciptakan suasana yang nyaman untuk asimilasi informasi di halaman situs Internet.

Tidak ada solusi universal di bidang desain halaman web. Benar-benar mungkin berbagai pilihan pelaksanaan desain web, yang melibatkan pengembangan elemen-elemen berikut:

Tata letak halaman web situs;

Seni grafis.

Tata letak halaman situs web.

Sebuah halaman web sebenarnya dilihat sebagai satu set blok persegi panjang yang ditata dalam urutan tertentu. Dalam hal ini, sebagai aturan, data disusun dalam kolom, oleh karena itu, ketika tata letak, istilah tata letak satu, dua, tiga kolom digunakan.

Tata letak halaman situs harus menyediakan penskalaan halaman otomatis tergantung pada lebar bidang kerja browser pengguna. Ukuran minimum (lebar) bidang kerja browser, di mana perlu untuk memastikan tampilan halaman penuh (tanpa bilah gulir horizontal), adalah 1024 piksel.

Skema warna situs.

Warna adalah salah satu elemen paling kontroversial dari desain web. Warna dapat menekankan konteks, atau dapat menolak. Keberhasilan situs sangat tergantung pada skema warna yang dipilih. Para peneliti di bidang kegunaan dan desain web telah mencatat bahwa kesan pertama informasi sumber daya internet dibentuk berdasarkan komposisi warna, dan komposisi inilah yang disimpan dalam memori pengguna, dan bukan konten informasi.

Untuk membuat desain yang efektif, perlu mempertimbangkan sejumlah persyaratan yang dikenakan pada pilihan solusi warna:

Kecerahan, nada dan saturasi warna harus sesuai dengan identitas perusahaan situs;

Pemilihan warna dilakukan dengan mempertimbangkan orientasi kepada audiens sumber ini;

Jumlah warna primer yang digunakan, jika memungkinkan, tidak boleh lebih dari tiga;

Warna yang digunakan di situs harus berinteraksi dan selaras satu sama lain;

Penggunaan warna harus sesuai dengan aturan dasar logika;

Item terpisah adalah untuk menyorot pemilihan warna untuk teks. Latar belakang dan teks halaman harus dalam warna yang kontras. Untuk keterbacaan terbaik, gunakan karakter hitam dengan latar belakang putih. Teks tidak boleh menyatu dengan latar belakang, dan judul tidak boleh hilang.

Skema warna harus sesuai dengan bentuk penyajian materi, kontennya, dan audiens situs.

Optimalisasi grafis web, persiapan gambar untuk halaman Web. Prinsip bekerja dengan gambar.

Penggunaan grafik harus dibenarkan, grafik harus jelas sesuai dengan konten situs. Grafik dan animasi yang berlebihan mengalihkan perhatian dari konten utama, mengalihkan perhatian pengunjung situs, sehingga sulit untuk memuat halaman.

Situs harus dimuat dengan cepat, dan grafik mengambil sebagian besar lalu lintas halaman web. Satu foto dalam kilobyte membutuhkan ruang sepuluh kali lebih banyak daripada selembar teks A4. Grafik harus dioptimalkan! Gambar duplikat harus digunakan karena komputer menyimpan file yang pernah diunduh di folder sementara untuk menghemat waktu pengunduhan. Gambar berulang dapat menjadi "tajuk" situs di semua halamannya.

Jika Anda perlu menempatkan gambar besar, Anda dapat membuatnya terbuka secara terprogram dengan klik tambahan di jendela browser baru. Tetapi secara default, situs harus ringan.

Rata-rata waktu buka halaman tidak boleh lebih dari 30 detik dengan kecepatan koneksi 28,8 Kbps. Peningkatan waktu muat diperbolehkan halaman individu hingga 35 detik, tetapi tidak lebih dari 30% dari total jumlah halaman situs. Halaman Utama harus memiliki waktu buka tidak lebih dari 40 detik

Di halaman web, Anda dapat menggunakan file grafik format JPG, GIF dan PNG. GIF adalah format jaringan khusus: ia memiliki ukuran file kecil, kemampuan untuk mengembangkan dan menghidupkan dengan lancar, serta efek transparansi yang memungkinkan Anda menggunakan gambar sebagai "wallpaper" pada halaman atau tabel. Tapi sejak gif berisi 256 palet warna, tidak efisien untuk menyimpan foto. JPG, di sisi lain, tidak memiliki batasan pada kedalaman warna, tetapi juga kemampuan animasi. Format baru file yang mendukung kedalaman dan transparansi -PNG memiliki kelemahan karena browser lama tidak melihatnya. Karena itu, jika Anda tidak memperhitungkan pengguna program usang, ping dapat disertakan di halaman Anda. Untuk menyertakan gambar di halaman, Anda perlu menjelaskan tautan ke sana:

dimana SRC (dari s ou rc e -source)= Gambar - file gif, jpg, atau png yang berisi gambar.
Anda dapat mengatur posisi relatif gambar dan teks dengan menyertakan atribut align = " ":

Jenis penyelarasan berikut dimungkinkan:
align = "middle" - relatif terhadap pusat garis
align = "left" - teks mengalir di sekitar gambar ke kanan
align = "kanan" - sama di kiri

Saat menggunakan perataan kiri atau kanan dapat dimasukkan dalam tag img parameter tambahan padding di sekitar gambar sehingga gambar tidak ditekan dekat dengan teks Anda. Parameter VSPACE="n" - membuat indentasi vertikal, dan HSPACE="n" - secara horizontal dengan n piksel. Dengan demikian, tag gambar yang ditulis dengan benar dengan pembungkusan teks di sebelah kanan akan terlihat seperti ini:

Teks.

Parameter terakhir adalah lebar perbatasan. Jika ada tanpa nilai, tetapi hanya dalam bentuk kata BORDER, maka perbatasan akan ditarik oleh browser dengan sendirinya, dan jika, seperti pada contoh, nilai menunjukkan lebarnya. Nilai nol dari parameter ini digunakan jika file berfungsi sebagai hyperlink grafis, untuk menutupinya.

Informasi serupa.

Sebagian besar konten di Internet adalah halaman web. Ini secara historis adalah jenis dokumen pertama yang dimaksudkan untuk ditempatkan di ruang jaringan virtual, tetapi masih mempertahankan relevansinya dan praktis tidak memiliki format yang bersaing. Apa struktur halaman web? Alat pengembangan web apa yang digunakan untuk membuatnya?

Apa itu halaman Web?

"Buat daftar elemen dasar halaman Web," seorang penguji memberi tahu kami di kelas ilmu komputer. Apa yang bisa kita katakan kepadanya sebagai tanggapan? Pertama-tama, mari kita bicara tentang apa itu halaman web pada prinsipnya.

Menurut definisi yang diterima secara umum di kalangan spesialis TI, ini adalah dokumen yang dirancang untuk dibuka dalam program khusus - browser, dan yang berisi data untuk menampilkan berbagai konten berguna di layar komputer menggunakan jenis perangkat lunak yang sesuai - teks, tautan, grafik, video, musik, dll. dll. Halaman web adalah Dokumen Teks. Data yang relevan untuk browser adalah huruf, angka dan Simbol khusus, digunakan sebagai elemen bahasa markup - HTML. Dengan bantuan itu pembuat halaman web "menjelaskan" kepada browser cara menampilkan konten ini atau itu di layar.

Tempat dan peran halaman web dalam struktur situs

Bisakah kita mengatakan bahwa halaman Web adalah komponen utama dari sebuah situs web? Ini sebagian benar. Namun, seperti yang kami sebutkan di atas, halaman web hanyalah dokumen teks. Situs, sebagai suatu peraturan, juga berisi gambar, video, dan elemen multimedia lainnya. Halaman web tidak dapat memuatnya, tetapi dalam strukturnya dapat berisi tautan ke sana. Dengan demikian, halaman web dapat disebut sebagai komponen utama situs dalam hal peran utama dalam menampilkan konten virtual kepada pengguna.

Dalam kasus yang jarang terjadi, tentu saja, dokumen yang dimaksud akan menjadi satu-satunya komponen situs - jika karena alasan tertentu dokumen tersebut tidak menyediakan tampilan grafik, video, dan elemen multimedia lainnya. Secara khusus, situs pertama - ketika bahasa markup halaman Web pertama kali muncul - tidak menyertakan konten yang sesuai. Di depan mata pengguna hanya teks dan tautan.

Prinsip penggunaan hypertext

Jadi, halaman Web adalah dokumen yang ditulis dalam HTML, yang dengannya markup hypertext dilakukan. Tapi apa fenomena ini? Apa itu hypertext? Tanpa menggali terlalu dalam ke dalam teori, kami mencatat bahwa ini adalah teks yang dalam satu atau lain cara memungkinkan Anda untuk mendapatkan akses cepat ke yang lain melalui tautan. Dalam buku biasa, ini tidak mungkin - ada "teks biasa". Untuk mendapatkan akses ke halaman yang diinginkan, pembaca harus melakukan beberapa kali membalik, setelah sebelumnya membaca konten atau catatan kaki. Dalam mode "hiperteks", bagian utama pekerjaan dilakukan oleh komputer - karena informasi yang tercermin dalam elemen HTML halaman.

Jika seorang guru ilmu komputer memberi tahu kita, "Buat daftar elemen utama halaman Web," maka kita dapat mulai berbicara dengan benar tentang komponen dokumen terkait, yang dibuat menggunakan bahasa markup HTML. Oleh karena itu, untuk memulai, mari kita lihat beberapa poin teoretis mengenai HTML.

Struktur bahasa HTML: tag

Bagaimana cara browser membaca data yang diperlukan tentang halaman web dari dokumen HTML? Sangat sederhana.

Elemen utama bahasa yang diberikan adalah tag. Dalam kebanyakan kasus, mereka dipasangkan - ada yang pembuka, dan ada yang penutup. Yang pertama dilambangkan dengan hanya menggunakan kurung sudut. Yang kedua serupa, tetapi braket kedua didahului oleh garis miring - simbol /. Browser dapat mengenalinya, dan karenanya menampilkan konten halaman web tanpa masalah sesuai dengan algoritma yang dibuat oleh pengembang dokumen.

Tag pembuka biasanya ditulis dengan huruf kapital, tag penutup ditulis dengan huruf kecil. Ini adalah standar yang telah ditetapkan di kalangan profesional TI. Browser pasti akan mengenali perintah HTML dalam huruf apa pun, tetapi pengembang web tetap disarankan untuk tetap menggunakan skema penulisan tag yang ditandai. Ini akan memfasilitasi, misalnya, penyelesaian halaman web oleh spesialis lain.

Atribut

Elemen penting lainnya dari bahasa HTML adalah atribut. Dengan bantuan mereka, pembuat halaman web dapat mengatur properti konten - misalnya, tinggi font, warna, posisi relatif terhadap halaman. Hal yang sama berlaku untuk gambar, video, dan komponen multimedia lainnya. Atribut ditulis di dalam tag pembuka.

Isi

Antara tag pembuka dan penutup adalah komponen kunci berikutnya dari halaman web, konten. Faktanya, ini adalah konten yang seharusnya ditampilkan di depan pengguna di layar. Bisa berupa teks, link, gambar, video atau elemen multimedia lainnya.

elemen halaman web

"Jadi daftar elemen dasar halaman Web, akhirnya!" - ulangi guru. "Dengan senang hati," kami menjawabnya. Apa yang termasuk dalam struktur jenis dokumen yang dipertimbangkan? Mari kita setuju bahwa kita akan mempertimbangkan aspek ini dalam konteks elemen HTML halaman web. Artinya, tampilan mereka di browser - apa yang dilihat pengguna di layar - akan menarik minat kami pada tingkat yang lebih rendah. Faktanya adalah bahwa algoritma HTML yang sesuai, yang menjadi dasar program menampilkan konten dengan cara yang sama, dapat berbeda. Dan inilah kekhasan bahasa HTML: gambar yang diinginkan pada halaman Web dapat ditampilkan cara yang berbeda. Pada saat yang sama, mereka dapat setara dalam hal biaya tenaga kerja pembuat halaman web, atau mereka dapat menyiratkan jumlah usaha dan waktu yang berbeda untuk implementasinya.

Elemen halaman web: header

Elemen standar halaman Web, meskipun terdengar mengejutkan, hadir dalam jumlah yang sangat kecil. Faktanya, hanya ada dua - judul dan isi dokumen. Namun, masing-masing dari mereka dapat memiliki struktur yang agak rumit.

Apa spesifikasi headernya? Itu terletak di bagian paling atas halaman web. Kode HTML yang menghasilkan tajuk biasanya seharusnya "mengenkripsi" hanya teks, tetapi jika perlu, Anda juga dapat menempatkan kecil sisipan grafis. Dan ini, pada kenyataannya, adalah semua yang dapat dikatakan tentang judul. Tampaknya perannya dalam struktur dokumen yang sesuai tidak signifikan. Tapi tidak. Judul halaman web sangat penting dalam hal pengindeksan situs di mesin pencari— Yandex, Google. elemen ini harus sepenuhnya relevan dengan konten halaman web, serta spesifikasi tematik situs.

Bagaimana judul halaman web ditangkap menggunakan HTML? Sangat sederhana. Pertama, ditulis tag pembuka yang selalu terlihat seperti KEPALA dengan tanda kurung siku, lalu isi judulnya, setelah itu tag penutup. Mereka ditulis, tentu saja, di bagian paling atas dari dokumen web.

Judul dokumen web dapat mencakup sejumlah elemen tambahan. Terkadang format halaman Web mungkin memerlukan teks untuk ditampilkan dalam pengkodean tertentu. Bagaimana memastikan bahwa dokumen web memenuhi kriteria ini? Sangat sederhana. Struktur header dokumen harus berisi algoritme HTML yang menginstruksikan browser untuk menggunakan pengkodean bahasa tertentu - misalnya, Cyrillic. Perintah yang sesuai ditempatkan di dalam tag META, yang, seperti yang lain, dapat membuka dan menutup.

Badan utama halaman web

Bagian utama dokumen web dibuka dengan tag BODY dan ditutup dengan elemen yang sesuai, yang mencakup garis miring. Pada saat yang sama, mungkin ada sejumlah besar perintah tambahan dari bahasa markup hypertext antara tag pembuka dan penutup. Ini disebabkan oleh fakta bahwa bagian utama halaman web berisi konten yang bermanfaat - teks, tautan, grafik, video, berbagai formulir untuk diisi.

Masing-masing jenis konten masing-masing memiliki tag sendiri. Struktur bagian utama dari dokumen web mungkin berisi perintah HTML yang juga dapat digunakan untuk memformat teks, misalnya, memberi font warna, ukuran, dan properti tertentu lainnya.

Mari kita lihat secara spesifik beberapa tag HTML yang umum digunakan. Sebenarnya, mereka juga membentuk elemen utama halaman web.

Tag HTML dasar

Jadi, untuk mempelajari secara rinci apa elemen halaman Web, mari kita pelajari lebih detail esensi dari tag HTML dasar. Kami telah mencantumkan beberapa di antaranya di atas - khususnya, yang digunakan browser untuk membaca tajuk halaman web dan menentukan di mana bagian utama dokumen berada.

Tag P cukup umum, seperti elemen serupa lainnya dari bahasa markup hypertext, dapat membuka dan menutup. Tag ini memungkinkan Anda untuk memformat satu paragraf dokumen. Anda dapat, misalnya, mengatur jenis atau warna font tertentu untuknya. Namun, ini dilakukan dengan bantuan tag tambahan - FONT. Pada saat yang sama, itu akan ditempatkan di dalam salah satu yang menunjukkan batas paragraf - ini akan memungkinkan Anda untuk tidak mendistribusikan perintah HTML yang mencerminkan jenis font yang disukai ke elemen lain dari halaman web.

Tabel dibuat menggunakan tag TABLE. Dengan menggunakan atribut yang sesuai, Anda dapat menentukan jumlah kolom dan baris yang diperlukan, mengatur lebarnya, spesifikasi batas, ukuran dan warna font teks dalam tabel.

Tag IMG bertanggung jawab untuk memproses gambar oleh browser. Anda juga dapat menempatkan berbagai atribut di dalamnya yang mengatur ukuran gambar, posisinya di halaman.

Tautan ke dokumen atau file web lain ditunjukkan menggunakan tag A. Sebagai aturan, atribut terletak di dalamnya, yang menunjukkan fakta bahwa struktur halaman web adalah hyperlink. Ini menunjukkan dokumen, file, atau situs yang dituju.

Tag umum adalah FRAMESET. Dengan itu, Anda dapat membagi ruang halaman web menjadi beberapa area - bingkai. Di masing-masingnya, Anda dapat menempatkan tautan ke dokumen web individual. Artinya, bingkai memungkinkan Anda menempatkan dua halaman atau lebih dengan benar pada layar yang sama secara bersamaan.

Kisah tentang elemen kunci halaman web dan kisah selanjutnya tentang cara memformatnya menggunakan bahasa HTML - sesuatu seperti ini akan menjadi algoritme jawaban kami atas pertanyaan yang diajukan penguji kepada kami. Jika dia menghubungi kami, mengatakan "daftar elemen utama halaman Web", maka kami, dengan menggunakan metodologi yang sesuai, akan memiliki setiap kesempatan untuk mengungkapkan topik tersebut. Artinya, dengan istilah "elemen" kita dapat memahami komponen kunci dari struktur dokumen web, atau jenis konten - teks, gambar, tabel, bingkai, tautan yang dibuat webmaster menggunakan alat seperti bahasa HTML.

Spesifikasi alat pengembangan web

Selain apa yang telah dikatakan, kami dapat mengklarifikasi bahwa ada sejumlah besar tag dan atribut yang disediakan oleh standar HTML. Selain HTML, pengembang web dapat menggunakan alat pemformatan tambahan untuk dokumen hypertext. Misalnya, menggunakan bahasa skrip JavaScript, Anda dapat membuat halaman Web dinamis - yaitu halaman di mana konten terus diperbarui (baik karena tindakan pengguna itu sendiri, dan sesuai dengan algoritme yang telah ditulis sebelumnya dalam skrip).

Akan berguna untuk menambahkan bahwa pengembang web dapat menggunakan bahasa pemrograman lengkap dalam pekerjaannya, seperti, misalnya, Perl, PHP, Java, Python, dengan bantuan yang kemungkinan bekerja dengan dokumen hypertext menjadi bahkan lebih luas. Kebutuhan akan hal ini mungkin disebabkan oleh kenyataan bahwa bidang penerapan teknologi web saat ini sangat berbeda. Tantangan yang dihadapi pengembang modern bisa sangat kompleks. Misalnya, terkadang diperlukan untuk menerjemahkan halaman Web yang ditulis dalam bahasa Rusia ke dalam bahasa Inggris. Dalam hal ini, toolkit pengembang akan menjadi yang paling beragam.