mengendalikanbeberapa komponen dalam sebuah web sehingga akan lebih terstruktur Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar

Teknik Dasar Tampilan Responsif pada Website- Tampilan Responsif pada Website Mengapa Perlu? Kini mayoritas pengguna internet menggunakan mobile device untuk mengakses website. Yup, seperti digambarkan grafik di bawah, persentasenya di tingkat global terus meningkat dari tahun ke tahun. Ya wajar dong jaman now. Siapa tak punya telepon pintar? Mungkin juga saat ini kalian baca artikel ini pun, pakai smartphone, bukan? Hal di atas jadi alasan utama wajibnya sebuah aplikasi web menerapkan prinsip tampilan responsif responsive layout. 💻 Mulai Belajar Pemrograman Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional. Daftar Sekarang Responsive layout adalah pendekatan untuk pembuatan halaman web yang memanfaatkan tata letak yang fleksibel, gambar yang fleksibel dan kueri media pada style sheet. Keuntungan aplikasi web yang menerapkan responsive layout adalah informasi yang ditampilkan pada website dapat disampaikan dan diterima oleh pengunjung dengan baik, tanpa kehilangan sebagian informasi dan terlepas diakses dari perangkat mobile apapun. Website tanpa responsive layout, terutama di moile device, akan jauh ditinggalkan pengunjung. Ah tapi untuk apa kita tahu teknik dasar responsive layout? Kan sudah banyak framework yang sudah menanganinya? Sebutlah Bootstrap yang banyak digunakan. Ya mungkin sebagian dari kalian berpikir demikian. Tapi tak ada salahnya kita tahu dasar – dasar yang harus diterapkan pada web kita. Tujuannya agar tampilan menjadi lebih responsif di semua peranti. Teknik Dasar Tampilan Responsif pada Website Ketika ingin menerapkan prinsip responsif pada tampilan aplikasi web, sebaiknya kita mulai berpikir dari peranti berukuran kecil. Dengan batasan – batasan yang dimilikinya, proses membangun tampilan responsif, jadi menantang. Nah, jika kita telah fokus pada peranti ukuran kecil, kita dapat dengan mudahnya menerapkan tampilan responsif pada seluruh jenis ukuran layar. Keren kan? Relative Units Konsep terpenting dalam penerapan tampilan responsif adalah fluiditas dan proporsionalitas. Halaman harus dapat menyesuaikan setiap ukuran yang kita tampilkan pada layar peranti yang berbeda-beda. Dengan menggunakan relative units, tampilan akan dapat mudah menyesuaikan dengan keadaan layar. Contohnya kita ingin membuat sebuah elemen div dengan lebar sesuai dengan viewport pada browser. Kita bisa saja berasumsi dengan menerapkan lebar 1000px, misalnya, karena nilai tersebut cukup lebar untuk berbagai layar peranti. Maka kita menuliskan css seperti berikut .container { width 1000px; min-height 200px;} Penggunaan unit PX tidaklah disarankan dalam kasus ini, karena unit PX sebaiknya digunakan untuk nilai yang tidak berubah-ubah. Jika kita ubah ukuran viewport lebih dari 1000px pada browser, maka tampilan tak seperti harapan kita. Dengan mengubah satuan PX menjadi %, maka nilai width element div dapat menyesuaikan berdasarkan viewport yang tersedia. .container { width 100%; min-height 200px;} Dengan begitu kita tak perlu khawatir tentang peranti apa yang akan mengakses website kita. Typography Units Dalam penerapan font, kita juga perlu menggunakan satuan relatif seperti em, rem, vw dan vh. Satuan tersebut dapat menyesuaikan ketika ukuran layar atau ukuran font itu sendiri diubah. em Satuan relatif terhadap ukuran font sebuah elemen 2em berarti 2 kali ukuran font saat ini ex Satuan relatif terhadap tinggi font saat ini, satuan ini sangat jarang sekali digunakan. ch Satuan relatif terhadap lebar dari karakter “0” nol. rem Mirip seperti em, tetapi rem merupakan Satuan relatif terhadap ukuran font dari root element. vw Satuan relatif terhadap 1% lebar viewport. Contoh 1vw = 1% dari lebar viewport. Satuan ini tidak support pada IE8 ke bawah. vh Satuan relatif terhadap 1% tinggi viewport. Contoh 1vh = 1% dari tinggi viewport. Satuan ini tidak support pada IE8 ke bawah. Mari kita beri contoh penggunaan unit relative dengan vw pada font. 12345678910111213141516171819202122232425 Basic Resposive .container h1 { font-size 8vw; } Dummy Text Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum. Berdasarkan kode di atas, kita mengatur sebuah ukuran font element yang terdapat pada class .container dengan menggunakan satuan relatif vw. Dengan begitu ketika kita mencoba mengubah ukuran viewport, ukuran font tersebut akan menyesuaikan. Set the Viewport Viewport merupakan area yang dapat dilihat oleh pengguna kita pada halaman website. Ukuran viewport bervariasi berdasarkan peranti. Ukuran viewport pada sebuah peranti mobile, lebih kecil dibandingkan dengan layar komputer. Sebelum adanya tablet ataupun handphone, halaman website didesain hanya untuk ukuran layar komputer. Dengan begitu banyak sekali website yang menerapkan tampilan dan ukuran yang static. Maka ketika halaman tersebut diakses melalui handphone atau tablet, ukuran akan terlalu besar untuk ditampilkan. Untuk mengatasi permasalahan tersebut kita perlu mengatur sebuah viewport pada halaman website kita. Mengatur viewport dapat melalui sebuah tag yang disisipkan pada header section berkas html. Jika kita tidak ingin pengguna melakukan fitur zoom pada website, kita juga dapat mengaturnya dengan menuliskan viewport lebih lengkap. Lebih jelasnya tentang gambaran fungsi penggunaan viewport, perhatikan saja dua contoh halaman berikut. Yang sebelah kiri tidak menerapkan viewport sedangkan sebelah kanan, sebaliknya. Mana yang lebih baik? Set the Breakpoint Dengan menetapkan sebuah breakpoint kita dapat mengatur sebuah styling element berdasarkan viewport. Maka dengan begitu konten yang kita tampilkan pada halaman dapat disesuaikan dengan berbagai peranti, baik itu tata letak ataupun ukuran font. Breakpoint dituliskan dalam styling atau CSS menggunakan media query dan diikuti dengan ukuran viewport. Sebaiknya jangan menetapkan sebuah breakpoint berdasarkan kelas perangkat. Mendefinisikan breakpoint berdasarkan sebuah perangkat, produk atau brand tertentu akan menyulitkan kita dalam melakukan pemeliharaan maintenance. Tentukanlah breakpoint berdasarkan lebar viewport. Tentukan nilai breakpoint untuk layar kecil, sedang dan besar. Contohnya kita mempunyai sebuah html dengan susunan elemen seperti ini Kemudian pada styling/CSS kita menetapkan 3 breakpoint berdasarkan ukuran layar kecil, sedang dan besar. 1234567891011121314151617181920212223242526272829303132333435363738394041 html, body { margin 0; padding 0;}.container { display flex; flex-wrap wrap;}.box { min-height 150px; width 100%;}/*untuk layar device berukuran kecil*/media screen and min-width 450px { .light_blue, .green { width 50% }}/*untuk layar device berukuran sedang*/media screen and min-width 550px { .red { width 33%; } .orange { width 67%; }}/*untuk layar device berukuran besar*/media screen and min-width 800px { .container { width 800px; margin-left auto; margin-right auto; }} Lihatlah perubahan yang terjadi ketika kita mengubah ukuran viewport. Dalam GIF terlihat terdapat 3 perubahan tampilan. Yang pertama ketika berada pada ukuran viewport besar, content box memiliki margin pada sebelah kiri dan kanannya, hal ini dikarenakan kita mengatur .container untuk menerapkan margin-left dan margin-left dengan nilai auto jika min-width bernilai 800. Yang kedua ketika berada pada ukuran viewport sedang maka tidak ada lagi margin pada content box. Dan yang ketiga ketika viewport dalam keadaan ukuran layar kecil maka box berwarna merah dan orange akan memiliki nilai lebar 100%. Kemudian jika tampilan viewport berada pada ukuran yang tidak kita tetapkan maka tidak ada media query yang diterapkan, sehingga seluruh warna box memiliki nilai 100%. Untuk kalian yang ingin mencobanya, silakan clone repository di akhir artikel ini ya. SVG for Image Resources Mengapa image resource khususnya ikon, harus menggunakan SVG? Sebabnya, SVG merupakan sebuah Scalable Vector Graphic, gambar yang dapat dituliskan dengan menggunakan bahasa XML. Dengan begitu ukuran resource tersebut sangatlah kecil karena pada dasarnya hanya sebuah baris kode. Selain itu tujuan utamanya adalah agar gambar yang ditampilkan dapat menyesuaikan dengan beberapa ukuran tanpa mengurangi kualitas gambar itu sendiri hal ini sangatlah berbeda jika kita menggunakan format gambar pada umumnya. Kita dapat dengan Responsif memasukan SVG pada situs web dengan menggunakan tag . Di dalam body tag terdapat element image yang berfungsi sebagai image fallback atau gambar alternatif yang gunakan ketika browser tidak support dalam menampilkan svg. Lihatlah perbedaan responsif gambar yang ditampilkan ketika kita menggunakan svg dan juga format gambar umum png. Menggunakan PNG sebagai resource Menggunakan SVG sebagai resource Saat berubah ukuran, gambar yang menggunakan format png, kualitas yang ditampilkan jadi berkurang. Sebaliknya, hal yang sama untuk gambar svg, kualitas yang ditampilkan, tidak berkurang. Apa pasal? Pada dasarnya SVG merupakan sebuah vector. Dari segi ukuran berkas pun, SVG lebih unggul. Kesimpulan Yang telah kita bahas hanya sebuah teknik dasar. Masih banyak lagi teknik dalam mengembangkan desain yang responsif. Salah satunya bagaimana kita mengelola sebuah resource image. Ini agaknya perlu dibahas pada artikel mendatang. Dengan mengetahui pentingnya responsif dalam menampilkan sebuah halaman, kita jadi selalu memperhatikan hal ini dalam pengembangan aplikasi website. Salah satunya kamu dapat menggunakan CSS Framework seperti Bootstrap ataupun Foundation. Selain tampilan responsif, perhatikan juga hal penting lainnya seperti caching, accessibility dan lifecycle. Tujuannya agar website kita lebih powerful saat diakses dengan peranti mobile. Teknik Dasar Tampilan Responsif pada Website. Penasaran? Materi di atas kami kupas tuntas di kelas Menjadi Progressive Web Apps di Dicoding Academy. Tetaplah mencoba, tetaplah belajar ! Punya saran keren untuk menerapkan desain responsif? Cobalah share dengan kita ! Saya tunggu.

