Merhaba arkadaşlar bugün önemli bir konudan bahsedeceğim. ilk önce CSS den kısaca bahsedelim, sonrasında link(bağlantı)işlemlerinden söz edeceğiz.
CSS bir kısaltmadır. "Cascading Style Sheets"
kelimesinin baş harflerinden oluşur. Dilimizdeki anlamı: Basamaklı Stil
Sayfası.
Stiller, bir HTML elementinin nasıl görüneceğini belirleme olanağı sağlar.
Siteyi görselleştirme!
HTML dosyamızın daha anlaşılır olmasını sağlar. Stillerimiz tek bir dosyada toplanır ve kolaylıkla okunur - değiştirilir.
Stiller, bir HTML elementinin nasıl görüneceğini belirleme olanağı sağlar.
Siteyi görselleştirme!
HTML dosyamızın daha anlaşılır olmasını sağlar. Stillerimiz tek bir dosyada toplanır ve kolaylıkla okunur - değiştirilir.
Bir tarayıcı açıldığı zaman stilleri okur ve o stilin kullanıldığı
HTML elementlerini belirtilen özelliklere göre şekillendirir.
Üç şekilde sayfamıza stil ekleyebiliriz. Bunlar:
Üç şekilde sayfamıza stil ekleyebiliriz. Bunlar:
Stilleri CSS Dosyasından Çağırmak
HTML Sayfasında CSS Yazmak
HTML Elementinin İçerisinde Stil Belirtmek
Bu dersimizde CSS kullanacağız. Öncelikle bir sınıf belirliyoruz
class="ne1" sonra style etiketimizin içinde .ne1{} içine özellikler belirliyoruz.
Yeni öğreneceğimiz etiketler
class="ne1" sonra style etiketimizin içinde .ne1{} içine özellikler belirliyoruz.
Yeni öğreneceğimiz etiketler
margin : iki nesne arasındaki boşluğu verir
padding : yazı veya resim ile çerçeve arasındaki boşluğu verir
border : kenarlık kalınlık yuvarlama vb.
background-color : nesnenin arkaplan rengi
hover : fare ile üzerinde gezerken değişmesi
active : fare ile tıklandığında değişmesi
LİNK(BAĞLANTI) İŞLEMLERİ
… Bağlantılar sayesinde
hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir
tıklama bizi istediğimiz yere götürecektir.
…HTML'de metinlere ve resimlere bağlantı
kazandırmak mümkündür.
…Ses, grafik dosyaları, sıkıştırılmış
dosyalar, internet adresleri,.. bunların hepsine bağlantı kazandırmak
mümkün.
…Hatta yapacağımız bağlantı sayfa içinde,
yani dahili bir bağlantı da olabilir.
<a href="....">...</a>
Bu
komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı
bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz
bir dosyaya ulaşmasını sağlayabilirsiniz.
<a href="midi.zip"> midi dosyalarını çekmek
için tıklayın </a>
<a href="bayrak.gif"> buraya tıklandığında bayrak resmi açılacak </a>
<a href="bayrak.gif"
download="dosyaadi" > Bu resimi indir</a>
<a href="http://www.ebrarbilisim.blogspot.com.tr">
tıklayın sitemi ziyaret edin </a>
… <a href="mailto: ebrarbilisim1@gmail.com"> mail atın </a>
Bağlantının açılacağı pencereyi belirtmek için target
parametresi kullanılır .
<a href="..."
target="..." >...</a>
_blank bağlantı yeni pencerede açılır
_self bağlantı aynı pencerede açılır
_top bağlantı aynı pencerede üsten itibaren açılır
_parent açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
<iframe></iframe> sayfa içinde küçük sayfa açma. sayfamızın çocuğu gibi.
Şimdi anlattıklarımızı örnek ile somutlaştıralım. Bu kez anlattıklarımı video ile göstereceğim değişen kısımları görebilesiniz diye.
<html>
<head>
<title> LİNK İŞLEMLERİ </title>
<meta charset="utf8"/>
<style>
.ne1{
margin:30px;
background-color:aqua;
padding:10px;
font-size:20px;
font-family:arial;
color:white;
text-decoration:none;
border:3px solid blue;
}
.ne1:hover {
color:red;
background-color:white;
border-radius:20px 30px 10px 50px;
}
.ne1:active{
border-top-style:dashed;
border-top-color:cyan;
border-top-size:5px;
border-left-style:dotted;
border-left-color:red;
border-left-size:10px;
border-right-style:double;
border-right-color:black;
border-right-width:10px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width:5px;
}
</style>
</head>
<body bgcolor="yellow" style="background-image:url(FB_IMG_1483646423544.jpg);
background-repeat:no-repeat;
background-position:5px 3px;
background-size:contain;">
<h1> RESİMLER</h1>
<center>
<img src="31szt06a_ist_izm_ant_trb_ank_adn.jpg" width="auto" height="200px" title="akaryakıta yapılan zamlar" alt="akaryakıta yapılan zamlar" />
</center>
<iframe src="http://ebrarbilisim.blogspot.com.tr"name="ne olsun" align="right"> </iframe>
<img src="20171011_113541.jpg" width="auto" height="100px" alt="murat akıncı"/>
<br>
<br>
<br>
<br>
<br>
<a href="internet.html" target="_blank"> ANASAYFA </a>
<a href="liste işlemleri.html" class="ne1"> LİSTE İŞLEMLERİ </a>
<a href="http://www.google.com" target="_blank" class="ne1"> GOOGLE a git</a>
<a href="yumruk_bayrak.jpg" target="_parent"> BAYRAK-YUMRUK</a>
<a href="20171011_113541.jpg" target="ne olsun"> <img src="20171011_113541.jpg" width="auto" height="100px" </a>
<a href="mailto:ebrarbilisim1@gmail.com" class="ne1"> E-mail GİT</a>
<a href="http://www.ebrarbilisim.blogspot.com.tr" target="_blank" class="ne1"> EBİ(ebrar bilişim) GİT</a>
</body>
</html>
bir sonraki derste görüşmek üzere esen kalın... ebi
yararlanılan kaynaklar:
Öğr. Gör. M. Mutlu YAPICI[WEB Adresi]
Hiç yorum yok:
Yorum Gönder