CSS REFERANS EKLENTİLİ HTML SAYFASI

Bir önceki dersimizde CSS etiketleri ve parametrelerini HTML sayfası içine yazarak DIV oluşturduk, Şimdi ayrı bir CSS dosyası düzenleyerek, HTML sayfasına eklendi yaparak web sayfası oluşturalım.

Uygulamamız alt alta üç div olacak şekilde bir web sayfası olacaktır.
İlk olarak bir CSS dosyası hazırlayıp kaydedeceğiz, ardından bir HTML dosyası hazırlayarak bu CSS dosyasını link metodu kullanarak referans vereceğiz.

Şimdi CSS dosyasını hazırlayalım.
Bilgisayarınızda yeni bir Noteped (metin belgesi) açın, sonra aşağıda verdiğim üç divli hazır CSS etiketlerini kopyalayarak Noteped'e yapıştırın ve stil.css olarak masa üstüne kaydedin.

Şimdi de HTML Dosyamızı hazırlayalım.
Bilgisayarınızda bir Noteped (metin belgesi) açın, sonra aşağıda verdiğim hazır web sayfası başlangıç kodunu en başa yapıştırın. Bu kod, her web sayfası (html belgesi) nın başlangıcında bulunması gerekir. Bu kodun görevi ise farklı web tarayıcılarında saglıklı ve hızlı okunması ve türkçe karakterlerin bozulmaması için bir temel koddur.

Bu kodlar arka planda çalışıp görünmeyen bir koddur. Bu kodlar ile fazla kafa yormayalım unutmayalım ki web sayfası yaratıyorsak sayfanın en başına belirtilen konumlara bu kodları standart olarak yazmanız yeterlidir. Bu temel kodları Noteped' belgesinin en üst tarafına yapıştırdıktan sonra, intrnet tarayıcısının okuyacağı diğer kodları yazmaya başlıyalım.


Başlangıç kodunu yapıştırdıktan sonra <head>..</head>tagları arasındaki meta kodunun hemen altına aşağıda verdiğim CSS dosyasının referans alacak link kodunu yapıştırın.

Son olarak divlerin konumlarını belirten aşağıdaki hazır kodu kopyalayarak </head> kapatma tagının alt tarafına yapıştırın.

Artık çalışmamızı sonlandırabilirsiniz, kodları yapıştırdığınız Noteped'i deneme.html ismiyle farklı kaydederek bir web sayfası elde edelim. Bilgisayarımızda aşağıdaki gibi iki dosya oluştu,


Size yine bir kolaylık yaparak, yukarda sırası ile vermiş olduğum HTML sayfasına yapıştıracağınız kodların tamamını aşağıda kod kutusunda birleştirerek verdim. Bu kodun tamamını Noteped'e yapıştırarak hemen deneme.html ismiyle farklı kaydedin.

Artık uygulamamızı kontrol edebiliriz. "deneme.html" dosyasını açıp bakalım. Sizin deneme.html web sayfasında da aynı görseli elde etmiş olmanız gerekmektedir.


UYGULAMAYI GELİŞTİRME;

Peki bu divler hep alt alta mı oluşturulur, yan yana dizilmezler mi ? dediğinizi tahmin ediyorum, tabiki divleri sayfa tasarımına göre alt alta, yan yana ve hatta div içinde div'ler gruplandırılabilir,
Divleri yatay eksende yan yana dizmek için stil.css dosyasını Notoped olarak açın ve yan yana konumlanmasını istediğiniz divlerin son satırına float:left; etiketini yapıştırın (aşağıdaki örnek gibi) ve değişikliği kaydedin.

#birinci_div {
    width:250px;
    height:150px;
    border: 1px #000000 solid;
    background-color:#6699FF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#000000;
    line-height:150px;
     float:left;
    }

Divler yatay olarak yan yana dizilmişler mi kontrol edebiliriz. "deneme.html" dosyasını açıp bakalım. Sizin deneme.html web sayfasında da aynı görseli elde etmiş olmanız gerekmektedir.

Bu anlatımda burada tamamlandı,
Kolay gelsin

  

Copyright © 2018 Hüseyin Tepe