HTML. HTML yi notepad içinde yazacağız. Yazdıktan sonra sayfamızı HTML veya HTM olarak kaydedeceğiz. DENEYELİM.

... konulu sunumlar: "HTML. HTML yi notepad içinde yazacağız. Yazdıktan sonra sayfamızı HTML veya HTM olarak kaydedeceğiz. DENEYELİM."— Sunum transkripti:

1 HTML

2 HTML yi notepad içinde yazacağız. Yazdıktan sonra sayfamızı HTML veya HTM olarak kaydedeceğiz. DENEYELİM

3 Kod yazarken (ş,ç,ı,ü,ğ,ö) Türkçe karakterlerini kullamayacağız

4 Kullanım Biçimi Örnek :,, ile başlar ile biter. ÖNEMLİ

5 Kullanım Biçimi Etiketler iç içe yer alır ve en içteki etiketten başlatılarak kapatılır. Kodların okunabilirliğini artırmak için bir etiket bitmeden tekrar etiket açılırsa içeride açılan etiket biraz daha içeriden yazılmalıdır.

6 Kullanım biçimi: Buraya kod,açıklama vs. yazacağız

7 Örnek:............

8 Bir etiket parametreler kullanarak biçimlendirilir ve bu parametrelere tırnak ("") işaretleri arasında değer atanır. Değerle parametre adı arasında eşittir (=) işareti kullanılır. Kullanım biçimi: Örnek: DAHA SONRA BU TAGLARIN NE İŞE YARADIĞINI GÖRECEĞİZ

9 WEB sayfasında standart olarak bulunması gereken kodlar şunlardır. Bunlar sayfada mutlaka vardır. Bu kodlarla tarayıcı bunun bir WEB sayfası olduğunu anlar ve ona göre görüntüler. Sayfanın Başlığı Sayfanızın tüm içeriği: resim, yazı, video, vb.

10 HTML belgesinin bütün içeriği burada yer alır. Buraya metinler, resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir. Kullanılacak Parametreler Görevi Bgcolor Arka plan rengini belirler. Background Arka planda kullnılmak istenen resmi belirler. Link Sayfadaki linklerin rengini belirler. Alink Linke tıklandığındaki rengi belirler. Vlink Daha önce ziyaret edilmiş linklerin rengini belirler.

11 Örnek SAYFANIN BAŞLIĞI

12 Örnek 2 SAYFANIN BAŞLIĞI

13 Bilişim Teknolojileri....

14 Listeleme Etiketleri HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak çok kolaydır. Dokümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidini destekler.

15 Sıralı liste oluşturmak için kullanılır. Sıralı listelerden kastımız kelime ya da cümlelerinizi ya da herhangi bir şeyi numaralı, alfabetik, roma rakamlı olarak sıralı göstermektir. Liste içine alınacak metinler... etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. etiketine parametreler ekleyebiliyoruz. Type parametresi listemizin rakamla mı harfle mi başlayacağını, start ise hangi rakam/harfle başlayacağını belirler. Yani a) b) c) değil de d) e) f) gibi. Start değeri her zaman bir sayı olmalıdır. Yani sırayı alfabe olarak atamak ve “f” den başlamak istersek start değerini “f” değil “6”, type değerini de küçük “a” yapmalıyız. Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor. Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar, harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi)

16 Listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler yerleştirmek için etiketini kullanıyoruz. için kullanılan parametreler type ve compact’tır. Type ile kullanacağımız madde iminin şeklini seçebiliriz. Bunlar disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.

17 etiketi ingilizce “liste elemanı” anlamına gelen 'list item' kelimesinin kısaltılmışıdır. Yukarıda anlatmış olduğumuz ve etiketleri tek başına kullanılmaz sırayı belirtmek için de imi ile birlikte kullanılır. Yani sıralanacak olan ifadenin başına getirmeliyiz.

18 TAKIMLAR İÇİN ÖRNEK ol ve li kavramları takımlar trabzonspor galatasaray beşiktaş fenerbahçe

19 Listeler Ağ İşletmenliği Ağ Temelleri TCP/IP ve Adresleme Web Programcılığı HTML Web Tasarım Editörü FrontPage Dreamweaver

