HTML5 Temel Seviye #4

[Babayiğit]

HTML5 temel seviye3

https://hacktivizm.org/threads/html5-temel-seviye2.588/ bir önceki konum buydu şimdi ise yavaş yavaş önemli şeylere göz atıp sitemize renk katalım; şimdi bu yapılacaklar ve yaptıklarmız css ile daha kolay şekilde yapılabilir ama temelimizi böyle atmamız daha iyi olur... şimdi diyelim ki bir...

hacktivizm.org

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

<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


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

<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;

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 şimdi bunu kullanışıını göstereyim;

<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;

<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


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

<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











görünüm böyle a harfine bakmayın buton için ctrl+v ş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

 

[Can]

Eline emeğine sağlık Zulfikar

 

[Babayiğit]

Eline emeğine sağlık Zulfikar

Eywl tosunum cansın

 

[KocaReis]

Eline emeğine sağlık kardeşim süpersin

 

[Babayiğit]

Eline emeğine sağlık kardeşim süpersin

Saol kocareis cansın sende kral