YÜKLENİYOR...

HTML Dersleri

  • Anasayfa
  • HTML Sayfasına link ve style etiketleri ile CSS Uygulama
HTML Sayfasına link ve style etiketleri ile CSS Uygulama - html, html dersleri, link, link etiketi, style, style etiketi, rel, href, type, rel özelliği, href özelliği, type özelliği, html css, css, #02
Ahmet Aydın - 07/01/2021 - 22 Görüntülenme

HTML Sayfasına link ve style etiketleri ile CSS Uygulama

Merhaba, bu makalede Sıfırdan HTML Derslerine devam ediyoruz ve HTML’de link etiketi ve title etiketi yapılarını inceleyeceğiz. Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi unutmayınız.

link Etiketi

bulunduğu HTML dosyasından farklı bir dosya ile bağlantı kurmak için head etiketi arasında kullandığımız etikettir. Genellikle dışarıdaki CSS dosyası ile bağlantı kurmak için kullanırız. link etiketi de singleton yani tek kullanımlık etiket yapısındadır. Hatırlayacağınız gibi bu yapıdaki etiketlerimizde kapatma etiketi bulunmuyordu.

Dışarıdaki CSS dosyası ile Bağlantı Kurma

rel Niteliği

link etiketi içerisine giriyoruz ve link ifadesinden sonra bir boşluk bırakıyoruz. rel = “” ifadesini yazıyoruz. rel, bulunduğu HTML dosyası ile dışarıdaki dosyanın arasındaki ilişkiyi belirttiğimiz niteliktir. HTML dosyaları ile CSS dosyaları arasında stylesheet yani sayfa stillendirme ilişkisi bulunmaktadır. rel niteliğinin karşısında bulunan “” işaretleri arasına stylesheet değerini veriyoruz.

type Niteliği

rel = “stylesheet” ifadesinden sonra bir boşluk bırakıyoruz ve type = “” ifadesini oluşturuyoruz. type, dışarıdaki dosyanın türünü belirttiğimiz niteliktir. CSS dosyaları için text/css yani css metin dosyası olduğunu belirtiyoruz. type niteğinin karşısında bulunan “” işaretleri arasına text/css değerini veriyoruz.

href Niteliği

type = “text/css” ifadesinden sonra bir boşluk bırakıyoruz ve href = “” ifadesini oluşturuyoruz. href, bağlantı kurulacak dışarıdaki dosyanın konumunu belirttiğimiz niteliktir. href niteliğinin karşısında bulunan “” işaretleri arasına dosyanın konumunu yazıyoruz.

Örnek: href = “css/style.css”

Yukarıdaki örnekte HTML dosyamla aynı dizinde bulunan css klasörünün içerisindeki style.css dosyası ile bağlantı kurmak istediğimi belirtmiş oldum. Burada dosyanın konumuna dikkat etmeliyiz. Yanlış bir konum girdiğimizde bağlantı kurulamayacak, CSS dosyasındaki kodlarımız HTML dosyasında çalışmayacaktır.

link etiketi içerisinde tüm niteliklerimizi dikkatli bir şekilde yazdıysak şimdi bağlantının kontrolünü yapalım.

  • body etiketinin açma ve kapatma etiketleri arasında bir ifade yazınız. Ben Ahmet Aydın yazıyorum.
  • style.css dosyasına gidiniz.
  • * { color : red; } kodunu yazınız.
  • Değişikliklerden sonra dosyalarınızı kaydetmeyi unutmayınız.
  • HTML dosyasını tarayıcıda açınız.

Eğer bağlantıyı doğru bir şekilde kurduysanız ve kodlarınızda da bir hata yoksa HTML dosyasında body etiketinin açma ve kapatma etiketleri arasında yazmış olduğunuz ifadenin kırmızı renkte yazıldığını gözlemleyebilirsiniz.

style Etiketi

HTML dosyası içerisinde CSS kodlarını çalıştırmak istediğimizde başka bir deyişle sayfa içi stillendirme yapmak istediğimizde kullandığımız etikettir. style etiketi de head etiketleri arasında kullanılmaktadır. style etiketini kullanarak bir stil uygulayalım.

  • head etiketinin açma ve kapatma etiketleri arasında style etiketini oluşturalım.
  • style etiketinin açma ve kapatma etiketleri arasında * { text-decoration: underline; } kodunu yazalım.
  • Değişikliklerden sonra dosyamızı kaydetmeyi unutmayalım.

Eğer kodlarınızı doğru bir şekilde yazdıysanız body etiketinin açma ve kapatma etiketleri arasında yazmış olduğunuz ifadenin altı çizili bir şekilde yazıldığını gözlemleyebilirsiniz.

style etiketinin açma etiketinin içerisinde style ifadesinden sonra type niteliğini ve bu niteliğin text/css değerini görebilirsiniz. Bu niteliği yazmak zorunlu değildir. Sadece açma etiketini oluşturup açma ve kapatma etiketleri arasında CSS kodlarımızı yazabiliriz.

Bu iki yöntemden önerileni dışarıdaki bir CSS dosyası ile bağlantı kurup CSS kodlarının çalıştırılmasını sağlamaktır. Bu hem HTML dosyasındaki hem de CSS dosyasındaki kodların daha düzenli olmasını sağlayacaktır.

Bu makalede Sıfırdan HTML Derslerine devam ettik ve HTML’de link etiketi ve title etiketi yapılarını inceledik.

Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi hatırlatmak istiyorum. Ahmet Aydın Youtube Kanalı’na abone olabilir ve burada olmayan paylaşımlardan da faydalanabilirsiniz. Umarım yararlı bir yazı olmuştur. Bir sonraki makalede görüşebilmek dileğiyle kodla kalın, hoşça kalın...