26 Haziran 2016

HTML/CSS Öğreniyoruz – 2

Bugün blogum için hayli içerik girdiğim güzel bir gün sanırım. Geçtiğimiz haftalarda yayınladığım 1. bölümde gerekli programları kurmuştuk. Şimdi HTML’in temelini öğrenmek için ilk adımı atıyoruz. Ancak ilk önce şu videoyu izlemenizi istiyorum. Aşağıda dil seçeneklerinde “Türkçe Altyazı” mevcut.

Bilgisayarınıza kurduğunuz kodlama editörünü çalıştırarak başlayalım.

1 – HTML dosyamızı oluşturalım

Masaüstüne “HTML Ders” adında bir klasör oluşturalım. Yaptığımız her dersi buraya düzenli olarak kaydedersek eğitimlerimizin sonunda güzel bir kütüphaneniz olacağından eminim.

Şimdi kod editörüne gidelim ve yeni bir belge oluşturalım. Bunun için en üst solda yer alan Dosya > Yeni seçeneklerine tıklayarak ilerleyebilirsiniz. Şimdi karşınıza yeni boş bir sayfa açılacak. Bu sayfa açılır açılmaz kaydet diyerek belgenizi oluşturduğumuz dosyaya kaydedin. Kaydederken kod editörü size formatını ve dosya adını soracaktır. Formatı .html olarak seçiyoruz ya da direk belge adına index.html yazıyoruz. Böylece ilk html dosyamızı oluşturmuş oluyoruz. Artık kod editörü yazdığımız dili biliyor ve ona göre tepkiler verecek. Bu bizim işimizi hayli hızlandıracaktır emin olun.

Kafanızda sorular kalmasını istemediğim için en basit seviyeden açıklayarak ilerlemek istiyorum. Mesela aranızda belgenin adını neden index.html olarak kaydettiğimizi soranlar olabilir bunun sebebi yaptığınız siteyi internet ortamına yüklediğimizde sunucunuz index belgesini varsayılan anasayfa olarak algılar ve direk index belgesini kullanıcılara gösterir. Tabi yazdığınız kodlar tasarım olarak gösterilecek 🙂

Şimdi ilk kodlarımızı yazmaya başlıyoruz. Heyecan var mı? Tamam tamam sakinleşelim ve devam edelim.

Şimdi aşağıda yer alan kodu belgenize yazın. Bakın tekrar söylüyorum yazın. Kopyala, yapıştır yaparak bu kodları ezberlemeniz gerçek anlamda çok zor olacak. Yazdığınızı var sayıyorum ve kodun açıklamasını yapıyorum. Gördüğünüz üzere <html> yazıp html dosyasını açtığımızı belirttik. </html> yazarakta burda bu belgenin sonlandığını belirttik. Bu ifadeyi ilerleyen zamanlarda bir çok kez kullanacağız. Örnek vermek gerekirse <body> </body> . Uzun lafın kısası “/” kapatma anlamına geliyor.

<!DOCTYPE html>
<html lang="tr-TR">

</html>

Şimdi daha fazla kod yazmadan sizlere bir kaç terim açıklaması yapacağım ve sonra devam edeceğiz.

<head> </head> = HTML belgesi hakkındaki tüm açıklamalar bu etiketler arasına gelecek ve bu açıklamalar sitede görünmeyecek sadece kodlarda yer alacak.
<body> </body> = Sitede görünmesini istediğimiz tüm kodları bu etiketlerin arasına yazacağız.
<h1> </h1> = h1 - h2 - h3 - h4 - h5 - h6 şeklinde giden bu etkiketler sayesinde metinlerimize başlıklar oluşturacağız. <h1> etkiketi boyut olarak en büyük <h6> en küçük başlığı ifade eder.
<p> </p> = Bu etiketler arasına paragraflar yazacağız.
<a> </a> = Bir buton ve o butona basınca başka bir siteye mi yönlendirmek istiyoruz? Bu etiket tamda o işe yarıyor.
<span> </span> = bir metin yazdınız ve metnin geneline hakim stil dosyasından daha farklı davranmasını istediğiniz bir alan mı var? Tamam tamam biraz karışık bir şey bu zamanla anlayacaksınız...
<strong> </strong> = Kalın metinler mi yazmak istiyorsunuz. Aha bu etiketler o işe yarıyor. Aralarına ne yazarsanız yazın kalın yazacak.
<ul> <li> </li> </ul>

