Derinlemesine HTML & CSS

By Onder Teker

Bu kitapta HTML & CSS dilleri, hem temel hem de ileri düzeyde anlatılmaktadır. Klasik HTML & CSS dışında HTML5 ve CSS3 ile gelen özellikler, ayrıntılı olarak açıklanmaktadır. CSS Preprocessor dillerinden SASS & LESS ile Responsive Design için kullanılan Bootstrap çatısı kitabın kapsamındadır.

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

Book preview

Derinlemesine

HTML

&

CSS

Fundamentals & Advanced

HTML5 & CSS3

SASS & LESS

Bootstrap

Önder Teker

Godoro Yayıncılık

GODORO YAYINCILIK

Yayıncı Sertifikası No: 18531

Kitabın Adı:

Derinlemesine HTML & CSS

Copyright © 2018 Godoro Yayıncılık

Kitabın Yazarı:

Önder Teker

Birinci Basım, Nisan 2018, İstanbul

ISBN:

978-605-82523-2-5

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

Derinlemesine

HTML

&

CSS

Fundamentals & Advanced

HTML5 & CSS3

SASS & LESS

Bootstrap

Önder Teker

Godoro Yayıncılık

HTML

Genel Bilgi

Temel Kavramlar

HTML

HTML (HyperText Markup Language - Yazı Ötesi İmleme Dili) örün beti (web page) oluşturulmasında kullanılan, içeriğin anlaşılır biçimde gösterilmesi için geliştirilmiş bir dildir.

XML

HTML içerisinde biçim dışındaki içeriği ayrı bir belgede tutmak için geliştirilmiş dile XML (eXtensible Markup Language - Genişletilebilir İmleme Dili) adı verilir. Ancak bu dil zamanla HTML ile ilgisi olmayan, içerik dışında; iletileme (messaging), yapılandırma (configuration) gibi alanlarda da kullanılır oldu.

XHTML

HTML dilinin XML kurallarına uygun biçimine XHTML (eXtensible HyperText Markup Language - Genişletilebilir Yazı Ötesi İmleme Dili) adı verilir. HTML dili genellikle kurallar bakımında esnek olabilirken XML dili çok katıdır. XHTML de katı kurallar getirir. Örneğin tüm ögeler küçük harfle yazılmalıdır. Açılan her öge mutlaka kapatılmalıdır. Her niteliğin mutlaka bir değeri olmalıdır gibi kurallara uyulur. Aşağıda, zorunlu olmadığı durumlarda da XHTML kurallarına uygun olarak HTML yazılmaktadır.

DOM

DOM (Document Object Model - Belge Nesne Taslamı) bir belge içerisindeki ögelerin yapısıyla ilgili, her belgeye bir ağaç, her bileşene de bir düğüm gibi yaklaşan arayüze verilen addır. HTML, XML ve JavaScript gibi birbiri içinde bileşenlerden oluşan yapıların, dilden bağımsız yapısını oluşturur. DOM yardımıyla birden çok dildeki bileşenler ortak kavramlarla öğrenilebilmektedir.

Sözdizimi (Syntax)

Aşağıda HTML dilinin sözdizimi (syntax) ile ilgili konular açıklanmaktadır. Anlatılanların çoğu XML, XHTML ve DOM için de geçerlidir.

Belge (Document)

Belli bir yaprakta (dosyada) bulunan HTML içeriğinin tümüne belge (document) adı verilir. Kullanıcı sunucudan bir istekte bulunduğunda, karşı yakadan gönderilen yanıt bir belgedir. Genellikle belge ile denmek istenen; yazı türündeki içerik ve bu içeriği düzgün göstermek için kullanılan bileşenlerdir. Ancak daha geniş anlamda, yapraktaki görüntü veya ses içinde tüm bileşenlerden de söz etmek için de belge sözcüğü kullanılabilir.

Öğe (Element)

Belgenin içinde belli bir anlam bütünlüğü içeren her bileşene öge (element) adı verilir. Örneğin başlık, paragraf, görüntü gibi bileşenler birer öge olarak adlandırılırlar.

<myelement> Öğem </myelement>

Etiket (Tag)

HTML dilinde yazının içinde belli bölgelerde imleme (markup) adı verilen işlem yapılır. İmleme ile denmek istenen, bir bölgenin belli bir etiket (tag) ile çevrilmesidir. Kullanılışı

<mytag> Yazım </mytag>

biçimindedir. Her öge, bir imleme ile gösterilir. Başka bir deyişle, öge kavramı tüm içerikle birlikte, genel olarak tanımlanan birimin adıdır. Etiket ise bir ögeyi göstermek için kullanılan addır. Örneğin

<mytag> Yazım </mytag>

