HTML ve CSS

Html-Css

Html-Css


HTML(Hyper Text Markup Language – Hiper Metin Düzenleme Dili)

HTML sanıldığının aksine bir programlama dili değildir,bir işaretleme dilidir.

İşaretleme dili: Web siteleri oluşturmak amacıyla kullanılan bir takım etiketlerden(taglar) oluşan bir dildir.

Örnek HTML tagları(etiketleri) ve açıklamaları:                   

<html>: HTML sayfasının açılış tagıdır.

 </html>: HTML sayfasının kapanış tagıdır.

Bir HTML sayfasında kullanılacak olan bütün taglar, “<html></html>”  tagları arasında yer alır.

          <body></body>: Kullanıcı tarafından görüntülenecek web sitesinin içeriği body tagları arasına yazılır.

             <head></head>: Kullanıcı tarafından görüntülenecek web sitesinin başlığı head tagları arasına yazılır.

             <p></p>: “Paragraph” ın baş harfi olan <p></p> taglarını yazı yazmak amacıyla kullanırız.

             <b></b>: “Bold” un baş harfi olan <b></b> taglarının arasına yazılan yazılar koyu gözükür.

<br />: “Break” in kısaltması olan <br/> tagı alt satıra geçmek için kullanılır.

             <input />: Kullanıcıdan bilgi girişi almamızı sağlayan bir html tagıdır.

 

Yukarıda anlattığımız html tagları ile örnek bir web sitesi oluşturalım:

-Bir not defteri açınız ve içine şunları yazın:

 

<html>                      Bir html sayfası oluşturacağımızı belirtiyoruz

<head>           Oluşturduğumuz html sayfasının başlığını yazacağımızı belirtiyoruz

<p>Örnek sayfa</p>

</head>                    Oluşturduğumuz html sayfasının başlığının bittiğini belirtiyoruz

<body>           Oluşturduğumuz html sayfasının içeriğini yazacağımızı belirtiyoruz

<b>Bu bir html sayfasıdır</b>

</body>                    Oluşturduğumuz html sayfasının içeriğinin bittiğini belirtiyoruz

</html>                     Oluşturduğumuz html sayfasının burada bitmesi gerektiğini belirtiyoruz

 

-Yukarıdaki tagları yazdıktan sonra not defterinde  “dosya->farklı kaydet”  menüsünü tıklıyoruz.Açılan sayfada kayıt türünü “tüm dosyalar” seçip, Dosya adını “websitesi.html” yapıyoruz ve “kaydet” i tıklıyoruz.

 

Örnekten de anlaşılacağı üzere oluşturduğumuz html sayfaları, web sitelerinin sayfalarıdır.Bir web sitesi sayfasının nasıl oluşturulacağını öğrendiğimize göre artık bu web sitesine görsellik katmamız gerekir.Bu görselliği katmamızı da CSS(Cascading style sheet) sağlıyor.

 Ek bilgi: Dosya isminden sonra nokta konularak dosyanın uzantısı yazılır; Bir dosyanın uzantısı o dosyanın tipini belirler.Örneğin Bir word dosyasının uzantısı “doc” veya “docx” dir.Yukarıda dosya adı olarak yazdığımız “websitesi.html” ‘de “websitesi” dosyanın adı, noktadan sonra gelen “html” ise dosyanın uzantısıdır.Yani dosya adına “websitesi.html” yazarak oluşturduğumuz dosyayı, html dosyası olarak kaydetmiş olduk.

 

CSS(Cascading Style Sheet – Stil Dosyası)

Adından da anlaşılacağı üzere CSS ile stiller tanımlarız ve bu stilleri sitemizde görsellik sağlamak amacıyla kullanırız.

Yukarıda yaptığımız gibi bir web sayfası hazırlamak çok da zor değil.Önemli olan bu web sayfasını gerek yazılımsal gerekse görsel olarak etkileyici kılmaktır.Eğer yukarıdaki web sayfamızı yazılımsal olarak geliştirmek isteseydik,  asp veya php gibi programlama dillerinin kodlarını web sayfamızın ilgili tagları arasına (ör/body tagı) yazacaktık.

Web sayfamızı görsel olarak geliştirmek istediğimizden dolayı CSS stillerimizi web sayfamızın içersinde kullanarak sitemize görsel canlılık katacağız.

