Sürekli Eğitim, Araştırma Öğr. Gör. Murat HACIMURTAZAOĞLU

... konulu sunumlar: "Sürekli Eğitim, Araştırma Öğr. Gör. Murat HACIMURTAZAOĞLU"— Sunum transkripti:

1 Sürekli Eğitim, Araştırma Öğr. Gör. Murat HACIMURTAZAOĞLU
Rize Üniversitesi Sürekli Eğitim, Araştırma ve Uygulama Merkezi Web Tasarım ve Programcılığı Kursu EĞİTMENLER Öğr. Gör. Murat HACIMURTAZAOĞLU Öğr. Gör. Mustafa YAVAŞ Uzm. Murat YAZICI

2 EĞİTMENLER Öğr. Gör. Murat HACIMURTAZAOĞLU
e-posta : web : Öğr. Gör. Mustafa YAVAŞ e-posta : web : Uzm. Murat YAZICI e-posta : web :

3 Kursta Neler Öğreneceğiz?
Photoshop HTML PHP + MySql + Apache CSS Wordpress Dreamweaver

4 TEMEL İNTERNET KAVRAMLARI

5 İnternet Nedir? İnternet: Dünya üzerinde bulunan birbirinden farklı büyüklükteki yerel bilgisayar ağlarını birbirine bağlayan bilgisayar ağıdır. Kısaca ağların ağı olarak tanımlanmaktadır. İnternet dünyadaki bilgisayarların telefon kabloları aracılığıyla birbirine bağlandığı ağdır.  İşlevi, üretilen her türlü bilginin saklanması, paylaşılması ve kolay erişimidir. İnternet teknolojisi yardımıyla bilgiler insanlara kolay, ucuz, hızlı ve güvenli bir şekilde erişebilmektedir. Dünya çapında bir kütüphanedir. Büyük bir bilgisayar ve iletişim ağıdır. Fikirlerin paylaşıldığı bir demokrasi platformudur. İnsan hayatını kolaylaştırıcı (banka, alışveriş, dergi, gazete, TV hizmetleri) yönleri vardır. Çift yönlü bilgi aktarımı yapılabilmektedir. İnternet birbirinden çok farklı donanım (PC, Macintosh,…) ve yazılım (İşletim Sistemleri: UNIX, LINUX, DOS, WINDOWS, MOS, OS/2… ) özelliklerine sahip olan bilgisayarların birbiriyle iletişim içinde bulunmasını sağlamaktadır.

6 İnternetin Tarihçesi 1970 yılında Amerikan Savunma Bakanlığı tarafından, araştırma kuruluşları ve üniversiteler arasındaki bilgi alışverişlerini sağlamak amacıyla kuruldu. O zamanki adı ile ARPANET kurumlar arasındaki haberleşmeyi ve dosya transferlerini sağladı. 1980 yılının başlarında Amerikan Ulusal Bilim Vakfı (NSF), beş üniversitenin bünyesinde bulunan süper bilgisayarları birbirine bağlamak amacıyla, aralarında 56 Kbps hızında ve TCP/IP protokolüyle konuşacak bir ağı devreye soktu. 1989 yılının başlarında, NSF giderek artan yükü kaldırmak amacıyla ağın 45 Mbps hızına yükseltilmesi gündeme geldi. (Bu bağlantıya ise T3 adı verildi) 1991 yılının Kasım ayında omurga T1 'den T3 'e, merkez sayısı 16 'ya, merkeze bağlı ağ sayısı ise 3500 'e çıkartıldı. İşte bu omurga bugün İnternet dediğimiz yapıdır.

7 Türkiye’de İnternet Türkiye İnternet’e Nisan 1993'ten beri bağlıdır. İlk bağlantı ODTÜ'den gerçekleştirilmiştir. 64kbit/san hızında olan bu 2 hat, çok uzun bir süre, tüm ülkenin tek çıkışı olmuştur; Ege Üniversitesi'nden olan bağlantı ise, 1994 başlarında, 64kbit/san. hızı ile gerçekleştirilmiştir. Ardından sırayla, Bilkent Ün.(1995 Eylül), Boğaziçi Üniv. (1995 Kasım) ve İTÜ (1996 Şubat) bağlantıları gerçekleşmiştir. İnternet'in avantajları aşağıdaki biçimde sıralanabilir. Fiyat açısından uygundur. Yerel ya da uluslararası kullanıma açıktır. Özel yazılım veya donanıma fazla masraf yapılmasına gerek yoktur. Basit bir network olmamakta, buna karşın farklı network gruplarının birleşimi olmaktadır. Sadece akademisyenler, işadamları veya askeri amaçlı değil, özel ya da ticari amaçlarla da kullanılabilir.

8 Network (Ağ Bağlantıları)
Farklı mekanlardaki bilgisayarların özel hatlar ya da telefon şebekesi aracılığıyla birbirlerine bağlanmaları. Network yapıları ikiye ayrılmaktadır : LAN (Local Area Network) :Yakın mesafelerde (en fazla bin metre) iletişim sağlanan network türüdür. WAN (Wide Area Network) : LAN ‘ların birleşmesinden oluşan, yüzlerce veya binlerce kilometre mesafeler arasındaki iletişimin sağlandığı networktür. TCP/IP Transmission Control Protocol/Internet Protocol kelimelerinin baş harflerinden oluşmuştur. Bilgisayarlar arası iletişimi sağlayan, veri aktarımını kontrol eden ve bilgisayarlar arası organizasyonu düzenleyen veri iletişim protokollerine verilen genel addır. Örnek olarak FTP, ve Telnet verilebilir. INTRANET İnternet ortamına bağlı olmayan, şirket içi kurumsal haberleşme ve dosya yazıcı paylaşımları için oluşturulmuş networklerdir. Temel olarak Intranet, dış ortama kapalı bir LAN (ya da WAN) şebekesi olarak düşünülebilir.

9 IP, DOMAİN, HOST , DNS? IP (Internet Protocol) Numarası
IP (Internet Protocol), bilgisayarların iletişim kurmasını sağlayan standart bir protokoldür. Bilgisayarın iletişim adresidir. Örn: İnternet Alanı (Domain) İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır ( gibi). Bu numaraları akılda tutmak ve herhangi bir anda yazmak zor olduğundan, alan adı (domain name) sistemi adını verdiğimiz bir isimlendirme oluşturulmuştur. Herhangi bir bilgisayara (ve o bilgisayar üzerinde yayınlanan WEB sitelerine) bağlanmak için karmaşık IP numaralarını akılda tutmak yerine, hatırlanması ve yazılması kolay alan adlar kullanılmaktadır ( gibi). Host(Alan Yeri) Site dosyalarının tutulduğu yerdir. Her domain adresinin bir host alanı vardır. DNS (Domain Name System; Çözümleyici) İnternette bilgisayarları tanımlama amacıyla isimlerin organize edildiği ve dağıtıldığı sistemdir. Gelen istekleri DNS IP olarak çözümleyip Domaine ulaşmamızı sağlar.

