Merhaba sevgili Türk Hack Team Ailesi, bugün sizlerle bu yazım eşliğinde bildiğim ve edinebildiğim tüm bilgilerimi aktarmak için web kodlama anlatımıma giriş yapacağım. Umarım hepiniz okumaya layık görürsünüz.
)
Arkadaşlar öncelikle neden web seçmeliyiz? Yani o kadar seçenek var iken sen neden web seçtin biz neden web seçelim gibi sorularınızı cevaplamak ve yapabildiğim ölçütte bu sorular hakkında bilgi vermek ile başlamak istiyorum. Tüm web kodlama derslerim boyunca hiç bilgisi olamayan, çok az bilgisi olan arkadaşların düzeyine önem vereceğim ki, onlar içinde güzel bir başlangıç güzel bir ışık tutabiliriz arkadaşlar.
Neden Web Kodlama Tercih Edilmeli?
Web dilleri özellikle Html ve Css gibi frontend diller kodlamaya başlamak için birebir olduğunu düşünüyorum. Öğrenimi inanın çok kolay ve eğlencili bir dil olan Html ve Css 'de en güzel yanlardan biri ise tamamiyle özgür olmanızdır. Web kodlamada özgürlük mümkündür, bir uzunluğu büyük verirsiniz ayrı bir tasarım; iki ayrı parça olarak ayırırsınız ayrı tasarım kısaca bir sınırımız yok.
Bu gibi kolaylıkların yanı sıra bir web developer'in (web geliştiricisi) iş bulmasının da çok zor olacağını düşünmüyorum. Neden mi her iş ve sektör için onlarca firma ve bu firmaların siteleri mevcut. Haliyle bu siteleri kodlayacak insanlar gerekiyor. İşte burada web developer 'lar devreye girmekte.
Web Kodlama İçin Nasıl Bir Ortam Gerekir?
Öncelikle şunu rahatlıkla söyleyebilirim ki en düşük ve sistem cihazlarla bile web kodlama yapabilirsiniz arkadaşlar zorunlu olduğunuz bir uygulama, gerekli olacak yüksek sistem gereksinimleri bulunmuyor. Yani bir not defteri uygulaması açıp oradan dahi web kodlamaya yönelik yazılımlar yapabilirsiniz. Aslında bunlar da web kodlamaya başlamak için belli başlı özellikler. Siz değerli forum üyelerine yaptığım anlatım boyunca sadece kodlamadan değil harici konulardan bahsedeceğiz. Şu an yazmakta olduğum açıklama & yorum bölümleri, editörler ve editör kısayoları ile de konuşacağız sadece web kodlama değil web kodlama dahil bütün konuları ele almaya çalışacağım.
Madem Sadece Not Defteri Yeterli Neden Editör Kullanıyoruz?
Arkadaşlar tekrar yapıyorum ki, "not defteri uygulaması açıp oradan dahi web kodlamaya yönelik yazılımlar yapabilirsiniz." ama neden editöre ihtiyacımız var? Çünkü editörler bizler için kodlama yaptığımız dil tag'ları (etiketleri) konusunda renklendirme ve gözümüzden kaçacak ufak hataları düzeltmemiz için ufak uyarılarda bulunmakta. Bunlar da bir web kodlamacısının işini çokça kolaylaştırmaktadır. Ben sizlere anlatmaya çalıştığım süreç boyunca "Sublime Text" adlı editörü kullanacağım, sizler istediğiniz editörü kullanabilirsiniz arkadaşlar. Editörümüzü kurmak ile başlayıp, ilk dersimizde birkaç ufak şeyler anlatalım.
Sublime Text Editörümüzün Kurulumu
Tarayıcımızın adres çubuğuna "sublime text" yazarak Sublime Text editörün kendi sitesine kurulum için ilerleyelim. (Kolaylık adına sizler için siteyi bırakıyorum ; https://www.sublimetext.com/3)
İşletim sistemimize uygun olanı seçelim ve indirme işlemini başlatalım.
Ufak bir not; Arkadaşlar derslerimde daha çok bilgi anlatmak için ve hali hazırda Sublime Text Editörün sistemimde kurulu olduğu için kurulum aşamasını geçiyorum. Fakat yazımın başında hiç bilgisi olmayandan anlatmaya başlayacağımı söylediğim için internette bulduğum Sublime Text Editör nasıl kurulur adlı bu videoya göz atmanızı öneririm.
https://youtu.be/Hx4ZLdcMqaE
Evet gerekli yükleme ve kurulumları yaptık arkadaşlar şimdi editörümüzü açalım ve ufak kodlarımızı ve anlatımlarımızı yapalım. Arkadaşlar sizlere tavsiyem kodlamalarınızın ve dosyalarınız karışmaması adına her çalışmanızdan önce klasör ve dosyanızı açınız. Derslerimize çalışacağımız klasörümüzü açtıktan sonra, mouse ile sağ click yaparak yeni bir metin belgesi açarak işe başlayalım.
Dosyamızın isimlendirme bölümü geldiği zaman tüm text'i seçip "ders.html" olarak değiştirelim.
Bu şekilde bir uyarı gelecektir. Bunun nedeni ise yeni bir metin belgesi oluşturduğumuz zaman uzantısının "txt" olamsından ötürü biz bunu "html" uzantısına çevirmek istediğimiz zaman bize uyarıda bulunuyor. "evet" seçeneği ile bu pencereyi kapatıyoruz.
Evet klasör ve dosyamız hazır. Şimdi bunları editörümüzde açacağız. Sublime Text Editörümüzde "Ctrl + o" kısayolumuzu kullanarak ya da "file/open file" yolunu kullanarak dosyamızın bulunduğu dizini seçip dosyamızı açalım.
Sırada kodlarımızı yazmaya başlamakta
)
Html Kodlarının Genel Özellikleri
=> Her tag(yani etiket Html de yazdığımız kodlara tag diyoruz arkadaşlar) "<" (küçüktür) işareti ile başlar ve ">" (büyüktür) işareti ile bitirilir.
=> Tagların nerdeyse tamamı (istisnalar mevcut) <html> ile başlayıp </html> şeklinde bitirilir. Yani tagımızı bitirirken ya da kapatırken "/" ekleriz.
=> Yazdığımız taglar küçük harflerle yazılmakta arkadaşlar büyük harfler ile etiket yazmıyoruz.
Arkadaşlar bizlerin yazdığı tüm kodlar web sitelerine yüklenir ve tarayıcımız tarafından açılarak siteleri kullanmamızı sağlar. Bizim Html kodlamaya başladığımızı ve kodlarımızı bitirdiğimizi belirttiğimiz ve Html'in ilk kodu "html" tagıdır. <html> şeklinde başlayıp </html> şeklinde bitirilir. Başladığımız ve bitirdiğimiz anlamına gelir fixdir. Kodlamalarımızda kullanmak zorundayız.
İkinci etiketimiz "head" etiketi. Head etiketi Html kodlamamızın görünmeyen kısmıdır. İçerisinde karakter kullanımı yaptığımız importlar, kodlamamızın dili gibi ifadeleri yazarız. Site içerisinde bu bölüme yazdığımız etiketler gözükmez!
Head tag 'ı içerisinde kullandığımız birçok tag var fakat biz şu an sadece bir sonraki tagımız olan "title" tagını göreceğiz. title etiketi anlamından da anlaşılacağı gibi site başlığını belirtmek için kullanılan bir tagdır. Kodlama yaparken head etiketleri arasında kullanılır. Kullanmamız gereken bir etikettir. <title> ile başlar, </title> ile biter.
body etiketi; arkadaşlar body etiketimiz, head etiketi gibi düşünebilirsiniz head etiketi nasıl görünmeyen kısımlar ise body etketi de görünen kısımalar genel olarak kodlarımızın %90 'nı burada bulunuyor diyebiliriz. Kullanmamız gereken bir etikettir. <body> şeklinde başlar, </body> şeklinde bitirilir.
Arkadaşlar bugün ki dersimizi bitirmeden önce bu bahsettiğim ufak kodların yazımı ile ufak bir kodlama bırakmak isterim. En azından aklınızda bir şeyler oluşsun.
Yazılı Olarak;
Kod:
<![COLOR="Red"]DOCTYPE[/COLOR] [COLOR="DarkOrchid"]html[/COLOR]>
<[COLOR="red"]html[/COLOR]>
<[COLOR="red"]head[/COLOR]>
<[COLOR="red"]title[/COLOR]>Site Başlığımız Buraya</[COLOR="red"]title[/COLOR]>
</[COLOR="red"]head[/COLOR]>
<[COLOR="red"]body[/COLOR]>
</[COLOR="red"]body[/COLOR]>
</[COLOR="red"]html[/COLOR]>Görsel Olarak;
Dersler Hakkında ki Görüşüm ve Söylemek İstediklerim;
Şunu söylemek isterim ki arkadaşlar merak etmeyin derslerim üç derste bitmeyecek. Eğer bu derste kodlar kısmında pek anlamadıysanız çok düşünmenize gerek yok ileride açacağım konularda buralara yeniden değineceğim. Bu konularımda ki asıl amacım ileri seviyeye gitmek değil, nereden başlayacağına emin olamayan aklı karışık olanlara az da olsa fikir ve bilgi sahibi etmek insanları özellikle kodlamaya daha sonra da web kodlamaya alıştırmak ve özendirmektir. Bu yüzden çok incesi ve detayına kadar anlatmaya çalışacağım.
Bu konudaki yazım bu kadardı değerli vaktinizi bana ve konuma ayırıp okuduğunuz için sizlere teşekkürlerimi sunmaktayım. Eksiğim ve hatam olmuşsa affola. Bu konum her zaman bir sekmede açık tutmaya çalışacağım arkadaşlar eğer bir öneri, şikayet veya sorunuz varsa konu altına bahsederseniz gereken cevaplamayı yapacağım.
Son olarak Ƴαĸαмoz1Յ1Գ Adminimize, çok değerli öneri ve fikirlerinden ötürü saygılarımı ve teşekkürlerimi iletmek isterim.
Sağlıcakla kalın..
)Bir Sonraki Ders ; Hazır olduğu zaman linkini bırakacağım.
