Achievement 4 ( Kazanım Görevi 4 ) Markdown Uygulaması - @subconscious

in Newcomers' Community3 years ago (edited)

1.png
Kaynak
Arkadaşlar Merhaba,

Steemit'te sürekli yeni gönderiler paylaşıyoruz. İçerikler hazırlıyoruz. Şunu da bilmeliyiz ki ne anlattığımız kadar önemli olan bir şey varsa o da nasıl anlattığımızdır. Düşüncelerimizi döktüğümüz yazımızın nasıl göründüğüdür. Kaliteli içerik kavramı da aslında burada kendini göstermektedir.

Platformda paylaştığımız yazıların görsel içeriği; vurgulu kelimelerin kalınlığı, italikliği, tablo ilavelerimiz, link uzantı eklememiz, farklı yazı boyutları, farklı renkli yazma, yazı veya resim hizalamaları gibi düzenlemelerle çok daha kaliteli ve çekici olacaktır. Aynı zamanda takipçilerimizin sıkılmadan okuyacakları içeriklere zemin oluşturacaktır.

Bunun için bazı işaretler, bazı kodlar kullanmamız gerekmektedir. Bu yazımızda görevi tamamlamak için en az 5 farklı Markdown Kodu uygulayarak içerik oluşturmamız istense de ben daha fazla yaparak ve kodlarını da paylaşarak, diğer yeni arkadaşlara da, kaliteli içerik hazırlama konusunda yardımcı olmuş olmayı isterim..

Örneklerimize basitten başlamak gerekirse ve maddeler halinde sıralarsak;

  • Yazılarımızdaki paragrafların arasına satır boşluğu eklemek için
    <br> kodunu kullanabiliriz.

  • Bazı kelimeleri İTALİK veya KALIN veya ÜSTÜ ÇİZİLİ yazmak paragraftaki dikkati üzerine çekeceği için daha anlaşılır bir yazı olacaktır. bunlar için de aşağıdaki işaretleri kullanabilirsiniz.
    *İTALİK*
    **KALIN**
    ~~ÜSTÜ ÇİZİLİ~~

  • Yazımızda mutlaka farklı konularda paragraflar olacaktır. bunlar farklı başlıkları da olacaksa ve biz bu başlıkların farklı boyutlarda olmasını istiyorsak aşağıdaki gibi bir uygulama da yapabiliriz.

###### BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS
##### BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS
#### BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS
### BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS
## BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS
# BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS
Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır.

BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS
BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS

BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS

BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS

BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS

BAŞARI GÖREVİ 4 | TASK: APPLYING MARKDOWNS

  • Tamamen siyah renkli harflerden oluşan bir yazı yerine, başlıkların

    KIRMIZI RENKLE
    diğerlerinden ayrılmış bir yazı oluşturmak, göze daha çok hitap edecektir. Bunun için de alttaki komutu kullanmalıyız.
    <div class="phishy"> BURAYA YAZMALIYIZ. </div>

  • Tüm bu işaretleri veya kodları ayrı ayrı kullanabileceğimiz gibi bir arada uyumlu şekilde de kullanabiliriz. Bir örnekle göstermek gerekirse.

BAŞARI GÖREVİ 4 |
TASK:
APPLYING MARKDOWNS
not
Content Etiquette

##### *BAŞARI GÖREVİ* 4 | <div class="phishy">TASK:</div> APPLYING MARKDOWNS <div class="phishy">not</div> ~~*Content Etiquette*~~

  • Yazı düzeniyle ilgili olarak paragrafı hizalamadan bahsedecek olursak;
    1 Hiç bir kod girmediğimiz taktirde paragraf sadece sola yaslanır ve sağda kelimelerin uzunluğuna göre girintiler oluşur
    2 <center> PARAGRAF </center> Yazımızın başına ve sonuna yandaki kodları girersek yazımız ortalanacak ve çirkin birgörüntü ortaya çıkmayacaktır.
    3 <div class="text-justify"> PARAGRAF </div> Yazımızın başına ve sonuna yandaki kodları girersek yazımız iki tarafa da yaslanacak ve yine göz dolduran bir görünüm elde edilecektir.

Bu 3 örneğe sırasıyla yazımın en başındaki 3 paragrafta bakabilir, farkını görebilirsiniz.


  • Yazılarımızda farklı konulardaki paragraflar arasında ayraç kullanabiliriz. --- veya *** işaretleri kullanılmalıdır.
    ***
    ---

<div class='pull-left'> SOLDAKİ YAZI </div>
<div class='pull-right'> SAĞDAKİ YAZI </div>
Bazende sayfayı 2 sütuna bölerek yazılarımız yazabiliriz.

Bazende sayfayı 2 sütuna bölerek yazılarımız yazabiliriz. bu durumda böyle bir görüntü ortaya çıkacaktır. Bu görünümdeki düzen genel olarak çift dille yazılan postlarda kullanılmaktadır. Bu durumda yukarıdaki kodları kullanmalıyız.
Bazende sayfayı 2 sütuna bölerek yazılarımız yazabiliriz. bu durumda böyle bir görüntü ortaya çıkacaktır. Bu görünümdeki düzen genel olarak çift dille yazılan postlarda kullanılmaktadır. Bu durumda yukarıdaki kodları kullanmalıyız.

