Bloggerlar için bilinmesi gereken basit HTML öğretisi

22 Ocak, 2017
Bloggerlar için bilinmesi gereken basit HTML öğretisi
Basit HTML kodları
HTML'de kalın harf kodu nedir? HTML'de yazıların altını nasıl çizgili yaparız? HTML'de resim kodu nedir? Tıklandığında yeni sekmede açılan link kodu nedir? gibi bilinmesi gereken basit HTML kodları...

Sevgili dostlar bir Google ürünü olan Blogger'ı çoğumuz kullanmaktayız. Gerçi bu yazımda yer verdiğim basit HTML kodları, Wordpress gibi bir çok platformda da işinize yarayacaktır. İnternet sitelerinde gördüğünüz her şey tamamen kodların eklenmesiyle oluşur. Yazıların boyutu, rengi, resimlerin ölçüleri, slaytlar kısacası her şey. Blogger ve Wordpress gibi hiç kodlarla uğraşmadan içerik eklediğimiz sistemler, bu konuda bizlere büyük avantaj sağlamakta. Örneğin içerik eklediğimiz bölümde hiç kod kısmına bulaşmadan yazıların rengini, boyutunu, fontunu kısa sürede bir kaç adımla dilediğimiz gibi değiştirebiliyoruz. Resim, video ekleyebiliyor ve dilediğimiz sayfaya link verebiliyoruz. Hiç kod bilgisi olmadan yaptığımız tüm bu işlemlerin arka planda nasıl kodlandığını görmek ve incelemek oldukça basittir aslında.
Bloggerlar için bilinmesi gereken basit HTML öğretisi
Blogger HTML bölümü
Yukarıda paylaştığım resimde gördüğünüz gibi, şu an yazdığım bu yazının kod kısmında nasıl göründüğünü merak edersem eğer sol üst köşede olan HTML butonuna tıklamam yeterli. Buraya kadar olan yazımda ne kalın harf ne italik yazı, ne de link verme gibi eklemeler olmadığı için kodlar arasında pek ekstra bir şey olmayacak. Ama yazı içerisine video, resim eklediğimizde, yazıların görünümü ile oynadığımızda kod kısmı biraz daha farklı görünecektir. Bu şekilde inceleme yaparak ufak tefek kodları öğrenmemiz mümkün. Hemen örnek vererek ilerleyelim:

Kişisel Blog ⟶ Bu normal bir yazı, herhangi ekleme olmadığı için olduğu gibi görünüyor.

Kişisel Blog ⟶ Kalın yaptım. Kodlar arasındaki görünümü şu:
<b>Kişisel Blog</b> Demek ki bir kelimeyi veya cümleyi kalın harfli yapmak için başına <b> sonuna </b> ekliyoruz.
Kişisel Blog ⟶ Renkli yaptım. Kodlar arasındaki görünümü şu:
<span style="color: red;">Kişisel Blog</span> Burada style kodu devreye girdi. Tabi farklı kodda var ama Blogger bu şekilde yapmış.
Kişisel Blog ⟶ İtalik yaptım. Kodlar arasındaki görünümü şu:
<i>Kişisel Blog</i> Buradan da anlıyoruz ki HTML'de yazıyı italik yapmak için başına <i> sonuna ise </i> ekliyoruz.
Kişisel Blog ⟶ Altı çizili yaptım. Kodlarda şu şekilde:
<u>Kişisel Blog</u> Altı çizili yapmak için başına <u> sonuna </u> eklemeliyiz.
Kişisel Blog ⟶ Son olarak yazıyı büyütelim. Kodları ise:
<span style="font-size: large;">Kişisel Blog</span> Boyutunda değişiklik yapmak için ise gördüğünüz gibi font-size: large; kodu eklendi.

Şimdi bu yazıya 3 çeşit link kodu ekleyelim.

