Agarlebih detail mari perhatikan kembali kode CSS di atas. Bagi pemula yang baru mengenal CSS, cara yang paling mudah untuk memakai transisi ini adalah cari kode seperti ini pada CSS a:active, a:visited dan seterusnya lalu ganti dengan kode di atas. Adapun untuk property warnanya dapat disesuaikan sendiri pada kode color:#XXXXXX.Selain sobat juga bisa menyesuaikan lama durasi transisi atau Dalamdunia internet terdapat berbagai istilah yang bagi sebagian masyarakat masih kurang dimengerti. Dari berbagai istilah yang ada, beberapa istilah akan dijelaskan pada makalah ini. Web design adalah teknik desain materi dan tampilan halaman pada sebuah situs internet. Pengertian Desain Web atau definisi Desain Web adalah jenis desain Istilahmouse over pada halaman web dapat dilihat dengan Jawaban adanya perubahan warna pada tombol ketika kursor diarahkan ke tombol atau link Baca Juga : Seluruh tahap pertumbuhan yang dialami makhluk hidup selama hidupnya dinamakan? Istilah mouse over pada halaman web dapat dilihat dengan Jawaban Istilahmouse 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 Padabutton tersebut, Anda dapat menambahkan sound effect pada saat mouse over, link ke website, e-mail atau menentukan action dan behavior sebuah target movieclip. Dengan button, kita bisa memberikan pilihan - pilihan pada user, bagian mana dari animasi yang akan dilihat. Dengan button, animasi bisa terlihat lebih hidup, dengan bisa Adalahmenu-menu lain yang keluar setelah kita mengklik suatu menu atau mengarahkan mouse ke suatu menu. Dropdown menu sendiri bisa dikenali dengan adanya anak panah di samping sebuah menu. Padaumumnya 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 paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] Googlemengurutkan halaman berdasarkan seberapa sering istilah penelusuran dihasilkan dalam halaman tersebut, atau seberapa kuat istilah penelusuran diasosiakan dengan halaman tersebut. Algoritma PageRank disamping meenganalisis tautan yang dibuat manusia, mengasumsikan bahwa halaman web ditautkan dari berbagai halaman penting. WaringWera Wanua [1] [2] ( bahasa Inggris: World Wide Web ), biasa disingkat sebagai WWW adalah suatu ruang informasi yang dipakai oleh pengenal global yang disebut Pengidentifikasi Sumber Seragam untuk mengenal pasti sumber daya berguna. WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya WWW hanyalah bagian dipakaiuntuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna table, ukuran border, warna border, warna hyperlink, warna mouse-over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. qHZEUab. Soal Pilgan Materi Internet26. Sebutan bagi kamera yang gambarnya bisa diakses atau dilihat melalui world wide web, program instant messaging, atau video call adalaha. Televisib. CCTVc. Webcamd. MonitorJawabanc. Webcam27. Yang dimaksud dengan internet adalaha. Kumpulan komputer yang saling terhubung dalam sebuah ruanganb. Kumpulan komputer yang tidak terhubung dalam bentuk jaringanc. Kumpulan komputer yang saling berhubungan dalam bentuk jaringand. Kumpulan komputer yang memiliki kecepatan proses yang samaJawaban c. Kumpulan komputer yang saling berhubungan dalam bentuk jaringan28. Pada awalnya internet merupakan jaringan komputer yang dibentuk oleha. Departemen Pertahanan Amerikab. Departemen Pertahanan Jepangc. Departemen Pertahanan Rusiad. Departemen Pertahanan InggrisJawaban a. Departemen Pertahanan Amerika29. Munculnya internet di awal tahun 60-an melalui proyek yang disebuta. TCP / IPb. NSFNETc. ARPANETd. BITNETJawaban c. ARPANET30. Yang dimaksud dengan dial-up adalah….a. Jaringan utama/tulang punggung internetb. Program yang menyusun sebuah sistem atau sebuah aplikasi softwarec. Koneksi ke internet melalui modem dan saluran telepond. Username dan password yang diperlukan untuk dapat mengakses fasilitas internetJawaban c. Koneksi ke internet melalui modem dan saluran telepon31. Data yang keluar masuk / upload – download ke account kitaa. Bandwithb. Backbonec. Telepond. ByteJawaban a. Bandwith32. Jaringan dasar yang menghubungkan setiap sarana telekomunikasi yang berfungsi sebagai sarana penunjang ketersediaan koneksi adalaha. Bandwithb. Backbonec. Telepond. ByteJawaban b. Backbone33. Layanan di internet yang paling tepat digunakan untuk komunikasi adalah …a. Chattingb. Browsingc. FTPd. E-mailJawaban a. Chatting34. Penyedia Jasa / layanan internet, yaitu pihak perusahaan yang memberikan layanan untuk menghubungkan pelanggan ke internet …a. IM2b. Telkomc. smartfrendd. ISPJawaban d. ISP35. Sebelum melakukan koneksi ke ISP, selain komputer, line telepon, perangkat yang juga harus disiapkan adalah …a. Pesawat teleponb. Adaptorc. Handphoned. ModemJawaban d. Modem36. Browser yang sudah ada ter-instal di Windows dan merupakan browser default bawaan Windows adalah …a. Mozilla Firefoxb. Operac. Google Chromed. Internet ExplorerJawaban d. Internet Explorer37. Tempat pada Internet Eksplorer untuk menuliskan alamat suatu situs adalah …a. Status barb. Menu barc. Access bard. Address barJawaban d. Address bar38. Istilah mouse over padahalaman web dapat dilihat dengan …a. Adanya perubahan efek baik warna maupun suara ketika mouse menggeser sebuah tombolb. Adanya perubahan warna pada tombol ketika kursor diarahkan ke tombol atau linkc. Bergeraknya kursor sesuai pergerakan mouse ke arah yang diinginkand. Munculnya menu baru setelah mouse mengklik sebuah kata atau tombolJawaban b. Adanya perubahan warna pada tombol ketika kursor diarahkan ke tombol atau link39. Fungsi dari modem adalah …a. Merubah sinyal analog menjadi digital dan sebaliknyab. Merubah sinyal listrik menjadi suara dan sebaliknyac. Merubah sinyal mikro menjadi makro dan sebaliknyad. Merubah sinyal bunyi menjadi listrik dan sebaliknyaJawaban a. Merubah sinyal analog menjadi digital dan sebaliknya40. Bagian jendela browser yang berfungsi untuk menampilkan proses loading sebuah halaman web adalah …a. Tool barb. Status barc. Task bard. Address barJawaban b. Status bar41. Layanan koneksi yang menumpang pada jaringan telepon adalah …a. Dial-up connectionb. Lease line connectionc. Fix phone connectiond. Temporary connectionJawaban a. Dial-up connection42. Protokol yang sudah dimiliki oleh sistim operasi Windows dan Linux, dimana protokol ini adalah protokol standar internasional untuk komunikasi data, yaitu …a. GPRSb. NWLinkc. TCP/IPd. CDMAJawaban c. TCP/IP43. Untuk keperluan akses internet diperlukan program aplikasi browser, kecuali …a. Mozilla Firefoxb. Operac. Ms. Outlookd. SafariJawaban c. Ms. Outlook44. Perusahaan yang meyediakan jasa menghubungkan komputer ke internet melalui saluran telekomunikasi T adalah …a. CP / IPb. Internet Service Providerc. Domaind. Internet ProviderJawaban b. Internet Service Provider45. Pengertian dari internet adalah …a. Jaringan komputer untuk facebookb. Komputer dapat membuka situs webc. Konektifitas komputer dan alat komunikasi lainnya seluruh duniad. Jaringan sosial untuk komputerJawaban c. Konektifitas komputer dan alat komunikasi lainnya seluruh dunia46. Koneksi komputer dengan komputer atau alat lain dapat dilakukan melalui sebagai berikut, kecualia. Lewat kabel LANb. Wirelessc. Bloetoothd. Kabel listrikJawaban d. Kabel listrik47. Koneksi komputer menggunakan kabel dan hub swicth dalam satu ruangan disebuta. LANb. MANc. WANd. SWANJawaban a. LAN48. Di bawah ini merupakan topologi jaringan yaitu, Kecualia. Starb. Treec. Ringd. LanJawaban d. Lan49. Alat untuk membagi jaringan internet ke komputer client menggunakana. Switch hubb. LAN cardc. Wireless USBd. RJ45Jawaban a. Switch hub50. Kepanjangan modem adalaha. Modul demolatorb. Model demolatorc. Modem demodulatord. Modulator-demodulatorJawaban d. Modulator-demodulator 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. Umumnya seluruh konten pada halaman HTML memiliki gaya yang telah ditentukan menggunakan stylesheet eksternal. Ada banyak situasi yang mungkin Anda perlukan untuk menggunakan gaya tertentu untuk menyorot sebagian konten. Umumnya teknik ini digunakan untuk menarik perhatian pengguna dan Anda dapat mengubah konten secara dinamis menggunakan event JavaScript “onMouseOver”. Mari kita bahas cara mengubah konten secara dinamis untuk skenario berikutEfek Perubahan Konten Dinamis Berikut adalah efek yang dapat Anda lakukan secara dinamis dengan mouse over Ubah keluarga font dengan mouse Perubahan konten pada mouse di atas Mengubah ukuran font pada mouse di atas Perubahan warna font pada mouse di atas Perubahan gaya kursor pada mouse di atas 1. Mengubah Keluarga Font Secara Dinamis Perubahan Keluarga Font Statis Menggunakan HTML Metode tradisional adalah untuk menyorot konten secara permanen dengan menggunakan atribut wajah tag HTML . Di bawah ini adalah contoh bagaimana tag digunakan untuk mengubah keluarga font dari tiga kalimat dalam satu paragraf. Ini adalah font Arial Ini adalah font Verdana Ini adalah font Calibri. Berikut adalah kode HTML untuk hal yang sama Ini font Arial Ini font Verdana Ini adalah font Calibri Mengubah Keluarga Font Secara Dinamis dari Konten Mengubah jenis font dengan tag HTML bersifat statis dan permanen yang dapat mengalihkan perhatian pengguna antara konten yang penting dan normal. Cara lainnya adalah secara dinamis mengubah keluarga font konten yang akan disorot di halaman web setiap kali pengunjung menggerakkan mouse di atasnya. Di bawah ini adalah kode widget untuk mengubah keluarga font secara dinamis menggunakan acara JavaScript "onMouseOver". Gerakkan mouse ke sini untuk melihat perubahan font dengan gerakan mouse? Ini dapat digunakan untuk menyorot bagian tertentu dari konten situs Anda Pada dasarnya, kami menganggap keluarga font default dari konten adalah "Arial" dan pada mouse di atasnya akan diubah menjadi "Verdana". acara "onMouseOut" digunakan untuk mengatur ulang keluarga font kembali ke "Arial" default sehingga akan terlihat dengan tepat. Hasil dari kode di atas ditunjukkan di bawah ini, gerakkan mouse Anda dan periksa perubahan dinamis dari keluarga font menjadi "Verdana". Gerakkan mouse ke sini untuk melihat perubahan font dengan gerakan mouse? Ini dapat digunakan untuk menyorot bagian tertentu dari konten situs Anda Terkait Bagaimana cara mengubah font di situs WordPress? 2. Mengubah Konten Secara Dinamis Mengubah Konten Secara Dinamis Acara JavaScript onMouseOver digunakan untuk mengimplementasikan banyak fitur interaktif di halaman tanpa menghubungi server. Berikut adalah salah satu fitur untuk mengubah konten secara dinamis yang dapat digunakan untuk menampilkan lebih detail dari kata atau konten tersebut. Gerakkan mouse Anda ke konten di bawah ini di kotak hasil untuk melihatnya berubah secara dinamis. WebNots Di bawah ini adalah kode efeknya WebNots Menampilkan Tooltip di Halaman Web Jika Anda ingin menampilkan tooltip yang akan ditampilkan pada mouse maka atribut title dapat digunakan dengan elemen HTML mana pun. Di bawah ini adalah contoh penggunaan tag dan mengarahkan kursor ke teks “WebNots” akan menampilkan tooltip. WebNots adalah situs yang berguna. Dan kode untuk hasil di atas adalah WebNots adalah situs yang berguna. 3. Mengubah Ukuran Font Secara Dinamis Cara sederhana untuk mengubah ukuran font dari bagian tertentu dari konten adalah dengan menggunakan atribut ukuran dari tag HTML . Di bawah ini adalah contoh bagaimana tag digunakan untuk memperbesar ukuran konten. Ini adalah konten tebal yang disorot dalam warna merah menggunakan ukuran font = 6 Kode HTML untuk hal yang sama adalah Ini adalah konten tebal yang disorot dalam warna merah menggunakan ukuran font = 6 Pemuatan statis dari peningkatan ukuran font seperti di atas dapat mengganggu pengalaman pengguna. Oleh karena itu cara sederhana lainnya adalah mengubah ukuran font konten secara dinamis tanpa kembali ke server. Ukuran font hanya akan berubah setiap kali pengunjung menggerakkan mouse di atasnya yang memberikan pengalaman pengguna yang lebih baik. Berikut adalah kode widget untuk mengubah ukuran font secara dinamis dengan mouse. Gerakkan mouse Anda masuk dan keluar dari paragraf ini! Anda dapat memperbesar teks saat Anda menggerakkan mouse ke sini! Dan hasil dari kode diatas adalah Gerakkan mouse Anda masuk dan keluar dari paragraf ini! Anda dapat memperbesar teks saat Anda menggerakkan mouse ke sini! Di sini, ukuran font digunakan sebagai 25px ketika mouse dipindahkan pada teks dan 20px ketika mouse dipindahkan dari teks. Anda dapat mengubah ini ke ukuran yang diinginkan untuk menyelaraskan dengan konten situs Anda. Terkait Bagaimana cara mengubah font di situs Weebly? 4. Mengubah Warna Font Secara Dinamis Sebagian besar waktu webmaster perlu mengalihkan perhatian pengunjung situs ke konten penting atau bagian tertentu di halaman itu. Metode tradisional adalah untuk menyorot konten secara permanen dengan menggunakan warna font yang berbeda dengan tag font HTML. Di bawah ini adalah contoh bagaimana tag digunakan untuk menyorot konten. Warna Merah Warna Hijau Warna Biru Kode HTML untuk hal yang sama adalah Warna Merah Warna Hijau Warna Biru Cara sederhana lainnya adalah mengubah warna font konten secara dinamis untuk disorot di halaman web tanpa kembali ke server. Warna konten hanya akan berubah setiap kali pengunjung menggerakkan mouse di atasnya. Dengan cara ini semua konten halaman akan terlihat serupa ketika halaman dimuat dan warna konten yang penting berubah ketika pengunjung benar-benar melakukan beberapa tindakan. Berikut adalah kode widget untuk mengubah warna font secara dinamis pada mouse. Lihat warna apa yang saya ambil saat Anda menggerakkan mouse ke atas saya! Dan apa yang terjadi ketika Anda mengeluarkan mouse Anda?? Lihat hasil dari kode di atas. Lihat warna apa yang saya ambil saat Anda menggerakkan mouse ke atas saya! Dan apa yang terjadi ketika Anda mengeluarkan mouse Anda?? Ubah Warna Font dengan Latar Belakang Anda juga dapat mengubah warna font konten bersama dengan warna latar belakang. Ini berguna terutama konten ditempatkan di dalam elemen tabel . Di bawah ini adalah kode untuk mengubah font dan warna latar belakang. Gerakkan mouse ke atas untuk melihat perubahan warna font dengan warna latar belakang Dan inilah hasilnya… Gerakkan mouse ke atas untuk melihat perubahan warna font dengan warna latar belakang 5. Mengubah Gaya Kursor Secara Dinamis Atribut kursor dari tag gaya dapat digunakan untuk mengubah kursor dengan gaya yang telah ditentukan. Ini dapat digunakan sebaris dengan tag HTML apa pun. Berikut adalah contoh menggunakan tag jangkar, gerakkan mouse Anda ke atas teks jangkar dan lihat gaya kursor. Layanan Konsultasi Web WebNots Kode HTML untuk hal yang sama diberikan di bawah ini. WebNots - Platform Berbagi Pengetahuan untuk Webmaster Nilai atribut yang digunakan dalam contoh di atas adalah "bantuan" dan di bawah ini adalah atribut yang dapat diterima dari elemen kursor. tangan crosshair bawaan pindah ubah ukuran elektronik ubah ukuran ubah ukuran n-mengubah ukuran se-resize sw-mengubah ukuran s-mengubah ukuran w-mengubah ukuran tes dan tunggu Elemen kursor dapat digunakan dengan tag HTML apa pun dan berikut adalah contoh lain dengan tag gambar menggunakan nilai atribut kursor crosshair. Gerakkan mouse ke atas gambar untuk melihat kursor berubah menjadi gaya crosshair. Peringatan Semua acara mouse over tidak akan berfungsi pada perangkat seluler di mana tidak perlu menggunakan mouse.