ID'LERDE HOVER ETİKETİ KULLANIMI

Bu sayfadaki uygulamamızda; Aşağıdaki örneğimizde gördüğünüz id'lerde hover etiketi kullanımını anlatacağım. mouse'yi elementin üzerine getiriniz, renk değişikliğini göreceksiniz.

Deneyim, En İyi Öğretmendir

Uygulamada CSS etiketlerini ve DİV tagını bir HTML dosyasında beraber yazarak tek bir dosyada web sayfası oluşturalım.


Bilgisayarınızda bir Noteped (metin belgesi) açın, sonra aşağıda verdiğim hazır web sayfası başlangıç kodunu en başa yapıştırın. Bu kod, her web sayfası (html belgesi) nın başlangıcında bulunması gerekir. Bu kodun görevi ise farklı web tarayıcılarında saglıklı ve hızlı okunması için bir temel koddur.

Ayrıca,sayfada yazdığınız metinlerin Türkçe karakterlerini (Ç,ç,Ğ,ğ,İ,Ö,ö,Ş,ş,Ü,ü) bozulmadan yazdığınız gibi okunması için aşağıdaki (meta) tagını da (head) tagı içinde (title) etiketi altına yazınız.


Bu kodlar arka planda çalışıp görünmeyen bir koddur. Bu kodlar ile fazla kafa yormayalım unutmayalım ki web sayfası yaratıyorsak sayfanın en başına belirtilen konumlara bu kodları yazmanız yeterlidir.Bu temel kodları Noteped' belgesinin en üst tarafına yapıştırdıktan sonra, intrnet tarayıcısının okuyacağı diğer kodları yazmaya başlıyalım.

Başlangıç kodunu yapıştırdıktan sonra, aşağıda verdiğim CSS etiketlerini kopyalayarak <HEAD>..</HEAD> tagları arasına yapıştırın.

İkinci adım olarak, aşağıda verdiğim DIV kodlarını kopyalayarak <BODY>..</BODY>tagları arasına yapıştırın. (sayfanızda nerede görmek istiyorsanız oraya yapıştırın)

Artık hover çalışmamızı sonlandırabilirsiniz, kodları yapıştırdığınız Noteped'i hover.html ismiyle farklı kaydederek bir web sayfası elde edelim.


Size yine bir kolaylık yaparak, yukarda sırası ile vermiş olduğum kodların tamamını aşağıda kod kutusunda birleştirerek verdim. Bu kodun tamamını Noteped'e yapıştırarak hemen hover.html ismiyle farklı kaydedin.

Artık hover uygulamamızın sonucunu görebiliriz. sizin hover.html dosyasındaki uygulama da aşağıdaki örneğimizdeki gibi olması gerekiyor. mause'u elementin üzerine getiriniz renk değiştiğini görürsünüz.

Deneyim, En İyi Öğretmendir

Çalşmayı pekiştirmek için hover'in en boy ölçüleri ve renk kodlarını değiştirerek geliştirin.
Kolay Gelsin

  

Copyright © 2018 Hüseyin Tepe