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.

Pernahkah kamu datang ke sebuah situs web yang menjengkelkan karena enggak bisa klik kanan di halaman situs web itu? Masih mending kalau cuma klik kanan yang tidak bisa. Di situs web lain, sering muncul kotak dengan suatu teks. Kotak itu baru hilang kalau tombol OK tersebut bisa dilakukan karena JavaScript memiliki kemampuan untuk mendeteksi mouse. Nah, dengan mempelajari skrip pada edisi ini, kamu bisa “balas dendam” dengan membuat tombol klik-kanan menampilkan kotak dialog TombolContoh pertama yang akan diangkat adalah deteksi tombol mouse yang diklik. Contoh tersebut diberikan pada Listing 1. Jika listing tersebut dijalankan pada sebuah browser, cobalah klik tombol mouse. Terserah mau klik kiri atau klik kanan. Yang akan muncul adalah sebuah kotak dialog yang memberitahukan tombol yang kamu klik. Contoh kotak dialog tersebut ditampilkan pada Gambar MouseContoh kedua, yang disajikan pada Listing 2, menjelaskan cara menampilkan posisi mouse saat mouse digerakkan. Koordinat tersebut ditampilkan pada status bar. Perhatikan baik-baik cara penulisan skrip yang menggunakan huruf kapital dan huruf untuk Firefox, ada sedikit “hacking” yang harus dilakukan agar skrip tersebut bisa berjalan dengan baik. Klik menu “Tools > Options”. Lalu pada kotak dialog yang muncul masuklah ke halaman “Content”. Pastikan opsi “Enable JavaScript” aktif dan klik tombol “Advanced” di sebelah kanan opsi tersebut. Aktifkan opsi “Change status bar text” Gambar 2.Setelah itu, restart Firefox, barulah skrip dapat berfungsi dengan ya, skrip ini juga tidak dapat dieksekusi pada Google Chrome karena status barnya boleh dibilang tidak ada. Status bar Google Chrome hanya muncul pada saat-saat tertentu ElemenContoh ketiga yang diberikan pada Listing 3 membahas mengenai bagian HTML yang diklik oleh Listing 3 tersebut dibuat sebuah halaman situs web yang mengandung beberapa elemen dan diberi fungsi tertentu untuk mendeteksi elemen mana yang diklik. Halaman web ditampilkan pada Gambar 3 dan bila kamu mengklik sesuatu, akan muncul kotak dialog yang kurang lebih tampak sepergi Gambar 3Gambar 4Perubahan GambarContoh keempat adalah perubahan gambar bila mouse pointer dilewatkan di atas gambar tersebut. Untuk dapat menjalankan skrip tersebut, siapkan dua buah gambar. Disarankan kedua gambar tersebut memiliki ukuran lebar dan tinggi yang sama atau setidaknya mendekati nama gambar yang terdapat pada Listing 4 dengan gambar yang kamu miliki. Setelah itu jalankan skrip pada browser dan lihat apa yang terjadi bila mouse pointer diletakkan di atas gambar 1. JavaScript Tuliskan apa saja di sini. Sebuah link juga Listing 2. JavaScript Gerakkan mouse dan pada status bar akan muncul koordinat mouseListing 3. JavaScript Silakan klik pada suatu tempat di dokumen. Ini sebuah header Ini sebuah paragraf Ini sebuah link Pusing belajar JavaScript Listing 4. JavaScript

