Doğrudan Web Front-End Programming

By Zafer Teker

Bu kitapta öncelikle front-end geliştirmenin temel dillerinden HTML, CSS & JavaScript anlatılmaktadır. Son sürümleri olan HTML5 & CSS3 ile gelen yenilikler de açıklanmaktadır. JavaScript kütüphanelerinden JQuery & Responsive Design çatısı Bootstrap temel kavramlarıyla açıklanmaktadır. Web geliştirme için kullanılan editörler, gözatıcı araçlarının yanında, yararlı bir çok bileşen de içeriğe eklenmiştir.

• Language: Türkçe
• Publisher: Onder Teker
• Release date: Apr 1, 2018
• ISBN: 9786058252370

Book preview

Doğrudan

Web

Front-End

Programming

Fundamentals

HTML, CSS & JavaScript

HTML5 & CSS3

JQuery & Bootstrap

Zafer Teker

Godoro Yayıncılık

GODORO YAYINCILIK

Yayıncı Sertifikası No: 18531

Kitabın Adı:

Doğrudan Web Front-End Programming

Copyright © 2018 Godoro Yayıncılık

Kitabın Yazarı:

Zafer Teker

Birinci Basım, Nisan 2018, İstanbul

ISBN:

978-605-82523-7-0

Kapak Tasarımı ve Mizanpaj:

Önder Teker

Baskı ve Ciltleme:

NET COPY CENTER

Özel Baskı Çözümleri

İnönü Cd. Beytülmalcı Sk. No:23/A

Gümüşsuyu, Taksim 34427 İstanbul TR.

GODORO YAYINCILIK

Çiğdem 2 Sokak No:7 D:8

Kaptan H. Rıfat Çırak İş Merkezi Mecidiyeköy

Şişli / İstanbul

Telefon/Fax : [phone]

http://www.godoro.com

Doğrudan

Web

Front-End

Programming

Fundamentals

HTML, CSS & JavaScript

HTML5 & CSS3

JQuery & Bootstrap

Zafer Teker

Godoro Yayıncılık

Front-End Editörleri

Kulanıcı ile etkileşimin yapıldığı arayüz bölümlerine genel olarak ön uç (front-end) adı verilir. Web-İnternet için Front-End , Web sayfaları ve Web sayfaları geliştirmek için kullanılan HTML, CSS, JavaScript gibi teknolojilerdir.

Bu bölümde front-end programlama için kullanılan bazı önemli editörler tanıtılacaktır. Aşağıda tanımlananlar dışında Eclipse, NetBeans gibi kodlama editörleri de front-end için kullanılabilir. Ancak özellikleri daha kısıtlıdır. Notepad++, Sublime Text gibi text editorleri de kullanılabilir.

Brackets

Brackets; HTML, CSS ve JavaScript düzenlemenizi sağlayan, plugin (eklenti) ile geliştirilebilen bir front-end editorüdür.

Kurulum

Kurulum dosyasını çalıştırdığında aşağıdaki pencere gözükecektir:

grafikler1

Kurulum tamamlandıktan sonra ilk çalıştırdığınızda aşağıdaki gibi bir ekran görüntülenecektir:

Varsayılan olarak bir index.html açılacaktır.

grafikler2

Çalıştırma

Sayfanın nasıl gözükeceğini görmek için sağ bölmenin üzerinde flash işaretine tıklamanız gerekir. İlk defa tıkladığınızda aşağıdaki gibi bir pencere görüntülecektir :

Tamam dediğinizde sayfanın içeriğini tarayıcıda görebilirsiniz.

grafikler3

Kendi projemizi yaratmak için projemizin olduğu klasörü eklememiz gerekir.

grafikler4

Dosya menüsünden Klasörü Aç seçeneğini açalım ve aşağıdaki gibi çalışma klasörümüzü seçelim :

