İNTERNET KULLANIMI WEB SİTESİ YAPIMI E

Transcript İNTERNET KULLANIMI WEB SİTESİ YAPIMI E

EĞİTMENLER
Öğr. Gör. Mustafa YAVAŞ
Öğr. Gör. Murat HACIMURTAZAOĞLU
Uzm. Murat YAZICI
EĞİTMENLER
 Öğr. Gör. Murat HACIMURTAZAOĞLU
e-posta : [email protected]
web : www.murtazaoglu.com
 Öğr. Gör. Mustafa YAVAŞ
e-posta : [email protected]
web : www.mustafayavas.com
 Uzm. Murat YAZICI
e-posta : [email protected]
web : www.muratyazici.com
2
Kursta Neler Öğreneceğiz?
HTML
Photoshop
CSS
PHP + MySql + Apache
Dreamweaver
Wordpress
3
TEMEL
İNTERNET
KAVRAMLARI
4
İ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.
5
İ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.
6
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.
7
Network (Ağ Bağlantıları)
NETWORK (Ağ)
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, E-Mail 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.
8
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: 192.168.2.15
 İnternet Alanı (Domain)
İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır
(162.178.111.24 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 ( www.rize.edu.tr 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.
9
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.
10
İ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 (e-mail) alışverişi için SMTP ( Simple Mail Transfer Protocol )
ve POP ( Post Office Protocol ) protokolleri kullanılır. SMTP, e-mail
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.
11
İ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.
12
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:www.rize.edu.tr.com Rize MYO]
 AND ve OR ile arama yapılabilir.
13
İnternet Araçları
 Yeni E-Mail 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.
14
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.
15
Şema olarak İnternet
16
Dreamweaver Editörü ile HTML,
CSS, JavaScript kullanarak Web
Sayfası Oluşturma
17
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.
18
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ış)
19
HTML’de Yapısal Etiketler
Yapısal etiketler web sayfasında farklı bölümler tanımlamak
için kullanılır. Bunlar;
20
Ö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.
21
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.
22
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="http://www.rize.edu.tr">Tıklayınız</A>
<BR>
Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin
<A href="www.ktu.edu.tr">Tıklayınız</A>
</BODY>
</HTML>
Farklı kaydet ile deneme.html olarak kayıt edilir.
23
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.
24
Belge Biçim Etiketleri
25
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>
26
META Etiketlerinin HEAD İçinde Kullanımı
<META http-EQUIV=”Content-Type”
CONTENT=text/html; CHARSET=iso-8859-9”>
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.
-->
27
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>

<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>
28
<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>
29
</BODY>
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
<UL>
<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>
</H3>
</BODY>
30
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=“http://www.mustafayavas.com">Web 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 href=“mailto:[email protected]">Mail Gönder >></A><BR>
</H3>
</BODY>
</HTML>
31
<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>
32
<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.
33
<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">

<H1>Resmin Align Özelliği</H1>
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
</BODY>
</HTML>
34
<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">

<H1>Resmin Align Özelliği</H1>
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
<br clear="all"> 
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
</BODY>
35
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="180">
<IMG src="dikkat.gif" width="200" height="90">
<IMG src="dikkat.gif" width="200" height="45">
</BODY>
</HTML>
36
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=“http://www.mustafayavas.com"><IMG src="b1.gif" align="middle"
border="0"></A>
Resim 1 Örneği <br clear="left"><BR>
<A href=" http://www.rize.edu.tr"><IMG src="b2.gif" align="middle"
border="0"></A>
Resmin 2 Align Özelliği <br clear="left"><BR>
<A href=“resim3.html"><IMG src="b3.gif" align="middle"
border="0"></A>
Resim 3 - BR etiketinin clear özelliği <br
clear="left"><BR>
<A href=“sayfa.html"><IMG src="b4.gif" align="middle"
border="0"></A>
Sayfa 4 -- Width ve Height Özelliği <br clear="left"><BR>
<A href=“index.html"><IMG src="b5.gif" align="middle"
border="0"></A>
Anasayfa -- Sayfanın Kendisi
</BODY>
</HTML>
37
Ö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 (©)
38
Tablo Oluşturma
Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler;
39
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>
<TR>
<TD>17“ LG (Goldstar) Monitör</TD>
<TD>Peşin Fiyatına 5 taksit</TD>
<TD>$300</TD>
</TR>
<TR>
<TD>HP Dijital Fotoğraf Makineleri</TD>
<TD>Dijital sözlük hediyeli</TD>
<TD>$200</TD>
</TR>
<TR>
<TD>Sony Hi8 Kamera</TD>
<TD>Kampanyada son 10 gün</TD>
<TD>$700</TD>
</TR>
</TABLE>
</BODY>
40
<TABLE> Etiketi
<TABLE> etiketi kullanmak zorunda olmadığımız birkaç özelliğe sahiptir.
41
<TR> Etiketi
<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
42
Ö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>
<TR>
<TH width="15%">Toptan</TH>
<TH width="15%">Perakende</TH>
</TR>
<TR>
<TD>HP Dijital Fotoğraf Makineleri</TD>
<TD align="center"><I>$500</I></TD>
<TD align="center">$600</TD>
</TR>
<TR>
<TD>Goldstar (LG) 17" Monitör</TD>
<TD align="center"><I>$250</I></TD>
<TD><CENTER>$300</CENTER></TD>
</TR>
</TABLE>
</BODY>
43
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.
44
<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.
45
<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;
46
FRAME Örnek!
Örnek: 021_frame1.htm
<HTML>
<HEAD>
<TITLE>Frameset Örneği</TITLE>
</HEAD>

