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.

Css Dersleri 3- Div Ve Span Etiketleri

'Html - CSS - XML - JavaScript - Ajax' forumunda ERVAH-I-EZEL tarafından 4 Mayıs 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,848
    Özel Mesaj
    Tekrar merhabalar. Css Dersleri'nde kaldığımız yerden devam ediyoruz. Önceki dersimizde Css'de yazılarla ilgili pek çok şey öğrendik ve güzel bir çalışma oluşturduk. Bu dersimizde ise bazı teorik ama önemli bilgileri öğreneceğiz. İsterseniz hemen başlayalım.

    Css Dersleri 1
    Css Dersleri 2

    Div ve Span Etiketleri

    Bu etiketlerin ikisi de herhangi bir Css kodu değil, Html etiketidir. Ancak bu etiketlerin ne işe yaradığını anlamak için biraz da olsa Css bilmek gerekiyor.

    1- Div Etiketi

    A- Nedir, Ne İşe Yarar, Nasıl Kullanılır?

    Bir Web Sitenin kodlarını incelediğimizde bu etiket ile sık sık karşılaşırız. "Div" Etiketi blok seviye bir etikettir. Bu ne demek? Hemen bir örnek ile inceleyelim.

    İlk önce temel Html ve Css kodlarımızı yazarak bir sayfa oluşturalım. Daha sonra da bir "div" etiketi içerisine "Ayyıldız Tim" yazısını yazalım.

    HTML:
    <!Docytype html>

<html>
          <head>
                    <title>Css Ders 3 </title>
                    <meta charset="Utf8">
                    <style>
            
                    </style>
          </head>
          <body>
                     <div>Ayyıldız Tim</div>
          </body>
</html>
    Şu anlık yaptığımız şey sadece sayfamıza "Ayyıldız Tim" yazmak oldu. Ama şimdi yazacağımız kodlar ile div etiketinin ne işe yaradığını anlayacaksınız. Öncelik "style" etiketi içerisine "border-style:solid;" kodunu yazalım. Bu kodun ne işe yaradığını siz henüz bilmiyorsunuz. İleriki derslerde öğreneceğiz. Şimdilik sadece çerçeve oluşturmak için kullanıldığını bilin yeter.

    HTML:
    div { border-style:solid; }
    Evet, şimdi göreceğimiz şey önemli. Dikkatle bakın:

    [​IMG]

    Biz iki kelimelik bir yazı yazmamıza rağmen çerçevemiz bu iki kelimenin çevresinden değil, bütün satırı komple çevreledi. Div etiketinin kullanımı bu. "Eee, bu benim ne işime yarayacak?" sorunuzu başka bir soru ile cevaplıyorum. "Biz şimdi ne yaptık?"
    Hemen açıklanmaya geçiyorum.

    Biz, "Ayyıldız Tim" yazısını bir nevi kutucuk içine hapsettik. İstersek bu kutucuğu başka bir yere taşıyabilir, kutucuğun arkaplan rengini değiştirebilir, konumlandırabiliriz. Yani "div" etiketi ile Css kodlarımızı daha etkin kullanabiliriz.

    B- Div Etiketinde İd ve Class Parametreleri

    İleriki derslerde bazı şeyleri öğrendiğimiz zaman div etiketini sıkça kullanmaya başlayacağız ve web sayfamızda birden fazla div etiketi kullanacağız. "İd" ve "Class" daha önceden öğrendiğimiz gibi Html'nin birer parametresidir ancak div etiketi ile kullanıldığında farklı bir işlevi üstleniyorlar. Hemen bir örnekle anlatalım:

    Varsayalım ki bir web sayfamızda 3 tane div etiketi kullandık ve hepsine "Ayyıldız Tim" yazısını yazdık. Şimdi bu div etiketlerindeki yazıların birinin kırmızı, diğerinin mavi, öbürünün ise yeşil olmasını istiyoruz. Eğer biz şöyle bir kod yazarsak:

    HTML:
    div { color:red; }
    Üç div etiketi de kırmızı görünecektir ya da;

    HTML:
    div { color:blue; }
    Üç div etiketi de mavi görünecektir. Bizim bu divleri farklı renklerde göstermemiz için bir div etiketine özel bir "id" atamamız lazım. Örnek:

    HTML:
    <div id="renk1">Ayyıldız Tim</div>