20 Listeler Ağ İşletmenliği Ağ Temelleri TCP/IP ve Adresleme Web Programcılığı HTML Web Tasarım Editörü FrontPage Dreamweaver

21 Bu şekli yapınız Bilgisayarlar 1.İntel a.pentium b.core 2.Amd

22 cevap başlık deduk daa intel pentium core amd

23 Bu şekli oluşturunuz. Canlılar A.Üretici 1.yeşil bitkiler 2.bakteriler B.Tüketici 1.otçullar 2.etçiller 3.öğrenciler C.Hem üretici hemde tüketici

24 cevap başlık ama ne başlık Canlılar Üretici yeşil bitkiler bakteriler Tüketici otçullar etçiller öğrenciler hem üretici hem de tüketici

25 Bu şekli oluşturunuz 1.Bitkiler alemi 1.Bitkiler 2.Algler 3.Mantarlar 4.Prokaryotlar 2.Hayvanlar alemi 5.Hayvanlar 6.Protozoalar 1.protablar 2.krotablar 7.kromozonlar

26 cevap başlık deduk daa bitkiler alemi bitkiler algler mantarlar prokaryotlar hayvanlar alemi hayvanlar protozoalar

27 soru Bilgisayarlar  İntel o pentium o core  Amd

28 cevap bu başlık başka başlık intel pentium core amd

29 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERI Bu etiketler, doküman içinde kullanılabilecek başlıklardaki yazıların büyüklüklerini tanımlar. “x” değeri 1’den 6’ya kadar değer alabilir. Sayı arttıkça yazı büyüklüğü azalır. ile kullanılacak parametrelerden birisi align’dır. Align kullanıldığı sayfadaki yatay yerini belirler. Left (sola yaslı), right (sağa yaslı), center (ortala), justify (her iki yana yaslı) değerlerini alabilir. Align=”justify” html 4.0 etiketi olduğu için bazı tarayıcılarda sorun çıkarmaktadır. Bilgi yazdığınızda “Bilgi”kelimesini ortalı bir şekilde yazacaktır.

30 Başlık Komutları HTML KOMUTLARI

31 Hizalama Başlık Komutları HTML KOMUTLARI

32 Aradaki metni koyu (bold) yazar. Kalın yazma Bilişim Teknolojileri Bölümü Web Tasarım Dersi

33 Aradaki metni altı çizili (underline) olarak yazar. Kalın yazma Bilişim Teknolojileri Bölümü Web Tasarım Dersi

34 Aradaki metni eğik (italic) yazar. Kalın yazma Bilişim Teknolojileri Bölümü Web Tasarım Dersi

35 HTML'de metinleri yazarken kullandığımız editörde bir alt satıra geçmek için enter tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur. Tüm kodları ve metinleri tek satırda dahi yazsanız tarayıcı açısından farketmeyecektir. Bu yüzden metinleri bölmek, yani ikinci satıra atmak için etiketini kullanıyoruz. Yukarıdaki örneklerde etiketini kullanmamış olsaydık ekrandaki ifade “Bilişim Teknolojileri Bölümü WEB Tasarım Dersi” şeklinde bir alt satıra geçmeden yan yana yazılacaktır.

36 Br ile bir örnek Kalın yazma mehmet gümrükçü öğretmen

37 Aradaki metne paragraf özelliği kazandırır. Sonlandırıldığında, takip eden metin bir satır boşluk bırakılarak ve satır başına yazılır.

38 ile bir örnek Metne Paragraf Ekleme Bilgisayara fazlaca merakı olan bir çok kişinin isteği, bilgisayar yardımı ile dış çevre birimlerini kontrol etmektir. Windows 2000 ( NT teknolojisi ) üzerinde port uygulamaları geliştirmek diğer işletim sistemlerine göre daha zor bir iştir. Zira NT teknolojisi üzerine kurulu sistemler donanım aygıtlarına direk erişiminizi kısıtlamaktadırlar.