Gambar Dari Pengertian Viewport Apa Itu Layar Area Pandang Mobile Viewport Tujuan Dan Fungsi Jenis Macam Meta Tag Cara Menggunakannya Serta Kenapa Itu Penting Untuk SEO Tahukah Kalian, Pengertian Viewport, Apa itu Mobile Viewport? Tujuan dan Fungsi, Jenis Macam Meta Tag, Cara Menggunakannya serta Kenapa itu Penting untuk SEO! Ya, dalam bidang mobile development, istilah viewport mengacu pada ukuran jendela atau area yang terlihat di layar. Secara umum, istilah ini digunakan untuk merujuk pada tampilan di perangkat seluler seperti smartphone ponsel cerdas dan tablet. Arti yang lebih spesifik dari istilah viewport mengacu pada elemen meta di HTML5 baca pengertian HTML5 disini, yang memainkan peran penting dalam mengoptimalkan perangkat seluler. Tag meta ini membuat dimensi konten yang ditampilkan sedemikian rupa sehingga ukuran layar dapat digunakan secara efektif. Dalam hal ini, fungsinya memastikan bahwa semua konten ditampilkan dalam keterbacaan dan akurasi yang sama pada layar dengan ukuran berbeda. Meta tag viewport menyesuaikan halaman web dengan panjang dan lebar layar sehingga browser seluler dapat menampilkan semua konten dengan benar. Oke, terkait hal tersebut, dalam postingan kali ini Kami akan membahas secara lebih detail dan lengkap tentang apa itu pengertian viewport. Baiklah langsung saja, berikut ini adalah ulasannya! Daftar Isi KontenPengertian ViewportApa itu Mobile Viewport?Tujuan dan Fungsi Menggunakan ViewportJenis-Jenis Meta Tag Viewporta. Widthb. Initial-ScaleCara Menggunakan Viewport agar Website ResponsifKenapa Viewport Penting untuk Search Engine Optimization SEO?KesimpulanPenutupBagikan Sekarang Ke Berarti layar, area pandang dalam bahasa Indonesia, viewport adalah istilah untuk area tampilan halaman pada device atau perangkat tampilan. Ini sering digunakan dalam desain kode dan analog sebagai cara untuk merujuk ke layar tampilan dan bagaimana layout tata letak cocok dengan layar itu, dimana simpulan ini juga sesuai berdasarkan definisi yang bersumber dari Situs Technopedia. Secara khusus, layar, area pandang atau meta viewport ini merupakan area halaman web yang terlihat oleh pengguna atau end user baca selengkapnya pembahasan end user disini. Benar! Ini adalah bagian yang dapat Anda lihat dari perangkat atau monitor Anda dan itu terletak di tag pada HTML. Apa itu Mobile Viewport? Gambar Apa Itu Layar Area Pandang Mobile Viewport Pada Device Atau Perangkat Serta Tujuan Dan Fungsinya Kemudian, apa itu sebenarnya yang dimaksud dengan mobile viewport atau layar dan area pandang seluler ini? Yup, seperti yang sudah Kami jelaskan di atas tentang definisi dan artinya, istilah ini lebih sering dikenal dengan “viewport” saja secara global. Kami pribadi sering mendapatkan beberapa pertanyaan dari pengembang atau web developer lain tentang apa itu viewport serta apa fungsinya? Yang terpenting, mobile viewport adalah visibilitas area dari pengguna berupa tag meta yang dicari dan digunakan bot mesin pencari seperti Google, Bing, Yahoo, Yandex dan lain sebagainya saat menentukan apakah situs Anda mobile friendly ramah seluler. Jika bot search engine seperti Google tersebut tidak menemukan meta tag ini, maka situs web Anda tidak akan lulus tes Google Mobile Friendly, dimana itu dapat berdampak negatif pada posisi Anda di hasil pencarian seluler. Tujuan dan Fungsi Menggunakan Viewport Dalam membahas tentang apa itu arti viewport, adalah merupakan hal yang penting juga bagi Kami untuk menjelaskan terkait tujuan dan fungsi penggunaannya secara khusus. Oke, untuk tujuan utamanya, perlu kalian ketahui bahwa layar, area pandang atau viewport memastikan situs ditampilkan dengan baik di semua device atau perangkat ponsel, tablet, komputer, dan bahkan layar yang lebih besar. Singkatnya, viewport memainkan peran penting dalam merancang situs web yang responsif dan ramah seluler. Dari sudut pandang fungsional, viewport seluler menyetel tingkat zoom awal halaman web, saat dilihat dengan jenis, tipe dan model perangkatnya. Tanpa layar atau area pandang ini, perangkat akan merender laman dengan lebar layar desktop biasa tanpa diskalakan agar pas dengan layar. Hal tersebut berarti situs web atau website baca selengkapnya tentang arti website disini Anda, bila dilihat melalui ponsel, akan menjadi versi kecil tata letak situs web Anda yang tidak terbaca. Ya, seperti yang sudah Kami singgung di atas, layar atau area pandang seluler harus ada di setiap halaman situs web Anda di bagian . Perlu Kami tekankan disini bahwa salah satu aspek utama untuk dipahami adalah bahwa tag meta mobile viewport ini, mereka diabaikan oleh browser desktop. Ya! Memasukkan tag meta ini, bagi pengguna browser desktop tidak akan mengubah tampilan apapun di situs Anda. Terkait fungsi utamanya sendiri, viewport atau mobile viewport ini paling berguna saat digunakan dalam skema desain situs web yang responsif atau yang lebih dikenal dengan istilah responsive web design baca pengertian responsive web design disini. Jenis-Jenis Meta Tag Viewport Gambar Jenis Dan Macam Meta Tag Elemen Viewport Dan Bagaimana Cara Menggunakannya Untuk Responsive Web Design atau Desain Website Responsif Dalam membahas mengenai arti dan pengertian viewport, berkenaan dengan penerapannya dalam kode HTML, pastinya hal tersebut tidak terlepas daripada apa saja jenis dan macam tag meta viewport ini bukan? Oke, sebelumnya, mari kita ingat-ingat terlebih dahulu di awal-awal datangnya internet, perlu kalian ketahui bahwa halaman web dirancang hanya untuk layar komputer dengan desain dan ukuran tetap. Kemudian, saat perangkat mobile seluler dengan browser pun diperkenalkan, dimana halaman statis menjadi terlalu besar untuk layar seluler. Untuk mengatasinya, perangkat seluler mulai merender halaman di jendela virtual, kemudian mengecilkan hasil yang diberikan agar sesuai dengan layar seluler. User pengguna kemudian dapat memperbesar untuk mengakses berbagai bagian halaman web. Ya! Terkait website optimization baca selengkapnya apa itu website optimization disini, viewport ini juga diterapkan serta dilakukan untuk mencegah kerusakan situs web yang tidak dioptimalkan untuk device atau perangkat seluler. Karena perangkat baru memiliki ukuran layar yang sangat berbeda, layar atau area pandang telah menjadi pertimbangan utama dalam desain responsif. Para engineer insinyur harus mencari cara untuk menyesuaikan halaman web ke dalam viewport kecil untuk smartphone atau perangkat seluler tradisional. Bahkan tablet cenderung lebih kecil dari layar komputer tradisional. Desainer dapat menggunakan tag meta viewport dalam HTML dan tools alat di Cascading Style Sheets CSS untuk menyetel parameter viewport seperti tinggi dan lebar serta skala dan resolusinya. Di HTML5, tag meta baru diperkenalkan untuk mengontrol perilaku ini dengan cara yang lebih elegan, yaitu Jadi apa saja jenis dan macam meta tag viewport ini? Oke langsung saja mari kita lihat di bawah ini. a. Width Jenis macam tag meta pertama pada tag viewport yaitu adalah width. Properti width ini mengendalikan ukuran daripada layar atau area pandangnya seperti yang dapat kalian lihat pada gambar-gambar Kami di atas. b. Initial-Scale Berikutnya yaitu adalah initial-scale, ini merupakan meta tag yang mengontrol atau mengendalikan tingkat atau zoom level ketika webpage halaman web mulai dimuat oleh suatu device atau perangkat. Cara Menggunakan Viewport agar Website Responsif Gambar Dari Penjelasan Tentang Viewport Pada Device Atau Perangkat Kemudian, bagaimana cara menggunakan dan menerapkan viewport untuk responsive web design atau desain website responsif? Baiklah, sebelumnya, perlu Kami tekankan terlebih dahulu bahwa menggunakan tag meta viewport adalah bagian penting dari pencocokan halaman yang cocok dengan layar perangkat. Biasanya, para desainer atau web designer melihat semua teks, gambar, dan fungsionalitas dalam sebuah halaman dan menatanya sesuai dengan apa yang dapat ditangani viewport dan ketika mereka memasukkan batasannya, ini menyediakan sekumpulan parameter teknis untuk dapat dikerjakan. Dalam penggunaannya sendiri, ada beberapa hal yang dapat kalian lakukan untuk mengonfigurasi layar, area pandang atau mobile viewport untuk situs web Anda. Jika Anda memiliki desain dinamis, Anda harus membuat seluruh halaman terpisah untuk menyajikan versi yang berbeda dan memberi tahu setiap user-agent agen pengguna apa yang harus diakses dari URL yang sama. Anda akan membutuhkan lebih banyak sumber daya development pengembangan dengan pendekatan ini. Pada dasarnya, Anda harus membangun situs web baru dari awal dan menyimpannya di subdomain seperti Namun, tidak hanya itu saja, jika dikaitkan dengan Search Engine Optimization SEO Anda harus membuat anotasi untuk perangkat seluler dan desktop untuk membantu mesin telusur memahami mobile URL yang terpisah. Ini adalah cara termudah untuk membuat situs web yang ramah seluler atau yang lebih sering dikenal dengan akronim “mobile-friendly“. Yup! Faktanya, Google sendiri merekomendasikan pendekatan tersebut. Berbicara tentang penerapan dan cara menggunakannya sendiri, dalam kode HTML, cukup tambahkan kode berikut ini dalam halaman web Anda Letakkan kode tersebut di bagian atas HTML tepatnya pada elemen untuk memberikan petunjuk kepada browser tentang cara mengontrol penskalaan dan dimensi halaman pada perangkat yang berbeda. Kenapa Viewport Penting untuk Search Engine Optimization SEO? Jadi, mengapa tag meta viewport ini penting ketika merujuk kepada SEO? Sebelumnya, bagi kalian yang masih belum memahami tentang apa itu SEO, kalian dapat membaca lebih lanjut mengenai SEO dan definisinya menurut ahli. Benar! Google sendiri merekomendasikan untuk menyertakan layar, area pandang atau meta viewport di bagian atas dokumen. Bahkan lebih jauh lagi mereka juga menguraikan beberapa pedoman SEO dasar tentang desain web responsif. Hal ini sudah cukup menunjukkan betapa pentingnya mengonfigurasi area pandang seluler situs Anda sekarang ini terutama di tahun 2023, dimana mesin pencari lebih mengoptimalkan akses dari perangkat mobile seluler. Hal ini juga sesuai berdasarkan apa yang dikatakan oleh Google tentang viewport “Halaman yang dioptimalkan untuk berbagai perangkat harus menyertakan tag meta viewport di bagian atas dokumen yang memberikan petunjuk kepada browser tentang cara mengontrol dimensi dan penskalaan halaman”Terjemahan Dari Salah Satu Tweet Di Twitter Google Jadi, bagaimana Anda bisa memastikan bahwa situs web Anda ditampilkan dengan cara yang terbilang mobile friendly ramah seluler? Oke, dalam postingan ini Kami juga akan membagikan sedikit tipsnya, yaitu Hindari menggunakan nilai lebar absolut di CSS Anda. Pertimbangkan agar jangan menggunakan px, pt, cm, mm, in, atau pc. Nilai absolut dapat menyebabkan elemen situs web Anda dimuat lebih lebar daripada area pandang Anda. Sebaliknya, gunakan nilai lebar relatif seperti ch, rem, vw, em, ex, vh vmin,%, dan merender situs web Anda dengan lebar tertentu; Lebar bervariasi dari satu perangkat ke perangkat lainnya, sebagai contoh misalnya, lebar sebuah smartphone berbeda dengan lebar tablet ataupun laptop. Kesimpulan Bagaimana? Sudah cukup jelas bukan? Oke baiklah, berdasarkan penjelasan dan pembahasan mengenai Pengertian Viewport, Apa itu Mobile Viewport? Tujuan dan Fungsi, Jenis Macam Meta Tag, Cara Menggunakannya serta Kenapa itu Penting untuk SEO di atas, dapat kita simpulkan bahwa layar, area pandang atau viewport adalah sebuah tag meta yang biasanya dideskripsikan sebagai area yang terlihat di halaman web. Ini berubah berdasarkan ukuran perangkat yang digunakan untuk mengakses halaman. Sebagai contoh misalnya seperti komputer desktop, tablet dan smartphone, dimana semuanya memiliki viewport yang berbeda. Dengan adanya viewport, situs di perangkat seluler tidak ditampilkan dengan cara yang sama seperti di layar desktop. Pengguna tidak perlu memperbesar, tetapi dapat melihat konten halaman dengan cara yang sesuai dengan layar kecil. Area pandang sebagai elemen meta dikombinasikan dengan desain web responsif membantu browser memecahkan halaman dan mengumpulkannya di layar kecil sehingga pengguna bisa mendapatkan gambar yang bermakna serta dapat dibaca. Dengan cara ini, viewport berfungsi untuk mencegah masalah tampilan dengan menentukan format keluaran yang disesuaikan dengan mobile device yang dimaksud oleh webmaster. Penutup Demikianlah apa yang dapat Kami sampaikan dalam tulisan artikel kali ini, dimana Kami membahas tentang Pengertian Viewport, Apa itu Mobile Viewport? Tujuan dan Fungsi, Jenis Macam Meta Tag, Cara Menggunakannya serta Kenapa itu Penting untuk SEO. Semoga apa yang Kami coba untuk sampaikan disini dapat bermanfaat dan juga bisa menambah wawasan kalian semua dalam memahami arti dan istilah dalam dunia teknologi terutama bidang teknologi dan mobile. Jangan lupa like, share atau bagikan artikel Kami disini kepada teman, kerabat juga partner kerja dan bisnis Anda serta subscribe juga untuk Blog dan YouTube Kami. Sekian dari Saya, Terima Kasih.