Bunlar karışık gelebilir ama ne işe yarıyor derseniz listeler oluşturmamıza yarayacaklar. Detaylar ilerleyen derslerde :)
<strong> </strong> = Kalın metinler mi yazmak istiyorsunuz. Aha bu etiketler o işe yarıyor. Aralarına ne yazarsanız yazın kalın yazacak.
<br> = 1 satır atlamanıza yarıyan bir koddur kendileri ancak CSS öğrenince pek gerek kalmıyor anca paragraf ayırma işlemlerinde...
<!-- Açıklama --> = "Açıklama" yazan yere dilediğinizi yazabilirsiniz çünkü yazdığınız hiç bir şey sitede görünmeyecek bu kod parçası düzenli kodlama yapmanız için bulunmaz nimet.
<img> = Bu kadar basit göründüğüne bakmayın bu kod dışardan resim eklemenize yarıyor tabi sadece img yazmak yeterli değil detayları ilerleyen derslerde.

Müjdemi isterim. Çünkü HTML’in temelinde kullanılan bir çok terimi okudunuz ve yolun büyük kısmını atlattınız sayılır. Bunları kod editöründe denedikten sonra tek yapmanız gereken bunların kullanımlarına alışmak. Sonra zamanla baktık iyi işler başarıyoruz. CSS öğrenmek için adımlar atacağız ve estetik görünümlü siteler yapmaya başlayacağız.

Şimdi bu dersin sonlarına gelirken yukarıda yazdığım kodları deneyebilmeniz için size uygun ortamı yaratalım.

En son aşağıdaki kodu yazmıştık. Şimdi devam edelim…

<!DOCTYPE html>
<html lang="tr-TR">

</html>

<html> </html> etiketlerinin arasına <head> </head> yazın. Head kısmının içeriğini ayrıca bir derste anlatmak istiyorum çünkü o kısımda SEO adını verdiğimiz Google için önemli meta etiketleri bulunuyor. Şimdilik sizden istediğim birebir aşağıdaki kodu belgenize yazmanız.

<!DOCTYPE html>
<html lang="tr-TR">
   <head>
       <title>HTML Kodluyorum - 1</title>
   </head>
   
   <body>
       <!-- Yukarıdaki etiketleri bu alanda deniyebilirsin -->
       <h1> Örnek </h1>
       <p> Gördün mü neler yapıyorsun. </p>
   </body>
</html>

Yukarıda ki kodu direk index.html belgenizin içerisine yazın ve vermiş olduğum etiketleri deneyin. Yaptıklarınızı görmek içinse masaüstüne oluşturduğumuz “HTML Ders” klasörüne girip index.html ‘e gelip sağ tıklayın ve bilgisayarınızda yüklü olan internet tarayıcısı ile açın. Eğer yazdığınız kodlarda Türkçe karakter sorunu olursa… <head> </head> etiketi içerisine aşağıdaki kodu yazın. UTF-8 düzenlemesi ile html dosyanız Türkçe karakter destekler hale geliyor.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Bugünlükte bu kadar dostlar. Verdiğim etiketleri tek tek inceleyin ve ne işe yaradıklarını iyice kavrayın. Bir sonraki dersimizde ona göre ilerlemeye devam edeceğim. Bu arada unutmadan belirtmek istiyorum. Yavaş ve çok basit bir şekilde anlatmaya devam edeceğim. Eğer anlatımım bazı arkadaşlara basit geliyorsa internette ki diğer makalelerden çok daha hızlı bir şekilde ilerleyebilirler. Benim amacım bilgisayar kullanmayı bile yeni öğrenmiş süper yetenekli insanlara ulaşmayı denemek.

Hepinize iyi günler dilerim… Salıcakla kalın.



ETİKETLER

  • Çulfa

    Yeni dersler de bekliyoruz, emeğin için teşekkürler ^^

  • Ufuk Kömek

    Yeni Ders LütfeN Abi <3