39 Font etiketi sahip olduğu parametreler sayesinde metinlerin renk, yazı tipi, boyut gibi özelliklerini değiştirmenize olanak sağlar. Parametreleri ile beraber kullanım şekli aşağıdaki gibidir.

40 Face : Yazı tipi (arial, tahoma, verdana,...) Size : Yazının büyüklüğü (1-7 arası) Color : Yazının rengi (red, green gibi renklerin ingilizce karşılığı ya da RGB renk değeri)

41 Bir örnek Metne Paragraf Ekleme mehmet

42 font komutu Bilişim Teknolojileri Bilişim <font face="comic sans ms" size="7" color="green">Teknolojileri

43 BGCOLOR arka plan rengi

44

45 BAĞLANTI (KÖPRÜ) OLUŞTURMA Bir WEB sitesinde altı çizili olarak bir takım kelimeler görmüşüzdür. Bu altı çizili kelimelerin üstüne gelince fare şekil değiştirip bir el şekline dönüşmektedir. Bunun anlamı kelimeye tıkladığınızda kelimeyle ilgili bir başka WEB sayfasına gideceğidir. HTML'nin bu görevini yerine getirmesini sağlayan etiket ’dir. Dokümanınızdan başka dokümana bağlantı yapabilmek için: Etiketi giriniz. (Kısaca ilk satıra yazınız) Hangi dokümana geçiş yapmak istiyorsanız, ismini yazınız. HREF="dosyaismi" Bu dokümanı ekranda hangi isimle göstermek istediğinizi belirtiniz. Etiketi kapatınız.

46 Sayfa İçi Bağlantı Oluşturma Bir metin üzerinde belirli bölgelere ulaşmak için yine etiketler kullanılabilir....,... komutlarını kullanarak sayfa içi (dahili) bağlantıları hazırlayabiliriz. Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konuya gitsin. Böyle bir sayfa hazırlamak için yapacağımız şeyler: "Tıklandığında" açılacak konuyu işaretlemek (... ). Tarayıcıya, hazırlayacağımız menüye "tıklandığında" bu işaretli konuya gitmesini bildirmek (... ).

47 Bağlantı ayarları ASP nedir? ASP nasıl çalışır? ASP ile bileşen kullanma 1.ASP nedir? Sunucu taraflı bir teknoloji olan ASP, (Active Server Pages/Aktif Sunucu Sayfaları) kullanıcı tarafına etkileşimli, dinamik Web sayfaları göndermek için kullanılır. 2.ASP nasıl çalışır? ASP arabiriminin işleyişi oldukça basit, sisteminize ASP eklentisini yüklediğinizde Internet Information Server'ınızın zaten sahip olduğu scripting özellikleri işlemeye başlıyor 3.ASP ile bileşen kullanma Microsoft'un sunucu teknolojisi ASP için birçok ikinci parti bileşen bulunuyor.

48 Sayfa Dışı Bağlantı Oluşturma WEB sayfalarının en önemli özelliklerinden birisi, kolayca başka sayfalara ve dökümanlara geçiş yapılabilmesidir. Bunun için... komutunu kullanırız. Bu komutlar arasına yazmış olduğunuz ifade mavi renkte ve altı çizili olarak ekrana gelir. İfadenin üzerine tıkladığınızda yazmış olduğunuz WEB adresine sizi yönlendirecektir.

49 Örnek Ana sayfaya dönmek için buraya yaz tıklayınız. Sonuç: Ana sayfaya dönmek için buraya tıklayınız.

50 Bağlantının açılacağı pencereyi belirtmek için "target" parametresinide kullanabiliriz. target="_blank" Bağlantı yeni bir pencerede açılır. target="_self" Bağlantı aynı pencere içerisinde açılır. target="_top" Bağlantı aynı pencere içerisinde en üstten itibaren açılır. target="_parent" Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. target="çerçeve adı" Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.

51 E-Posta Adresine Bağlantı Oluşturma Hazırlamış olduğunuz WEB sayfasında insanların istediğiniz bir mail adresine kolay bir şekilde ulaşabilmesini sağlayabilirsiniz. Bunun için, …. komutunu kullanabilirsiniz.