<div id="renk2">Ayyıldız Tim</div>
<div id="renk3">Ayyıldız Tim</div>
    Daha sonra "style" içine Css kodlarımızı şöyle düzenleyebiliriz:

    HTML:
    #renk1 { color:red; }

#renk2 { color:blue; }
#renk3 { color:green; }
    Böylece yazılar sırasıyla kırmızı, mavi, yeşil olacaktır. İd kullanımı bu şekilde. "Class" da benzer bir görevi üstleniyor. Onu da bir örnek üzerinden açıklayalım.

    Varsayalım ki dört adet div etiketimiz var ve yine hepsinin içinde "Ayyıldız Tim" yazısı yazma ile beraber, bu sefer iki yazının turuncu; iki yazının sarı olmasını istiyoruz. Bunu yapmak için "id" değerini kullanabiliriz. Ancak bu fazla kod yazmamıza sebep olur ve kod kirliliğine sebep olacaktır. Bunun yerine şöyle bir şey yapabiliriz.

    HTML:
    <div class="renk4">Ayyıldız Tim</div>

<div class="renk4">Ayyıldız Tim</div>
<div class="renk5">Ayyıldız Tim</div>
<div class="renk5">Ayyıldız Tim</div>
    Şimdi bu divlerin iki tanesini "renk4" , iki tanesini "renk5" adlı bir değere attık. Ve "style" içine Css kodlarımızı yazıyoruz:

    HTML:
    .renk4 {color:orange; }

.renk5 {color:yellow;}
    Böylece yazıların iki tanesi turuncu, iki tanesi sarı oldu. Bu yaptığımızı "id" ile yapsaydık yazacağımız kodlar çoğalacaktı.

    [​IMG]

    2- Span Etiketi

    Hatırlarsanız önceki dersimizde şöyle bir çalışma yapmıştık:

    HTML:
    <!Docytype html>


    <html>
              <head>
                        <title>Css Ders 1 </title>
                        <meta charset="Utf8">
                        <style>
                                   p  {color:darkred;
                                  font-family:tekton pro;
                                  line-height:2cm;
                                 text-indent:50px;
                                 text-align:right;
                                 text-transform:capitalize;
                                 text-decoration:underline;}
                       </style>
               </head>
               <body>
                         <p>Şan ve şeref dolu Tarihimiz;
Ayyıldız Tim 2002 yılında kurulmuş olup,

Türkiye ye karşı internet üzerinden karşıt güçler tarafından yapılan ve yapılacak olan siber saldırılara karşı gönüllü olarak lobi faaliyeti sürdüren bir organizasyondur.

Ayyıldız Tim bu faaliyetlerinde, özellikle ülkemizi hedef alan ülke ve unsurları   belirleyerek, planlanan veya yapılacak olan herhangi bir saldırıya karşı cevap   vermeyi kendine görev edinmiştir.

Kuruluş amacımızın en önemli unsuru Devletçilik olmuştur. Ülkemizin kurumlarına, devlet adamlarına, manevi değerlerimize yapılan saygısızlıkları ülkemizin bütünlüğüne yapılan bir saldırı olarak görürüz ve ona göre adımlarımızı belirleriz.

Başta İstihbarat Birimlerimiz olmak üzere, Emniyet teşkilatımıza, Askeri ordumuza karşı yapılmış olan herhangi bir hareketi kabullenmemiz mümkün değildir. Ayyıldız Tim olarak internet sitemizde veya facebook’daki sayfamızda kesinlikle siyasi konulara izin verilmeyecektir, aksi olduğu durumlarda derhal gereken tedbirler alınıp, olaylara bulaşan kişiler sayfadan uzaklaştırılacaklardır.

