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

Css Dersleri 2-yazı Biçimlendirme

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

  1. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,622
    Özel Mesaj
    Selâmün Aleyküm Devrelerim Css Derslerinde kaldığımız yerden devam ediyoruz. Önceki dersimizde genel bir başlangıç yapmıştık. Bu dersimizde ise yazılar üzerine
    yoğunlaşacağız.

    Css Dersleri 1

    Öncelikle isterseniz ana HTML kodlarımızı yazalım ve bir paragraf etiketi oluşturup içine yazı yazalım.

    HTML:
    <!Docytype html>

    <html>
        <head>
            <title>Css Ders 1 </title>
            <meta charset="Utf8">
            <style>
                p  {     }
            </style>
        </head>
        <body>
            <p>Css Web Tasarımda önemli bir dildir. Sayfamızı Görsellik Açısından güzelleştirmemizi sağlar</p>
        </body>
    </html>
    Şimdi biz bu paragraftaki yazıları farklı şekilde düzenleyebiliriz.

    1- Renkler

    Yazımızın rengini belirlemek için "color" kodu kullanılarak yazının rengini değiştireceğimizi belirtir ve yanına da rengimizin değerini yazarız. Yani şu şekildedir:

    HTML:
    p {color: Renk Değeri;}
    Renk değerini belirlemenin ise 3 yolu vardır.

    A-Tarayıcı Renk İsimleri

    İngilizce olarak belirlenmiş bazı renk adlarını yazarak renk elde edebilirsiniz. Örneğin white beyaz, black siyah, blue mavi rengini verecektir. Tarayıcıların kabul ettikleri toplam 140 renk ismi bulunmaktadır. Hepsini şu linkten öğrenebilirsiniz:
    https://www.w3schools.com/colors/colors_names.asp

    B-Hex Karakterler

    #000000 şeklinde yani önce diyez sonra 6 adet 0-9 ve A-F değerleri alabilen sembollerden oluşur. Örneğin #404040 bir rengi ifade etmektedir.

    C-RGB (Kırmızı,Yeşil, Mavi) Renkler

    Bir renk oluştururken kırmızı, yeşil ve mavinin tonlarını belirterek renk oluşturmamızı sağlar. Örneğin rgb( 0, 0, 0 ) siyah rengi belirtir. Mavi bir renk elde etmek istediğimizde Red - Green - Blue üçlemesinde en sonda yer alan mavinin değerini arttırmamız yeterli olur. Yani rgb( 0, 0, 255 ) mavi rengi verir.

    Hex Karakterler veya RGB kodları detaylı tonlamalı renkler oluştururken kullanılır. Tarayıcı renk isimleri çoğunlukla kullanıcıya yeterli gelmez. Hex ve RGB kodlarını internetten araştırarak veya photoshop, paint gibi programlar aracılığı ile bulabilirsiniz.

    Örnekler:
    HTML:
    