ile yazılan bir öge (element) olarak adlandırılır. Burada

mytag

etiket (tag) adını alır. Burada Yazım biçimindeki içerik mytag etiketiyle işaretlenmiştir.

Bir etiketin içinde herhangi bir içerik olmayabilir. Bu durumda yazım:

<mytag/>

biçiminde yapılır.

Bir ögenin içinde başka ögeler de olabilir:

<myparent>

  <mychild>

  </mychild>

</myparent>

Burada myparent adıyla imlenmiş ögenin içinde mychild adıyla imlenmiş başka bir öge bulunmaktadır.

Öznitelik (Attribute)

Etiketler öznitelik (attribute) adı verilen özellikler içerebilirler. Örneğin

myattribute="myvalue">

  Yazı

biçimindeki bir HTML parçasında myattribute adında bir özniteliğin değeri myvalue olarak verilmiştir. Özniteliğin bir ad (name) ve bir de değer (value) kesimi bulunur.

Kaçma (Escape)

HTML ve XML dilleri, belli yazıları imlemek için belli simgeler kullandığı için; o simgelerin içerik içinde geçmesi durumunda HTML dilini işleyen gözatıcı (browser) gibi uygulamaların kafası karışır. Örneğin şundan küçüktür (less than) imi '<' yazının bir yerinde geçerse HTML ve XML dilleri bir ögenin başladığını düşünür.

Sakıncalı karakterlerin veya adların yerine birer varlık (entity) adı verilen değerlerin konması gerekir. Bunlar ve (ampersand) imi '&' ile başlar ve noktalı virgül (semicolumn) işareti ';' ile biter. Örneğin

<

varlığı ekranda

<

biçiminde görünür.

Bir karakterin yerine başka bir karakter kullanılmasına kaçma (escape) adı verilir. Örneğin '<' karakteri '<' ile kaçılmıştır.

Kaçılması gereken karakterler ve karşılık gelen değerler aşağıdaki gibidir:

İyi bakılırsa, & karakterini kaçmak için kullanılan & varlığı da & karakteriyle başladığı görülebilir. Öncelikle varlıklar işlendiği için herhangi bir sorun oluşmaz.

Yorum (Comment)

Bir HMTL belgesi içerisinde açıklamalara yorum (comment) adı verilir ve ile --> arasına konabilir. Örnek:

Yorumlar -->

Birden çok satır yorum da yapılabilir:

Yorum 1

Yorum 2

Yorum 3

-->

Kimi kez, yorum olmamasına karşın, bir HTML içeriğini etkisiz kılmak için de yorumlama yoluna gidilir. Örneğin

myvalue>

  Yazı

-->

biçimindeki yorum içerisindeki tüm ögelere geçersiz kılınmış olur. Bunu yapmanın nedeni, geliştiricinin bir takım ögeleri geçici olarak devre dışı bırakmak istemesidir. Öncelikle bir bölümde dışa yorumlama (comment out) yapılır, denemeler gerçekleştirilir ve daha sonra yeniden içe yorumlama (comment in) yapılarak ögelerin yeniden devreye girmesi sağlanır.

Temel Konular

Bu bölümde tüm HTML belgelerini kapsayan temel konular işlenmektedir.

Belge (Document)

HTML Öğesi

Her HTML belgesi html ögesi içerisinde bulunur. Kullanım biçimi aşağıdaki gibidir:

<html>

</html>

Kimi gözatıcılar (browser) bu ögenin yokluğunu bağışlayabilir. Ancak katı olan uygulamalarda html ögesinin yokluğu sorun çıkarabilir.

Body (Gövde) & Head (Baş)

Bir belge içerisinde gözatıcının ekranında görünen kesimler body (gövde) ögesine, belge ile ilgili genel bilgiler içerenler de head (baş) kesimine konur. Kullanım biçimleri aşağıdaki gibidir:

<html>

<head>

 

</head>

<body>

 

</body>

</html>

Title (Ana Başlık)

Baş bölümüne konabilecek ögelerden birisi title (ana başlık) ögesidir. Bu ögenin içeriği, belge gösterilirken gözatıcının başlık bölümünde veya yaprağın göründüğü sekmenin ad kesiminde görünür. Kullanımı

    <title> Burası Ana Başlık </title>

biçimindedir.

H (Heading - Başlık)

Bir belgede başlık (heading) bilgisi h1, h2, h3, h4, h5 ve h6 gibi etiketlerle bildirilir. Bunlardan h1 en büyük başlığı gösterirken h6 en küçük başlığı bildirir. Bu etiketlerle üretilen başlıkların gerçek boyutları gözatıcıya ve görüntü çözünürlüğüne göre değişebilir. Başlık etiketinin kullanımı aşağıdaki gibidir:

<h1> Burası 1. Başlık </h1>

P (Paragraph - Paragraf)

Gövde içinde yazıların içindeki bölümler p (paragraph - paragraf) etiketiyle bildirilir. Gözatıcı bu ögeyle imlenmiş kesimleri birbirinden ayırarak gösterir. Örnek:

Burası bir paragraf. Burası bir paragraf.Burası bir paragraf.Burası bir paragraf.Burası bir paragraf.

BR (Break - Kırma)

Yazının bir yerinde yeni bir satıra geçmek için br (break - kırma) ögesi kullanılır. Temel işlevi paragraf bitmese de yeni satıra geçilmesine sağlamaktır. Kullanımı aşağıdaki gibidir:

Birinci paragraf. Birinci paragraf. Birinci Birinci paragraf. Birinci paragraf.

İkinci satır. İkinci satır. İkinci satır. İkinci İkinci satır.

HTML Örneği

Yalın bir HTML belge örneği aşağıdaki gibi yapılabilir:

<html>

<head>

    <title> Godoro HTML</title>

</head>

<body>

<h1> En Büyük Başlık </h1>

<p>Birinci paragraf. Birinci paragraf. Birinci paragraf. Birinci paragraf. Birinci paragraf. Birinci paragraf. Birinci paragraf.<br/>

İkinci satır. İkinci satır. İkinci satır. İkinci satır. İkinci satır. İkinci satır. İkinci satır. İkinci satır.</p>

<p> İkinci paragraf. İkinci paragraf. İkinci paragraf. İkinci paragraf. İkinci paragraf. İkinci paragraf. İkinci paragraf.

Yukarıdaki belgede bir başlık (header) ve iki paragraf (paragraph) bulunmaktadır. İlk paragraf arasında yeni satıra geçmek için kırma yapılmıştır. İkinci paragrafın sonunda da, fazladan boş bir satır eklemek bir kırma eklenmiştir.

Ekran çıktısı:

grafikler1

Çizgi İçi (Inline)

Bir paragrafın içerisindeki yazının bir bölümünün daha okunaklı veya belirgin olması için çeşitli çizgi içi (inline) ögeler bulunmaktadır. Bunlardan kimileri aşağıdaki gibi verilebilir:

Eskiden yaygın olarak kullanılan b (bold - kalın) yerine strong (dayanıklı), i (italic - yatık) yerine emphasis (vurgu) kullanılması doğrudur. Bunların eskitilmesinin nedeni görüntüyle ilgili bir ad kullanmak yerine işlevle ilgili bir ad kullanmaktır. İçeriğin nasıl görüneceği çeşitli biçem işlemleriyle belirlenmelidir.

Çizgi içi ögeler örneği aşağıdaki gibidir:

Çizgi İçi

Burası <

strong>kalın</strong>. Burası <em>yatık</em>. Burası  <small> ufak </small>. Burası <mark> imli</mark>. Burası <del>silinmiş</del>. Burası <ins> eklenmiş</ins>.  Burası _altta. Burası ^üstte.

Ekran çıktısı:

grafikler2

Tıkam (Block)

Bir yazı içinde tıkam (block) biçiminde gösterim sağlayan çeşitli ögeler bulunmaktadır. Bunlardan kimileri aşağıdaki gibidir:

Bu ögelerde q (quote - alıntı) içeriğin bir alıntı olduğunu gösterir ancak yazının içinde yer almasını sağlar. Bu öge bir tıkam (block) ögesi değil çizgi içi (inline) ögedir. Karşılaştırma amacıyla bu bölümde gösterilmektedir. Öğelerden blockquote (tıkam alıntı) ise alıntıyı ayrı bir bölümde gösterir.

Tıkam ögelerinden code (düzgü), yalnızca özel bir biçimde gösterimi sağlamaktadır. Öte yandan pre (pre-formatted - ön biçimli) ise yine özel gösterim sağlamakla birlikte içerisindeki boşluk (space) ve yeni çizgi (new line) karakterlerinin korunmasını, bunların işlenmesini sağlar.

Öğelerden center (özek) ise yazının yatay olarak ortada görünmesini sağlar.

Tıkam örneği aşağıdaki gibi yapılabilir:

Bloklar

<p> Burası ana metin.  Burası ana metin. Burası ana metin. Burası ana metin. Burası ana metin. Burası ana metin.<q>Burası kısa alıntı.Burası kısa alıntı.</q>

Burası ana metin. Burası ana metin. Burası ana metin.

<blockquote>Burası uzun alıntı.Burası uzun alıntı.</blockquote>

Burası ana metin. Burası ana metin. Burası ana metin. Burası ana metin.

