Hüseyin Tepe

CCSS KODUNUN HTML SAYFASINA YAZILMASI

Şimdi ilk uygulamada CSS etiketlerini ve DİV tagını bir HTML dosyasında beraber yazarak tek bir dosyada web sayfası oluşturalı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ı için bir temel koddur.

Ayrıca,sayfada yazdığınız metinlerin Türkçe karakterlerini (Ç,ç,Ğ,ğ,İ,Ö,ö,Ş,ş,Ü,ü) bozulmadan yazdığınız gibi okunması için aşağıdaki (meta) tagını da (head) tagı içinde (title) etiketi altına yazınız.

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ı 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, hemen alt tarafa <HEAD>..</HEAD> tagları arasına yazacağımız aşağıda verdiğim CSS etiketlerini kopyalayarak yapıştırın.

Son olarak biçim parametresi verdiğimiz CSS etiketlerinin oluşturacağı DIV konumunu <BODY>..</BODY> tagları arasına yazacağımız aşağıda verdiğim DIV kodlarını kopyalayarak yapıştırın.

Artık çalışmamızı sonlandırabilirsiniz, kodları yapıştırdığınız Noteped'i divtest.html ismiyle farklı kaydederek bir web sayfası elde edelim.

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

Artık uygulamamızın sonucunu görebiliriz. divtest.html dosyasını açarak uygulamamıza bir atalım. sizin divtest.html web sayfasında da aynı görseli elde etmiş olmanız gerekmektedir.

biz uygulamamızda sadece tek bir div yaptık, web sayfasında ihtiyacımız ölçüsünde sayılarını ve boyutlarını artırarak bir birlerine komşu div'ler oluşturabiliriz.
Yeni bir Noteped (çalışma belgesi) açarak, aşağıda vermiş olduğum kodu yapıştırın ve HTML sayfası olarak kaydedin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>SAYFA İÇİNDE CSS ve DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	  

<head>
<style type="text/css">
#deneme1_div {
        width:800px;
        height:150px;
	border: 1px #000000 solid;
        background-color:#6699FF;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold; 
        color:#000000;
	position:center;
	line-height:150px; 
	margin:auto;
		}
		
#deneme2_div {
        width:600px;
        height:150px;
	border: 1px #000000 solid;
        background-color:#FFFF00;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold; 
        color:#000000;
	position:center;
	line-height:150px; 
	margin:auto;
		}		
</style>
</head>

<body>

<div id="deneme1_div">Deneme 1 div alanı</div>
<div id="deneme2_div">Deneme 2 div alanı</div>

</body>

</head>
</html>

html dosyasını açarak yeni uygulamamıza bir atalım. sizin html web sayfasında da aynı mavi ve sarı renkli iki div elde etmiş olmanız gerekmektedir.
kodları dikkatli incelediğinizde mavi div'in eni 800px sarı div'in eni ise 600px plarak belirtilmiştir.

Son bir kaç önemli bilgi vererek bu dersimizi de sonlandıralım,
div ismi sıralamada kolaylık olsun mantığıyla kesinlikle rakam ile başlamamalıdır, rakam yazacaksanız son çalışmamısda gördüğünüz gibi rakam ismin sonunda olabilir. ama isterseniz bir, iki, veya birinci, ikinci gibi yazabilirsiniz,
Peki bu divler hep alt alta mı oluşturulur, yan yana dizilmezlermi 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, bunlarıda ilerleyen derslerimizde anlatacağım.

Bu dersi pekiştirmek için, son oluşturduğumuz web sayfasını Noteped olarak tekrar açıp, renkler, div boyutları border çizgi rengi ve kalınlığı, gibi parametreleri değiştirerek tekrar kaydedin ve yaptığınız değişikleri gözlemleyiniz.

Bu konuyu anladınızsa diğer konuya geçebiliriz.

Bilgi Teknolojileri Hakkında Çalışmalar

HTML Dersleri

CSS Dersleri

Network Dersleri

PC Teknikleri

Excel Kullanımı

İş veya Gezi Seyahatleim Anılar ve Oluşan Dostluklar

SAP Meterial (SAP Malzeme Modülü)

CCSS KODUNUN HTML SAYFASINA YAZILMASI