<FRAMESET cols="33.33%,33.33%,*">

<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_page1.htm
<HTML>
<HEAD>
<TITLE>Sol Çerçeve</TITLE>
</HEAD>
<BODY bgcolor="#FFFF00">
<DIV align="center">
<H1>Sarı Çerçeve</H1>
</DIV>
</BODY>
</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>
47
<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>
48
HTML Formları
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.
49
Kontrol Tipleri
HTML nin form kontrolleri <INPUT>, <TEXTAREA> ve <SELECT> etiketleri
ile oluşturulur.
50
Kontrol Tipleri-1
51
<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ı:
52
<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>
53
<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:
54
Örnek!
<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>
<TR>
<TD><B>Soyadı : </B></TD>
<TD><INPUT type="text" name="txtSoyadi" size="30"></TD>
</TR>
<TR>
<TD><B>E-Mail : </B></TD>
<TD><INPUT type="text" name="txtEmail" size="30"></TD>
</TR>
<TR>
<TD><B>Adres : </B></TD>
<TD><INPUT type="text" name="txtAdres" size="43"></TD>
</TR>
<TR>
<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>
<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>
<TR>
<TD><B>Yaş : </B></TD>
<TD><SELECT name="cboxYas" size="1">
<OPTION value="0"> 0 - 11</OPTION>
<OPTION value="1">12 - 19</OPTION>
<OPTION value="2">20 - 29</OPTION>
<OPTION value="3">30 - 39</OPTION>
<OPTION value="4">40 + </OPTION>
</SELECT></TD>
</TR>
<TR>
<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>
</TR>
<TR>
<TD><INPUT type="submit" name="kaydet"
value="Kaydet"></TD>
<TD><INPUT type="reset" name="temizle"
value="Temizle"></TD>
</TR>
</TABLE>
</FORM></H3>
</BODY>
</HTML>
55
CSS (Cascading Style Sheets)
STİL ŞABLONLARININ HTML İLE
KULLANIMI
56
CSS (STİL ŞABLON)
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.
57
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>
58
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">

</style>
</head>
<body>
<h2>Web Teknikleri</h2>
</body>
</html>
59
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>
60
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), xxsmall (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>
61
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>
62
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.
63
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>
<body>
<p>Web Teknikleri</p>
</body>
</html>
64
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.
65
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>
66
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ı.
67
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>
68
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>
69
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>
70
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">

#mavi
{
background:blue;
color:white;
}
#yesil
{
background:green;
color:white;
}
-->
</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>
71
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.
72
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
{
background-color:white;
color:maroon;
font-weight:normal;
}
A.aktif:active
{
background-color:white;
color:red;
font-weight:normal;
}
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>
73
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; }
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-family : Times New Roman ! important;
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;}
74
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";
position : relative;
visibility : visible;
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> 
<h4>Bilgisayar;<a name="bsl">  </a></h4>


<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>
<p id="sol">
75
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>
76
TEŞEKKÜRLER…
77

İNTERNET KULLANIMI WEB SİTESİ YAPIMI E

Transcript İNTERNET KULLANIMI WEB SİTESİ YAPIMI E

Directory