Yazılarımızda bazı durumlarda maddeler halinde yazmamız gereken durumlarda olabilir. Bunun için tek yapmamız gereken satırın başına yıldız ve boşluk koymaktır. * madde içinde alt madde oluştururken de aynı mantıkla 1
yazabiliriz.

  • İlk Maddemiz
    1 İlk Alt Maddemiz
    2 İkinci Alt Maddemiz
  • İkinci Maddemiz
  • Üçüncü Maddemiz

Küçük altbilgiler kullanmak için örneğin bunun gibi yazılarda kullanılabilir.
<sub> yazı </sub>
Küçük üstbilgiler kullanmak için örneğin bunun gibi yazılarda kullanılabilir.
<sup> yazı </sup>
Küçük altbilgi veya üstbilgilere link te eklenerekte örneğin bunun gibi kullanılabilir.
<sub>[yazı](link)</sub>


Harici bir bağlantının uzantısı görünmeden belirli cümle/kelime üzerine Link ekleyebiliriz.

[Harici bir bağlantının uzantısı görünmeden belirli cümle/kelime üzerine Link ekleyebiliriz. ](https://steemit.com/@subconscious)


Bazı durumlarda tablo oluşturmamız gerekebilir. Bunun için aşağıdaki kalıbı kullanmalıyız.
Bu kodların çıktısı ile altındaki tablolar oluşacaktır.

BAŞLIK | BAŞLIK
--------- | ----------
Satır 1 sütun 1 | Satır 1 sütun 2
Satır 2 sütun 1 | Satır 2 sütun 2

BAŞLIKBAŞLIK
Satır 1 sütun 1Satır 1 sütun 2
Satır 2 sütun 1Satır 2 sütun 2

BAŞLIK | BAŞLIK | BAŞLIK
| ------------- |-------------|-------------|
Satır 1 sütun 1 | Satır 1 sütun 2 | Satır 1 sütun 3 |
Satır 2 sütun 1 | Satır 2 sütun 2 | Satır 2 sütun 3 |
Satır 3 sütun 1 | Satır 3 sütun 2 | Satır 3 sütun 3 |

BAŞLIKBAŞLIKBAŞLIK
Satır 1 sütun 1Satır 1 sütun 2Satır 1 sütun 3
Satır 2 sütun 1Satır 2 sütun 2Satır 2 sütun 3
Satır 3 sütun 1Satır 3 sütun 2Satır 3 sütun 3

  • Zemini vurgulanmış bu şekildeki yazılarda yazabiliriz.
    `bu şekildeki`

  • Normalde kodun içeriğine bağlı olarak yazdığımız kod işlevini yerini getirecek ve metinimizde görünmeyecektir. Fakat isteyerek yazılara kod ekleyeceğimiz zaman ise <div class='pull-left'> </div> gibi kodumuz görünecektir.
    ```<div class='pull-left'> </div>```

Başka kişilerin cümlelerini alıntı yaparken ise böyle görünmelidir. Bunun için sadece > işareti koymamız yeterlidir.


Yazımıza GİF veya vedeo eklerken sadece tutup sürüklememiz yeterli olacaktır.

Kaynak


RESİM düzenlemelerinde ise; resimlerimiz boyutunu değiştirebilir, yazımızın içeriğine göre resmimizi sola veya sağa yaslayabiliriz.
<div class="pull-left">YAZI VEYA RESİM</div>
<div class="pull-right">YAZI VEYA RESİM</div>

Bu şekilde resminizi sola yaslayabilir, sağ tarafa da kendi yazınızı ekleyebilirsiniz.








Bu şekilde resminizi sağa yaslayabilir, sol tarafa da kendi yazınızı ekleyebilirsiniz.









🙋‍♂‍👇Yeni postum için takipte kalın & Sağlıcakla kalın...🙏

Kaynak belirtilmeyen resimler tarafıma aittir. Önceki postlarıma aşağıdaki linklerden göz atabilirsiniz..
İstanbul --- Piksel --- Sbd/Steem Market --- Dolunay --- 21 Mayıs --- 22 Mayıs
usfscsr.png
subconscious.png
Delegate Steem Power To @subconscious , Thanks..
10 SP20 SP50 Sp100 Sp

Sort:  

Merhaba;
Başarı göreviniz onaylandı.
Güzel bir yazı oldu. Başarı görevini yaptığınız için teşekkürler. Bir sonraki başarı görevine geçebilirsiniz.

rate; 3

 3 years ago 

Teşekkürler..

 3 years ago 

Thanks..

 3 years ago 

Hi, @subconscious,

Your post has been supported by @svm038 from the Steem Greeter Team.

Elimin altında devamlı bulunması gereken bilgiler harika. Teşekkürler.

 3 years ago 

Evet hepsi bir arada olması iyi oldu, bu görev benimde yararıma oldu yeni şeyler öğrendim :)

Coin Marketplace

STEEM 0.28
TRX 0.13
JST 0.032
BTC 66256.11
ETH 3036.39
USDT 1.00
SBD 3.73