Ayyıldız Tim birlik ve beraberlik yanlısı olarak varlığını sürdürerek, ırkçılıktan uzak, Edirne’den Kars’a kadar ülkemizi seven herkesi tek bir çatı altında birleştirmeyi amaçlamaktadır.</p>
              </body>
    </html>
    [​IMG]

    Bu yazımızda özellikle bir kelimeyi veya kelime grubunu özelleştirmek istiyorsak bu grubu "span" etiketi içerisine alırız. Biz şu kısmı örnek alalım:

    HTML:
    <span>Askeri ordumuza karşı yapılmış olan herhangi bir hareketi kabullenmemiz mümkün değildir.</span>
    Daha sonra "style" etiketi içerisinde istediğimiz gibi özelleştirelim:

    HTML:
    span {color: black; font-weight:bold; font-family:arial; }
    Şimdiki sonucumuz:

    [​IMG]

    Span etiketinin kullanımı da bu şekildedir.

    Evet sevgili devrelerim, bu dersimizin de sonuna geldik. Bu dersteki bilgileri öğrenmemiz gerekiyordu, önemli bilgiler. Bir sonraki derste daha eğlenceli işlemler yapıp web sayfamızı geliştirmeye devam edeceğiz. Yorumlarınızı bırakmayı ve konuya beğeni atmayı unutmayın. :) İyi forumlar...
     
    ERVAH-I-EZEL, 4 Mayıs 2017
    #1
    DrMehmet, doctor-paradox, Dnarib ve 6 kişi daha bunu beğendi.
  2. oyuncu_king Atıldı

    • Guest
    Katılım:
    13 Ocak 2017
    Mesaj:
    133
    Alınan Beğeniler:
    134
    Özel Mesaj
    Ağzına sağlık devrem. Konularını sırayla okudum, okuyorum. Devamı için takipteyim. :D
    Bu arada devrem senin bu konuların web tasarım ile ilgili ya hiç hacking ile ilgili konuların var mı varsa link atar mısın? Teşekkürler...
     
    oyuncu_king, 8 Mayıs 2017
    #2
    ERVAH-I-EZEL bunu beğendi.
  3. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,848
    Özel Mesaj
    Hacking ile ilgili konularım da var, başlayalı çok olmadı daha. Hemen link vereyim sana.

    Wifi Hackleme:

    Dev Hack Arşivi V1:

    1. Düzey Hack Dersleri #1-Başlangıç:

    1. Düzey Hack Dersleri #2-Temel Hack Terimleri

    1. Düzey Hack Konuları devam etmekte, takipte kal devrem. İyi forumlar... ;)
     
    ERVAH-I-EZEL, 8 Mayıs 2017
    #3
    oyuncu_king bunu beğendi.
  4. psikososyal Guest

    • Guest
    Katılım:
    13 Mayıs 2017
    Mesaj:
    45
    Alınan Beğeniler:
    25
    Özel Mesaj
    Devrem Allah işini rast getirsin, bunları en iyi öğrenme yolu nedir? Açıklarsan sevinirim
     
    psikososyal, 14 Mayıs 2017
    #4
  5. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,848
    Özel Mesaj
    ERVAH-I-EZEL, 14 Mayıs 2017
    #5
  6. psikososyal Guest

    • Guest
    Katılım:
    13 Mayıs 2017
    Mesaj:
    45
    Alınan Beğeniler:
    25
    Özel Mesaj
    Sağolasın devrem.
     
    psikososyal, 14 Mayıs 2017
    #6
    ERVAH-I-EZEL bunu beğendi.
  7. psikososyal Guest

    • Guest
    Katılım:
    13 Mayıs 2017
    Mesaj:
    45
    Alınan Beğeniler:
    25
    Özel Mesaj
    Senin html derslerinle öğrenebilceklerim sınırlı anladığım kadarıyla, web hack te senin derslerin yeterli olmazmı ?
     
    psikososyal, 14 Mayıs 2017
    #7
    ERVAH-I-EZEL bunu beğendi.
  8. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,848
    Özel Mesaj
    Buradan öğrendiklerinle kendi web siteni yaparsın. Ama web site program vs. ile de yapılır. Web hack konularıyla hack öğrenirsin. Ama hack programla yapılmaz. ;)
     
    ERVAH-I-EZEL, 14 Mayıs 2017
    #8
  9. Kentaur Guest

    • Guest
    Katılım:
    24 Ocak 2021
    Mesaj:
    2
    Alınan Beğeniler:
    0
    Özel Mesaj
    Devrem eline sağlık.Div etiketini daha ayrıntılı öğrenebileceğim bi konu var mı,varsa linkini atabilir misin?
     
    Kentaur, 19 Şubat 2021
    #9
  10. AYDOĞAN TÜMGENERAL

    • Forum Denetleme Gözlem Komutanı
    Katılım:
    11 Ağustos 2012
    Mesaj:
    12,308
    Alınan Beğeniler:
    59,039
    Meslek:
    Defender Ayt
    Özel Mesaj
    2017 de açılmış konu .
     
    AYDOĞAN, 19 Şubat 2021
    #10
    8ur4kk05e ve Orion-Pax bunu beğendi.
Konu Durumu:
Yanıtlara kapalı.

Bu Sayfayı Paylaş