Klasör boş olmasından dolayı aşağıdaki gibi boş bir ekran görüntülecektir. İlk açılışta gözüken klasörl

grafikler5

er artık gözükmeyecektir.

Hello klasörü içinde sağ tıklayıp Yeni Dosya'yı seçelim ve hello.html adında bir dosya yaratalım.

grafikler6

Yukarıdaki gibi örnek bir web sayfası kodu girip çalıştırırsak sonucu aşağıdaki gibi görebiliriz:

grafikler7grafikler8

Atom

Atom, yaygın kullanılan bir front-end editörüdür. Paketler eklenerek geliştirilebilmektedir. Uygulama kurulduktan sonra ilk görüntü aşağıdaki gibi olacaktır:

File menüsünden Open Folder ile Hello klasörünü açarsak aşağıdaki gibi görülecektir.

grafikler9

Bir sayfayı tarayıcıda görmek için open-in-browser (tarayıcıda aç) paketinin kurulması gerekir. Bu paket File (Dosya) > Settings (Ayarlar) > Install (Kur) menüsünden erişilerek kurulabilir.

grafikler10

Bu paketi kurduktan sonra dosyaya sağ tıkladığınızda varsayılan tarayıcınızda sayfa gözükecektir. Hello.html'e sağ tıklayıp Open In Browser (Tarayıcıda Aç) seçildiğinde aşağıdaki gibi seçim ekranı gözük

grafikler11

ecektir.

Örneğin Chrome seçilip tamam denirse tarayıcıda sayfa görünecektir.

grafikler12

WebStorm

WebStorm, JetBrains kurumu tarafından geliştirilen, gelişmiş özeliklere sahip modern bir JavaScript editörüdür. Ücretli bir uygulamadır.

Kurulum

Bir sonraki seçenek kısayol ve uzantı ile ilgili ayarlar sorulur.

grafikler13

Kurulum bittikten sonra ilk çalıştırıldığında aşağıdaki gibi bir ekran çıkacaktır:

grafikler14

Biz do not import settings (ayarları içe alma) seçeneğini seçiyoruz. Deneme sürümü kullanabilirsiniz.

grafikler15

Genel konfigürasyonları seçiyoruz

grafikler16

New Project (Yeni Proje) ve Empty Project (Boş Proje) ile bir proje yaratıyoruz.

grafikler17

Örnek Yaratma

Uygulama açıldıktan sonra bir hello.html yaratıyoruz.

Sayfayı görnek için Run (Çalıştır) menüsünden Run seçilerek sayfa tarayıcıda görüntülenebilir.

grafikler18grafikler19

HTML

Web sayfalarının temel dili HTML (HyperText Markup Language - Yazı Ötesi İmleme) adı verilen dildir. İlk Web sayfaları sadece HTML ile yazılıyorlardı. Web programcısı olacak herkesin HTML bilmesi gerekmektedir. Bu bölümde HTML'in temel bilgileri, özellikle programcılar için gerekli olacak özellikleri tanıtılacaktır.

HTML bir markup (imleme) dilidir. Markup dilinde içerik belirli etiket (tag) birimleriyle işaretlenir. Etiketler '<' ile başlar ve '>' ile biter. Bir etiket arasındaki tüm içerikler veya elementler bu şekilde işaretlenmiş olurlar. Tarayıcı bir web sayfasını gösterirken bu etiketleri değerlendirerek gösterir.

Etiketler genel yapısı aşağıdaki gibidir.

=değer attribute2=değer2>

  ....

</etiketAdı>

Bir etiket ile açılır ve ile kapanır. Her etiket kapanmak zorunda değildir. Ancak bazı etiketlerin kapatılmaması sayfanın düzgün gözükmemesini sağlayabilir. Bir etikette birden fazla öznitelik (attribute) olabilir. Attribute bir etikete değişik özellikler vermek için kullanılır.

Temel bir web sayfası aşağıdaki gibi bir yapıdadır