p {color:lightgreen;}
p {color:rgb(50, 100, 150)}
p {color:#990033;}

    2- Yazı Türü Belirleme

    Yazıların türlerini belirlemek için "font-family" kodu kullanılır ve yanına da yazının türü (Arial, Verdena vs.) belirlenir.

    HTML:
    p { font-family:arial; }
    Şeklinde bir kod ile yazımız "arial" türünde gözükecektir. Fontların listesini internetten araştırıp beğendiklerinizi web sitenizde veya hazırladığınız indexlerde kullanabilirsiniz.

    3- Yazının Kalın veya Eğik Görünmesi

    Bu ikisini HTML ile de yapmasını öğrenmiştik ancak Css ile de yapılabiliyor.

    A- Font-Weight

    "Normal" veya "Bold" olarak iki değer alabilir. "Normal" zaten varsayılan bir değerdir. "Bold" yazının kalın görünmesini sağlar. Örnek:

    HTML:
    p {font-weight:bold;}
    B- Font-Style

    Bu da "Normal" veya "İtalic" olarak iki değer alabilir. "Normal" yine varsayılan değerdir. "İtalic" yazının eğik görünmesini sağlar. Örnek:

    HTML:
    p {font-style:italic;}
    4- Yazı Boyutlandırmaları

    Yazıların boyutlandırmaları farklı şekillerde sağlanabilir.

    % : yüzde olarak belirtmek
    in : inç olarak belirtmek
    cm : santim olarak belirtmek
    mm : milimetre olarak belirtmek
    pt : punto olarak belirtmek
    px : piksel olarak belirtmek için kullanılırlar.

    A-Yazının Büyüklüğünü Belirleme (Font-Size)

    Örneğin bir başlık oluşturmak için en büyük HTML etiketi "h1" etiketidir. Eğer daha büyük başlıklar oluşturmak isteniyorsa bunu Css ile yapabileceksiniz. Örnek:

    HTML:
    p {font-size:3%;}

p {font-size:2in;}
p {font-size:5cm;}
p {font-size:50mm;}
p {font-size:10pt;}
p {font-size:4px;}
    B- Satır Boşluğu (Line-Height)

    Satırlar arası yüksekliği belirlemek için kullanılır. Örnek:

    HTML:
    p {line‐height:30px;}
    C- Kelime Boşluğu (Word-Spacing)

    Kelimeler arası boşluğu belirlemek için kullanılır. Örnek:

    HTML:
    p {word-spacing:3pt;}
    D- Harf Boşluğu (Letter-Spacing)

    Harfler arası boşluğu belirlemek için kullanılır.

    HTML:
    p {letter-spacing:2px;}
    5- Girinti Oluşturma (Text-İndent)

    Özellikle "paragraf başı" dediğimiz yerlerde içe doğru bir girinti oluşturmak için kullanılır. Tıpkı yazı büyüklüğünde olduğu gibi farklı şekillerde belirtilebilir. Örnekler:

    HTML:
    p {text-indent:5pt;}

p {text-indent:15cm;}
p {text-indent:25px;}
    6- Yazıyı Yaslama

    Bir yazının sağa(right), sola(left), ortaya(center) veya her iki yana(justify) birden yaslanmasını sağlar. Örnekler:

    HTML:
    p {text-align:right;}

p {text-align:left;}
p {text-align:center;}
p {text-align:justify;}
    7- Büyük-Küçük Harf Ayarı (Text-Transform)

    Kelimelerdeki harflerin büyüklüğü ve küçüklüğünü ayarlamamızı sağlar.

    capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
    uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
    lowercase :Kelimelerin bütün harflerinin küçük olmasını sağlar.
    none : Kelimelerin orjinal metindeki gibi olmasını sağlar.

    Örnek:

    HTML:
    p {text‐transform: capitalize;}
    8- Yazıda Çiziklik (Text-Decoration)

    Bir yazının altının çizili olması(underline), üstünün çizili olması(overline), ortasından(line-through) veya çizili olmamasını (none)sağlar. "None" varsayılan değerdir ancak linklerde değildir. Bir linkin altının çizili olmamasını istiyorsak kullanmamız gereklidir. Örnekler:

    HTML:
    p {text-decoration:underline;}

p {text-decoration:overline;}
p {text-decoration:line-through;}
p {text-decoration:none;}


    Yazı ile ilgili komutlarımız bu kadar. Bir de bugünkü dersimizde öğrendiklerimizle ilgili bir örnek yapmak istiyorum. Bir paragrafımız olsun ve;

    -Rengi koyu kırmızı tarayıcı renk isimleri ile;
    -Yazı türü "Tekton Pro";
    -Yazı büyüklüğü değişmesin;
    -Satırlar arası 2 cm olsun;
    -50 piksel girintili;
    -Yazı sağ tarafa yaslı;
    -Yazıdaki kelimelerin ilk harfleri büyük;
    -Ve yazımızın altı çizili olsun.

    Hadi yapalım...

    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>
    Bakalım nasıl bir şey yapmışız? Hemen görüntüleyelim.

    [​IMG]

    Gördüğünüz üzere gayet iyi bir sonuç elde etmiş olduk.

    Evet sevgili devreler, bu dersimizin de sonuna geldik. Hızlı hızlı ilerlemeye devam edeceğiz. Emeğe saygı beğenmeyi ve yorum yapmayı unutmayın. Hoşçakalın... ;)
     
    ERVAH-I-EZEL, 27 Nisan 2017
    #1
    asaturan, Al0, doctor-paradox ve 8 kişi daha bunu beğendi.
  2. SahQahnaarin Guest

    • Guest
    Katılım:
    29 Kasım 2016
    Mesaj:
    719
    Alınan Beğeniler:
    986
    Meslek:
    Öğrenci
    Özel Mesaj
    Anlatım için teşekkürler.
     
    SahQahnaarin, 27 Nisan 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,622
    Özel Mesaj
    ERVAH-I-EZEL, 4 Mayıs 2017
    #3
  4. TETİK Atıldı

    • Guest
    Katılım:
    27 Aralık 2015
    Mesaj:
    1,474
    Alınan Beğeniler:
    1,225
    Meslek:
    Memur
    Özel Mesaj
    Ellerine sağlık bilgilendirici bir çalışma oluyor. Özgün yorumların ile daha da kolaya indirgenmiş ve daha anlaşılır bir eğitim :)
     
    TETİK, 5 Mayıs 2017
    #4
    Network44 ve ERVAH-I-EZEL bunu beğendi.
  5. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,622
    Özel Mesaj
    Bu değerli yorumunuz için çok teşekkür ederim yüzbaşım. :)
     
    ERVAH-I-EZEL, 5 Mayıs 2017
    #5
    TETİK bunu beğendi.
  6. eraycan81100 Guest

    • Guest
    Katılım:
    24 Mayıs 2017
    Mesaj:
    15
    Alınan Beğeniler:
    10
    Özel Mesaj
    devrem bısey sorucagım sana sımdı html dosyası olarak yazarkenkı kodları kullandık css ustunde yazıyı belırlı bır yere kaydırma resmı saga sola uste arkaya kaydırma gıbı ıslemler css de yapılıyor sanırım ? haksızmıyım bılgılendırırsen cok tesekkur ederım.
     
    eraycan81100, 31 Mayıs 2017
    #6
    ERVAH-I-EZEL bunu beğendi.
  7. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,622
    Özel Mesaj
    Evet devrem. Ama Html üzerinde de "Align" parametresi ile "Yukarı, Aşağı, Sağ, Sol, Merkez" şeklinde ayarlamalar yapılabiliyor. Html'de align kullanımına Google üzerinden bakabilirsin.

    Css ile ek olarak detaylı bir posizyon belirtilebilir. Mesela "Yukarıdan 300 piksel aşağı, sağdan 250 piksel uzak" gibi bir detaylı yönlendirme yapılabilir. Yardımcı olmuşumdur umarım. ;)
     
    ERVAH-I-EZEL, 31 Mayıs 2017
    #7
    eraycan81100 bunu beğendi.
  8. eraycan81100 Guest

    • Guest
    Katılım:
    24 Mayıs 2017
    Mesaj:
    15
    Alınan Beğeniler:
    10
    Özel Mesaj
    saolasın devrem ozel mesaj yok olsaydı senden orenecegım cok sey var tekrar saolasın bu ara da forumdakı paylasımların cok ısıme yaradı saolasın:)
     
    eraycan81100, 31 Mayıs 2017
    #8
    ERVAH-I-EZEL bunu beğendi.
  9. eraycan81100 Guest

    • Guest
    Katılım:
    24 Mayıs 2017
    Mesaj:
    15
    Alınan Beğeniler:
    10
    Özel Mesaj
    devrem bırde dream weaver hakkında bılgın vars a paylasabılırmısın hanı css kodlarındakı ısleyıs hakkında ornegın yazıyı belırlı bı yere cıkarmak yada resmı yazının kosesıne koyup yazıyı resme kadar getırmek gıbı yardımcı olursan sımdıden saol
     
    eraycan81100, 31 Mayıs 2017
    #9
    ERVAH-I-EZEL bunu beğendi.
  10. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,622
    Özel Mesaj
    Tam olarak anlamadım devrem açıklar mısın biraz?
     
    ERVAH-I-EZEL, 1 Haziran 2017
    #10
  11. eraycan81100 Guest

    • Guest
    Katılım:
    24 Mayıs 2017
    Mesaj:
    15
    Alınan Beğeniler:
    10
    Özel Mesaj
    devrem ben dream weaver ındırdım de sımdı css de tam bır bılgım yok ve acıkcası kafam karıstı bu programa gecınce hanı html ıle yazdımız bır sıteyı ornegın bır ıkı resmın yerını degıstırmek ıcın nasıl bır ıslem uygulayacagız v.s kusuruma bakma sanırım bıraz zor anlıyorum ılgılenırsen tesekkurler
     
    eraycan81100, 2 Haziran 2017
    #11
    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,622
    Özel Mesaj
    Anladım devrem, o dediğini yapmayı ilerleyen konularda öğreneceğiz, burada 2-3 satırla anlatılabilecek bir şey değil çünkü. Bu aralar hack konularıma çok ilgi geliyor bu yüzden Web Tasarım konularını yazmak için vakit bulamıyorum. Bu konuları öğrenmek istediğini ama çok bir şey bilmediğini söylüyorsun. En temelden konularım vardır sırayla takip etmeni öneririm.

    Giriş Bilgiler:

    Web Programlama Dilleri ve Kullanıldıkları Yerler:

    https://forum.ayyildiz.org/konu/web-programlama-dilleri-ve-kullanıldıkları-yerler.81785/

    Asp.Net ve Php'nin Özellikleri:

    https://forum.ayyildiz.org/konu/asp-net-ve-phpnin-Özellikleri.82068/

    Web Editörleri:

    https://forum.ayyildiz.org/konu/web-editörleri.83155/

    Html Dersleri:

    Html Dersleri 1-Giriş ve İlk Sayfa:

    https://forum.ayyildiz.org/konu/html-dersleri-1-giriş-ve-ilk-sayfa.83727/

    Html Dersleri 2-Yazı Etiketleri:

    https://forum.ayyildiz.org/konu/html-dersleri-2-yazı-etiketleri.84006/

    Html Dersleri 3-Resimler ve Linkler:

    https://forum.ayyildiz.org/konu/html-dersleri-3-resimler-ve-linkler.85209/

    Html Dersleri 4-Tablolar ve Listeler:

    https://forum.ayyildiz.org/konu/html-dersleri-4-tablolar-ve-listeler.86395/

    Html Dersleri 5-Form Etiketleri:

    https://forum.ayyildiz.org/konu/html-dersleri-5-form-etiketleri.87889/

    Html Dersleri 6-Frames(Çerçeveler):

    https://forum.ayyildiz.org/konu/html-dersleri-6-frames-çerçeveler.92252/

    Html Dersleri 7-Video-Ses-Flash ve Göstergeler:

    https://forum.ayyildiz.org/konu/html-dersleri-7-video-ses-flash-ve-göstergeler-son-konu.95895/

    Css Dersleri:

    Css Dersleri 1-Giriş:

    https://forum.ayyildiz.org/konu/css-dersleri-1-giriş.98914/

    Css Dersleri 2-Yazı Biçimlendirme:

    https://forum.ayyildiz.org/konu/css-dersleri-2-yazı-biçimlendirme.99549/

    Css Dersleri 3-Div ve Span Etiketleri:

    https://forum.ayyildiz.org/konu/css-dersleri-3-div-ve-span-etiketleri.100666/

    Css Dersleri 4-Arkaplanlar:

    https://forum.ayyildiz.org/konu/css-dersleri-4-arkaplanlar.102497/

    Css Dersleri 5-Tabloları Özelleştirme:

    https://forum.ayyildiz.org/konu/css-dersleri-5-tabloları-Özelleştirme.104438/

    Css üzerinden devam ediyorum devrem. Youtube ile de videolu kaynaklardan yararlanabilirsin. İyi günler...
     
    ERVAH-I-EZEL, 2 Haziran 2017
    #12
    eraycan81100 bunu beğendi.
  13. TeaMStaR2071 Guest

    • Guest
    Katılım:
    8 Eylül 2020
    Mesaj:
    37
    Alınan Beğeniler:
    39
    Özel Mesaj
    Youtube ile de videolu varmi
     
    TeaMStaR2071, 8 Eylül 2020
    #13
  14. TeaMStaR2071 Guest

    • Guest
    Katılım:
    8 Eylül 2020
    Mesaj:
    37
    Alınan Beğeniler:
    39
    Özel Mesaj
    yada program varmi
     
    TeaMStaR2071, 8 Eylül 2020
    #14

Bu Sayfayı Paylaş