1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İddaa edenlere inanmayınız..⠀ Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.

Html Dersleri 3- Resimler Ve Linkler

'Html - CSS - XML - JavaScript - Ajax' forumunda ERVAH-I-EZEL tarafından 19 Şubat 2017 tarihinde açılan konu

Konu Durumu:
Yanıtlara kapalı.
  1. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,802

    Özel Mesaj
    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...:)
     
    E-gun08, Hnisagltp, 27Neo27 ve 39 kişi daha bunu beğendi.
  2. xEmre Guest

    • Guest
    Katılım:
    16 Şubat 2017
    Mesaj:
    19
    Alınan Beğeniler:
    13

    Özel Mesaj
    Ellerine sağlık devrem . Html öğrenmek istiyorum link verebilirmisin?
     
  3. Trigged Guest

    • Guest
    Katılım:
    18 Şubat 2017
    Mesaj:
    2
    Alınan Beğeniler:
    2

    Özel Mesaj
    Çok iyi olmuş devrem ellerine sağlık devamını bekliyoruz
     
    ERVAH-I-EZEL bunu beğendi.
  4. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,802

    Özel Mesaj
    Devrem bu benim 3. html dersimdi devamı gelecek...
    Önceki derslere gitmek istiyorsan buyur devrem:
    İlk ders
    İkinci ders
     
    kayipruh, eraycan81100 ve Trigged bunu beğendi.
  5. xEmre Guest

    • Guest
    Katılım:
    16 Şubat 2017
    Mesaj:
    19
    Alınan Beğeniler:
    13

    Özel Mesaj
    sağol devrem
     
    ERVAH-I-EZEL bunu beğendi.
  6. Trigged Guest

    • Guest
    Katılım:
    18 Şubat 2017
    Mesaj:
    2
    Alınan Beğeniler:
    2

    Özel Mesaj
    Devrem ben yeni başladım senin derslerini takip ediyorum ne yapayım ilk önce neyden başlıyayım Teşekkürler.
     
    eraycan81100 bunu beğendi.
  7. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,802

    Özel Mesaj
    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... :(
     
  8. Manidar Guest

    • Guest
    Katılım:
    15 Aralık 2016
    Mesaj:
    17
    Alınan Beğeniler:
    13

    Özel Mesaj
    Geçmiş olsun devrem Allah acil şifalar nasip etsin.
     
    ERVAH-I-EZEL bunu beğendi.
  9. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,802

    Özel Mesaj
    Çok sağol devrem. Bugün biraz daha iyiyim. 3 güne yeni konu açacağım inşallah:)
     
  10. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    devrem eline sağlık çok güzel anlatmışsın.
     
  11. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    [​IMG] ilk denemem için iyimi devrelerim bir fikrinizi almak istedim ?
     
    kayipruh ve ERVAH-I-EZEL bunu beğendi.
  12. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,802

    Özel Mesaj
    Gayet iyi bir çalışma devrem. Yakında yeni konu geliyor takipte kal...;)
     
    kayipruh ve Mundy123 bunu beğendi.
  13. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    bekliyorum devrem geçmiş olsun bu arada.
     
    ERVAH-I-EZEL bunu beğendi.
  14. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    devrem şu tabloyu ne yaptıysam Koyduğum fotoğrafın üstüne çıkartamadım mümkünse yardım edebilirmisin ?
     
  15. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    [​IMG][/url][/IMG] [​IMG]
     
  16. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
  17. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,802

    Özel Mesaj
    Devrem "body" etiketinden sonra ilk tablo komutlarını yaz, "img" etiketlerini ve yazıları aşağıya at.
     
    Mundy123 bunu beğendi.
    • Guest
    Katılım:
    19 Şubat 2017
    Mesaj:
    168
    Alınan Beğeniler:
    28

    Özel Mesaj
    devrem html derslerinin 1 ve 2 linkini verirmisin baştan başlamak isitiyorum
     
  18. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,802

    Özel Mesaj
    1. Ders
    2.Ders
    Buyur devrem...
     
    43tcvatantc43 bunu beğendi.
  19. D1sLaNSeLoT Guest

    • Guest
    Katılım:
    3 Şubat 2017
    Mesaj:
    12
    Alınan Beğeniler:
    16

    Özel Mesaj
    Devrem dikkat edersen şu konunun başında belirtilmişdir İlk ders ve İkinci ders diye. Ordan baştan başlaya bilirsin.. ;)
     
    ForeverTURKEY ve ERVAH-I-EZEL bunu beğendi.
Konu Durumu:
Yanıtlara kapalı.

Bu Sayfayı Paylaş