<html>

  <head>

    Sayfanın hakkında genel bilgiler

  </head>

  <body>

    Sayfanın kullanıcıya görünen bölümü

  <body>

</html>

Bir web sayfası HTML etiketi ile başlar ve biter. İçeride head (baş) kısmı sayfa hakkında genel bilgilerin koyulduğu bölümdür. Sayfanın kullanıcıya gösterilen içerik kısmı body (gövde) içine koyulur.

Başlık (Heading)

HTML'in en basit görevi yazıları daha biçimli ve düzgün göstermektir. HTML'de 6 adet başlık (heading) etiketi büyükten küçüğe doğru sıralanacak biçimde h1, h2, h3, h4, h5, h6 adlarıyla bulunur. Bunların dışında paragraf etiketi p, yeni satır br (break - kır) etiketi gibi etiketler de bulunur. Aşağıda bu etiketleri kullanıyoruz:

 

    <title>Yazı Sayfası</title>

 

  <h1>En büyük başlık</h1>

  <h6>En küçük başlık</h6>

  <p> Bu bir paragraftır. Burada istenildiği zaman yeni satır <br> yapılmasını sağlayabilirsiniz. </p>

  <p> bu ikinci paragraftır. </p>

Head içinde title (anabaşlık) elementi kullanılmıştır. Bu öğe tarayıcı başlığında gözüken yazıdır. Belgede body içine h1 ile en büyük başlığı ve h6 ile en küçük başlığı yerleştiriyoruz. Sonrasında p ile iki paragraf yapıyoruz. İlk paragrafta br etiketi ile yazının devamının yeni satırdan devam etmesini sağlıyoruz.

Sayfa aşağıdaki gibi görünecektir :

grafikler20

White Space Karakterler - Pre

HTML dilinde ak boşluk (white space) deyimi boşluk (space), sekme (tab) gibi yazıya dahil olmayan karakterler için kullanılır. HTML'de bu karakterler dikkate alınmaz. Sadece pre (ön) etiketinde bu karakterler dikkate alınır. Aşağıdaki kodda boşluklar dikkate alınmayacaklardır.

 

    <p> aglasam sesimi duyar misiniz misralarimda?

    dokunabilir misin ellerinizle göz yaslarima?</p>

 

Sonuç olarak tarayıcı tek satırlık ağlasam sesimi duyar mısınız mısralarım da? dokunabilir misiniz ellerinizle göz yaşlarıma yazısını yazar.

Yukarıdaki şiir örneğinde yazdığımız şiiri p etiketi tek bir satılık yazı haline getirmiştir. Eğer şiirin biçimini korumak istiyorsak pre etiketi kullanmalıyız. pre etiketi white space denilen karakterleri dikkate alır. Yazdığınız yazı aynen görünür. Aşağıda kullandığımız pre etiketi ile istediğimiz görüntüyü el

grafikler21

de ederiz.

 

    <pre>

    aglasam sesimi duyar misiniz misralarimda?

    dokunabilir misin ellerinizle göz yaslarima?

    </pre>

 

Görüntüsü aşağıdaki gibi olacaktır :

grafikler22

Paragraf - P Etiketi

HTML'de paragraf yazmak için p (paragraph - paragraf) etiketi kullanılır. Ancak p etiketi yeni satır karakterini tanımadığı için tüm yazıları tek bir satır gibi düşünür ve sayfanın genişliğine göre yeni satırdan devam eder. Eğer yeni bir satıra geçmek istiyorsak br (break - kır) etiketi kullanılmalıdır. Bu etiket yazının alt satırdan devam etmesini sağlar. Aşağıda üç satırlık bir paragraf bulunmaktadır.

 

    >HTML'de white space denilen karekterler dikkate alinmaz. O yüzden br etiketi kullanacagim
artik alt satirdan yazima devam ediyorum. yeni bir satir açaçagim zaman yine
kullaniyorum. Simdi üçüncü satirdayim.

 

