DERS-7) Link ve Resim Elementleri

yorumsuz
250 kez okundu

HTML sitelerinde birden fazla sayfa olduğunda kullanıcıların sayfalara gidebilmesi için link eklememiz gerekiyor. Link eklemek için “a” elementini kullanacağız. Aynı şekilde sayfamızda yazıdan başka resim olmasını istiyorsak, sayfaya imaj eklememiz gerekiyor. İmaj eklemek için de “img” elementini kullanırız. Bu iki elementi kullanarak sayfaya resim ekleyebilir ve sayfamızda kendi oluşturduğumuz ya da bulanan başka bir sitenin linkini ekleyebiliriz.

SAYFAYA BULUNAN BİR SİTENİN LİNKİNİ VERMEK: Link verme işini “a” elementiyle yapacağımızı söylemiştik. Ama “a” elementinin yanında “href” özelliğini kullanacağız. Mesela herkesin kullanmakta olduğu bilinen bir siteyi yani Facebook’u sayfamıza link ekleyelim.

Facebook kod

NOT: href=”https://www.facebook.com/” komutunda “http://” veya “https://” yazmasaydık
açmak istediğimiz link açılmayacaktı!!

Yazdığımız bu kod sitemize “FACEBOOK sayfasına git..” yazısını yazdıracak ve “FACEBOOK” yazısı link olarak ekleyecek.

ekran 1

Bu linke tıkladığımız zaman “Facebook” sitesinin giriş sayfasına gidecektir. Ama bu sayfayı başka linkte değilde şuan kullandığımız sitede açacaktır. Bunu önlemek için “a” elementinin “target” özelliğini “_blank” olarak atamamız gerekiyor. Bunu yaptığımızda FACEBOOK adresi yeni sekmede açılacaktır. Kodu

target

olarak güncelleyelim.

Dikkatli bakacak olursak yukarıdaki resimde “FACEBOOK” isimli linkin altında bir çizgi olduğu görürüz. Bu çizginin gitmesinin istiyorsak, “a” elementinin “style” özelliğini “text-decoration: none” atamamız gerekiyor. Kodu

style

olarak güncelleyelim ve çalıştıralım.

Başka site-son

Gördüğünüz gibi “FACEBOOK” linkinin altındaki çizgi gitmiş durumda ve linke tıkladığında Facebook’un açılış sayfası yeni sekmede açıldı.

SAYFAYA KENDİ OLUŞTURDUĞUMUZ SİTENİN LİNKİNİ VERMEK: Bunun için basit bir savaş oyunları sitesi yapacağız. Benim “SAVAŞ OYUNLARI” isimli bir sitem olsun ve içinde “Robot Savaşları”, ” Tank Savaşları” ve “Uçak Savaşları” adında 3 tane linkim olsun. Bu linklere tıklandığında her 3 savaş oyunu için ilgili sayfayı yeni sekmede açsın. Bu 3 oyunun liste halinde görünmesini istiyorsak 6. dersimizde öğrenmiş olduğumuz liste elementlerini kullanmalıyız. Bunun yanında kullanıcının bu 3 oyuna da tıkladığı zaman o oyunla ilgili bizim yazacağımız 3 ayrı siteye gitmesi için 3 ayrı HTML sayfası programımıza eklemeliyiz. Bunun için program sayfasında sitemizin adının olduğu yere sağ tıklayıp “Yeni Dosya” seçeneğini tıklamamız yeterli olacaktır. Bunları yapınca kodumuzun aşağıdaki halini alması beklenmektedir.

Biz kod

Şimdi kodlamaya başlayabiliriz. Ana sayfamızda giriş başlığıyla birlikte bu 3 oyunun da liste halinde görünmesi için linklerimizi <ul>…</ul> tag’larının arasına <li>…</li> tag’ı yardımıyla ekleyeceğiz. Bulunan bir sitenin linkini verme konusunda öğrendiğimiz güncellemeler ile birlikte bu istediklerimizi <body> tag’larının arasına yazalım.

LİNK KOD

NOT: Buradaki “href” komutunun gidilmek istenilen sayfanın ismine atandı. Burda dikkat edilmesi gereken gidilmek istenen sayfa linkinden önce kullanılan “/” simgesidir. Bu simge programda gidilmek istenen o sayfanın bulunduğu dosyaya otomatik olarak gider.

Bu kodu çalıştırdığımız zaman sitenin görünümü;

ekran 2

şeklinde olacaktır. Oyunlarının linklerine tıkladığımızda tüm oyunlar yeni sekme de şekildeki gibi açılacaktır. Bu açılan yeni sayfaların içini istediğiniz gibi doldurabilirsiniz.

SAYFAYA RESİM EKLEMEK: Sitemize resim eklemek için yukarıdaki örneği kullanalım. Yukarıdaki örnekte ana sayfamızda 3 adet link vardı. Şimdi sitemizde sadece yazı olmaması için ilgili oyunlarla ilgili 3 adet resim sitemize ekleyelim. Bunun için savaş oyunlarıyla ilgili 3 ayrı görseli bilgisayarıma indirdim. Peki bunu projeye nasıl dahil edeceğiz?

Bunun için sitemizin adının olduğu yere sağ tıklayıp “Yeni Klasör” diyerek yeni bir klasör ekleyelim. Ben bu klasörün adını “Resimler olarak güncelledim. İndirdiğim 3 resmi de bu klasöre sağ tıklayıp “Var Olan Dosya Ekle” seçeneğiyle programıma ekledim. Şimdi bu 3 linkin yanına 3 resmi, her linkin yanına ilgili kodları yazarak aşağıdaki gibi ekleyebiliriz.

resim kod

“Resimler” klasörü şeklin solundaki gibi olacaktır. Şimdi burada resim eklemek için kullanılan özelliklerden bahsedelim. Bu kodlarda linklerin altına (<br /> yardımı ile alt satıra geçildi.) bir resim eklemek için <img /> tag’ı kullanılır.

src: Resmin yolunu verir. Burada kulanılan “/” simgesi, kodun yazıldığı klasöre gelmemiz içindir.

alt: Resmin altına görünmez etiket eklemek içindir. Eklediğimiz resmin altında (alt=”tank” kodu için) “tank” yazacaktır ve kullanıcının tank ile ilgili arattığı şeylerde bizim eklediğimiz resmimiz de çıkacaktır.

wight: width=”200″ özelliği ise resmin büyüklüğünü ayarlamak içindir. Programın güncel hali çalıştırıldığında sitemizin görüntüsü aşağıdaki gibi olacaktır.

ekran son

Bir sonraki dersimizde “Form Bilgi ve Giriş Elementleri” dersini öğreneceğiz. Bir sonraki dersimizde görüşmek üzere,

İyi günler …:)


Sosyal Medyada Paylaş Facebook Twitter Google+
Etiketler: , , , , ,
Eklenme Tarihi: 13 Ekim 2015

Facebook Yorumları

Konu hakkında yorumunuzu yazın


Time limit is exhausted. Please reload the CAPTCHA.