1. İlk kodda yazıya ya da kelimeye link ekleyelim ve tıklandığında bir adrese gitsin olduğu gibi.
Kişisel Blog ⟶ Gördüğünüz gibi link ekledim ve tıklandığında benim bloguma yönlendiriyor. Kodu ise:
<a href="http://blogtecrubem.blogspot.com/">Kişisel Blog</a> Buradan anlaşılacağı gibi link vermek istediğimiz kelimenin başına <a href="link-vermek-istediğiniz-adres"> sonuna ise </a> kodunu ekliyoruz.
2. Şimdi tekrar link ekleyeceğim ama bu sefer tıklandığında yeni bir sekmede sayfayı açmasını istiyorum.
Kişisel blog nedir ⟶ Yine aynı şekilde link verdim ama bu sefer tıklandığında yeni bir sayfa, sekmede açılıyor. Kodu ise:
<a href="http://blogtecrubem.blogspot.com/" target="_blank">Kişisel Blog</a> Gördüğünüz gibi bir önceki kodun aynısı sadece target="_blank" kodu ekstra olarak eklenmeli.
3. Son olarak yine link vereceğim. Bu sefer tıklandığında yeni sekmede açılacak ve nofollow kodu olacak. Nofollow kodu ile arama motorlarının örümceklerinin o linki takip etmesini engelleyeceğim. Yani SEO konusunda kendi sitemin değerini düşürmeyeceğim.
Kişisel Blog ⟶ Evet linki ekledim. Yeni sekmede açılıyor ve nofollow kodu var. Kodu ise:
<a href="http://blogtecrubem.blogspot.com/" rel="nofollow" target="_blank">Kişisel Blog</a> Gördüğünüz gibi buradaki değişim ise rel="nofollow" kodu.
Evet yukarıda, yazıların görünümüyle boyutuyla oynadım ve link verme işlemlerinin nasıl gerçekleştiğinden bahsettim. Şimdi sık kullanılan Youtube videolarını eklemeden ve boyutlarıyla oynamaktan bahsedeyim.

Yukarıdaki video butonu ile ya da direk Youtube'dan iframe kodunu alarak yazı içerisinde video ekledik. Kodlar arasında görünümü aşağıdaki gibi olacaktır.
<iframe width="320" height="266" class="YOUT...
Bu iframe kodunun arasında width ve height kodları videonun genişliğini ve uzunluğunu belirten kodlar. Yani videonun genişliğini ayarlamak için 320 değeriyle oynamamız gerekir. Aynı şekilde uzunluğu için ise 266 değeri ile oynamamız gerekir.

Şimdi son olarak HTML resim kodundan da bahsedelim ve yazımı sonlandırayım. Yazı içerisine resim eklediğinizde kodlar arasında uzun bir paragraf kod vardır. Ama HTML'de resim kodu oldukça basittir ve aşağıdaki gibidir.
<a href="#"><img src="resim-adresi" alt="resim için alt bilgi"></a>
Yukarıdaki kodda img src resmi çağırdığımız kısımdır. Eklemek istediğimiz resmin linki buraya yazılır. href kodu ise resme tıklandığında gitmesini istediğimiz linkin eklendiği kısımdır. Son olarak alt kodu ise resmin üstüne mouse ile geldiğimizde tıklamadan bize görünen yazıdır.

Yine uzun bir yazı oldu...

Evet bu yazımda bu kadardı. Öğrenmek istediğiniz ve yazmayı unuttuğum başka basit HTML kodları varsa yorum yaparak belirtebilirsiniz.

5 yorum:

  1. Merhaba hocam ben boş bir blogger temasına widget eklemek istiyorum ,ama kodları bilmiyorum eğer siz biliyorsanız kodları verebilirmisiniz.

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, sorunuzu anlayamadım. Widget "alanı" mı eklemek istiyorsunuz?

      Sil
    2. Bir kaç eklemeyle oluşan bir konu bu. Yayın olarak detaylı bir şekilde paylaşmam daha doğru olur diye düşünüyorum. Ama şu yazıda size yardımcı olabilir "http://eklentiblogger.blogspot.com.tr/2013/01/blogger-gadget-alani-ekleme.html"

      Sil
    3. Teşekkürler hocam. İyi geceler.

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.