Sayfa aşağıdaki gibi gözükecektir :

grafikler23

List (Dizelge)

HTML'de üç tip liste vardır. Birinci tip düzensiz dizelge (unordered list), ikinci tip düzenli dizelge (ordered list), üçüncü tipse tanımlamalar (definitions) biçimindedir.

Unordered list'de her yeni eleman ekleyişinizde sizin istediğiniz bir işareti koyar. Örneğin yıldız (asterisk) imi '*', nokta (dot) imi '.' vs.. Bu öğe ul etiketi ile gösterilir.

Ordered list'te ise her eleman eklendiğinde list sayısını veya sırasını bir artırır. Örneğin 1 ise 2, a ise b, A ise B yapar. Siz her eleman eklediğinizde o bu artımı gerçekleştirir. Bu öğe ol etiketi ile gösterilir.

Listelerde maddeler li (list item - dizelge maddesi) ile belirtilir.

Definitions'larda ise bir terim verilir ve sonra onun açıklaması verilir. Her terim ve açıklamasını eklediğinizde aynı biçimde gözükecektir.

Unordered List – Düzensiz Dizelge

Bu listede her eleman eklediğinizde elamanın başına varsayılan olarak bir disk işareti koyar. Aşağıda bir düzensiz liste yapıyoruz.

    <ul>

        <li>ali

        <li>veli

        <li>züleyha

    </ul>

Liste aşağıdaki gibi gözükecektir.

Listenin başına koyacağı işareti değiştirebiliriz. Aşağıda listenin başına bir kare ekliyoruz. Üç tip (type) olabilir: dördül (square), teker (disc), dönge (circle).

grafikler24

  <ul type="square">

    <li>ali

    <li>veli

    <li>züleyha

  </ul>

Kare şekli aşağıdaki gibi gözükür :

Listelerin işaretlerini değiştirmek için artık CSS (Casceding Style Sheet - Çağlayan Biçem Yaygısı) kullanılmaktadır. CSS çok daha gelişmiş özellikler sağlamaktadır. O yüzden listelerdeki type özelliğini kullanılması tavsiye edilmez.

grafikler25

Ordered List - Düzenli Dizelge

1, 2 şeklinde devam eden bir liste yapalım

  <ol>

    <li>ali

    <li>veli

    <li>züleyha

  </ol>

Liste aşağıdaki gibi gözükecektir :

Şimdi a b c şeklinde artıralım.

grafikler26

="a">

    <li>ali

    <li>veli

    <li>züleyha

  </ol>

Yukarıda verdiğimiz uyarı geçerlidir. Artık listeleri biçimlendirmek için CSS kullanılmaktadır.

Liste aşağıdaki gibi gözükecektir :

grafikler27

İç İçe Dizelge Kullanımı

Listelerin içinde başka listeler bulunabilir. Örneğin bir düzensiz listenin elemanları düzenli liste olabilir. Aşağıdaki örnekte bunu yapıyoruz.

<ul>

  <li>Ali

    <ol>

      <li>akılı

      <li>iyi

    </ol>

  <li>veli

    <ol>

      <li>inatçı

      <li>kibirli

    </ol>

  <li>züleyha

    <ol>

      <li>korkak

      <li>uyanık

      <li>iyi

    </ol>

</ul>

İç içe liste aşağıdaki gibi gözükecektir :

grafikler28

Definition – Tanımlama

Aşağıdaki örnekte üç tane tanım yaratıyoruz :

<dl>

  <dt>Neşet Ertaş</dt>

  <dd>Dahi Müzisyen / Ozan</dd>

  <dt>Münir Özkul</dt>

  <dd>Tiyatrocu / Sinemacı</dd>

  <dt>Sultan Baybars</dt>

  <dd>Memluk Sultanı</dd> 

</dl>

dt ile tanımlanacak ifade, dd ile tanım