Html Dersleri 3- Resimler Ve Linkler

Tüm devrelerime günaydın diyorum ve yeni konuya geçiyorum. Önceki dersimizde yazı yazma ile ilgili birçok şey öğrendik. Bu dersimizde ise sayfamıza resim ve link eklemeyi öğreneceğiz.
İlk ders
İkinci ders

Not: Anlattıklarımı daha iyi anlamak için hem okuyup hem pratik yapmalısınız.

1-Resim Ekleme
Resim eklemek için kullandığımız etiket "img" etiketidir. Bu etiket de tıpkı "br" etiketi gibi özel bir kullanım olarak: <img/> şeklinde kullanılır. Şimdi biz; <img/> yazarak sayfamıza bir resim ekleyeceğimizi belirledik. Ancak ekleyeceğimiz resmin bir kaynağı olmalı değil mi?
Kaynağımızı belirlemek için kullandığımız parametre "src" parametresidir.

HTML:

<img src=" " />

şeklinde kaynağı belirtiyoruz. Tırnak işaretleri arasına resmimizin kaynağını belirteceğiz. Bunu belirtmek için iki yöntem var:

• Bilgisayardan bir resim seçeriz ancak burada da dikkat etmemiz gereken şeyler var. Birincisi oluşturduğumuz .html dosyası ile resim dosyası aynı olmalıdır. Yani .html sayfamız masaüstünde ise resmimiz de masaüstünde de olmalıdır. İkincisi, resmin uzantısına dikkat edilmelidir. Mesela benim "deneme" adlı bir resmim var. Ben bunu
  HTML:

  <img src="deneme"/>

  şeklinde belirtemem. Çünkü resmin uzantısını da bilmeliyim. Şimdi resmime sağ tıklayıp "özellikler" butonuna tıklıyorum. Hemen karşıma dosya türü olarak ".jpeg" çıkıyor. Resmimin uzantısını öğrendim. Şimdi az önceki kodumu:
  HTML:

  <img src="deneme.jpeg"/>

  olarak düzenliyorum ve resmim sayfaya çıkıyor.
• Resim eklemenin ikinci yöntemi ise resmimizi internette bir resim yükleme sitesine, mesela: https://hizliresim.com yüklüyorum ve daha sonra yüklediğim resmin linkini kaynak kısmına kopyalıyorum.
  HTML:

  <img src="https://i.hizliresim.com/6m5AGP.png"/>

Sayfamıza resim yükledikten sonra bir takım parametreler kullanabiliriz. Aklıma gelen ilk iki parametre "width" ve "height" parametreleri. Bu parametreler resmin sayfadaki boyutunu değiştirmeye yarıyor. Örneğin elimizde 800x800 boyutunda bir resim var. Ben;

HTML:

<img src="deneme.jpeg" width="300" height="300" /

şeklinde resmin boyutunu 300x300 değerine indirebiliyorum. Aklıma gelen bir diğer parametre ise daha önceden öğrendiğimiz "title" parametresi.

HTML:

<img src="deneme.jpeg" title="Bu bir deneme resmi"/>

Bu kodu yazdıktan sonra resmin üzerine imleci getirdiğimizde baloncuk şeklinde: "Bu bir deneme resmi" yazısı çıkıyor.

Evet, resim konusu bu kadardı. Şimdi linklere geçelim.

2-Linkler
Link eklemek için kullandığım etiket "a" etiketidir Sayfaya farklı türlerde linkler eklenebilir. Hemen öğrenmeye başlayalım.
Sayfa Dışı Linkler
Bunu öğrenmeniz şuan çok kolay. Çünkü aynı resim eklemek gibidir. Küçük birkaç farkı var, onu da şimdi göreceksiniz. İlk olarak

HTML:

<a>Bu bir link</a>

şeklinde bir yazı yazıyoruz. Ancak daha yazımızı link olarak tanımlamadık. Çünkü bir kaynak belirtmedik. Linklerde de tıpkı resimlerde olduğu gibi kaynak belirtmeliyiz. Linklerde bunun için "href" parametresi kullanılır ve

HTML:

<a href=" ">Bu bir link</a>

kodundaki kaynak bölümüne aynı resimlerde olduğu gibi hem resim adı hem de bir url eklenebilir. Ancak söylemeyi unuttuğum bir şey var. Url eklerken kesinlikle "https://" kısmını da dahil etmeliyiz. Yani;

HTML:

<a href="www.google.com.tr ">Bu bir link</a>

kodu ile linkimiz çalışmayacaktır. Kodumuzun çalışması için

HTML:

<a href="https://www.google.com.tr ">Bu bir link</a>

şeklinde yazılmalıdır. Peki linkteki sayfayı yeni sekmede açmak istiyorsak ne yapmalıyız? Bunun için "target" isimli bir parametre kullanıyoruz.

HTML:

<a href="https://www.google.com.tr " target=" ">Burası bir link</a>

kodumuzu yazdıktan sonra "target" içine "_blank" yazıyoruz.

HTML:

<a href="https://www.google.com.tr " target="_blank">Burası bir link</a>

Artık linkte verdiğimiz sayfalar yeni sekmede açılacak ve kullanıcı bizim kendi sayfamızdan ayrılmış olmayacak.

Sayfa İçi Linkler
Özellikle uzun bir sayfa hazırlıyorsanız bunu kullanmanız gerekebilir. Ben size sayfa içi linklerin nasıl çalıştığını bir örnek altında açıklayacağım:
Diyelim ki bir sayfamız var ve sayfamızda 4 ana başlık var. Her başlığın altında da uzun uzun yazılar var. Biz sayfanın başına kullanıcıya kolaylık olmasını amaçlayarak
"1. başlığı gitmek için tıklayın."
"2. başlığı gitmek için tıklayın."
"3. başlığı gitmek için tıklayın."
"4. başlığı gitmek için tıklayın."
şeklinde linkler oluşturmak istiyoruz. Bunun için yapmamız gereken pek de zor değil aslında. Biz başlık oluştururken "h1" ile "h6" arasında değişen kodlar kullanırdık. Biz bütün başlıkların "h1" ile yazıldığını varsayalım. Örnek olarak 3. başlığımın koduna gidiyorum.

HTML:

<h1>3. Başlık</h1>

Bunu link etiketi içine alıyorum ve "name " parametresi ile başlığa bir kod adı veriyorum.

HTML:

<a name="123"><h1>3. Başlık</h1>

Başlığımıza "123" şeklinde bir kod adı vermiş olduk. Bu kod adını kaynak olarak kullanacağız. Sayfanın yukarısına çıkıyoruz.

HTML:

<a href=" "> 3. başlığa gitmek için tıklayın.</a>

kodunu yazıyoruz. Daha sonra "href" kısmına # (diyez) işareti koyup biraz önce "123" olarak tanımladığımız kod adını yazıyoruz.

HTML:

<a href="#123">3. başlığa gitmek için tıklayın</a>

Artık "3. başlığa gitmek için tıklayın" linkine bastığımızda bizi sayfa içindeki 3. başlığın olduğu yere götürecektir.
Mail Linki Verme
Pek çok yerde "Bize Mail Yollayın" şeklinde linkler görmüşsünüzdür. Bunların yapımı çok kolay. Hemen;

HTML:

<a href=" ">Bize Mail Yollayın</a>

şeklinde bir link oluşturup "href" kısmına "mailto:" yazıp email adresimizi yazıyoruz. Örnek:

HTML:

<a href="mailto:[email protected]">Bize Mail Yollayın</a>

Artık, "Bize Mail Yollayın" yazısına tıkladığımızda bizi mail yollama sayfasına yönlendirecektir.

Devrelerim bu dersimizin de sonuna geldik. Bir sonraki derste sayfamıza tablo ve liste eklemeyi öğreneceğiz. Aklınızda takılan sorular ya da anlatımımda bulduğunuz eksiklikler varsa yorum olarak bildirin lütfen. İyi forumlar...

 

Ellerine sağlık devrem . Html öğrenmek istiyorum link verebilirmisin?

 

Çok iyi olmuş devrem ellerine sağlık devamını bekliyoruz

 

Devrem bu benim 3. html dersimdi devamı gelecek...
Önceki derslere gitmek istiyorsan buyur devrem:
İlk ders
İkinci ders

 

sağol devrem

 

Devrem ben yeni başladım senin derslerini takip ediyorum ne yapayım ilk önce neyden başlıyayım Teşekkürler.

 

Devrem kendini geliştirebilmen için programlama öğrenmen şart.
http://forum.ayyildiz.org/konu/programlamaya-başlamadan-Önce.82529/
Linkteki konuyu okuyup ne öğrenmek istediğini ve nasıl öğreneceğini kavrayabilirsin. Ben ağır bir hastalığa yakalandığım için birkaç gün yeni konu açamayacağım maalesef...

 

Geçmiş olsun devrem Allah acil şifalar nasip etsin.

 

Çok sağol devrem. Bugün biraz daha iyiyim. 3 güne yeni konu açacağım inşallah

 

devrem eline sağlık çok güzel anlatmışsın.

 

ilk denemem için iyimi devrelerim bir fikrinizi almak istedim ?

 

Gayet iyi bir çalışma devrem. Yakında yeni konu geliyor takipte kal...

 

bekliyorum devrem geçmiş olsun bu arada.

 

devrem şu tabloyu ne yaptıysam Koyduğum fotoğrafın üstüne çıkartamadım mümkünse yardım edebilirmisin ?

 

[/url][/IMG]

 

Devrem "body" etiketinden sonra ilk tablo komutlarını yaz, "img" etiketlerini ve yazıları aşağıya at.

 

devrem html derslerinin 1 ve 2 linkini verirmisin baştan başlamak isitiyorum

 

1. Ders
2.Ders
Buyur devrem...

 

Devrem dikkat edersen şu konunun başında belirtilmişdir İlk ders ve İkinci ders diye. Ordan baştan başlaya bilirsin..