Web Tasarım ve Programlama Eğitimleri-1

 

 

Merhaba arkadaşlar bu yazımızla birlikte “web tasarım ve programlama” eğitimine başlıyoruz.

Web tasarım için ben“geany” programını kullanacağım. Size de onu tavsiye ederim çünkü yazılan kodların düzenli bir şekilde görünmesi açısından büyük kolaylık sağlıyor.

İlk dersimizde kodları tanıyacağız ve küçük işlemlerle site tasarımına bir giriş yapacağız. Keyifli okumalar.

Hadi başlayalım…

1)“GEANY” YAPISI VE DOSYALARI KAYDETME

Öncelikle aşağıda görmüş olduğunuz <html> ile başlayıp </html> ile biten kodlar hep sabittir. Site tasarımında yazacağımız bütün kodlar bu kodların içinde olacak. Daha sonra: Dosya> farklı kaydet> proje.html> kaydet şekilde masaüstüne “html” olarak kaydedin.

2)BAŞLIK EKLEME

web sayfasında görülen başlık daima <head> – </head> arasına yazılır. Kodları yazdıktan sonra “kaydet” butununa basın ve masaüstünde bulunan dosyanızı “f5” basarak tekrar yükleyin.

<title> – </title> kodu yazıya başlık eklememizi sağlar ve resimde görüldüğü üzere web sayfasında sol üst köşede başlığınız belirir.

<meta charjet=”utf-p”>  kodu türkçe karakter yazmanızı engeller. Bundan sonra ki web sayfasında görünecek olan yazılarda türkçe karakter kullanamıycaz.

 

3) ALT BAŞLIK EKLEME

Bundan sonraki site içinde bulunan bütün yazıları(özel durumlar dışında) <body> – </body> arasına yazıcaz.

Alt başlık eklemek için <h1> – </h1> kodlarını kullanıyoruz. Bu kodları <h2>, <h3>…… olarak devam ettirdiğimizde puntosu küçük başlıklar eklemeye devam edecektir.

4)ÇEŞİTLİ DÜZEN ARAÇLARI

Aşağıda resimde de görüldüğü üzere tasarım için kullanılan bazı kodları göreceksiniz. Kırmızı olarak yazdıklarım bu kodların neye yaradığını açıklıyor.  Yazdıktan sonra “kaydet” butonuna basmayı unutmayın.

 

Bu resimde de bu kodların nasıl göründüğünü görüyorsunuz.

Umarım faydalı olmuştur. Bir sonraki eğitim yazımızda görüşmek üzere. Esen kalın…

Facebook Sayfamizdan Bizleri Takip Edebilirsiniz