1. Alamat-alamat dalam halaman web dikenal dengan nama…. a. Web b. URL c. UTP d. ISP jawaban B 2. Satuan kecepatan transfer data adalah…. a. GPRS b. BPS c. ISP d. DSL jawaban B 3. Yahoo, MSN, dan google merupakan…. a. Search engine b. Situs c. URL d. ISP jawaban A 4. Alat yang berfungsi untuk mentransfer dan mengubah data dari bentuk data digital menjadi data analog adalah…. a. Modem b. Router c. Hub/switch d. Telepon jawaban A 5. Perangkat keras yang sangat dibutuhkan untuk menghubungkan antara komputer satu dengan komputer lain adalah … a LAN card b Modem c konektor RJ45 d kabel UTP jawaban A 6 Layanan di internet yang paling tepat digunakan untuk komunikasi adalah … a. chatting b. browsing c. FTP d. e-mail jawaban A 7 Penyedia Jasa / layanan internet, yaitu pihak perusahaan yang memberikan layanan untuk menghubungkan pelanggan ke internet … a. IM2 b. Telkom c. smartfrend d. ISP jawaban D 8 Kepanjangan dari www adalah … a. wide world web b. wide world web c. world web wide d. world wide web jawaban D 9 Sebelum melakukan koneksi ke ISP, selain komputer, line telepon, perangkat yang juga harus disiapkan adalah … a. pesawat telepon b. adaptor c. handphone d. modem jawaban D 10 Browser yang sudah ada ter-instal di Windows dan merupakan browser default bawaan Windows adalah … a. Mozilla Firefox b. Opera c. Google Chrome d. Internet Explorer jawaban D 11 Tempat pada Internet Eksplorer untuk menuliskan alamat suatu situs adalah … a. status bar b. menu bar c. access bar d. address bar jawaban D 12 Istilah mouse over padahalaman web dapat dilihat dengan … a. adanya perubahan efek baik warna maupun suara ketika mouse menggeser sebuah tombol b. adanya perubahan warna pada tombol ketika kursor diarahkan ke tombol atau link c. bergeraknya kursor sesuai pergerakan mouse ke arah yang diinginkan d. munculnya menu baru setelah mouse mengklik sebuah kata atau tombol jawaban B 13 Jenis domain yang digunakan untuk penamaan sekolah di Indonesia adalah … a. b. c. d. web. jawaban A 14 Seorang guru memberikan tugas kepada muridnya untuk mengakses situs pribadinya dimana bahan ajar dan bahan latihan soal dia letakkan disana. murid – muridnya wajib mendownload dan kemudian mengerjakan soal yang ada dan dikirim via e-mail ke guru tersebut. Kegiatan guru tersebut termasuk kedalam kategori … a. e-lifestyle b. e-commerce c. e-learning d. e-banking jawaban D 15 Fungsi dari MODEM adalah … a. merubah sinyal analog menjadi digital dan sebaliknya b. merubah sinyal listrik menjadi suara dan sebaliknya c. merubah sinyal mikro menjadi makro dan sebaliknya d. merubah sinyal bunyi menjadi listrik dan sebaliknya jawaban A Nama Meida wulan Syari Fauzi Kelas 93 No 17