52 Örnek e-posta göndermek için tıklayınız tıklayınız. Verilen komutları yazdığımızda ekranda “e- posta göndermek için tıklayınız” ifadesi görünecektir. Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail’in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.

53 TABLOLAR Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece istediğiniz düzenlemeyi yapabilirsiniz.

54 TABLOLAR Ekranda tablo gösterirken, o an kullanılan pencerenin büyüklüğüne ve tablo içindeki metnin genişliğine göre tablonun eni ve boyu değişebilir. Tablo, satır ve sütunlardan oluştuğu için her hücre ayrı ayrı tanımlanır. Her satır ve sütun, kendi içinde başka satır ve sütunları ihtiva edebilir ve diğer satır ve sütunlarla birleştirilebilir. Tablolara başlık, liste, paragraf, form, figür ve her formatta metin konabilir.

55 Tablolar belirteci ile başlar. ……

56 TR Tabloda satır oluşturmayı sağlar. TD Tabloda sütun oluşturmayı sağlar.

57 RAM 1.satır ROM 2.satır

58 RAM ---- 1.sütun ROM ---- 2.sütun

59 Border Border parametresi hücrelerin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. border=0 çerçevenin görünmemesini sağlar. HTML

60 Border HTML

61 TH Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı gövdeyi etiketleri arasına yazarız. etiketi ile ikinci bir açıklama vermek mümkündür. Sütun başlıklarına gelince, her bir başlık etiketi ile belirtilir ve bunlar etiketinde olduğu gibi... arasına yazılır. Tabloda satır ve sütunları belirten ve etiketleri... arasına alınır.

62 Ders Dağılımı Tablo 1.1: Bölümlere göre dersler Bilgisayar Elektronik Elektrik Web Tasarımı Uydu Alıcısı Çağırma Tes. Programlama İletişim Tek. Dağıtım Panoları

63 Width Tablonun pixel cinsinden genişliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul genişliği tablonuza otomatik olarak atayacaktır. Height Tablonun pixel cinsinden yüksekliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul yüksekliği tablonuza otomatik olarak atayacaktır.

64 Kasa Fare Klavye Monitör

65 Colspan Aynı satırdaki hücreleri birleştirmek için colspan parametresi kullanılır. Rowspan Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi kullanılır.

66 Delphi Pascal XML Borland C HTML PHP Basic

67 Cellspacing Tablonun.içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını, pixel cinsinden ayarlar. Donanım Yazılım Donanım Yazılım

68 Cellpadding Cellpadding değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi ayarlar. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar. HTML HTML

69 1. FORMLAR Formlar, web sayfas ı tasarlayan ki ş i veya ş irketlerle internet kullan ı c ı lar ı aras ı ndaki veri al ış veri ş ini sa ğ lamak için ideal bir araçt ı r. Formlar iki yönlü olarak çal ışı r; web taray ı c ı taraf ı ndan ekranda olu ş turulan görüntü, kullan ı c ı taraf ı ndan doldurulduktan sonra gönderilir ve web taray ı c ı bu bilgileri alarak sunucuda çal ış t ı r ı lan bir programa iletir. Program bilgileri de ğ erlendirdikten sonra gerekli i ş lemleri yapar.

70 Bir form olu ş turmak için … etiketleri aras ı na istenilen kontroller input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nas ı l de ğ erlendirileceği form etiketinin içinde gösterilir. Genel kullan ı m …..

71 1. Action Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolunu gösterir. 2. Method Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak değerlendiriciye yönlendirir. 3. Target Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri geçen derslerde gördüğümüz bağlantılar konusunda da gösterdiğimiz “_blank”, “ _top” gibi değerlerden biri olabilir.

72 Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar. Genel kullanımı: <INPUT ALIGN=tip [CHECKED] MAXLENGTH=uzunluk NAME=isim SIZE=boyut SRC=adres TYPE=tip VALUE=değer>

73

74 Form Nesneleri 1. CheckBox Formumuza onay kutuları eklemek için kullanılır. HTML PHP MySQL

75 2.Radio Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup içindeki radio kontrolleri her zaman aynı ismi taşımalı, değerleri ise value değerine atanmalıdır.

76 HTML PHP MySQL