Burası ana metin.

<code>

  Burası kod.

</code>

Burası ana metin.

<pre>

    Burası aynen.

    Burası aynen.

    Burası aynen.

</pre>

Burası ana metin.

<center> Burası ortada

<pre>

  public class HelloWorld

  {

    public static void main(String[] args)

     {

      System.out.println(

        Merhaba Godoro!);

    }

  }

</pre>

Ekran çıktısı:

grafikler3

Özyapı Kümesi (Charset)

Bir belge içinde belli bir dil için gerekli karakterlere özyapı kümesi (character set), kısaltılmış biçimiyle charset adı verilir. Türkçe karakterlerin düzgün olarak görünmesi için bu biçimde ayarlamalar gerekli olabilmektedir.

Bir belgede özyapı kümesini belirlemek için içerik türü (content type) belirtmeye yarayan öte (meta) ögeleri kullanılır. Örneğin

http-equiv=Content-Type

   content="text/html;charset=ISO-8859-9"/>

biçimindeki bir kod parçası belgenin baş (head) bölümüne konursa Türkçe (Turkish) karakterlerin düzgün görünmesi sağlanabilir.

Türkçe karakterlerin düzgün görünmesini sağlayan birden çok karakter kümesi bulunur:

ISO-8859-9 : ISO ölçünü kümesi

UTF-8 : Türkçeyi de içeren Unicode karakterleri

Windows-1254 : Windows işletim düzenindeki küme

Çoğu kez, tüm durumlar için, buradaki tüm kümeler kullanılır.

Aşağıda Türkçe karakter setini destekleyen bir örnek bulunmaktadır. Yalnızca UTF-8 etkin bırakılmış, öteki seçenekler dışa yorumlanmıştır:

<head>

http-equiv=Content-Type

  content="text/html;charset=UTF-8"/>

http-equiv=Content-Type

  content="text/html;charset=ISO-8859-9"/>

http-equiv=Content-Type

content="text/html;charset=Windows-1254"/>

-->

</head>

Karakter Seti / Kodlama

Burası Türkçe karakterler içeriyor.

Örnek : üğışçöÜĞİŞÇÖ

Ekran çıktısı:

grafikler4

Biçem (Style) ve CSS

HTML ögelerin genelde belgenin yapısını tanımlarlar. Belgenin nasıl görüneceğine biçem (style) adlı verilir. Bunlar renk ve boy gibi içeriğin görüntüsüyle ilgili konuları içerirler. Her ögenin style adında bir özniteliği bulunur. Bu öznitelik kullanılarak biçem bildiren özellik (property) değerleri belirtilebilir.

Özellikler ad ve değer biçiminde belirtilir. Özellik adı ile değer arasında iki nokta üstüste (column) imi ':' kullanılır. Özellikler arasında da noktalı virgül (semicolumn) imi ';' konur.

Kullanımı

style="property1:value1;property1:value2">

biçimindedir. Örneğin

style="color:red;

font-weight: bold;

font-style:italic">

biçimindeki bir biçem kullanımı, belirtilen etiketin içindeki ögelerin renk (color) özelliğinin al (red), pınar ağırlığı (font-weight) özelliğinin kalın (bold) ve pınar biçemi (font style) de yatık (italic) olduğunu bildirir.

CSS

Biçemle ilgili konular HTML dilinden çok CSS (Cascading Style Sheets - Çağlayan Biçem Yaygıları) adındaki dille ilgilidir. Biçemler bu dile göre ögelerin içinde style (biçem) özniteliğiyle birlikte kullanılabildiği gibi, style (biçem) ögesi içerisinde ya da CSS dosyalarında da tanımlanabilir. Aşağıdaki HTML konularda kimi durumlarda öznitelik kullanarak biçem verme yoluna gidilmiştir.

Biçemlere çağlayan (cascading) adı verilmesinin anlamlı bir nedeni bulunmaktadır. Bir çağlayanda üstlerden gelen suyun aşağıya doğru akması gibi, bir ögedeki biçemler, kendi içindeki ögelerin biçimlerini de etkiler. Başka bir deyişle dış ögeye verilmiş bir biçem, o ögenin içindeki ögeye de etki eder. Elbette iç öge dilerse dışından çağlamayla aldığı biçem özelliklerini kendisi yeniden belirleyebilir.

RGB

HTML ve CSS gibi dillerde renkler İngilizce adlarıyla, örneğin white (ak), red (al), green (yeşil), blue (gök) ve black (kara) gibi gösterilebildiği gibi renk bileşenlerinin onaltılık (hexadecimal) tabandaki sayısal değerleriyle de gösterilebilir. Bu biçimde 256