Websiteadalah kumpulan halaman web yang saling terhubung dan seluruh file saling terkait.Web terdiri dari page atau halaman dan kumpulan halaman yang dinamakan homepage.Homepage berada pada posisi teratas dengan halaman-halaman terkait berada di bawahnya.Biasanya, setiap halaman di bawah homepage (child page) berisi hyperlink ke halaman lain dalam web (Gregorius, 2000).

22 Istilah dalam Website yang Sering Digunakan – Dulu, pemasaran melalui internet begitu dianggap sebelah mata. Orang-orang lebih memilih mengiklankan produk mereka melalui koran, majalah, radio maupun televisi. Namun, sekarang eranya sudah berbeda. Internet menjadi salah satu aspek penting yang menunjang penjualan maupun hal bisnis lainnya. Maka dari itu, kini para pebisnis berlomba-lomba membuat usaha mereka online. Misalnya, membuat website, memasang iklan melalui platform online, maupun memainkan media sosial. Masalahnya, di masa transisi menuju era digital, banyak yang belum mengetahui istilah-istilah dalam dunia internet. Hal itu tentu akan memperlambat pergerakan bisnis online secara tidak langsung. Oleh sebab itu, tak ada salahnya memulai “pelajaran” online dengan mengenal istilah-istilah dalam cyberspace. Istilah Dalam Website 1. SEO Search Engine Optimization 2. SEM Search Engine Marketing iii. PPC Pay-Per-Click iv. Search Engine Mesin Pencari v. Server 6. CMS Content Direction Systems 7. ISP Cyberspace Service Provider eight. Nama Domain 9. URL Compatible Resource Locator x. Media Sosial 11. Social Bookmarking 12. Web Hosting xiii. SERP Search Engine Results Page 14. Page One 15. Spam 16. Tag Meta Meta tags 17. Keywords 18. Responsive Design 19. Favicon 20. DA/PA 21. Analytics Analitik 22. Google Search Console Webmaster Istilah Dalam Website Berikut adalah 22 istilah dalam website dan dunia internet. Apa saja? Berikut daftarnya! 1. SEO Search Engine Optimization Mengacu pada proses pengoptimalan website melalui berbagai teknik dan strategi untuk tujuan mendapatkan peringkat yang lebih tinggi di mesin pencari misalnya Google, Bing, Yandex. SEO mencakup pengoptimalan internal website on-page, dan teknik eksternal seperti pembuatan tautan dari website lain off-page. ii. SEM Search Engine Marketing Search Engine Marketing sedikit berbeda artinya dari SEO dan memiliki cakupan yang lebih luas. Seiring dengan teknik SEO, SEM juga dapat mencakup daftar berbayar, iklan bayar per klik, pemasaran media sosial, dan hal lain yang dilakukan dengan tujuan membawa lebih banyak eksposur dan lalu lintas ke website Anda. three. PPC Pay-Per-Click PPC singkatan dari Pay-Per-Click allonym bayar per klik, yang merupakan iklan online yang digunakan orang untuk menempatkan iklan mereka di website atau halaman media sosial orang lain. Dengan PPC, Anda hanya membayar jika seseorang mengklik iklan Anda dan mereka benar-benar mengunjungi situs Anda. Layanan PPC populer seperti Google Ads dan Facebook Ads. iv. Search Engine Mesin Pencari Mesin pencari adalah plan database besar yang mencari dokumen untuk kata kunci tertentu, dan menampilkan informasi berdasarkan istilah yang dipilih. Google, Bing, Yahoo dan Yandex adalah contoh mesin pencari yang paling banyak digunakan di dunia. Secara teknis, istilah mesin pencari tidak hanya mengacu pada penggunaan online, tetapi juga untuk programme apa pun yang mencari dokumen untuk menghasilkan pencarian berdasarkan kata kunci yang dimasukkan. v. Server Sebuah server dapat memiliki banyak arti, tetapi secara sederhana dapat dikatakan sebagai komputer terpusat yang menyediakan data ke berbagai komputer lain. Jenis server bisa berupa web server, file server, postal service server atau lainnya. Saat Anda membeli layanan seperti spider web hosting, layanan email, atau internet, mereka bekerja di server eksternal yang terpisah dari fungsionalitas komputer Anda sendiri. 6. CMS Content Management Systems CMS yang berkaitan dengan web adalah program yang terintegrasi ke dalam website yang memungkinkan Anda memperbarui kontennya tanpa memerlukan perangkat lunak atau alat pengembangan web lainnya. CMS juga memungkinkan Anda memperbarui halaman dari lokasi mana pun dengan koneksi internet. WordPress, Joomla, Blogger dan Drupal merupakan plan CMS yang paling banyak digunakan untuk situs web. 7. ISP Internet access provider Istilah dalam website selanjutnya adalah Internet access provider. Internet service provider artinya adalah Penyedia Layanan Internet Anda. Penyedia layanan internet yang ada di Indonesia seperti Telkomsel. viii. Nama Domain Nama domain mengacu pada nama fisik sebenarnya dari situs Anda. Ringkasnya, alamat net dari website disebut dengan istilah domain. Sedangkan alamat lebih spesifik yang merujuk pada halaman dalam web tersebut dikenal dengan URL/inner page atau deep link. Domain ini bisa Anda sewa dalam jangka waktu tertentu, biasanya dalam jangka waktu per satu tahun. Jika tidak diperpanjang, maka orang lain dapat mengambil nama domain tersebut. GoDaddy merupakan salah satu perusahaan registri domain paling terkenal. 9. URL Compatible Resource Locator Beberapa orang menganggap bahwa URL dan nama domain adalah hal yang sama, tetapi sebenarnya memiliki dua arti yang berbeda. URL dapat menjadi tautan lengkap ke halaman mana pun dari sebuah website, sedangkan nama domain mengacu pada halaman beranda atau halaman indeks saja. Setiap halaman website mana pun, memiliki URL yang tidak sama. Lebih lanjut, Anda bisa baca contoh nama URL blog yang baik. 10. Media Sosial Media Sosial dapat didefinisikan sebagai situs web yang dibuat dengan tujuan bersosial dengan orang lain, dan berbagi bermacam konten secara online. Media Sosial bekerja melalui sekelompok orang yang bergabung atau mengikuti jaringan Anda, dan Anda melakukan hal yang sama untuk mereka. Facebook, Twitter, LinkedIn, Instagram dan Pinterest adalah beberapa contoh situs media sosial yang paling banyak digunakan di dunia. Website juga bisa mendapatkan traffic dari media sosial, selain dari mesin pencari. 11. Social Bookmarking Social bookmarking sedikit berbeda dari media sosial dalam hal fungsi dan tujuannya. Social bookmarking adalah informasi yang Anda bagikan atau posting ke web pusat agar dapat dilihat banyak anggota. Perbedaan utamanya adalah Anda tidak bertukar pesan atau berinteraksi dengan orang secara langsung, seperti yang Anda lakukan dengan media sosial. Situs Social bookmarking populer termasuk StumbleUpon sekarang dan Digg. 12. Web Hosting Web hosting adalah ruang file yang Anda beli secara online yang memungkinkan Anda menyimpan file website dan menerbitkannya di internet. Penyedia hosting akan “menghosting” situs web Anda di server mereka, dan paket hosting dibeli dalam interval bulanan atau tahunan. Agar website berfungsi, Anda harus memiliki nama domain dan host web untuk mengarahkannya. xiii. SERP Search Engine Results Page SERP adalah halaman sebenarnya dari mesin pencari yang mengembalikan daftar hasil berdasarkan kata kunci yang dimasukkan. Gampangnya, SERP merupakan hasil yang ditampilkan mesin pencari tentang kata kunci yang diketikkan pengguna. Mesin pencari biasanya menampilkan hasil pencarian di bagian utama halaman, dan daftar berbayar di sisi atas maupun bawah halaman. 14. Page One Page Ane adalah istilah untuk menyebut halaman pertama sebuah website di mesin pencari. Istilah dalam website ini sering juga disebut “pejwan”. xv. Spam Spam dianggap email sampah elektronik yang dikirim ke sekelompok besar akun email atau blog dan forum. Spam sering kali dikirim melalui plan perangkat lunak otomatis yang dirancang untuk mengirim pesan yang sama ke banyak orang sekaligus. Spam biasanya dibuat untuk tujuan periklanan atau permintaan, dan juga digunakan untuk meningkatkan peringkat pencarian dan lalu lintas website. Sedangkan untuk pelaku spam, dalam istilah dunia internet biasa disebut “spammer”. 16. Tag Meta Meta tags Tag Meta adalah tag HTML yang dimasukkan ke dalam website, yang memberikan informasi khusus tentang website agar mesin telusur dapat menarik informasi. Dua tag meta website yang paling relevan untuk search engine adalah tag “judul” dan “deskripsi”. Judul Championship tag untuk menggambarkan tajuk utama dari halaman web, sedangkan deskripsi clarification tag untuk menggambarkan secara singkat tentang keseluruhan laman web. 17. Keywords Keywords kata kunci adalah kata atau frase yang menjelaskan berbagai konten dalam situs Anda ke mesin pencari. Istilah dalam website ini lumayan sering disebut, tidak hanya dalam web saja, tetapi konten maupun hal-hal yang berhubungan dengan media juga kerap menyebutnya. Kata kunci tidak hanya digunakan dalam tag meta, tetapi juga untuk mendeskripsikan gambar, judul, file teks, dan catatan database di halaman Anda. Kata kunci juga dapat merujuk pada istilah deskriptif yang Anda gunakan untuk posting web log, posting media sosial, posting video dan direktori bisnis. 18. Responsive Design Responsive pattern desain responsif adalah di mana tata letak atau struktur halaman website dapat menyesuaikan tampilan dengan layar perangkat apa pun yang Anda gunakan untuk melihat halaman. Tampilan bisa berupa monitor desktop, tablet, maupun ponsel. Website yang responsif menggunakan metode deteksi yang pertama-tama akan mengidentifikasi jenis perangkat yang digunakan, kemudian akan menampilkan format yang sesuai. 19. Favicon Favicon adalah ikon atau gambar kecil yang ditampilkan di tab browser situs web mana pun bersama dengan judul halamannya. Ini berguna ketika Anda memiliki banyak halaman yang terbuka di browser, dan Anda ingin lebih mengenali halaman. Tidak semua website menyetel favicon mereka, tetapi untuk website yang memiliki favicon akan ditampilkan pada sebelah kiri sebelum judul. 20. DA/PA Mungkin Anda sering mendengar istilah DA PA pada weblog atau website. Singkatnya, DA adalah Domain Authority dan PA adalah Page Authority. Metriks pengukuran ini digagas oleh MOZ setelah sistem PageRank Google sudah ditiadakan. Tujuannya untuk mengukur seberapa kuat web di mesin pencari. Tetapi, ini bukan patokan yang digunakan Google untuk menentukan peringkat di mesin pencari. 21. Analytics Analitik Analytics secara umum mengacu pada analisis pola dan tren pada data yang dipelajari. Singkatnya, analytics adalah alat yang melakukan pengukuran untuk lalu lintas di web Anda. Analitik biasanya menggambarkan kebiasan pengguna, menunjukkan halaman mana yang paling banyak pengunjung, serta memberikan laporan tentang jumlah pengunjung baru Unique Visitors, yang kembali lagi Return Visitors, maupun keseluruhan jumlah pengguna. Selain itu, analitik juga umumnya menampilkan rujukan sumber pengunjung website. Alat pengukuran spider web yang paling terkenal adalah Google Analytics dan Histats. 22. Google Search Console Webmaster Google Search Panel adalah layanan costless yang ditawarkan oleh Google untuk membantu Anda memantau, mempertahankan, dan memecahkan masalah kehadiran situs Anda di hasil Google Penelusuran. Meskipun sebuah website tidak perlu mendaftar GSC untuk terindeks di pencarian Google, namun dengan mendaftar, pemilik web akan lebih mudah dalam memahami data, sekaligus mengoptimalkan website.

IstilahPancasila sebenarnya sudah digunakan pada jaman Majapahit, hal ini dapat dilihat dalam buku sotasoma karya Empu Tantular, dengan sebutan A. Pancasila Sakti B. Pancasila Krama C. Pancasila D

istilah mouse over pada halaman web dapat dilihat dengan