WEB VE İNTERNET TEKNOLOJİLERİ

(1)

İlker ALİ

WEB VE İNTERNET

TEKNOLOJİLERİ

(2)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 1

(3)

İçindekiler

WEB’in Tarihi ... 5

HTML ... 7

Html Yapısı ... 7

Html Yapısına Uygun Web Sayfası ... 8

Html Yapısına uygun web sayfasını nasıl oluştururuz ? Html 5 standartlarına uygun ilk web sayfa tasarımımız. ... 8

İlk Html Sayfamız ... 10

Html sayfası nedir ve nasıl oluşturulur ? ... 11

Uygulama Çalışması : ... 12

Uygulama Çalışması 1 ... 13

Html Başlık Etiketleri ... 14

Html Paragraf Etiketi ... 15

Html Biçimlendirme Etiketleri ... 15

Uygulama Çalışması-2 ... 16

Html biçimlendirme etiketleriyle ilgili bir uygulama yapalım. ... 16

Listeler ... 16

Madde İmli (Unordered) Listenin Type Özelliği ... 17

Numaralı Liste Özellikleri ... 18

Images ... 19

Form ... 19

Form Kontrol Türleri ; ... 20

Uygulama ... 21

Tablo ... 23

Links - Bağlantılar ... 25

Div Span... 25

HTML DİV ve SPAN NEDİR? ... 26

SİTE YAPISI ... 26

SPAN ETİKETİ ... 28

Html Semantik Etiketler ... 30

HTML5 <section> Element ... 31

HTML5 <article> Element ... 32

(4)

HTML5 <header> Element... 32

HTML5 <footer> Element ... 32

HTML5 <nav> Element ... 32

HTML5 <aside> Element ... 33

iFrame ... 33

Html iFrame ... 33

CSS Inline (Kod içinde) ... 34

CSS internal ... 35

CSS external... 35

CSS Sayfa Düzeni (Layout) ... 37

ID ve Class lar ... 45

Bootstrap ... 48

Bootstrap Text Align & Display ... 58

Bootstrap 4' de Display Nasıl Kullanılır ? ... 59

Bootstrap responsive ön ekleri ile text hizalamayı nasıl yaparız ? ... 61

JAVASCRIPT ... 62

JAVASCRİPT TARİHİ ... 62

JAVA VE JAVASCRİPT ARASINDAKİ FARKLAR NELERDİR? ... 63

JAVASCRIPT'İN GENEL ÖZELLİKLERİ ... 63

JAVASCRİPT'LERİ ÇALIŞTIRMAK ... 64

JAVASCRİPT İLE NE YAPİLABİLİR NE YAPILAMAZ ? ... 64

JAVASCRİPT DİLİ ... 65

JAVASCRİPT NEREDE KULLANILIR? ... 66

<SCRIPT> ETİKETİ ... 66

HTML BELGESİ İÇİNDE JAVASCRIPT YAZMAK ... 66

1. <HEAD> İçinde: ... 67

2. <BODY> İçinde ... 67

3. <BODY> İçinde URL Olarak ... 68

JAVASCRİPT DİLİNİN ÖZELLİKLERİ ... 68

Uygulama ... 72

Operatörler ... 73

/* 1- Matematiksel Operatörler */ ... 73

(5)

/* 2- Karşılaştırma Operatörleri*/ ... 74

/* 3- Mantıksal Operatörler*/... 74

Koşul İfadeleri ... 76

Döngüler ... 79

JQuery ... 82

Temel Seçiciler (Basic Selectors) ... 83

Click event ... 89

Change event ... 90

Jquery effects ... 91

Attribute Filtreleri ... 100

Temel Filtreler ... 101

Entity Framework ... 106

Entity Framework Modelleri... 106

EF - Entity Framework Model First Nedir ... 106

EF Entity Framework Database First Nedir... 106

EF Code First Nedir ... 106

Code First Entity Framework Ders ... 106

LINQ - Language integrated Query ... 109

LINQ Neden Kullanılmalı?... 110

Verilerin Seçilmesi - Selecting Data ... 111

Verilerin Güncellenmesi - Updating Data ... 112

Veritabanında Bütün Verilerin Güncellenmesi - Updating Data 2 ... 113

Verilerin Silinmesi – Deleting Data 2 ... 114

Web Servis ... 116

Web Servis Yazmak ve Kullanmak ... 117

Asp.Net ile Web Servis Geliştirme ... 125

-Web Servis Veri Tabanı İşlemleri ... 126

