Neler yeni

HTML5 Temel Seviye #4

Katılım
15 Ocak 2021
Mesajlar
216
Tepkime puanı
228
İlgi Alanlarınız
Yazılım
Cinsiyet
  1. Erkek


evet arkadaşlar part4 bu seri ne kadar gider bilemem ama fazlada html de kalmak istemiyorum aslında her neyse gelelim konumuza

şimdiki konumuz şu olacak diyelim bir link göndermesi yapıyoruz ama link aynı renk ve biraz soluk hemen devreye sihirli kodları sokalım :D


HTML:
<style>

    a:link{
        color:blue;             #alacağı renk
        font-size:64px
      }


      a:visited{
       color:red;             #daha önce tıklandı ise aldığı renk
       font-size:64px;

      }


       a:hover{
       color:green;             #mouse üzerinde iken aldığı renk
       font-size:64px;
       }

        a:active{
        color:black;         #üzerine basılı tutulduğunda aldığı renk
        font-size:64px;
      }

</style>

<a href="https://hacktivizm.org/">Hacker formu</a>

resim koyarken almıyor rengi :( ama yanlarına yazdım deneyerek görebilirsiniz :D


şimdi bakın bu çok uzun bunu kısa hala getirebilirmiyiz tabikide evet hemen onuda yapalım



HTML:
<style>

    a:link , visited{
        color:blue;             
        font-size:64px
      }





       a:hover , active{
       color:green;           
       font-size:64px;
       }

      

</style>

<a href="https://hacktivizm.org/">Hacker formu</a>

aradaki fark şudur daha fazla renk atama yapamayız kısa ve öz yapıldı bu şekilde


şimdi ipucu kodlarına gelelim;
HTML:
background-color:blue; #Arka plan rengi
padding:15px 69px;     #yazının hizası kenar ile
display:inline-block;  #iç içe geçmesin diye

şimdi bu kodları erken dedim çünkü aşına kalsın diye :D şimdi bunu kullanışıını göstereyim;

HTML:
<style>

    a:link , visited{
        color:blue;
        font-size:64px
        background-color:red;
        padding:15px 60px;
        display:inline-block;
      }





       a:hover , active{
       color:green;
       font-size:64px;
       background-color:red;
        padding:15px 60px;
        display:inline-block;
       }



</style>

<a href="https://hacktivizm.org/">Hacker formu</a>
<a href="https://www.sybercodev1.com/">blog sitesi</a>


https://imgflip.com/gif/4zn035 bu görünüm gif olarak yaptım kalitesi kötü kusura bakmayın

şimdi ise diyelim web sitemiz büyüdü en sonuna indik en başına gidilcek tek tuşla okur yapsın hemen onu yapalım;

HTML:
<button><a href="#top">Yukarı Çık</a></button>

kodumuz budur en alta konur ben baya uzun random harfler yazdım o yüzden tamamını paylaşmak göz yorar ama görünümü göstereyim

button.PNG
görünümü böyledir

bunun resimlisi paragraf içi de var ama en kullanışlısı budur

şimdi ise arka planımıza bir resim koyalım mı site daha şık gözüksün ayrıcalıklı olmak iyidirrr :D


HTML:
<style>

        body {
             background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2Xrfcx_Cg52atQ_Q5UMg3hBn752pizNll4Q&usqp=CAU");
             background-repeat:no-repeat;
             background-size:100% 100%;
             background-attachment:fixed;
             }


    </style>


bu kodları head parametresi içine yazacağız ki hepsini kapsasın bunu css de tekte yaparız ama alışmak şart her neyse görünümünü ve kodların anlamlarını da söyelyeyim










fontttt.PNG
görünüm böyle a harfine bakmayın buton için ctrl+v :D şimdi gelelim ne işe yarıyor;


background-repeat:no-repeat; #bir kere basar resmi
background-size:100% 100%; #boyutu manuel ayarlar
background-attachment:fixed; #bütün ekrana sabitler


şimdi bu konu diğeri ile farklı açıldı çünkü link renklendirdik ve daha css'e başlamadık ve size hem css hemde bunu gösterirsem karmaşık olur....


kolay gelsin bol çalımalar
 

KocaReis

Developer
Katılım
18 Aralık 2020
Mesajlar
588
Tepkime puanı
1,208
Eline emeğine sağlık kardeşim süpersin
 

Konuyu görüntüleyen kullanıcılar:

Hukuksal Sorunlar İçin [email protected]
For Legal Problems [email protected]
Hacktivizm.Org
Hacktivizm.Org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Hacktivizm.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Hacktivizm saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Hacktivizm üyelerinin yaptığı bireysel hack faaliyetlerinden Hacktivizm sorumlu değildir. Sitelerinize Hacktivizm ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz. Sitemizde yer alan içerikler hakkındaki şikayetlerinizi Buradan iletişime geçerek bildirebilirsiniz. Please Report Abuse, DMCA, Scamming, Harassment, Crack or any Illegal Activities to [email protected]
Hacktivizm Twitter Hacktivizm Youtube Hacktivizm İnstagram Hacktivizm Telegram