10 WEB SAYFASI NASIL AÇILIR?
1. İstemci makinenin kullanıcısı Web tarayıcısında bir hyperlink ’e tıklar. 2. Browser DNS (Domain Name Server) a bağlanıp istemde bulunduğu sayfanın server IP sini alır. 3. Ardından Aldığı IP ye bir çağrı gönderir ve sayfayı ister. 4. Web Server da bu isteğe cevap verir ve http üzerinden sayfayı Web Browser a gönderir.

11 İnternette Kullanılan Protokoller
TCP/IP İnternet üzerinde data iletişimi TCP/IP protokolüyle sağlanır. Bu protokolün temel mantığı kullanıcının network ortamından bağımsız haberleşme yapması ve iletişim kurmasına dayanmaktadır. HTTP HTTP sunucusu ile haberleşmenin, veri akışının sağlanmasında kullanılan HTTP (Hyper Text TWWW (Web) sayfalarının görüntülenmesinde kullanılan bir protokoldür. WWW ise HyperText tabanlı bilgi sistemidir, ve siteleri görmemizi sağlar. FTP FTP (File Transfer Protocol) İnternete bağlı bir bilgisayardan diğerine (her iki yönde de) dosya aktarımı yapmak için geliştirilen bir İnternet protokolü ve bu işi yapan uygulama programlarına verilen genel addır. (Cute FTP, Filezilla gibi ) SMTP/POP Elektronik Posta ( ) alışverişi için SMTP ( Simple Mail Transfer Protocol ) ve POP ( Post Office Protocol ) protokolleri kullanılır. SMTP, gönderilmesinde, POP ise gelen maillerin alınmasında kullanılır. TELNET/SSH Telnet, İnternet ağı üzerinde uzak bilgisayara bağlanmak için geliştirilmiş bir TCP/IP protokolü olup, aynı zamanda bu işi yapan programlara verilen genel addır.

12 İnternet Araçları Web Browserler; İnternette gezinmemizi sitelere giriş yapmamızı ve siteler arası gezintileri sağlar. Örn; İnternet Explorer, Firefox, Opera, Google Chrome, Netscape vs… İnternet adres grupları; gov: Hükümet kurumları (government) edu: Eğitim kurumları (education) org: Ticari olmayan kuruluşlar (organization) com: Ticari kuruluşlar (company) mil: Askeri kurumlar (military) net: Servis sunucular (network) ac: Akademik kuruluşlar (academic) int: Uluslararası kuruluşlar (international)  Bunun yanında kullanılan ülke kısaltmaları da vardır. Bazıları; tr:Türkiye, jp:Japonya, uk:İngiltere, it:İtalya, ch:Isviçre gibi.

13 Arama Motorları İnternet büyük miktarda bilgi içerir, ancak en büyük sorun ihtiyacınız olan bilginin yerini tespit etmektir. Arama motoru, WEB sitelerini dolaşarak içeriklerini inceleyen ve bu içerikleri sizin arama yapabilmeniz için uygun şekilde indeksleyen programlara verilen isimdir. Arama Motorlar; Google.com, Yahoo.com, Hotmail.com, Astalavista.com,Hemenbul.com, Arama.com, AdanZeye.com Arama Teknikleri "..." : Tırnak içine yazdığınız değerlerin aynı sayfada olduğu sonuçları gösterir. Örn: "araba kiralamak istiyorum“ ….. + ….. : yazılan kelimelerin 2 sininde listelenen sitelerde yer almasını sağlar. Örn: rize + yayla allintitle: bu kullanım ile site başlıklarında arama yapabilirsiniz. Örn: allintitle: araba kirala site: Bu operatörü kullanarak, herhangi bir web sitesi içerisinde arama yapabilirsiniz. Örn: [site: Rize MYO] AND ve OR ile arama yapılabilir.

14 İnternet Araçları Bilgisayar Güvenliği
Yeni Hesabı Açma(hotmail, yahoo, gmail) Hesap Kullanımı Outlook Express kurulumu MSN kurulumu ve kullanımı Yahoo Messenger Facebook kullanımı Forum sitlerine üyelik Upload/Download yapma İnternet Explorer Kullanımı Bilgisayar Güvenliği İnternette çıkış yapan yada yapmayan her Pc de güvenlik sorunu mevcuttur. Güvenli olarak internette gezinmek için mutlaka PC ye anti-virüs programları yüklenmesi gerekmektedir. Bunlar, Nod32, Avira, Kaspersky, Norton gibi anti virüs ve anti spam yazılımlarıdır. Unutmayınki anti-virüs programları 100% güvenlik sağlamaz, bu yüzden kullanıcıların internette bilinçli gezinmeleri gerekir.

15 Bilgisayar Ağ Bağlantı Ayarları
1. Ağ bağlantılarım kısmından, ağ bağlatıları görüntüle simgesine sağ tıklanıp Özellikler sekmesine tıklanarak verilen sayfa açılır burada bilgisayarın internet durumu görüntülenir. Burada gelen ve gönderilen paketlerin istatistiği mevcuttur. 2. Ayrıntılara tıklanarak IP adreslerini görebiliriz. 3. Özelliklere tıklanarak IP değerleri atanabilir ve değiştirilebilir.

16 Şema olarak İnternet

17 Dreamweaver Editörü ile HTML, CSS, JavaScript kullanarak Web Sayfası Oluşturma

18 Kavramların Tanımı HTML = Hypertext Markup Language
(Hareketli Metin İşaretleme Dili) CSS = Cascading Style Sheets (Geçişli Stil Kağıtları) Dreamweaver : Web Sayfası kodlama ve tasarım yapmayı sağlayan editör programıdır.

19 HTML ? HTML = Hypertext Markup Language (Hareketli Metin İşaretleme Dili) HTML dokümanları metin ve etiketlerden meydana gelir. HTML etiketleri açılır parantez içerisinde yazılır. HTML etiketlerinin çoğu slash / karakteri ile biten etiket ile kapatılarak bloklar halinde kullanılır. <HTML> (açılış) …… </HTML> (kapanış)

20 HTML’de Yapısal Etiketler
Yapısal etiketler web sayfasında farklı bölümler tanımlamak için kullanılır. Bunlar;

21 Örnek HTML Sayfası! <HTML> <HEAD>
<TITLE>İlk Web Sayfamın Başlığı</TITLE> </HEAD> <BODY> <!—Bu örnek bir açıklama--> Buraya Sayfada görünecek metinler,resimler, şekiller, kodlamalar gelecek </BODY> </HTML> Farklı kaydet ile ilk_sayfa.html olarak kayıt edilir.

22 Etiket Özellikleri(Tag Attributes)
<HEAD> Etiketi Bu etiket içerisinde yazılanlar sayfada gözükmezler. Bu etikette ; <TITLE> …. </TITLE> , <META> , (CSS) <STYLE> (JavaScript, VBScript) <SCRIPT> mevcuttur. <BODY> Etiketi <BODY> etiketleri ile tanımlanan <BODY> bölümüne sayfamızda görünmesini istediğimiz bilgileri yazarız. <BODY> etiketi birçok özelliğe sahiptir. Bunların çok sık kullanılanları; BACKGROUND (Arka plana resim ve renk yerleştirme) BGCOLOR (Arka planı renklendirir) TEXT: Metin rengi LINK: Ziyaret edilmemiş link rengi VLINK: Ziyaret edilen link rengi (vizited link) ALINK: Kullanıcı Mouse ile linke tıkladığında Mouse basılı iken gözükür. olan renktir. BGPROPERTIES: Bu özelliğe Fixed değeri atandığında arka plan resmi sabit olup kaydırma çubuğu ile arka plan resmi hareket etmeyecektir.

23 Etiket Özellikleri(Tag Attributes)
<HTML> <HEAD> <TITLE>WEB SAYFAMA HOŞGELDİNİZ</TITLE> </HEAD> <BODY background="bg.jpg" bgcolor="gray" text="white" link="yellow" vlink="aqua" alink="olive" bgproperties="fixed"> <H1 align="center">WEB SAYFAMA HOŞGELDİNİZ</H1> <H2>RÜ Web Sayfası</H2> Rize Üniversitesinin Sayfasına Gitmek İçin <A href=" <BR> Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin <A href=" </BODY> </HTML> Farklı kaydet ile deneme.html olarak kayıt edilir.

24 Belge Biçim Etiketleri
HTML çok sayıda biçimlendirme etiketi sunar. Bu etiketlerle belgede başlık oluşturur, metni kalın, italik, altçizgili yapar, madde imlerini oluşturur ve yatay çizgiler oluşturabilirsiniz. Bunlardan bazıları aşağıdaki tablodadır.

25 Belge Biçim Etiketleri

26 Başlık Etiketlerinin (Header Tags) Kullanımı
Bu etiketin başında ve sonunda Web Browser otomatik olarak satır kırma karakteri kullanır. Örnek: header.html <HTML> <HEAD> <TITLE>Header Etiketleri</TITLE> </HEAD> <BODY> <H1>Header 1</H1> <H2>Header 2</H2> <H3>Header 3</H3> <H4>Header 4</H4> <H5>Header 5</H5> <H6>Header 6</H6> </BODY> </HTML>

27 META Etiketlerinin HEAD İçinde Kullanımı
<META http-EQUIV=”Content-Type” CONTENT=text/html; CHARSET=iso ”> Yada <META http-equiv="Content-Type" content="text/html; charset=windows-1254“> <!–-Sitenin dilini belirtir ve Türkçe karakter sorununu giderir--> <META NAME=”GENERATOR” Content=”Homesite 4.5”> <META NAME=”Author”content=”Mustafa YAVAŞ”> <!–-Sitenin tasarımcısı ve kodlayanı--> <META NAME=”Keywords” Content=”HTML,CSS, HTML Dersleri, ders notları vs… “> <!–-Arama Motorlarında(Google gibi) sitenin içeriğine ulaşılması, üst sayfalarda çıkması için, ilgili meta’ların yazılması ile olur. -->

28 Metin Biçimlendirme Etiketlerinin Kullanımı
Farklı metin biçimleri kullanmak için bu etiketleri kullanırız. HTML satır kırmalarını, sekme karakterlerini, sıralı duran boşluk karakterlerini tek bir boşluk karakteri olarak algılar. Bu yüzden satır kırma(alt satır) için <P> ve <BR> etiketlerini kullanırız. <BODY> <H1>Metin Biçimleri </H1> <STRONG>Güçlü Vurgu STRONG (Strong Emphasis) Metni</STRONG> <BR> <B>Kalın B (Bolt) Gibi Gözüküyor.</B> <!--Bir sonraki etiket yatay çizgi oluşturur.--> <EM>Vurgu EM (Emphasis) Metni</EM> <BR><I>İtalik I (Italic) Gibi Gözüküyor.</I> <PRE> Bu Metin PRE (Preformatted) Etiketi Kullanılarak Yazılan Metindir. Başka Bir Satır ve biraz boşluk<BR> </PRE> <HR> Birkaç Metin Yazalım. 12 <BR>Bu Satırdan Önce Bir BR etiketi Var. <P>Bu Satırdan Önce P Etiketi Var.</P> Birkaç Metin Daha <DIV>Bu Satırdan Önce DIV Etiketi Var.</DIV> Bu Kadar Metin Yeter. </BODY>

29 <FONT> Etiketi Kullanımı
Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı etiketidir. Bu etiketin bazı özellikleri; • Size: Yazı boyutunu temsil eder. • Color: Yazı rengi Örnek: font1.html <BODY bgcolor="#000000" text="#FFFFFF"> <H1>Kaptanın Seyir Defteri</H1> <BR clear="all"> <SMALL>Bu metin SMALL etiketi ile yazılmıştır.</SMALL> <BIG>Bu metin iki tane BIG etiketi ile yazılmıştır.</BIG> <P> <FONT size="3" color="#FF0000"> Buradaki metin özellikleri size="3" ve color="#FF0000" dir. </FONT> </P> </BODY>

30 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 ; <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. 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. <BODY bgcolor="aqua"> <H2>Karadeniz Bölgesi</H2> <H3> <UL> <LI>Rize</LI> <LI> Trabzon <LI>Sürmene</LI> <LI>Araklı</LI> <LI>Of</LI> </UL> </LI> <LI>Samsun</LI> <LI>Sinop</LI> <LI>Artvin</LI> </UL> </H3> <H2>Güney Doğu Bölgesi</H2> <H3> <OL> <LI>Gaziantep</LI> <LI>Şanlıurfa</LI> <LI>Diyarbakır</LI> <LI>Adıyaman</LI> </OL> </BODY>

31 Hyperlink (Köprü veya link atama)
Sayfalara link (bağlantılar) oluşturmak için <A> Anchor etiketi kullanılır. <A> etiketini kullanarak; • Kendi Web Sitenizde başka bir Web Sayfasına http hyperlinki, • Başka bir Web Sitesinin bir sayfasına http hyperlinki, • Dosya download etmek için bir ftp linki, • Mail mesajı oluşturmak için bir mailto linki oluşturabilirsiniz. <A> etiketinin TARGET özelliğine “_blank” değerini atayarak linkin yeni bir Web Tarayıcısı penceresinde açılmasını sağlayabiliriz ve “_self” , “_parent” kullanınız. <HTML> <HEAD> <TITLE>RMYO Lİnk Sayfası </TITLE> <META http-equiv="Content-Type" content="text/html; charset=windows-1254"> </HEAD> <BODY bgcolor="yellow" text="blue" link="green" vlink="red" alink="fuchsia"> <H1>Bazı Sık Kullanılan Linkler</H1> <H3> <A href=“index.html“>Anasayfa</A><BR> <A href=“iletisim.html“>İletişim Sayfası</A><BR> <A href=“ Sayfam</A><BR> <A href=“../images/resim.jpg">Resim Görüntüle  </A><BR> <A href=“ftp://rapid.com/dersnotu.zip">Ders Notu İndir!</A><BR> <A Gönder >></A><BR> </H3> </BODY> </HTML>

32 <IMG> Etiketinin Kullanımı
Sayfaya ekleyeceğimiz resmin kaynağını <IMG src> özelliği ile, resim göstermeyi desteklemeyen tarayıcılarda resim yerine gösterilecek olan metin de <IMG alt> özelliği ile belirtilir Resim Formatları Web de kullanılan iki resim formatı vardır. Bunlar; GIF, JPEG/JPG, PNG vs… <HTML> <HEAD> <TITLE>Rize MYO </TITLE> <META http-equiv="Content-Type" content="text/html; charset=windows-1254"> </HEAD> <BODY text="#0000CC"> <DIV align="center"><IMG src=“/logo.jpg" alt=“Rize Üniversitesi Logosu"></DIV> <H1 align="center">Rize Üniversitesi<BR> Rize Meslek Yüksekokulu</H1> </BODY> </HTML>

33 <IMG> Etiketinin Özellikleri
HTML ’nin çoğu taglarından farklı olarak <IMG> etiketinin kapama etiketi yoktur. Bazı özellikleri şunlardır; src: Resmin bulunduğu dosya ve yol ismi alt: Resim göstermeyi desteklemeyen tarayıcılar ya da resim yüklenirken resmin yerinde gözükecek olan metindir. align: Resmin sayfada farklı hizalamada kullanılır. Left, right, top, middle veya bottom olabilir. hspace: Resmin etrafındaki yatay boşluk vspace: Resmin etrafındaki dikey boşluk height: Pixel olarak resmin yüksekliği width: Pixel olarak resmin genişliği border: Resmin etrafındaki çerçeve kalınlığıdır. “0” değeri verilerek çerçeve kaldırılabilir. Align Özellikleri Sayfadaki diğer elemanlarla resmin nasıl hizalanacağını kontrol etmek için bu özelliği kullanırız. Varsayılan olarak tarayıcı resmi sola hizalar ve resimden sonra gelen eleman resmin yanına yerleşir. Top: Resimden sonra gelen metinlerin üst satırı resmin üstü ile hizalanır. Middle: Resimden sonra gelen metinlerin üst satırı resmin ortası ile hizalanır. Bottom: Resimden sonra gelen metinlerin üst satırı resmin altı ile hizalanır. Left: Resim sayfanın soluna hizalanır. Resimden sonra gelen metnin tümü üstten itibaren resmin sağına yerleşir. Right: Resim sayfanın sağına hizalanır. Resimden sonra gelen metnin tümü üstten itibaren resmin soluna yerleşir.

34 <IMG> Etiketinin Özellikleri Örneği
<HTML> <HEAD> <TITLE>Rize MYO</TITLE> <META http-equiv="Content-Type" content="text/html; charset=windows-1254"> </HEAD> <BODY text="#0000CC"> <IMG src=“logo.jpg" align="left"> <!--Burada Align özelliğine farklı değerler atayarak durumu görelim.--> <H1>Resmin Align Özelliği</H1> Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. </BODY> </HTML>

35 <BR clear=”all”> Etiketinin Kullanımı
Bazen align özelliğine verdiğimiz değere göre metin resmin etrafını çevreler. Align özelliğini kaybetmesini istediğimiz yerde <br clear=”all”> etiketini kullanırız. <BODY text="#0000CC"> <IMG src=“logo.jpg" align="left"> <!--Burada Align özelliğine farklı değerler atayarak durumu görelim.--> <H1>Resmin Align Özelliği</H1> Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. <br clear="all"> <!--Burada clear'a farklı değerler atayarak durumu gözleyelim--> </BODY>

36 Height ve Width Özellikleri
Resmin boyutlarını pixel olarak biçimlendirmede kullanılır. <HTML> <HEAD> <TITLE>Rize MYO</TITLE> <META http-equiv="Content-Type" content="text/html; charset=windows-1254"> </HEAD> <BODY> <H2>Orantılı Olarak Küçültülürse</H2> <IMG src="dikkat.gif" width="200" height="180"> <IMG src="dikkat.gif" width="100" height="90"> <IMG src="dikkat.gif" width="50" height="45"> <H2>Orantısız Olarak Küçültülürse</H2> <IMG src="dikkat.gif" width="200" height="90"> <IMG src="dikkat.gif" width="200" height="45"> </BODY> </HTML>

37 Resim ve Hyperlink’ler
Bir resme hyperlink eklemek için <IMG> ve <A> etiketlerini birlikte kullanırız. <HTML> <HEAD> <TITLE>Karasu MYO (015_images.htm)</TITLE> <META http-equiv="Content-Type" content="text/html; charset=windows-1254"> </HEAD> <BODY> <A href=“ src="b1.gif" align="middle" border="0"></A> Resim 1 Örneği <br clear="left"><BR> <A href=" src="b2.gif" align="middle" Resmin 2 Align Özelliği <br clear="left"><BR> <A href=“resim3.html"><IMG src="b3.gif" align="middle" Resim 3 - BR etiketinin clear özelliği <br clear="left"><BR> <A href=“sayfa.html"><IMG src="b4.gif" align="middle" Sayfa 4 -- Width ve Height Özelliği <br clear="left"><BR> <A href=“index.html"><IMG src="b5.gif" align="middle" Anasayfa -- Sayfanın Kendisi </BODY> </HTML>

38 Özel Karakterler HTML metin içerisine özel karakterleri yazmak için aşağıdaki format kullanılır. xxx ISO karakter kodu olmak üzere; &#xxx; şeklindedir. Örneğin copyright sembolü için “©” yazılır. Buna ilaveten HTML çok sık kullanılan bazı özel karakterler için aşağıdaki gibi kısa yola sahiptir.   non-breaking space(boşluk) ( ) " quote character (“) < less-then charakter (<) > greater-then charakter (>) & ampersand charakter (&) © copyright symbold charakter (©)

39 Tablo Oluşturma Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler;

40 Tablo Örnek! <TITLE>Ürünler Sayfası</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1254"> </HEAD> <BODY text="#FFFFFF"> <TABLE border="2"> <CAPTION> <B>Kampanya Ürünlerimiz</B> </CAPTION> <TR> <TH>Ürünler</TH> <TH>Açıklama</TH> <TH>Fiyatı</TH> </TR> <TD>17“ LG (Goldstar) Monitör</TD> <TD>Peşin Fiyatına 5 taksit</TD> <TD>$300</TD> <TD>HP Dijital Fotoğraf Makineleri</TD> <TD>Dijital sözlük hediyeli</TD> <TD>$200</TD> <TD>Sony Hi8 Kamera</TD> <TD>Kampanyada son 10 gün</TD> <TD>$700</TD> </TABLE> </BODY>

41 <TABLE> Etiketi
<TABLE> etiketi kullanmak zorunda olmadığımız birkaç özelliğe sahiptir.

42 <TR> Etiketi <TH> ve <TD> Etiketleri
<TR> etiketi iki tane özelliğe sahiptir. Bunlar; ALIGN : Satırdaki hücrelerin içeriğinin yatay hizalamasını kontrol eder. left, right, center olabilir. VALIGN : Satırdaki hücrelerin içeriğinin dikey hizalamasını kontrol eder. top, middle, bottom olabilir. <TH> ve <TD> Etiketleri ALIGN : Hücre içeriğinin yatay hizalamasını kontrol eder. VALIGN : Hücre içeriğinin dikey hizalamasını kontrol eder. NOWRAP : Kelime aralarında satır sonu kırmalarını pasif yapar. (Word Wrapping) ROWSPAN : Bir hücrenin genişletileceği satır sayısını belirtir. Varsayılanı 1 dir. COLSPAN : Bir hücrenin genişletileceği sütun sayısını belirtir. Varsayılanı 1dir. WIDTH : Hücrenin pixel olarak genişliği HEIGHT : Hücrenin pixel olarak yüksekliği

43 Örnek! <BODY text="#FFFFFF">
<TABLE align="center" border="2" width="80%"> <CAPTION> <B>Fiyat Listesi</B> </CAPTION> <TR> <TH rowspan="2" width="50%">Ürünler</TH> <TH colspan="2">Fiyat</TH> </TR> <TH width="15%">Toptan</TH> <TH width="15%">Perakende</TH> <TD>HP Dijital Fotoğraf Makineleri</TD> <TD align="center"><I>$500</I></TD> <TD align="center">$600</TD> <TD>Goldstar (LG) 17" Monitör</TD> <TD align="center"><I>$250</I></TD> <TD><CENTER>$300</CENTER></TD> </TABLE> </BODY>

44 Frame (Çerçeve) Kullanımı
HTML çerçevelerini (frame) kullanarak çok pencereli sayfalar oluşturabiliriz. Çerçeveler HTML 3.2 nin bir standardı değildir. Fakat web tarayıcılarının hemen hemen hepsi destekler. Aşağıdaki etiketleri kullanarak ana frame penceresini oluştururuz.

45 <FRAMESET> Etiketi
Çerçeveli belge oluşturacağımız zaman, çerçevenin yapısını belirtmek için <FRAMESET> ve <FRAME> etiketlerini kullanırız. <FRAMESET> i kullanarak çerçeveleri satırlar ve sütunlar olarak ya da her ikisini kullanacak şekilde tanımlayabilirsiniz. <FRAMESET> etiketi iki tane özelliğe sahiptir; • COLS: Sütun çerçevenin sayısını ve büyüklüğünü belirler • ROWS: Satır çerçevenin sayısını ve büyüklüğünü belirler. Aşağıdaki tabloda bir web sayfasının çerçevesinin nasıl tanımlanacağının birkaç örneği vardır. <FRAMESET COLS=“100,100,*”> Üç sütunlu çerçeve; ilk ikisi 100 piksel genişliğinde, üçüncüsü ise kalan boşluğun tamamı büyüklüğünde. <FRAMESET COLS=“100,30%,*”> Üç sütunlu çerçeve; birincisi 100 piksel, ikincisi browserın %30 u ve üçüncüsü de kalan boşluğun tamamı büyüklüğünde. <FRAMESET ROWS=“20%,*,30%”> Dört satırlı çerçeve; birincisi web tarayıcısının %20 si yüksekliğinde, ikincisi kullanılabilecek alanın tamamı, üçüncüsü ise tarayıcının %30 u yüksekliğindedir.

46 <FRAME> Etiketi
<FRAMESET> ile çerçeve sayfası tanımlandıktan sonra her bir çerçeve penceresinin kaynağını belirtmeliyiz. Bunu da <FRAME> etiketi ile yaparız. Özellikleri;

47 FRAME Örnek! Örnek: 021_frame1.htm <HTML> <HEAD>
021_page1.htm <HTML> <HEAD> <TITLE>Sol Çerçeve</TITLE> </HEAD> <BODY bgcolor="#FFFF00"> <DIV align="center"> <H1>Sarı Çerçeve</H1> </DIV> </BODY> </HTML> Örnek: 021_frame1.htm <HTML> <HEAD> <TITLE>Frameset Örneği</TITLE> </HEAD> <!--Sütunları Tanımıyoruz...--> <FRAMESET cols="33.33%,33.33%,*"> <!--Tanımladığımız Sütunları Sayfalarla dolduruyoruz...--> <FRAME src="021_left.htm" name="leftFrame" > <FRAME src="021_main.htm" name="mainFrame"> <FRAME src="021_right.htm" name="rightFrame"> </FRAMESET> <NOFRAMES> <BODY> Web Tarayıcınız Frame i Desteklemiyor... </BODY> </NOFRAMES> </HTML> 021_page2.htm <HTML> <HEAD> <TITLE>Kırmızı Çerçeve</TITLE> </HEAD> <BODY bgcolor="#FF0000"> <DIV align="center"> <H1>Kırmızı Çerçeve</H1> </DIV> </BODY> </HTML> 021_page3.htm <HTML> <HEAD> <TITLE>Untitled Çerçeve</TITLE> </HEAD> <BODY bgcolor="#0000FF"> <DIV align="center"> <H1>Mavi Çerçeve</H1> </DIV> </BODY> </HTML>

48 <IFRAME> Etiketi
Bu ağ ile HTM kodları arasına bir çerçeve açılıp bu çerçevede başka bir sayfa gösterilebilir. Özellikleri ; Örnek: <BODY> <IFRAME src="021_frame1.htm" align="center" height="400" width="500" frameborder="1" scrolling="yes"> </IFRAME> </BODY>

49 HTML Formları <FORM> Etiketi
HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form kontrolleridir. Formları bilgi girişinin haricinde bilgi gösterme maksadı ile de kullanabiliriz. <FORM> Etiketi HTML belgemizde formlar <FORM> ve </FORM> etiketleri arasında oluşturulur. Özellikleri: ACTION : Formun onay buttonuna basıldığında form bilgilerinin gönderileceği URL yi belirtir. METHOD : Formun bilgilerinin hangi metotla Server’a gönderileceğini tutar. Get ya da Post olabilir. Varsayılan Get tir. Çok fazla veri gönderileceği zaman çoğunlukla Post metodunu kullanırız. Get metodunda form ile gönderilen veriler URL nin sonuna eklenir.

50 Kontrol Tipleri HTML nin form kontrolleri <INPUT>, <TEXTAREA> ve <SELECT> etiketleri ile oluşturulur.

51 Kontrol Tipleri-1

52 <INPUT> Etiketi
Bu HTML etiketi ile birden fazla kontrol çeşidi oluşturuyoruz. Her bir çeşidin hangi özelliklere sahip olduğu be bu özelliklerinin anlamları:

53 <TEXTAREA> Etiketi
Çok satırlı metin kutusu oluşturmada kullanılır. Kullanımı: <TEXTAREA name=”adi” rows=”m” cols=”n”> Sayfa yüklendiğinde kontrolde gözükecek olan metin </TEXTAREA> <SELECT> ve <OPTION> Etiketleri Kontrolü oluşturmak için <SELECT> ve </SELECT> etiketi kullanılır. Bu kontrollerde gözükecek her bir seçenek <OPTION> etiketi ile oluşturulur. Kullanımı: <SELECT name=”adı” size=”n”> <OPTION value=”değer1”> Gözüken Metin1</OPTION> <OPTION value=”değer2”> Gözüken Metin2</OPTION> </SELECT>

54 <SELECT> Özellikleri:
Eğer size>1 ise kontrol ListBox stilinde gözükür. Size=1 ise (varsayılan budur) ComboBox (Drop-Down Menu) stilinde gözükecektir. <OPTION> Özellikleri:

55 Örnek! <TR> <TD><B>Açıklama : </B></TD>
<HTML> <HEAD> <TITLE>Müşteri Kayıt Formu</TITLE> </HEAD> <BODY background="bg.jpg" text="#FFFF00"> <H2><FONT color="#FF0001">Müşteri Kayıt Formu</FONT></H2> <H3> <FORM action="hedefdosya.htm" method="post" name="frmMusteri"> <TABLE> <TR> <TD> <B>Adı : </B></TD> <TD><INPUT type="text" name="txtAdi" size="30"></TD> </TR> <TD><B>Soyadı : </B></TD> <TD><INPUT type="text" name="txtSoyadi" size="30"></TD> <TD><B> </B></TD> <TD><INPUT type="text" name="txt " size="30"></TD> <TD><B>Adres : </B></TD> <TD><INPUT type="text" name="txtAdres" size="43"></TD> <TD><B>Şehir, Ülke, Posta Kodu : </B></TD> <TD><INPUT type="text" name="txtSehir" size="20">   <INPUT type="text" name="txtUlke" size="20">   <INPUT type="text" name="txtPostaKodu" size="10"> </TD> <TR> <TD><B>Açıklama : </B></TD> <TD><TEXTAREA name="textareaAciklama" rows="2" cols="30">Buraya Herhangi Bir Açıklama Yazınız.</TEXTAREA></TD> </TR> <TD><B>Yaş : </B></TD> <TD><SELECT name="cboxYas" size="1"> <OPTION value="0"> </OPTION> <OPTION value="1"> </OPTION> <OPTION value="2"> </OPTION> <OPTION value="3"> </OPTION> <OPTION value="4">40 + </OPTION> </SELECT></TD> <TD><B>Çalışmalarımızı Başarılı Buluyor Musunuz? </B></TD> <TD><INPUT type="radio" name="radMailListesi" checked value="evet"> Evet <INPUT type="radio" name="radMailListesi" value="hayir"> Hayır </TD> <TD><INPUT type="submit" name="kaydet" value="Kaydet"></TD> <TD><INPUT type="reset" name="temizle" value="Temizle"></TD> </TABLE> </FORM></H3> </BODY> </HTML>

56 CSS (Cascading Style Sheets) STİL ŞABLONLARININ HTML İLE KULLANIMI

57 CSS (STİL ŞABLON) STİL ŞABLON ÇEŞİTLERİ
CSS (Cascading Style Sheets) diğer deyimiyle Stil Şablon HTML yazım şekli olarak etiket türünde bir yazım dilidir. Sahip olduğu özelliklerin kısıtlı olması nedeniyle sayfanın dizaynında bize tam esneklik veremese de büyük kolaylıklar sağlamaktadır. STİL ŞABLON ÇEŞİTLERİ Css’in (Stil Şablon) 3 farklı kullanım alanı vardır. Bu alanlar; 1. Yerel, yani sayfada sadece bir kez, Yerel stil şablonlar bir html etiketi için özel olarak kullanılırlar. 2. Global, yani tüm sayfa için, Global stil şablonlar sayfadaki tüm html etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar. 3. Bağlantılı, yani birden çok sayfa için, Bağlantılı stil şablonlar birçok sayfada aynı biçimde olması istendiğinde kullanılırlar.

58 Yerel Stil Şablonu Yerel Stil Şablonlar, uygulanacak etiketi sadece bir kez bulunduğu yerde (yerel) etkiler. Örnek: <html> <head> <title>Css</title> </head> <body> <h2>CSS Kullanımı</h2><br> <h2 style=font-size:20pt; color:blue>CSS Kullanımı</h2> </body> </html>

59 Global Stil Şablonu Global Stil Şablonları bir önceki örnekte yaptığımız h2 etiketinin tüm sayfada aynı özellikte olması istendiğinde kullanılır. Bunu için Stil Şablon özellikleri sayfanın başlangıcında (<head></head> etiketleri arasında) tanımlanır. Örnek: <html> <head> <title>Css</title> <style type="text/css"> <!-- h2 {font-size:20pt; color:blue} --> </style> </head> <body> <h2>Web Teknikleri</h2> </body> </html>

60 Bağlantılı Stil Şablon
Global stil şablonu, sitemiz içerisindeki tüm sayfalarda aynı stil özelliklerini kullanmak istediğimizde kullanırız. 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 <head> </head> etiketleri arasına <link rel="stylesheet“ type="text/css" href="dosya_ismi.css"> şeklinde ekleriz. Örnek : Stil.css h1 {font-size:13pt; color:green} h2 {font:20pt; color:blue} h3 {font-size:15pt; color:red} Örnek : Stilkullan.html <html> <head> <title>Css</title> <link rel="stylesheet" type="text/css" href="stil.css"> </head> <body> <h1>Web Teknikleri</h2> <h2>Web Teknikleri</h2> <h3>Web Teknikleri</h2> </body> </html>

61 HTML ETİKETLERİ İLE CSS
Font Özellikleri Font özelliklerini değiştirmeye yarayan bir stil şablon özelliğidir. Özellikler; xx-large (en büyük ) , x-large (biraz büyük) , large (büyük), medium (orta), small(küçük) , x-small (biraz küçük), xx-small (en küçük), Alt Özellikler: • font-family : Font tipini belirler. Arial, Courier, Verdana gibi font isimlerini alabilir. • font-weight : Fontun kalınlı 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 yatık olup olmamasını sağlar. • italic : Yazının sağa doğru yatık olmasını sağlar. • color : Fontun rengini belirler. Blue, red,green gibi renklerin ingilizce karşılıklarını alabilir. Örnek: <html><body><head> <title>Css</title> <style type="text/css"> p {font-size : 12pt;font-family : Arial;font-weight : bold;font-style :italic;color : #00FFFF;} </style> <body> <p>Web Teknikleri</p> </body></html>

62 Text Özellikleri Text özelliği ile de font özelliğinin sahip olmadığı bazı özellikleri etiketimize ekleriz. Örnek : <html><body><head> <title>Css</title> <style type="text/css"> <!— p { text-transform : lowercase; text-decoration : underline; text-align : left; line-height : 20px; text-indent : 15px; } --> </style> <body> <p>Web Teknikleri</p> </body></html>

63 Alt özellikleri tanıyalım
text-transform : • lowercase : Yazının tümünün küçük harf olmasını sağlar. • uppercase : Yazının tümünün büyük harf olmasını sağlar. • capitalize : Yazının istenilen şekilde kalmasını sağlar. text-decoration : • underline : Yazının altının çizili olmasını sağlar. • overline : Yazının üstünün çizili olmasının sağlar. • line-through : Yazının üstünün ç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 değerler alır.

64 Background Özellikleri
Background ile html sayfamızın arka fonlarının özelliklerini değiştirmemizi sağlar. <html> <body> <head> <title>Css</title> <style type="text/css"> <!— p { background-color :#00ff00; background-image : url ("resim_adi.gif"); background-position : center; background-repeat : repeat-y; } --> </style> <p>Web Teknikleri</p> </body> </html>

65 Background Özellikleri
background-color : Arka fonun rengini belirler. Css’te renkleri blue, red gibi tanımlayabileceğimiz gibi Html kodunu vererekte tanımlayabiliriz. background-image : Arka fonu bir resim dosyası yapmak için kullanılır. url etiketinin içine resim dosyasının yolu ve ismi tam olarak yazılmalıdır. background-position : • left : Arka fondaki resmin sadece sol tarafta olmasını sağlar. • center : Arka fondaki resmin sadece sol tarafta olmasını sağlar. • right : Arka fondaki resmin sadece sol tarafta olmasını sağlar. background-repeat : Arkafondaki resmin tekrarlanması istendiğinde kullanılır. • repeat : Tüm yönlerde tekrar edilmesini sağlar. • repeat-x : X (yatay) yönünde tekrar edilmesini sağlar. • repeat-y : Y (dikey) yönünde tekrar edilmesini sağlar. • no-repeat : Resmin tekrar edilmeyerek bir kere gösterilmesini sağlar.

66 List Özellikleri Bu Css özelliği <UL> ve <LI> html etiketleri ile oluşturduğumuz listelerin özelliklerini belirlemek için kullanılır. list-style-type : • disk : Liste biçiminin disk (içi dolu yuvarlak) şeklinde olmasını sağlar. • circle : Liste biçiminin çember şeklinde olmasını sağlar. • square : Liste biçiminin kare olmasını sağlar. • decimal : Liste biçiminin rakamlardan oluşmasını sağlar. • lower-roman : Liste biçiminin i,ii,iii, gibi roma rakamlarının küçük harfi olmasını sağlar. <html><body><head> <title>Css</title> <style type="text/css"> li { list-style-type : circle; list-style-position : inside; list-style : decimal; list-style-image : url ("resim.gif"); } </style> <body> <ul> <li>Web Teknikleri <li>Html <li>Javascript <li>Css <li>Web Grafik </ul> </body></html>

67 Position Özelliği Html’de kullandığımız Layer (katman) etiketlerinin html üzerindeki yerleştirme işlemi için kullanılır. Hemen bir örnek ile görelim. position : • absolute : Katmanın yerinin kesin olarak belirlenmek istendiğinde kullanılır. • relative : Katmanın yerinin göreli(diğer öğelere göre değişebilen) olarak belirlenmek istendiğinde kullanılır. • static : Katmanın yerinin sabit olarak belirlenmek istendiğinde kullanılır. • top : Katmanın üst kısımdan kaç piksel aşağıda olması gerektiğini belirler. • left : Katmanın sol kısımdan kaç piksel aşağıda olması gerektiğini belirler. • width : Katmanın genişliğinin kaç piksel olacağını belirler. • height : Katmanın boyunun kaç piksel olacağını belirler. • clip : Katmanın görünmesi istenen bölgeyi içeren kutucuk. • overflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler. • auto : Otomatik olarak belirlenir. • scroll : Kaydırma çubukları ekler. • visibility : Katmanın görünebilirlik ayarı yapar • visible : Görünür hale getirir. • hidden : Gizler. • z-index : Katmanın sayfa üzerindeki sıra sayısı.

68 Position Örnek! <html> <head>
<title>Css</title> <STYLE type="text/css"> <!— div { position:absolute; top:20px; left:10px; width:200px; height:200px; clip:auto; overflow:scroll; z-index:auto; visibility:visible; } --> </style> <body> <div> Web Teknikleri<br> Html<br> Javascript<br> Css<br> Grafik<br> </div> <p> Web Teknikleri </body> </html>

69 SEÇİCİLER (SELECTORS)
Class Selector (Sınıf Seçicisi) Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz durumlarda kullanırız. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri özelleştirebilirsiniz. Sınıf seçicisinin iki türü vardır. İlk önce birinci şeklini görelim. Hemen bir örnekle bu seçiciyi tanıyalım. <html> <head> <title>Css</title> <style type="text/css"> <!- h1.mavi {color:blue} h1.kirmizi {color:red} --> </style> </head> <body> <h1 class=mavi>Mavi sınıf seçicisi ile </h1><br> <h1 class=kirmizi>Kırmızı sınıf seçicisi ile </h1> </body> </html>

70 Class Selector (Sınıf Seçicisi)
Burada sınıf seçicisini sadece h1 için tanımladık. Sınıf seçicisinin ikinci türünde genel bir sınıf seçicisi tanımlamaktır. Bunu da bir örnekle görelim. <html> <head> <title>Css</title> <style type="text/css"> <!- .mavi {color:blue} .kirmizi {color:red} --> </style> </head> <body> <h3 class=mavi>Mavi sınıf seçicisi ile </h1><br> <h4 class=kirmizi>Kırmızı sınıf seçicisi ile </h1> </body> </html>

71 id selector (id seçicisi)
Id Selector’lerini 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ırlar. Bu etiketler span’dan tutunda paragraf(p)’a kadar olabilir. Bir örnekle açıklayalım. <html><head> <title>Css</title> <style type="text/css"> <!-- Eski tür tarayıcılardan kodumuzu saklayalım --> #mavi { background:blue; color:white; } #yesil background:green; --> </style> </head> <body> <span id=mavi>Bu yazının arkafon rengi mavi font rengi beyaz</span><br><br> <span id=yesil>Bu yazının arkafon rengi yeşil font rengi beyaz</span> </body></html>

72 CSS GENEL KULLANIM ŞEKİLLERİ
A Etiketinin CSS İle Kullanımı Bildiğiniz üzere A etiketi Html’e çok büyük bir özellik katan link etiketidir. • İlk pozisyon linke herhangi bir tıklama olmadığındadır. Bu değer linkin sayfada görülecek ilk halidir. • Visited : Bu pozisyon link tıklandığından sonra etiketin aldığı değerdir. • Active : Bu pozisyon linkin aktif olduğu durumdur. Yani imleç linkin tıklandığı andaki durumdur. • Hover : Bu pozisyon Linkin üzerine gelindiği durumdur. Yani linkin üzerine gelindiğinde nasıl bir biçimde olması isteniyorsa stil o şekilde verilir.

73 A Etiketinin CSS İle Kullanımı
Örnek: <html> <head> <title>Css</title> <style type="text/css"> <!- A.normal { background-color:white; color:blue; } A.ziyaret:visited color:maroon; font-weight:normal; A.aktif:active color:red; A.degisken:hover { background-color:blue; color:white; font-weight:bold; } --> </style> </head> <body> <a href="#" class="normal">Linkin normal durumu</a><br> <a href="#" class="ziyaret">Linki tıklayın ve değiştiğini görün</a><br> <a href="#" class="aktif">Linkin aktif durumu</a><br> <a href="#" class="degisken">Linkin üzerine geldiğinde stil değişecek</a><br> </body> </html>

74 Bağlantılı CSS Dosyalarının Hazırlanması
Hatırlayacağınız üzere bu dosyanın uzantısı css olmalı. Bu css dosyasını Html dosyamızın içerisinde çağıracağız. Aşağıdaki kodları stil.css adıyla kaydedelim. A {font-style : normal; color : navy; font-family : Times New Roman ! important; text-decoration : none; <!-- bu satır linkin altında satır olmamasını sağlar -->} A:Visited {font-family : Times New Roman ! important; font-style : italic; color : olive; } A:Active { font-family : Times New Roman; color : red;} A:Hover {text-decoration : underline; font-weight : bold; font-style : normal; color : maroon;} BODY { background: white url("fon.gif"); background-repeat: repeat-y; background-position: left; } p#sol {position : relative; visibility : visible; left : 30pt; width : 450pt; font-family:"Verdana,Arial,Helvetica" ! important; font:15pt;}

75 Bağlantılı CSS Dosyalarının Hazırlanması
Aşağıdaki kodları da css.html adıyla kaydedelim. (Dikkat! mutlaka html uzantılı kaydedilmeli) <html> <head> <title>Css</title> <style type="text/css"> <!— .onemli {font-weight:bold;} h4 {color:blue; position : relative; visibility : visible; left : 25pt; font-size:large; .solic { color:brown; font-family:"Verdana,Arial,Helvetica"; left : 20pt; font-weight:bold; } li { list-style-type : circle; list-style-position : inside; list-style : decimal;} ; --> </style> <link rel=stylesheet href="stil.css" type="text/css"> </head> <body> <table width="500" align="center"> <tr><td> <!-- Global --> <h4>Bilgisayar;<a name="bsl">  </a></h4> <!-- Eğer koordinatları tam olarak ayarlamak istiyorsanız (MSIE ve NN icin) Global Stil Şablonu Kullanmalısınız. --> <!-- Bağlantılı --> <p id="sol"> Aldığı komutlar uyarınca, veri işleyerek problem çözen otomatik elektronik aygıtların ortak adı. Bu tür aygıtlar, çalışma ilkeleri,donanım tasarımları ve uygulama alanları bakımından örneksel, sayısal ve karma bilgisayarlar olarak <font class="onemli">üçe</font> ayrılır.</p>

76 Bağlantılı CSS Dosyalarının Hazırlanması-1
<ul> <li><a href="css.html#orneksel">Örneksel (analog) bilgisayarlar</a> <li><a href="css.html#sayisal">Sayısal bilgisayarlar</a> <li><a href="css.html#karma">Karma bilgisayarlar</a> </ul> </p> <p class="solic"> Örneksel (analog) bilgisayarlar<a name="örneksel">  </a></p> <p id="sol">Açısal konum ya da gerilim gibi değişken nicelikleri temsil eden veriler üzerinde işlem yapar ve çözülmesi istenen matematiksel problemin fiziksel bir örneğini oluştururlar. Sıradan diferensiyel denklemleri çözebilen örneksel bilgisayarlar, sistem mühendisliğinde, özellikle bazı süre ve donatımların gerçek zamanlı benzetim modellerinin oluşturulmasına çok elverişlidirler. Bu bilgisayarların bir başka yaygın kullanım alanı da elektrik dağıtım sistemi gibi şebekelerin analizidir.<br> <a href="css.html#bsl">Başa Dön</a> </p> <p class="solic">Sayısal bilgisayarlar, <a name="sayisal">  </a></p> <p id="sol">Çeşitli üretim süreçlerine, takım tezgahlarına , karmaşık laboratuvar ve hastane aygıtlarına kumanda etmekte kullanılırlar. Aynı özellikten, uçakların ve uzay araçlarının karmaşık iletişim sistemlerinin otomatizasyonunda da yararlanılır. Sayısal bilgisayarlar ayrıca, eğitimde yardımcı olarak (örn. temel dil ve matematik becerilerinin kazandırılmasında) , bilimsel araştırmalarda ise verilerin analizi ve matematiksel modellerin geliştirilmesi amacıyla kullanılır. <br> <a href="css.html#bsl">Başa Dön</a> </p> <p class="solic">Karma bilgisayarlar, <a name="karma">  </a></p> <p id="sol">Örneksel ve sayısal bilgisayarların özelliklerine ve yararlarını birleştirirler; örneksel bilgisayarlara oranla daha fazla kesinlik, sayısal bilgisayarlara oranla daha fazla deneteleme sağlarlar. <br><a href="css.html#bsl">Başa Dön</a> </p> </td> </tr> </table> </body> </html>

77 TEŞEKKÜRLER…