77 3.Text Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength takıları, bu kontrolle birlikte kullanılabilir. Adı: Soyadı:

78 4.Image Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar. Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag src ile birlikte kullanılır ve src komutu resmin bulunduğu URL'yi göstermelidir.

79 5. Password Formumuza parola yazılabilecek alan eklemek için kullanılır. “text” elemanından farklı olarak bu alana girilen karakter aşağıdaki gibi gösterilir. Bu “*” işareti de olabilir. Kullanıcı: Parola:

80 6. Textarea Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır. 7. Reset Tıklandığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlar.

81 8. Submit Form içeriğini sunucuya yollar. Value değeri kullanılarak üzerindeki yazı değiştirilebilir.

82 Örnek Form Etiketleri Sanal Sınıf Kullanıcı Adı: E-posta Adresi: İletmek istediğiniz mesaj varsa aşağıdaki alanı kullanınız. Almış olduğunuz dersleri işaretleyiniz Pascal İletim Sistemi HTML

83

84 ÇERÇEVELER Çerçeveler web tarayıcınızın penceresini birbirine yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesine izin verir. Çerçevelerin özellikleri; Her çerçeve kendi URL’sine sahiptir. Her çerçeveye ad verilebilir. Her çerçeve kullanıcı tarafından boyutlanabileceği gibi, kendi kendini de otomatik olarak boyutlayabilir.

85 Çerçevelerin kullanım alanları da şunlardır: İçindekiler sayfası hazırlanarak, metin okunurken bir tarafta sürekli içerik görüntülenebilir. Bir çerçevede kriter verilerek yapılan işlemler diğer çerçevede de görüntülenebilir. Sürekli görünmesi istenen mesajlar için kullanılabilir.

86 Bir frame belgesi normal bir HTML belgesine çok benzer. Tek farkı içinde elemanı (tag) yerine, elemanı kullanılmasıdır. Basit bir çerçevenin oluşturulması; …. …..

87 Çerçeve oluşturmada kullandığımız etikettir. Tag ile birlikte kullanılabilecek iki adet parametre vardır. Bunlar cols ve rows’dur. Bu parametreler oluşturulacak pencerelerin cinsini belirler.

88 Cols Virgülle ayrılmış değerler girilerek oluşturulacak çerçevelerin yan yana sütunlar şeklinde olmasını sağlar. Bu değerler pixel olarak verilebileceği gibi, 1 ile 100 arasındaki bir yüzde ile ya da göreceli boyutlar olarak tanımlanabilir. Tabiki belirtilen sütun sayısı, oluşturulacak olan çerçeve sayısını da belirleyecektir. “*” ile göreceli değer verilirken, sütunun geriye kalan bütün alanı kapsaması için kullanılır. “*” işareti önünde bir sayı varsa, sütun diğer göreceli değerlerden daha büyük olacaktır. Örnek 1: İlk ve sonda tanımlanan çerçeve ortadaki çerçeveden daha küçük olacaktır. Örnek 2: İlk ve sonda tanımlanan çerçeve sabit aralıklı, ortadaki çerçeve ise geriye kalan aralığı kullanır.

89 Yeni Sayfa2

90 örnek2 Yeni Sayfa2

91 Rows Cols etiketinde değerler verilirken kullanılan formatın aynısı kullanılarak çerçevelerin alt alta satırlar görünümünde açılmasını sağlar.

92 Yeni Sayfa2

93 ile çerçeveleri böldükten sonra içlerine konulacak sayfaları tanımlama işi elemanı ile yapılır. Bu etiket ile kullanılan parametreler ise şunlardır: Kullanılacak Parametre Görevi NAME Çerçevenin adıdır. En önemli parametre sayılabilir. Çünküframeset’lerde bir çerçevenin içindeki bir link bir başka çerçevenin içeriğini değiştirebilir. Bunu da name parametresini kullanarak yapar. RESIZE/NORESIZE Çerçeve büyüklüğünün değiştirilip değiştirilmeyeceği bilgisini içerir. SCROLLING Çerçevenin içeriğinin bir ekrana sığmaması halinde tarayıcının kenara bir kayma çubuğu ekleyip eklemeyeceğini belirler (yes, no, auto). Varsayılan değeri auto’dur. MARGINHEIGHT Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler. MARGINWIDTH Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler. SRC İçine yerleştirilecek dosyanın URL’sini belirtir. Src’u belirtmediğiniz takdirde tarayıcı herhangi bir hata vermeyecek, buraya varsayılan renkte boş bir sayfa koyacaktır