Stil: Oluşturduğumuz veya oluşturacağımız herhangi bir görselin niteliklerini (rengini,boyutunu,çerçevesini) stiller sayesinde belirleriz.

Örnek bir stil tanımlama:

Yukarıda oluşturduğumuz sitemizde “Örnek sayfa” yazısının rengini kırmızı,fontunu ise arial yapalım;

-Öncelikle stil dosyamızı tanımlayalım.Bir not defteri açın ve içine şunları yazın (Mavi yazılar açıklama içindir onları yazmayınız!):

.kirmizi {   “ . “ class tanımladığımızı, “ # ” ise id tanımladığımızı gösterir (ileride class ve id ye değineceğiz)

font:Arial;

color: #FF0000;

}

– Daha sonra not defterinde  “dosya->farklı kaydet”  menüsünü tıklıyoruz.Açılan sayfada kayıt türünü “tüm dosyalar” seçip, Dosya adını “site.css” (css dosyası olarak kaydetmiş oluyoruz) yapıyoruz ve “kaydet” i tıklıyoruz.

class:Tanımladığımız stili birden fazla yerde kullanmak istiyorsak o stili class olarak tanımlamalıyız.Ör/ kırmızı bir yazı stilini web sitemizin bir çok yerinde kullanabiliriz.

id:Tanımladığımız stil özel bir stil ise ve bir kere kullanacaksak o stili id olarak tanımlamalıyız.Ör/ Web sitemizin logosunu bir sayfa içinde sadece bir kere kullanacağız bu yüzden id olarak tanımlarız.

“Site”  adında bir css dosyası (stil dosyası) oluşturduk.Ve bu stil dosyamızın içine “kirmizi” adında bir stil tanımladık.Fakat bu css dosyasının kendi başına bir işlevselliği yoktur.Bu işlevselliği stil dosyamızı, bir html dosyası içinde kullanarak katabiliriz.Css dosyamızı, html sayfamızda kullanabilmemiz için html sayfamıza, css dosyamızı çağırmalıyız.

O halde yukarıda tanımladığımız html dosyasına benzeyen bir html dosyası daha oluşturalım:

<html>

<head>

<link rel = “stylesheet” type= “text/css” href= “site.css” />    site.css i , html sayfamıza bağladık.

</head>

<body>

<p class= “kirmizi”>Örnek sayfa</p>  site.css stil dosyamızda tanımladığımız bir stili, html tagına class özelliğini kullanarak atadık.Bu şekilde stilde tanımladığımız tüm özellikler ilgili html tagına aktarılmış oldu

<b>Bu bir html sayfasıdır</b>

</body>

</html>

Yakından bakalım:

1) <link rel = “stylesheet” type= “text/css” href= “site.css” />

style sheet: stil kağıdı tanımladığımızı belirtiyoruz

text/css : Bağlantı kuracağımız dosyanın tipinin text olarak yazılmış bir css dosyası olduğunu belirtiyoruz

href: Bağlantı kuracağımız dosyanın adresini ve adını veriyoruz ki o adrese gidip belirttiğimiz dosyayı bulup getirsin.(site.css ile websitesi.html aynı klasörde olduğundan dolayı adres belirtmeden direkt olarak site.css in ismini verdik.Çünkü istenen dosyanın ilk aranacağı yer içinde bulunduğunuz klasördür.)

2) <p class= “kirmizi”>Örnek sayfa</p>

stil dosyamızda(site.css) “kirmizi” stilini nokta ile yani class olarak tanımladık.O yüzden html tagımıza bu stili atarken, tagın class özelliğine stilin ismini yazdık.Stilimizi aşağıdaki gibi id ile tanımlasaydık;

#kirmizi {

font:Arial;

color: #FF0000;

}

Bu stili atamak istediğimiz tagın “id” özelliğine “kirmizi” ismini yazacaktık.(Ör/<p id= “kirmizi”>Örnek sayfa</p>  )

3)#FF0000 : kırmızı renginin RGB karşılığı

Oluşturduğumuz html dosyası ile css dosyasını aynı klasöre koyduktan sonra web sitemizi açalım ve stilde tanımladığımız özelliklerin istediğimiz taga(<p class= “kirmizi”>Örnek sayfa</p>  ) uygulanıp uygulanmadığına bakalım.