Feb 21, 2023 Faradilla A. 5menit Dibaca Apa Itu HTML? HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web. Biasanya, penggunaan umum HTML adalah untuk menyusun bagian paragraf, heading, maupun link pada halaman web. Tapi, meskipun susunannya seperti coding, perlu diketahui bahwa HTML bukanlah bahasa pemrograman. HTML tidak dianggap sebagai bahasa pemrograman karena tidak bisa memberikan fungsi yang dinamis. Sekarang, bahasa markup ini dianggap sebagai standar web resmi, dikelola oleh World Wide Web Consortium W3C, yang juga bertugas merilis pembaruan rutin HTML. Nah, di artikel ini, selain membahas tentang apa itu HTML, kami juga akan membahas sejarah, cara kerja HTML, dan lain sebagainya. Selamat membaca! Tutorial VideoPengertian HTML dan SejarahnyaBagaimana Cara Kerja HTML?Pengertian Tag HTML dan FungsinyaTag Block-LevelTag InlineApa yang Membedakan HTML dengan HTML5?Kelebihan dan Kekurangan HTMLHubungan HTML, CSS, dan JavaScriptJadi, HTML Adalah… Tutorial Video Merasa lebih mudah menyimak tutorial melalui video atau suara daripada membaca? Tenang, kami sudah mempersiapkannya. Berikut tutorial video tentang apa itu HTML Jika ingin membaca semuanya secara lebih mendetail, silakan lanjutkan ke tutorial di bawah ini. Selamat membaca! Pengertian HTML dan Sejarahnya Hypertext Markup Language atau HTML adalah bahasa markup standar yang digunakan untuk membuat halaman website dan aplikasi web. Sejarah HTML diciptakan oleh Tim Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss. Versi pertama HTML dirilis oleh Tim Berners Lee pada tahun 1991, yang memiliki 18 tag. Sejak saat itu, setiap kali ada versi barunya, pasti akan selalu ada tag dan attribute tag modifier yang juga baru. Ketika bekerja dengan bahasa markup ini, Anda menggunakan struktur kode sederhana tag dan attribute untuk mark up halaman website. Misalnya, Anda membuat sebuah paragraf dengan menempatkan enclosed text di antara tag pembuka dan tag penutup . This is how you add a paragraph in HTML. You can have more than one! Berkat popularitasnya yang terus meningkat, bahasa markup ini kini dianggap sebagai standar web resmi. Spesifikasi HTML dikelola dan dikembangkan oleh World Wide Web Consortium W3C. Berdasarkan HTML Element Reference milik Mozilla Developer Network, saat ini ada 140 tag HTML, meskipun sebagiannya sudah tidak lagi didukung oleh beberapa versi terbaru browser. Kemudian, pada tahun 2014, HTML5 mulai diperkenalkan. Dengan diperkenalkannya HTML5, terdapat semantic baru seperti , , dan yang memperjelas bagian-bagian dalam konten. Nah, setelah Anda tahu apa itu HTML, selanjutnya kami akan membahas cara kerjanya. Bagaimana Cara Kerja HTML? Ekstensi file HTML adalah .html atau .htm, yang bisa dilihat dengan mengunakan web browser apa pun seperti Google Chrome, Safari, atau Mozila Firefox. Browser tersebut membaca file HTML dan merender kontennya sehingga user internet bisa melihat dan membacanya. Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, halaman beranda, Tentang Kami’, halaman kontak memiliki dokumennya sendiri-sendiri. Masing-masing halaman tersebut terdiri atas serangkaian tags bisa disebut juga elements, yang tersusun untuk membentuk sebuah halaman website. Tag tersebut membuat hierarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya. Sebagian besar elemen bahasa markup ini memiliki tag pembuka dan penutup yang menggunakan syntax . Berikut contoh kode dari susunan atau struktur HTML The Main Heading A catchy subheading Paragraph one Paragraph two with a hyperlink Elemen teratas dan terbawah adalah division sederhana yang bisa Anda gunakan untuk mark up bagian konten yang lebih besar. Susunan di atas terdiri atas heading , subheading , dan satu gambar . Paragraf kedua meliputi sebuah link dengan attribute href yang terdiri atas URL tujuan. Tag gambar memiliki dua attribute, src untuk path gambar dan alt untuk deskripsi gambar. Selain itu, beberapa contoh penggunaan umum HTML adalah Pengembangan web. Developer menggunakan kode HTML untuk mendesain tampilan elemen halaman web di browser, seperti teks, hyperlink, dan file media. Navigasi internet. Pengguna bisa menelusuri dan menyisipkan link antara halaman dan website terkait karena HTML banyak digunakan untuk menyematkan hyperlink. Dokumentasi web. HTML bisa digunakan untuk mengatur dan memformat dokumen, mirip dengan Microsoft Word. Pengertian Tag HTML dan Fungsinya Tag HTML memiliki dua tipe utama block-level dan inline tags. Elemen block-level memakai semua ruang yang tersedia dan selalu membuat line baru di dalam dokumen. Contoh dari tag block adalah heading dan paragraf. Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-level. Contoh dari tag inline adalah link dan emphasized strings. Tag Block-Level Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah , , dan . Tag adalah elemen level tertinggi yang menyertakan setiap halaman HTML. Tag menyimpan informasi meta, seperti judul dan charset halaman. Tag melampirkan semua konten yang muncul pada suatu halaman. Heading memiliki 6 level. Level tersebut bervariasi, mulai dari sampai , di mana h1 merupakan level heading tertinggi dan h6 adalah level terendah. Paragraf dibuka dan ditutup dengan tag , sedangkan blockquote menggunakan tag . Division merupakan bagian konten yang lebih besar dan biasanya terdiri atas beberapa paragraf, gambar, kadang-kadang blockquote, dan elemen lebih kecil lainnya. Kita bisa membuat mark up dengan menggunakan tag . Di dalam elemen div juga terdapat tag div lainnya. Anda juga bisa menggunakan tag untuk list yang berurutan dan untuk list yang tidak berurutan. Masing-masing list item harus dibuka dan ditutup dengan tag . Sebagai contoh, di bawah ini adalah tampilan dasar daftar tidak berurutan dalam HTML List item 1 List item 2 List item 3 Tag Inline Sebagian besar tag inline digunakan untuk memformat teks. Sebagai contoh, tag akan render elemen ke format bold, sedangkan tag akan ditampilkan dalam format italic. Hyperlink adalah elemen inline yang mewajibkan adanya tag dan attribute href untuk mengindikasi tujuan link Click me! Gambar image juga merupakan elemen inline. Anda dapat menambahkan satu gambar dengan menggunakan tanpa harus membubuhkan tag penutup. Hanya saja, Anda disarankan menggunakan attribute src untuk menentukan path gambar, misalnya Jika ingin mempelajari lebih dalam tentang pengertian tag HTML serta tag HTML dan funsginya, silakan baca artikel cheat sheet kami, lengkap dengan link unduhan dokumen PDF untuk membantu Anda mempelajarinya. Apa yang Membedakan HTML dengan HTML5? Sejak pertama diperkenalkan, bahasa ini telah melewati perkembangan yang cukup signifikan. W3C terus merilis versi dan update terbaru sembari mencetak sejarah dan mengukuhkan keberadaannya. HTML4 dikenal sebagai “HTML” dirilis pada tahun 1999 dan versi terbarunya diperkenalkan pada publik pada tahun 2014, yaitu HTML5, versi terbaru ini menambahkan lebih banyak fitur baru ke bahasa mark up ini. Salah satu fitur canggih di HTML5 adalah dukungan untuk embed audio dan video. Jadi, alih-alih menggunakan Flash player, kita bisa menyematkan file video dan audio ke halaman website dengan memanfaatkan tag dan . Fitur tersebut juga memiliki dukungan bawaan untuk SVG dan MathML untuk rumus matematika dan ilmiah. HTML5 juga memperkenalkan beberapa perbaikan pada semantic. Tag semantic baru mengirimkan informasi pada browser tentang arti konten, yang tak hanya bermanfaat bagi pembaca, tapi juga mesin pencari. Tag semantic yang paling banyak digunakan adalah , , , , dan . Jika ingin mempelajari lebih lanjut, silakan baca artikel kami tentang perbedaan HTML dan HTML5. Kelebihan dan Kekurangan HTML Sama seperti hal teknis lainnya dalam dunia web, bahasa markup ini juga punya kelebihan dan kekurangannya. Berikut kelebihan HTML Digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar. Dijalankan secara alami di setiap web browser. Mudah dipelajari. Open-source dan sepenuhnya gratis. Rapi dan konsisten. Menjadi standar resmi web, dikelola oleh W3C. Integrasi mudah dengan bahasa backend, seperti PHP dan Kemudian, kekurangan HTML adalah Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP. Tidak bisa menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer. Fitur baru tidak bisa digunakan dengan cepat di sebagian browser. Perilaku browser terkadang sulit diprediksi. Misalnya, browser lama tidak selalu bisa merender tag yang lebih baru. Hubungan HTML, CSS, dan JavaScript Meskipun dinyatakan sebagai bahasa markup yang canggih dan mudah, HTML tidak sepenuhnya bisa membuat website yang profesional dan responsif. Bahasa ini hanya bisa digunakan untuk menambah elemen dan membuat struktur konten. Namun di satu sisi, bahasa ini bisa bekerja secara maksimal dengan dua bahasa frontend CSS Cascading Style Sheets dan JavaScript. Jika digabungkan, kedua bahasa frontend ini bisa meningkatkan pengalaman user dan memberikan fungsi yang lebih canggih. CSS erat kaitannya dengan styling, seperti background, warna, layout, spacing, dan animiasi. JavaScript memungkinkan Anda menambahkan fungsionalitas yang dinamis, seperti slider, pop-up, dan galeri foto. Jika digambarkan, berikut perbedaan HTML dan CSS dan JavaScript HTML adalah orang yang tidak mengenakan busana apa pun, kemudian CSS adalah bajunya, kemudian JavaScript adalah aktivitas dan sikap orang tersebut. Jadi, HTML Adalah… Sampai di sini, Anda sudah mempelajari apa itu HTML, pengertiannya, dan cara kerjanya. HTML adalah bahasa markup, bukan bahasa pemrograman, dan tidak memiliki kemampuan untuk membuat fungsionalitas yang dinamis. Dengan bahasa markup ini, user bisa mengelola dan memformat dokumen secara statis, sama seperti Microsoft Word. Berdasarkan cara kerja HTML, Anda bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web menggunakan coding sederhana. HTML merupakan level terbawah dari teknologi frontend dan berfungsi sebagai dasar styling yang bisa Anda tambahkan dengan CSS dan fungsionalitas yang dapat dijalakan menggunakan JavaScript. Faradilla, yang lebih akrab disapa Ninda, adalah Content Manager di Hostinger. Ia suka mengikuti tren seputar teknologi, digital marketing, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca menyelesaikan masalah yang dialami.

Сниጃа еፍ еջи	А иտոфуκ шезիшիለ	Ռоςուጫ аχаш φէኖጎνоզа
ሔуηεчቃτ թαвуኯուшե ачощ	Ξէвожር дрεቇ սխмωгисрυβ	Εсε иղուщωπօጼ ибрէψ
Ճуրуξኾ ахиቸариβዱ	Ик иյесрո	ቩсрифи ሡ
Εኤያсрօտ ιкеча φитв	Еካуτεфес кዘሷዑቄ	Игиቪ иֆօсቧ
Хрεኄапеፊоኯ በйοпω	Мոбоպωн ቮ	Κ ω

istilah mouse over pada halaman web dapat dilihat dengan