Web servis oluşturma ve Metotlar (c#) ... 145

Web Servis Oluşturma ... 145

METOTLAR ... 146

Web servis Kullanımı (c#) ... 149

Sorular ... 154

(6)

WEB’in Tarihi

We Are Social ve Hootsuit’in 2018 yılında yayınladığı verilere göre dünyada 4 milyar aktif internet kullanıcısı bulunuyor ve 2017 yılına oranla internet aktif kullanıcı sayısında yüzde 7 oranında bir büyüme oranı söz konusu. Dünya nüfusunun yüzde 53’lük bir dilimine tekabül eden bu rakam, bizlere internetin dünya çapındaki hacmini de gösteriyor. Dolayısıyla rekabetçi yapısı giderek artan bu dünyada görünür ve bilinir olmak gün geçtikçe önem kazanıyor. Peki, hayatımız içinde yeri bu derece önemli olan, internet dünyasında kurumsal veya bireysel olarak var olmamızı sağlayan ve bizleri temsil eden web siteleri dünden bugüne hangi aşamalardan geçip günümüzdeki halini aldı?

Web sitelerinin oluşmasındaki en etkili unsurun arama motorları olduğu biliniyor.

Günümüzde yaygın olarak kullanılan arama motorlarının aksine farklı bir algoritması bulunan ve dünyadaki ilk arama motoru sayılan Archie’nin kurulmasından bu yana 28 yıl geçti. Archie’yi ise 1991 yılında geliştirilen Veronica ve Jughead adında iki arama motoru takip etti. İnternet dünyasında dönemine göre devrim sayılan ve dosya arama üzerine kurulan bu arama motorları web sitelerinin temelini oluşturuyor.

Bilinen ilk web sitesi 1991 yılında Tim Berners-Lee tarafından kuruldu. İlk web sitesi ile birlikte internet dünyası yeni bir yeniliği daha bünyesine ekledi. HTML dili ile yayınlanan ilk web sitesi bugünkü web sitelerinin gelişmesi için gerekli altyapıyı oluşturdu. Dünden bugüne milyonlarca web sitesi kuruldu. Bunun ilk adımı ise bundan tam 27 yıl önce atıldı.

İlk web sitesinin kurulmasının ardından web sitelerini geliştirmek için tasarım çalışmalarına ağırlık verildi. 1992 yılında ilk tablo tabanlı web siteleri oluşturuldu. 1995 yılında Java Script ile PHP’nin icadı ve 1996 yılında CSS’nin de etkisiyle Macromedia Flash’ın ilk sürümleri piyasaya sunuldu. Bu sayede teknolojik gelişmelere açık web tabanlı tasarımlar ve görsel ağırlıklı web siteleri hazırlanmaya başlandı.

2000’li yıllara gelindiğinde gerçek görünümlü dokular, parlak ve yansımalı elementler ile farklı yazı fontları web sitelerine katkı sağlayan yeniliklerin başında geliyordu. 2007 yılında geliştirilen Grid yapısı, web sayfalarını uygun genişlikteki ızgaralara bölerek daha hızlı ve daha kolay yazılım geliştirme seçenekleri sundu. Eş zamanlı olarak web sitelerindeki görsellerin hareketli bir hale getirilmesine yönelik “Slider” çalışmaları da başladı.

2009 yılında mobil uyumlu web tasarımları ortaya çıktı ve tek sayfalık web siteleri rağbet görmeye başladı.

(7)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 6 Tim Berners-Lee’nin ilk kurduğu ve öncelikle sadece CERN’in içinde erişilebilen web sitesiyle bugün artık cebimizin içindeki bir cihazdan bile erişebildiğimiz web siteleri arasında dünyalar kadar fark var.

(8)

HTML

Html Yapısı

Html sayfalarının en temel bileşenleri nelerdir ? Bir html iskeleti nasıl oluşturulur ?

Bir html sayfası oluşturmadan önce mutlaka html 5 standartlarına uygun bir html iskeleti oluşturmalıyız. Web sayfalarımızı html 5 standardına uygun hazırlamamız büyük önem taşımaktadır çünkü arama motorları tarafından önemsenmektedir.

Aşağıda her zaman kullanabileceğimiz bir html iskeleti mevcuttur.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Sayfa Başlığı</title>

<style type="text/css"> Buraya css kodlarımız gelir. </style>

</head>

<body> Sayfada görünen tüm içerik buraya eklenir.

</body>

</html>

Html Etiketi Nedir ?

(9)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 8 Sayfa üzerinde kullanılan her öğeye html etiketi denir. Html bir programlama dili olmadığından etiket isimlerini yanlış yazsanızda html sayfası hata vermeden çalışır ve görüntülenir ama oluşturmak istediğimiz görüntüyü bazen tarayıcıda farklı şekilde görebiliriz.

Etiket kullanımı şu şekildedir ;

<etiket_ismi> .... </etiket_ismi> : açılış ve kapanış etiketleri arasına sayfa öğelerini ekleriz ve etiketin görevi ne ise içinde bulunan öğeye o görevi uygular.

Örnek bir html sayfası içinde bazı önemli noktaları kabaca açıklayalım.

<!doctype html> : Sayfanın html5 standartlarına uygun bir html dökümanı olduğunu belirtiyoruz.

<html> : Sayfadaki bütün elemanlar <html> açılış etiketi ve </html> kapanış etiketleri arasına gelir.

<head> : Sayfa ile alakalı açıklamaların yer aldığı kısımdır. Örneğin sayfamızın arama motorlarında hangi anahtar kelime ile bulunmasını istiyorsak burada belirtiyoruz yada sayfanın bağlı olduğu harici kaynakların belirtilmesi, sayfa başlığı gibi sayfada direk görmediğimiz ama sayfa ile alakalı bilgilerin yer aldığı kısımdır.

<title> : Tarayıcı penceresinin sol üst kösesindeki sayfa başlığını burada belirtiyoruz.

<meta> : Sayfamızı tanımlayan açıklamaların bulunduğu kısımdır. Sayfa açıklaması,sayfa başlığı, kullanılan karakter seti tanımlaması gibi işlemler burada tanımlanıyor.

<style> : Sayfada kullanılan stil işlemlerinin tanımlaması yapılır.Örneğin arkaplan rengi yazı rengi yada nesnelerin hizalanması gibi işlemler.

<body> : Html sayfası üzerinde gördüğümüz tüm nesnelerin tanımlanmış olduğu kısımdır.

Bu etiketler html sayfamızın genel hatlarını oluşturan en genel etiket türleridir.

Html Yapısına Uygun Web Sayfası

Html Yapısına uygun web sayfasını nasıl oluştururuz ? Html 5 standartlarına uygun ilk web sayfa tasarımımız.

Html dökümanlarının en genel etiketi <hmtl> etiketidir.Dolayısıyla bütün içeriğimiz bu etiket içine gelmelidir.

<html> Burada 2 genel alt etiket daha tanımlıyoruz.(head ve body)</html>

** Etiket tanımlamalarının aynı hizaya gelmesi önemlidir. <html> etiketlerinin aynı hizada ve html etiketinin 2 alt öğesi olan head ve body etiketinin ise aynı hizada tanımlandığına dikkat edelim.

<html>

(10)

<head>

</head>

<body>

</body>

</html>

head etiketlerinin bazı alt etiketleri ise şu şekildedir ;

<html>

<head> Burada sayfamızı tanımlayan açıklamalar yer almalıdır.Örneğin;

**sayfa başlığı (title),

<title> Bu benim ilk web sayfam </title> **sayfanın arama motorlarında bulunması için gereken sayfa açıklaması ve anahtar kelime tanımlamaları (meta etiketleri),

<meta name="description" content="Ali hazırladığı kurslar"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> **sayfa stil (css) tanımlamaları (yazı fontu,arkaplan rengi gibi...)

<style> body { background-color:red; // sayfa zemini kırmızı olur.body sayfanın genelini temsil ettiği için. }

</style>

</head>

<body> Sayfa üzerinde gördüğümüz her öğe burada tanımlanmalıdır. </body>

</html>

Html5 Meta Etiketleri ;

meta etiketleri html dökümanı ile alakalı tanımlayıcı bilgileri içeriyor. Örneğin ; sayfanın hangi konu ile alakalı olduğunu, hangi anahtar kelimeler kullanılarak ulaşılabileceği gibi bilgileri arama motorlarına bildirir.

En çok kullanılan bazı meta etiketleri;

<head>

charset="UTF-8" : Sayfanın tanıyacağı karakter kodlama türünü belirtir. Bu karakter kodlarını aşağıdaki linkten kontrol edebilirsiniz.Eğer kullanılmazsa tanınmayan karakter gösteriminde sorun çıkabilir.

https://www.w3schools.com/charsets/ref_html_utf8.asp

(11)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 10 title: Site adı olarak belirttiğiniz bu meta kodu arama motorlarının sitenizin adını kolay bulması için yardımcı olmaktadır.Tarayıcının sol üstünde görünen isimdir.

<meta name="title" content="Yazılım Eğitimleri" />

description : Sayfa hakkında açıklayıcı bilgi. Genelde açıklayıcı ve anahtar kelime içeren özet bir cümle olması beklenir. Çok uzun açıklama girmek negatif bir duruma neden olur.

<meta name="description" content="En kaliteli yazılımlar ile zaman kaybetmeden bir adım öne geçin.">

keywords : Sitenizin arama motorlarında bulunmasına yardımcı olacak olan anahtar kelimelerinizi tanımlayacağınnız alan olan meta keyword içerisinde anahtar kelimelerinizden 1-4 tanesini belirtebilirsiniz.

<meta name="keywords" content="HTML,CSS,Asp.Net,Javascript">

author : Yazar bilgisi.

<meta name="author" content="Ad Soyad">

viewport : Sayfanızın tüm cihazlarda sorunsuz görünmesiyle alakalı bilgi. Responsive Design bölümünde bu konuyu anlatmaktayım.

Aşağıdaki meta etiketinin her html sayfanıza eklemenizi tavsiye ederim.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

refresh : Sayfanızın belli bir saniyede yenilenmesini istiyorsanız refresh meta etiketini kullanabilirsiniz.Aşağıdaki meta etiketiyle sayfamız her 30 saniyede bir yeniden yüklenecektir.

<meta http-equiv="refresh" content="30">

Meta etiketlerini tanımlamamızdaki en büyük neden sayfamızın arama motorlarına iyi gözükmesidir. Ve bazı seo tavsiyeleri için aşağıdaki linki takip etmenizde fayda var.

https://www.seohocasi.com/seo-meta-tag/

İlk Html Sayfamız

(12)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 11 Html sayfası nedir ve nasıl oluşturulur ?

Html dökümanı tarayıcıların (chrome , internet explorer) anlayacağı bazı söz dizimlerini içeren dökümanlardır. Html dökümanında yazdıklarımız tarayılar üzerinde görüntülenir.

Brackets ile bir html sayfasını aşağıdaki adımları izleyerek oluşturalım.

1- Sol taraftaki pencereden "Klasörü Aç" menüsüne tıklayarak bir konum seçmeliyiz.

2- Konum olarak masaüstünü seçtikten sonra gri alana sağ tıklıyoruz ve sonra gelen menüden

"Yeni Klasör" seçeneği ile masaüstüne "website" isimli yeni bir klasör oluşturuyoruz.

3- "website" klasörüne sağ tıklayıp gelen menüden "Yeni Dosya" dedikten sonra index.html isimli bir dosyayı website klasörüne ekliyoruz.

(13)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 12 4- Oluşturduğumuz index.html dosyası içine bir yazı yazalım.

5- Son olarak index.html sayfasına tıkladığımızda dosyamız .html uzantılı bir dosya olduğundan dolayı direk tarayıcı ile açılacaktır.

Uygulama Çalışması :

Masaüstünde oluşturduğunuz proje isimli bir klasör içine sırasıyla index.html , about.html ve contact.html dosyalarını oluşturun.

1. index.html içeriğine => anasayfa 2. about.html içeriğine => hakkımızda 3. contact.html içeriğine => iletişim bilgileri

(14)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 13 4. Tarayıcı ile sayfaları görüntüleyin.

Uygulama Çalışması 1

Html 5 standartlarına uygun ilk web sayfa tasarımımızın ardından bir html uygulaması yapalım.

<!doctype html>

<html>

<head>

<title>Html Uygulama Çalışması</title>

<meta charset="utf-8" />

</head>

<body>

Bu benim ilk html5 standardına uygun web sayfam.

</body>

</html>

Sayfa oluştururken dikkat edilmesi gereken noktalar ;

• <!doctype html> satırını ekleyerek internet dünyasına sayfamın html5 standartlarını takip eden ve uyan bir html dökümanı olduğunu bildiriyorum.

• <html> açılış ve </html> kapanış etiketlerinin en genel etiket olduğunu biliyorum ve bunları aynı hizaya alıyorum.

• <html> etiketlerinin 2 alt öğesi olan <head> ve <body> etiketlerini <html> etiketi içinde biraz içten başlayarak aynı hizada oluşturmaya dikkat ediyorum.

• <head> etiketi içine 2 öğeyi biraz içten başlayarak ekliyorum.

• <title> açılış ve </title> kapanış etiketi içine sayfamın başlığını yazıyorum.

• <meta charset="utf-8" /> satırını kullanarak döküman içinde karakter kodlaması belirttik.

• <body> etiketinin açılış ve </body> kapanış etiketleri içine sayfada görünmesini istediğim bir yazı ekledim.

** Sayfa üzerindeki yazılarda türkçe karakter sorunu yaşıyorsanız aşağıdaki satırı <head> etiketi içine eklemeniz yeterlidir.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">

(15)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 14 Html Başlık Etiketleri

Html Başlık Etiketlerini nasıl ve hangi amaçla oluşturuyoruz ?

Html sayfalarında içerik oluştururken kullandığımız başlıkları önem derecesine göre başlık etiketleri (heading tags) içine almamız gerekir. Çünkü arama motorları sayfa üzerindeki başlıkların önem derecesini bilmek isterler.

Örneğin; sayfanın en önemli başlığı <h1> etiketi içine alınmalıdır ki arama sonuçlarında <h1>

içine gelen başlık vurgulansın ve kullanıcılara gösterilsin.

Html başlık etiketleri h1,h2,h3,h4,h5,h6 olmak üzere 6 tanedir ve aşağıda görüldüğü gibi başlık etiketleri her hangi bir stil (yazı boyutu yazı kalınlığı gibi) uygulanmadan tarayıcıların varsayılan olarak atadıkları font büyüklükleri ile sayfada gösterilirler.

<h1> h1 Başlık Etiketi </h1>

<h5> h5 Başlık Etiketi <h5>

Font büyüklüklerini stil yani css derslerinde nasıl değiştireceğimizi göstereceğiz.

Html başlık etiketlerinin kullanımında önemli olan bu etiketlere yüklenen anlamlardır. h1 etiketi sayfanın en önemli vurgulanan başlığıdır ki sayfada 1 kere kullanılması önerilir.

Örneğin h2 etiketi önem açısından bir aşağıda bulunan ve sayfada en fazla 4 kez kullanılması önerilen başlık etiketidir.

Bunlara uymamız sayfalarımızın arama motorlarında (google) çıkması açısından önemlidir.

Sonuç olarak burada oluşturulan başlık etiketlerinin font büyüklüklerini istediğimiz zaman değiştirebiliriz ama dikkat etmemiz gereken noktanın yazı boyutu değil onlara yüklenen anlamlardır.

(16)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 15 Html Paragraf Etiketi

Html paragraf etiketini nasıl ve hangi amaçla kullanırız ?

Html sayfalarında paragraf oluşturmak için kullandığımız etiket <p> etiketidir.

Kullanımı ;

<p> Komple Uygulamalı Web Geliştirme Eğitimi </p> şeklindedir.

<p> etiketi bir block html etiketidir ve block etiketlerinin özelliği satırı olduğu gibi kaplasıdır.

Yani paragrafdan sonra gelen her eleman bir alt satırdan başlar.

<br> Etiketi

Eğer paragraf içindeki yazıları satırlara bölmek istersek <br> etiketini kullanabiliriz.

Html Biçimlendirme Etiketleri

Html biçimlendirme etiketleri hangileridir, nasıl ve hangi amaçla kullanılırlar ?

Html sayfalarımızda kullanabileceğimiz bazı biçimlendirme etiketleri kullanımları aşağıdaki gibidir.

<b> ve <strong> : Yazı koyulaştırma için 2 etiket kullanıyoruz. <b> ve <strong> etiketleri.

<i> ve <em> : Yazıları italic hale çevirmek için 2 etiket kullanıyoruz. <i> ve <em> etiketleri.

<u> ve <ins> : Yazıların altını çizmek için 2 etiket kullanıyoruz. <i> ve <em> etiketleri.

** <strong> ve <em> etiketlerinin eş değerlerinden anlamsal olarak farklılıkları vardır. Mantıksal olarak daha önemli içerikler için bu iki etiketi kullanırız.

<mark> : vurgulanmak istenen text için kullanılır.

<small> : Daha küçük yazı yazmak için kullanılır.

<del> : Üstü çizili yazı yazmak için kullanılır. Genelde eski fiyatların üstünü çizmek için.

<sup> ve <sub> : karakterleri üste yada alta almak için kullanılır.

(17)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 16 Uygulama Çalışması-2

Html biçimlendirme etiketleriyle ilgili bir uygulama yapalım.

Listeler

Listeler Oluşturmak

Listeler oluşturmak için aşağıdaki iki seçenekten birini kullanabilirsiniz.

<UL>: Unordered (Madde İmli) Listeler

<OL>: Ordered (Otomatik Numaralı) Listeler Kullandığınız stil hangisi olursa olsun. Maddelere

<LI> ile işaret ederiz. Aşağıdaki örnekte olduğu gibi bir liste içinde alt listeler de oluşturabiliriz.

Örnek:

<HTML>

<HEAD>

<TITLE>Liste Etiketi (008_list.htm)</TITLE> <META http-equiv="Content-Type"

charset=windows-1254">

</HEAD>

<H2>Karadeniz Bölgesi</H2>

<H3>

<UL>

<LI>Trabzon</LI>

<UL>

<LI>Sürmene</LI>

<LI>Araklı</LI>

(18)

</UL>

</LI>

<LI>Samsun</LI> <LI>Sinop</LI>

<LI>Artvin</LI>

</UL>

</H3>

<H2>Karadeniz Bölgesi</H2>

<H3>

<OL>

<LI>Gaziantep</LI> <LI>Şanlıurfa</LI>

<LI>Diyarbakır</LI>

<LI>Mardin</LI>

</OL>

</H3>

</BODY>

</HTML>

Madde İmli (Unordered) Listenin Type Özelliği

<UL> etiketinin TYPE özelliğine aşağıdaki değerleri atayarak madde iminin stilini değiştirebilirsiniz.

1. Disc (içi dolu daire, varsayılan değer) 2. Square (İçi dolu kare)

3. Circle (İçi boş çember)

Buradaki TYPE özelliğini <LI> etiketinde da kullanabilirsiniz.

<ul>

<li>

<p>Lorem ipsum dolor.</p>

<ul>

<li>

alt eleman <ul>

<li>alt eleman</li>

</ul>

</li>

<li>alt eleman</li>

</ul>

</li>

<li>

</li>

<li>

(19)

</li>

</ul>

Numaralı Liste Özellikleri

<OL> etiketinin TYPE özelliğine 1, a, A, I ya da i değerlerini atayarak numaranın stilini değiştirebilirsiniz. Varsayılan değeri “1” dir.

Numaralı listenin başlangıç değerini <OL> nin START etiketinden ayarlayabileceğimiz gibi <LI>

etiketinin VALUE özelliğinden de ayarlayabiliriz.

Not: Bunların haricinde <DL></DL> etiketleri ile tanımlanan Definition List adında bir listeleme çeşidi daha vardır. Bu listenin içerisindeki her bir madde <DD></DD> etiketleri arasına yazılır.

Maddelerin başında herhangi bir belirteç yoktur.

<ol>

<li> liste elemanı 1 </li>

</ol>

<li>

Lorem ipsum dolor.

<ol>

<li>eleman 1</li>

<li>eleman 2</li>

<li>eleman 3</li>

</ol>

</li>

<li>Lorem ipsum dolor.</li>

</ol>

Uygulama

(20)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 19 Images

<img>

Resim eklemek için kullanılır. src : resmin yolunu belirtir. Yol bilgisayardaki bir resim olabilir ya da internet üzerinden resim adresi olabilir.

Alt : resim belirtilen yolda bulunamazsa gösterilecek yazıdır. Ayrıca resmin arama motorlarında bulunması için gereken bir yazıdır. Seo açısından eklenmelidir.

<img src="img/fred.png" width="100" alt="Fred"> // Resim aynı dizindeki img klasöründe bulunur

<img

src="https://upload.wikimedia.org/wikipedia/en/thumb/1/15/Bar%C4%B1%C5%9F_Man%C3%A7o.jpg/220p x-Bar%C4%B1%C5%9F_Man%C3%A7o.jpg" alt="resme alternatif yazı">

Form

Görevi, <form> ... </form> etiketleri içinde bulunan html kontrolleri aracılığıyla kullanıcılardan toplanan bilgileri server'a göndermektir.

(21)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 20 Örneğin bir internet sitesindeki üyelik formunu doldurduğumuzda girdiğimiz bilgileri form nesnesi tarayıcıdan alıp server'a taşır.

(Verilerin server’e nasıl taşınacağını programlama kısmında öğreneceğiz).

Form Kontrol Türleri ;

<input type="text"> : Alınacak olan bilgi sözel bir ifade ise kullanılır.

Örneğin ; Ad ,adres vb.

<input type="radio"> : Alınacak olan bilgi çoklu seçim içinden sadece birinin seçilmesi istendiğinde kullanılır. Örneğin cinsiyet.

<input type="checkbox"> : Alınacak olan bilgi sunulan alternatifler içinden birden fazla seçim istendiğinde kullanılır. Örneğin hobiler.

<select> : Seçenekler arasından sadece birinin seçilmesini istediğimiz zaman kullanılır.

Örneğin, şehir seçimi.

<input type="submit"> : Formu server'daki web programına gönderecek olan buton.

<form>

Ad: <input type="text" name="firstname" value="Adınız"><br> Cinsiyet : <br>

<input type="radio" name="gender" value="male" checked> Erkek<br>

<input type="radio" name="gender" value="female"> Kadın<br>

Şehir :<br>

<option value="kocaeli">Kocaeli</option>

<option value="istanbul">İstanbul</option>

</select>

<br>

</form>

***********************************

<form action="/Home/Register"> // veriler home/register sayfasına gönderilir.

<p>

Ad <input type="text" name="ad" placeholder="adınızı giriniz"

required>

</p>

<p>

Soyad <input type="text" name="soyad" placeholder="soyadınızı giriniz"

required>

(22)

</p>

<p>

Eposta <input type="email" name="email" required>

</p>

<p>

Beni Hatırla <input type="checkbox" name="benihatirla">

</p>

<p>

Erkek <input type="radio" name="cinsiyet">

Kadın <input type="radio" name="cinsiyet">

</p>

<p>

Hobiler <br>

Sinema <input type="checkbox" name="hobi">

Spor <input type="checkbox" name="hobi">

Kitap Okumak <input type="checkbox" name="hobi">

</p>

<p>

<option>Kocaeli</option>

<option>İstanbul</option>

<option>Ankara</option>

</select>

</p>

<p>

</select>

</p>

</form>

Uygulama

(23)

** Uygulama çözümü aşağıdaki gibidir

<h1>Lütfen Formu Eksiksiz Doldurunuz.</h1>

<hr>

<form>

<h4>Hesap Bilgileriniz</h4>

<p>

Kullanıcı Adı : <input type="text" name="username"

placeholder="Kullanıcı adı giriniz" required>

</p>

<p>

Eposta : <input type="email" name="eposta" placeholder="Eposta giriniz" required>

</p>

<p>

Parola : <input type="password" name="parola" placeholder="parola giriniz" required>

</p>

<h4>Kişisel Bilgileriniz</h4>

<p>

Ad: <input type="text" name="ad">

(24)

</p>

<p>

Soyad :<input type="text" name="soyad">

</p>

<p>

Şehir :

<option>Seçiniz</option>

</select>

</p>

<p>

Cinsiyet :

<input type="radio" name="cinsiyet"> Erkek <input type="radio" name="cinsiyet"> Kadın </p>

<p>

Hobileriniz :

<input type="checkbox" name="hobiler">Sinema <input type="checkbox" name="hobiler">Gezmek <input type="checkbox" name="hobiler">Spor <input type="checkbox" name="hobiler">Kitap </p>

</form>

Tablo

Tablo oluşturmak için kullanılır.

1. Her satır <tr> ile ifade edilir.

2. Satır içindeki her kolon <td> ile ifade edilir.

3. Başlık kolonu <th> ile ifade edilir.

4. Tablo genişliği style="width:100%" ile verilir.

5. Satır birleştirmek için rowspan kullanılır.

6. Sütun birleştirmek için colspan kullanılır.

<thead> // ilk satır <tr>

<th>Ders Adeti</th>

</tr>

(25)

</thead>

<tbody> // tablo içeriği <tr>

<td>Web Eğitimi</td>

</tr>

<tr>

<td>İngilizce</td>

</tr>

<tr>

<td>Matematik</td> // <td colspan="2">Matematik</td>

<td>20</td> // yukardaki satır eklendikten sonra silinir <td>200</td> // rowspan eklendikten sonra silinir

</tr>

</tbody>

Ödev:

Aşağıdaki tablonun html kodlarını yazınız:

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

(26)

</tr>

<tr>

</tr>

</tbody>

</table>

</tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td>

</tr></table>

---

Links - Bağlantılar

<a> Link oluşturmak için kullanılır.

<a href="url">link yazısı</a>

href : yönlendirilecek kaynak yoludur.

target : “_blank” özelliği sayfayı başka segmede açmak için kullanılır.

** link için text kullanmak yerine resimde kullanabilirsiniz.

Div Span

Bu div etiketlerini içerik bloklarını ortalamak, sütun etkisi oluşturmak, farklı renk alanları oluşturmak ve daha fazlasını yapmak için kullanmayı öğrenin.

Sayfa mizanpajlarını, el ile div etiketleri ekleyip, bunlara CSS konumlandırma stilleri uygulayarak oluşturabilirsiniz. Bir div etiketi, web sayfasının içeriğindeki mantıksal bölümleri tanımlayan etikettir. Bu div etiketlerini içerik bloklarını ortalamak, sütun etkisi oluşturmak, farklı renk alanları oluşturmak ve çok daha fazlasını yapmak için kullanabilirsiniz.

div etiketleri ve Cascading Style Sheets (CSS) kullanarak web sayfası oluşturma hakkında bilginiz yoksa, Dreamweaver uygulamasıyla birlikte gelen hazır mizanpajlardan birini temel alarak

(27)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 26 bir CSS mizanpajı oluşturabilirsiniz. CSS ile çalışırken çok rahat değilseniz ancak tablo kullanma hakkında bilginiz varsa, tablo kullanmayı da deneyebilirsiniz.

HTML DİV ve SPAN NEDİR?

Div etiketi bir HTML belgesi içinde bir bölüm belirtmek için kullanılır. Div html içinde verileri sağa, sola, yukarı veya aşağıya CSS yardımı ile hizalamaya yarar. Kısacası div'leri birer kutu olarak düşünebiliriz. Metinler, Resimler ve videolar div içinde yerleştirilebilir. Div tablolara benzer ama onları CSS ile Şekillendirilebilir. website tasarımında tablo kullanımında div'in avantajları ve kolaylıkları vardır. Aşağıda genel başlıklar ile div’li yapının tablolu yapıya olan avantajlarından bahsedeceğim.

• Daha hızlı sayfa yükleme zamanları : Site div ile tasarlandığında daha az kod teşkil ettiğinden siteler daha hızlı yüklenir.

• Daha Düşük Barındırma ücretleri : Daha az yüklenme zamanı barındırma ücretleri ve bant genişliğinin az kullanılması demektir ve bunun sonucu barındırma hizmeti aldığımız şirkete daha az ödeme yaparız.

• Verimlilik : İçerik düzeni stilleri ayrılmış olduğundan, yeniden tasarlama CSS ile çok kolay. Güncelleme için CSS dosyası ve değişiklikleri çok kolaydır.

• Daha iyi SEO için Daha az kod olması ve kodlama yapısının tablolu yapıya göre daha düzenli olması arama motorlarının indekslemesi için bir avantajdır. Arama motorları(google,yandex...) div ile düzenlenmiş sitelere öncelik verir.

• Düzenleri ve tasarım gelişmişliği : CSS, HTML tablolara göre tasarımda özgürlük sunmaktadır. Tablolar katı, esnek olmayan, ve ızgara tabanlı iken, CSS tabanlı tasarımlar akışkan, esnek ve genişletilebilir.

• Takım çalışmalarına daha uygundur : Web sitesi önyüzü ve arka planı ayrımı yapılır.

Arayüz geliştirici ve programcı arasında daha kolay ve güzel iletişim sağlanır. iş bölümü olduğu için işler hızlı yürür.

• Tekrar tasarlama daha ucuzdur farklı tasarımların adapte edilmesi kolaydır.

• Geleceğe dönük bir yapıdır : HTML5 ile birlikte gelen yeni etiketler ve HTML5’in yapısı div ile kodlamanın devamı niteliğindedir

DIV ve SPAN elemanları anlamsız etiketlerdir; Yani "p" veya "h1" gibi diğer etiketlerin aksine, onlar ile ilgili herhangi bir görsel özelliğe sahip olmadığı için Style ve CSS özelliklerinin ayrıca belirtilmesi gerekir. CSS ile Sahip oldukları tüm özellikler genellikle "sınıf" ve "id" nitelikleri ile, geliştirici tarafından kendilerine tahsis edilmelidir.

DIV etiketi blok düzeyi unsurudur. Her Div etiketi açılıp kapandığında bir alt satıra geçer. Div'leri tek olarak veya iç içe girmiş bir yapı olarakta kullanabiliriz.

SİTE YAPISI

(28)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 27 DIV etiketi de yaygın sayfa düzeninde kullanılır. CSS kullanarak, bir DIV elemanı site içerisinde heryere konumladırabilir ve içine istediğimiz herhangi bir unsur yerleştirebilirsiniz.

Örnek site yapısı:

header :Sitenin başlık ve açıklama içeriğini yer alır. Sadece başlığınız olacaksa altı seviyeli başlıklardan (h1-h6) birini kullanmanız yeterli.

nav : Menüleri, Gezinti (navigation) alanını temsil eder. Gezinti bağlantıları ya da içerik listesi için kullanılabilir.

section : Genel bölümleme öğesidir. İçinde başlığı ve altalanı olan bir makale olabilir.

article : Bir makale ya da yazı alanını temsil eder. Bu bir blog yazısı, yorum alanı, haber v.b.

olabilir.

aside : Ana içerikten ayrı yazılan, yüzeysel bir bağlantısı olan içeriğe denir.

footer : Altalanı temsil eder. Bu bir sayfanın, bir bölümün ya da bir yazının altalanı olabilir.

Site yapısının html kodların gösterimi:

HTML:

(29)

</div>

Site yapımızın html kodları yukardaki gibi olacaktır; ancak bu halde bir anlam ifade etmez bunu CSS ile şekillendirmemiz gerekir.

SPAN ETİKETİ

HTML SPAN etiketi, isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir katman oluşturulmasını sağlar. SPAN, DIV etiketinden farklı olarak bir satır içi (inline) element olduğu için metnin içinde kullanılması durumunda ilgili metni keserek bir alt satıra geçmez.

SPAN elementi ilk anda herhangi bir görsel özelliğe sahip olmadığı için Style ve CSS özelliklerinin ayrıca belirtilmesi gerekir.

Div'ler websayfada ekranın sonuna kadar yani gidebildiği yere kadar gider. span ise sadece metnin kapladığı alanı kapsar. Bir örnekle açıklayalım.

HTML:

1 2 3 4 5 6 7 8 9 10 11

Div gidebildiği yere kadar gider

</div>

Span metin alanı kadar gider

</span>

ÇIKTI:

Span etiketleri genellikle metin biçimlendirmek için kullanılan ve bir sayfanın düzenini etkilemez.

Örneğin website sayfamızda bazı kelimelerin vurgulu gözükmesini istiyoruz; Bunun için span etiketlere style özellik atayalım.

HTML:

(30)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<html>

<head>

</head>

span.vurgu{

color: red;

background-color: yellow;

}

</style>

<body>

<p>Ne oldum <span class="vurgu">dememeli,</span>

ne olacağım <span class="vurgu">demeli.</span></p>

</body>

</html>

ÇIKTI:

Sonuç:

Hem DIV etiketi ve SPAN etiketi CSS ve websayfa tasarımında çok önemli bir role sahiptir. Bu kodlar websayfa düzeninde kullanır ve sayfanın belli bölümlerinde özellik atanır. Bu HTML kodlarına Class(sınıf) ve Tekil(id) CSS seçicileri ile birlikte kullanılır. DIV etiketi web düzenin de kullanılır. SPANetiketi esas metin ile kullanıldığında ise, Tabloların yerini alır. Bu iki etiketin nasıl çalıştığını anlamak ve websayfa tasarımında CSS kullanmada önemli yer teşkil eder.

Div bir bölme oluşturmak için kullanılır. Örneğin ürünlerin listelendiği bir html sayfasında her bir ürünü bir div içine alabiliriz. Eğer ki 50 tane ürün göstereceksek

50 tane div ile ürünlerin her birini sistematik bir şekilde gruplayabiliriz. Bu gruplama sayesinde ortak olarak hareket eden her bir ürün div’ine ortak görüntü özellikleri yani css kodları uygulayabiliriz.

Ya da body etiketinden hemen sonra bir div ekleyip tüm içerikleri bir div içine alarak tüm sayfaya bir genişlik uygulayabiliriz.

** div etiketide p etiketi gibi bir block etikettir.

<h1>Halı yıkamada kaliteli hizmet</h1>

<h2>Kaliteli hizmet</h2>

<p>Kocaeli İzmit'de halı yıkamada kaliteli hizmet sunmaktayız.</p>

</div>

(31)

<h2>Halınızı evden teslim alalım</h2>

<p>Kocaeli İzmit' de çevresinde halınızı evden teslim alalım.

</p>

</div>

Html Semantik Etiketler

Html5 ile gelen anlamsal etiketler yani semantic elements nedir, hangi amaçla ve nasıl kullanılır?

Html5 ile gelen html5 anlamsal etiketler yani semantic etiketleri kullanmamız arama motorları açısından büyük önem taşımaktadır. Çünkü oluşturduğumuz içerikleri html semantik etiketler içinde sunuyor olmamız sitemizi indekslemeye gelen arama motorlarına içerik ile alakalı daha anlamsal bilgi sunduğumuzdan dolayı ziyaretçi sayımızı olumlu etkileyecektir.

Örneğin <h1> etiketi de bir semantik etikettir. Çünkü <h1> etiketi içine aldığımız başlık sayfamızın en önemli özet bilgisi olarak algılanır ve sayfada bir tane kullanmamız önerilir.

Şöyle ki <h1> etiketi ile oluşturduğumuz bir başlığın nasıl göründüğünden çok hangi anlamda bilgi sunduğu önemlidir.

<h1> Web Geliştirme Eğitimi </h1>

kullanımı ile tarayıcı varsayılanına göre 32px lik koyu bir yazı oluşturmuş oluruz ki; önemli olan görüntü olmuş olsa bu durumda aynı başlığı <span> etiketi ile de oluşturabiliriz.

<span style="font-size:32px;font-weight:bold;"> Web Geliştirme Eğitimi</span>

iki durumda da aynı görüntüye sahip oluruz ancak <span> etiketi arasına aldığımız yazının sitemiz açısından ne kadar önem taşıdığını arama motorları tespit edemez.

Html5' de kullanabileceğimiz semantik etiketler fazladır. Site tasarımı yaparken kullandığımız ve sayfamızın ana ögelerini temsil edecek olan bazı semantik etiketler aşağıdaki gibidir.

• <header>

• <nav>

• <section>

• <article>

• <aside>

• <figure>

(32)

• <figcaption>

• <footer>

• <details>

• <summary>

• <mark>

• <time>

Aşağıdaki resimlerde semantik etiketlerin karşılığı olan <div> kullanım örneklerini inceleyiniz.

HTML5 <section> Element

Sayfada bir bölme oluşturmak istediğimiz zaman kullanılır. Anlamsal olarak <article> etiketi gibi özel bir anlam ifade etmez. Ancak sayfa tasarımını belli bölümlere ayırmak istediğimizde kullanırız.

<section> <h2>Bize Ulaşın</h2> <p>İletişime geçmek için aşağıdaki formu doldurunuz.</p></section>

(33)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 32 HTML5 <article> Element

Bir makale oluşturmak istediğimizde <article> anlamsal etiketini kullanırız.

<h2>Html nedir?</h2>

<p>Html nedir ve ne amaçla kullanılır, bu yazımızda bulabilirsiniz.</p>

<p> Ali tarafından <time datetime="2018-05-06 19:00">5 Mayıs tarihinde yayınlandı.</time>

</p>

</article>

HTML5 <header> Element

Başlık kısmını oluşturmak istediğimizde kullanırız. <header> etiketini sadece site başlık kısmı değil de section, article, footer gibi diğer anlamsal etiketlerin <header> kısmı olarak da kullanılabilir.

<nav>

<ul>

<li><a href="#">anasayfa</a></li>

<li><a href="#">makale</a></li>

</ul>

</nav>

</header>

HTML5 <footer> Element

<footer> semantic tag etiketini sayfamızın en alt kısmında site hakkındaki ek açıklamalar için eklediğimiz footer kısmı için kullanabiliriz.

<footer> <nav> <p> <a href="/">Home</a>- <a hef="/contact.html">Contact</a>- <a href="/terms.html">Terms of usage</a>

HTML5 <nav> Element

<nav> semantik etiketini navigation yani menü kısımlarını oluştururken kullanırız.

<nav><h3>Html</h3><ul><li><a href="#">html nedir?</a></li><li><a href="#">ilk html sayfası</a></li> </ul></nav><nav><h3>Css</h3> <ul><li><a href="#">Css nedir?</a></li><li><a href="#">Css söz dizimi</a></li></ul></nav>

(34)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 33 HTML5 <aside> Element

<aside> semantik etiketini sayfamızın sol ya da sağ tarafında oluşturduğumuz sidebar içerikleri için kullanırız.

<aside>

<h2>Kategoriler</h2> <nav><h3>Html</h3><ul><li><a href="#">html nedir?</a></li><li><a href="#">ilk html sayfası</a></li> </ul> </nav>

<nav><h3>Css</h3> <ul><li><a href="#">Css nedir?</a></li><li><a href="#">Css söz dizimi</a></li></ul> </nav>

</aside>

iFrame Html iFrame

Html 5 'de iframe nedir ve nasıl kullanılır ? Youtube videosunu kendi web sitemize nasıl yerleştiririz ?

Bir web sayfasının içerisine farklı bir web sayfasını çağırıp, görüntülememize yardımcı olan bir HTML etiketidir.

iframe youtube video’sunu bir siteye eklemek için kullanılabilir.

iframe için tanımlayabileceğimiz özellikler ;

src : kaynak yolu (aynı klasör içindeki index.html sayfası ya da başka bir internet adresi olabilir.) frameborder : çerçeve kenarlık kalınlığı.

width : iframe genişliği height : iframe yüksekliği

Youtube’den video yerlestirmek:

frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

(35)

CSS

CSS Nedir?

CSS bir kısaltmadır. "Cascading Style Sheets" kelimesinin baş harflerinden oluşur. Dilimizdeki anlamı: Basamaklı Stil Sayfası. Stiller, bir HTML elementinin nasıl görüneceğini belirleme olanağı sağlar. Stiller HTML 4.0'da bir problemi çözmemizi sağlar. Siteyi görselleştirme! HTML dosyamızın daha anlaşılır olmasını sağlar. Stillerimiz tek bir dosyada toplanır ve kolaylıkla okunur - değiştirilir. Stil dosyalarımızın uzantısı *.css dir. CSS Dosyası birçok stil barındırabilir.

Bir CSS kodu iki temel bileşenden oluşur. Biri element ve stilleri birbirinden ayıran bir seçim. Diğeri ise bir ya da daha fazla özelliği bildirdiğimiz ifade bölümü.

Seçim genel olarak stilini belirleyeceğimiz HTML elementidir, h1, a, body, p gibi. İfadeler ise sürekli olarak özellik: değer; şeklinde { ve } işaretleri arasında sıralanırlar.

CSS Inline (Kod içinde)

Direk olarak (X)HTML elemanın içine style

(36)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 35 özelliği kullanılarak uygulamak.

<div style="color:red">Deneme yazımız</div>

Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama şekli değildir. Ancak özel durumlarda kullanılabilir

CSS internal

<head> kısmında <style> elemanı içinde CSS kodumuzu yazarak uygulamak.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CSS’i Uygulamak </title>

div {

color: red;

}

</style>

</head>

Birinci yönteme göre avantajı (X)HTML kod ile CSS bir birinden ayrıştırılmış olmasıdır.

CSS external

Bu metot da CSS kodlarımızı .css uzantılı bir dosyaya kaydederiz.

ornek.css p {

color: red;

} a {

color: blue;

}

Daha sonra bu kodu gereken sayfalarımıza uygularız.

<head>

<title>CSS’i Uygulamak</title>

<link rel="stylesheet" type="text/css" href="ornek.css" />

</head>

(37)

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 36 Bu yöntemin diğerlerine göre en büyük avantajı bir kere yazılan kod lazım olan tüm sayfalara eklenebilmesidir. Bu sayede harici eklenen css kodu bir kere yüklendikten sonra diğer kullandığımız sayfalarda tekrar yüklenemeyerek bize hız kazandıracaktır.

@import le Eklemek 3üncü yöntem ile kullanımı benzerdir.

<head>

@import "ornek.css";

</style>

</head>

Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından görüntülenemeyecektir.(Örn: NN4)

@import ile eklenen kod link ile eklenen kodlamadan önce yorumlanır web

tarayıcıları tarafından. Ayrıca CSS dosyalarımızda @import özelliğini kullanarak devamlı kullandığımız kodları css dosyamıza harici olarak ekleyebiliriz böylelikle tekrarlardan kurtulmuş oluruz.

Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metotlardan dördüncüsü avantajları bakımından önerilen bir yöntemdir.

Ayrıca içeriği büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS’inde hangi parçalar gerekli ise onların import edilmesi önerilir. Bu sayfada kodun bir kısmında yaptığımız değişiklik için tüm css kodu incelenip değiştirtmesi gerekmez ve kod yönetimi kolaylaşır.

<head>

@import "urunler.css";

</style>

</head>

Ürünler bölümü için bir css dosyası ekleyelim sonra parçalara ayırdığımız css kodlarının ürünlere lazım olanlarını urunler.css içine ekleyelim.

urunler.css

@import url(/css/iskelet.css)

@import url(/css/fontlar.css);

@import url(/css/renkler.css);

(38)

@import url(/css/urunlereozel.css);

CSS Sayfa Düzeni (Layout)

Web sitesi genellikle sahip oldukları başlıkları, menüleri, bir kaç bölümden oluşan içeriği ve alt bilgisi gibi parçalara ayrılır. Hepsi bir düzen içerisinde kullanıcısına sunulur. Web dünyasına göz attığımızda bu şablonu sunacak, tonlarca farklı sayfa düzeni tasarımı bulunmaktadır.

Üç sütunlu düzen, web siteleri için kullanılan en yaygın sayfa düzenlerindendir. Genellikle bir üst bilgi (başlık) ve alt bilgi bulunur. Web sitesinin diğer sayfalarına ulaşmanızı sağlayabilecek bir menü çubuğu mevcuttur. Orta kısım daha çok içeriği sunmak içindir. Tabi ki içerik birden fazla parçaya ayrılabilir. Bu durumda orta kısım ek sütunlar ile bölünebilir. Şu an bu yazıyı okuduğunuz sitemize bir de böyle bir göz atın, sahip olduğu bölümleri inceleyin. Neler görüyorsunuz? Öyleyse, sayfa üzerindeki tüm parçaları koymak için temel HTML‘mizle başlayalım.

Öncelikle Gövde (body) etiketleri arasında olan her bölümün temel taslağınıhazırlayalım. Sayfa düzenini sağlayan tüm bölümleri <div> öğesi ile hazırlıyoruz. Her bölüme bir ilgili sınıf ismi vermek, ilerleyen aşamalarda web sayfası üzerindeki kontrolünüzü arttıracaktır. Her bölümün sırası ve kapsamı sayfanın akışına göre hazırlanmalıdır.

HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>