94 örnek Yeni Sayfa2

95 Yeni Sayfa2

96 STİL ŞABLONLARI Stil şablonları (CSS-Cascading Style Sheets) sayfalarınız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliğidir.

97 STİL ŞABLONLARI CSS kodları HTML kodlarının içine yazılır. Türüne göre body veya head bölümlerinde yer alabilir. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilir.

98 Stil Şablonlarının Komut Yapısı Bir stil dokümanı ….. ifadeleri arasına yazılır. Stil kısmı HTML dokümanının … aralığında tanımlanır. Stil tanımlaya başlarken istenirse “ ” işaretleri kullanılır. Bu işaretler, CSS tanımayan tarayıcılarların bu kısmı geçmesini sağlar.

99 Genel Kullanım Şekli <!-- ………. -->

100 HTML ile web sayfası tasarımcılığında CSS kavramı önemli yer tutar. İyi bir tasarımcı olmanın koşullarından birisi de CSS konusunu bütün yönleriyle iyice öğrenmektir. Bir style sheet ifadesi, selektör ve bildirim olmak üzere 2 ana kısımdan oluşur. Selektör (selector) bir style sheet bildiriminin ilk öğesine verilen isimdir. Selektör CSS’lerde hangi etiket ile ilgili işlem yapacağımızı seçmeye yarar.

101 Bildirim (decleration) kısmı da kendi içinde özellik ve değer olarak 2 temel bileşene ayrılmaktadır. Temel bileşenlerin biraraya getirilmesinde kullandığımız “{ }” ve “:” şeklindeki işaretler de bu yalın haldeki kod satırının tamamlayıcı öğeleridir.

102 Bir Not NOT: Burada önemli bir konu da;... etiketi arasındaki stil ifadelerinde, değer ataması yapmak için yazılan sözcükler " veya ' işaretleri ile sınırlandırılmaz. Örneğin H1 {color: "blue"} ifadesi yanlıştır. CSS2 ile kurallaşan bu hususa özen göstermek gerekmektedir.

103 Stil Şablonlarının Çeşitleri Stil şablonları üç çeşittir. Bunlar, Yerel CSS, Genel CSS, Harici CSS’ dir.

104 1.Yerel stil şablonu: Yerel stil şablonları HTML belgesinin body bölümüne yazılır. Sadece bir kereliğine, yazıldıkları yerde etkili olur.

105 Örnek Css CSS Kullanımı

106 2.Genel stil şablonları: HTML belgesinin head bölümüne yazılır ve belgenin tümünü etkiler.

107 Css Web Tasarımı naber len

108 Harici stil şablonları: Global stil şablonunu, sitemiz içerisindeki tüm sayfalarda aynı stil özelliklerini kullanmak istediğimizde kullanırız. Uygularken, stillerimizi yukarıda örneklerini verdiğimiz şekilde hazırlarız. Fakat bu stil listesini html dosyamızın içerisinde değil de boş bir sayfaya yazarız ve css uzantılı bir şekilde kaydederiz. Ardından da html dosyamızın içerisine yine … etiketleri arasına ; şeklinde ekleriz.

109 Örnek h1 {font-size:13pt; color:green} h2 {font-size:20pt; color:blue} h3 {font-size:15pt; color:red} Bu kodu yazıp metin.css isminde masaüstüne kaydedin.

110 Bu örneği yazıp html olarak kaydedin CSS Stil Şablonları

111 Örnek Uygulamalar Css <!-- p {font-size : 12pt; font-family : Arial; font-weight : bold; font-style :italic; color : #00FFFF;} --> Stil Şablonları font-family: Font tipini belirler. (Arial, Courier, Verdana…) font-weight: Fontun kalınlık incelik durumunu belirler. bold: Fontu kalın yapar. normal: Fontun normal halde olmasını sağlar. Bu özellik yazılmadığında normal özellik alınır. font-style: Fontun stilini belirler. italic: Yazının sağa doğru yatık olmasını sağlar. color: Fontun rengini belirler.

112 Css <!-- p{ text-transform : uppercase; text-decoration : underline; text-align : left; line-height : 20px; text-indent : 15px; } --> Stil Şablonları text-transform : lowercase: Yazının tümünü küçük harf yapar. uppercase: Yazının tümünü büyük harf yapar. capitalize: Yazıyı istenilen şekilde bırakır. text-decoration : underline: Yazının altının çizili olmasını sağlar. overline: Yazının üstünün çizili olmasını sağlar. line-through: Yazının üzerinin çizili olmasını sağlar. none: Yazının herhangi bir yerine çizgi çekilmemesini sağlar. text-align: left: Yazının sola bitişik olmasını sağlar. center: Yazının ortada olmasının sağlar. right: Yazının sağa bitişik olmasını sağlar. line-height: Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır. text-ident: Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi eğerler alır.

113 Seçiciler (Selectors) Seçiciler bize oluşturduğumuz,... gibi etiketlerin mevcut özelliklerini aynı bırakarak onlara yeni özellikler ekleme olanağı verdiği gibi istediğimiz bir kelimeye style özellikleri atayıp istediğimiz zaman çağırmamızı da sağlar. İki çeşit seçici vardır. Bunlar; Id seçicisi Sınıf seçicisi.

114 Id Selectors(Id Seçicileri) : Id seçicilerini tanımlayıcı adlarının önündeki “#“ işaretinden tanırız. HTML belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir HTML etiketine stil vermekte kullanılır.

115 Id seçicileri <METAcontent=text/html;CHARSET=iso-8859-9 http- equiv= Content-Type> <!-- #idSecici { background:teal; color:white; font-weight:bold; font-family:arial; } --> ID Seçiciler

116 Class Selectors (Sınıf Seçicileri): Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz durumlarda kullanabilirsiniz. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri değiştirebilirsiniz. Sınıf seçicisinin iki türü vardır.

117 Css <!-- h2.yesil{color:green} h2.gri {color:gray} --> YEŞİL sınıf seçicisi ile GRİ sınıf seçicisi ile

118 İkinci örnekte ise sınıf seçicisini sadece h2 için tanımladık. Sınıf seçicisinin ikinci türü de genel bir sınıf seçicisi tanımlamaktır.

119 Css <!--.yesil {color:green}.gri {color:gray} --> YEŞİL sınıf seçicisi ile GRİ sınıf seçicisi ile

120 Stil Şablonlarının Genel Kullanım Şekilleri CSS’i HTML üzerinde kullanmak için 3 yöntem (yerel-genel-harici) olduğunu daha önce anlaşmıştım. Şimdi ise komple bir CSS dosyasını HTML üzerinde nasıl kullanacağımızı öğreneceğiz. Ama kısa bir şekilde göreceğiz.

121 A Etiketinin CSS ile Kullanımı Bildiğiniz üzere a etiketi HTML’ye çok büyük bir özellik katan link etiketidir. Bu etiket ile diğer bir web sayfasına veya bir mail adresine gönderme yapabiliriz. Bu etiketin belli durumlarda aldığı değişik değerler vardır. Yani link tıklandığında etiket artık visited (ziyaret edilmiş) pozisyonuna geçecektir. Biz CSS yardımıyla a etiketinin aldığı posizyonlara istediğimiz biçimi verebiliriz. Şimdi a etiketinin aldığı pozisyonları görelim: İlk pozisyon linke herhangi bir tıklama olmadığındadır. Bu değer linkin sayfada görülecek ilk halidir. Visited : Link tıklandıktan sonra etiketin aldığı değerdir. Active : Linkin aktif olduğu durumdur. Yani imleç linkin tıklandığı andaki durumdur. Hover : Linkin üzerine gelindiğinde nasıl bir biçimde olması isteniyorsa stil o şekilde verilir.

122