Kitap Bölümlerinin Açıklaması

Transkript

Kitap Bölümlerinin Açıklaması
Bölüm 1. "Web tasarım ının tem el kavram ları"
Bölüm 6."Resimlerimizi ekleyelim !"adlı bölümde,
adlı bölüm web sayfası/sitesi tasarım ve üretimine
en önemli görsel içeriktürlerinden resim dosyalarının
başlamadan önce, internetin ve vveb'in nasıl çalıştığı
web sayfalarımıza eklenmesi için gerekli olan
önemli kavramlarla beraber anlatılmaktadır.
işaretler ve özellikleri anlatılmaktadır.
Bölüm 2. "ilk web sayfamız!" adlı bölümde, bir
Bölüm 7. "Tablolar ne işe yarar?" adlı bölümde,
web sayfası tasarımı yapılırken, bir web sayfasında
web sayfalarının en sık kullanılan görsel tasarım
olması gereken html işaretleri gösterilmektedir.
araçlarından tablo anlatılmaktadır. Tablonun ne
Ayrıca, birkaç adet çok basit yazı düzenleme işareti
olduğu, satır ve sütun yapısı, kullanılan işaretler
de anlatılmaktadır.
örneklerle gösterilmektedir.
Bölüm 3. "Yazılarımızı süsleyelim 1"adlı bölümde,
Bölüm 8. "Sayfalarım ıza ses ve video ekleyelim "
web sayfalarında sıklıkla kullanılan yazı süsleme
adlı bölümde, web sitelerinin daha ilgi çekici hale
işaretleri ve özellikleri anlatılmaktadır. Ayrıca, html
getirilmesinde önemli rol oynayan çokluortam
işaretlerinin yanında Dhtml teknolojisinden de ilk
içerikleri ses ve video dosyalarının türleri ve
defa bu bölümde bahsedilmektedir.
özellikleri anlatılmaktadır. Ayrıca, bu dosyaların
web sayfalarına eklenmesi için kullanılan işaret ve
Bölüm 4-"Yazılarımızı süsleyelim 2"adlı bölümde,
özellikler örneklerle gösterilmektedir.
bir web sayfasında sıklıkla kullanılan başlık işaretleri,
kayan yazı ve listeleri ve bunların biçimlendirilmesi
Bölüm 9. "Sayfalarım ıza üst etiket (meta tag)
anlatılmaktadır.
ekleyelim " adlı bölümde, web sitelerinin arama
motorları tarafından daha kolay bulunması ve
Bölüm 5. "Sayfalarım ız arasında köprü kuralım"
adlı bölümde, web sayfalarının en önemli özelliği
olan köprüler (hyperlink)) anlatılmaktadır. Sitenin
kendi içindeki sayfalar arasında veya başka bir
sitedeki bir sayfaya köprü kurma işaretlerileözellikleri
gösterilirken, e-posta adreslerine mesaj göndermek
için kullanılan köprü türü de gösterilmektedir.
sınıflandırılması için önemli olan üst etiketlerin
ne olduğu ve nasıl kullanılacakları örneklerle
anlatılmaktadır.
ANNE, BABA VE ÖĞRETMENLERİMİZE: "ÇOCUKLARIMIZ BU KİTABI NEDEN
KULLANMALI?"......................
i.................... — _ _ ................................................4
KİTAP BÖLÜMLERİNİN AÇIKLAMASI................................................................................5
İÇİNDEKİLER
....
;............
—
........... ...................
6
BÖLÜM 1.
WEB TASARIMIN TEMEL KAVRAMLARI........................................................ 9
BÖLÜM 2.
İLKVVEB SAYFAMIZ
BÖLÜM 3.
YAZILARIMIZI SÜSLEYELİM - 1 ............................................................... 29
BÖLÜM 4.
YAZILARIMIZI SÜSLEYELİM - 2.................................................................39
BÖLÜM 5.
SAYFALARIMIZ ARASINDA KÖPRÜ KURALIM............................................. 57
BÖLÜM 6.
RESİMLERİMİZİ EKLEYELİM!..................................................................... 75
BÖLÜM 7.
TABLOLAR NE İŞE YARAR?.............................................................
BÖLÜM 8.
SAYFALARIMIZA SES VE VİDEO EKLEYELİM
BÖLÜM 9.
SAYFALARIMIZA ÜST ETİKET (META TAG) EKLEYELİM............................... 123
19
...................
91
107
W e b Tasarımının Tem el
Kavramları
Bugün bazı buzdolaplarının dahi bağlı olduğu
internet, internetle beraber anılan www, web
sayfası, web sitesi, html gibi kavramları duymayan
çok fazla insan kalmamıştır, sanırım. Kafa karıştırıcı
bu temel kavramları şöyle bir gözden geçirmekte
her zaman fayda vardır, çünkü Web Tasarımı
eğitiminde öğreneceğimiz birçok şey bu temel
kavramların üzerine inşa edilecek. Bundan dolayı,
senden ricam sakın "Ben bunları zaten biliyorum,
hızlı geçeyim"diye düşünme!
Peki, nasıl oluyor da dünyanın bir ucundaki
Merak etme! Kısa bir okumadan sonra, hızlı bir
bir bilgisayar dünyanın bir ucundaki başka bir
şekilde kod yazmaya ve kendi web sitelerimizi
bilgisayarı buluyor ve ondan bilgi alıyor veya ona
geliştirip tüm dünyaya yayınlamaya başlayacağız.
bilgi gönderiyor?
İnternet nedir?
Telefonunla, dünyanın herhangi bir yerindeki bir
Kısaca, dünya üzerindeki milyonlarca bilgisayarın
bağlı bulunduğu bir"ağ"olarak adlandırılabilecek
olan internet sayesinde, farklı ülkeler ve hatta
farklı kıtalardaki bilgisayarlar karşılıklı olarak
haberleşebiliyor ve bilgi alışverişi yapabiliyor.
ilk olarak 1969 yılında ARPANet adıyla Amerika
Birleşik Devletleri'nde birkaç üniversitedeki
bilgisayarların karşılıklı olarak"konuşmasını"
sağlamak amacıyla başlatılan çalışmalar
sonucunda, bugün bilgisayardan, akıllı telefonlara,
televizyondan buzdolabına kadar birçok cihaz
bu uluslararası bilgisayar ağı üzerinden "veri
paylaşabiliyor".
kişiyi, sadece o kişinin telefon numarasını çevirerek
arayabiliyorsun, değil mi? Dünyada eşi benzeri
olmayan telefon numaranla, yine dünyada eşi
benzeri olmayan bir telefon numarasını aradığında,
uluslararası telefon şebekesi, aradığın numara her
neredeyse buluyor ve iki telefon cihazının karşılıklı
olarak ses aktarımı yapmasına izin veriyor.
Benzer şekilde, internete bağlı her bilgisayarın telefon numarası gibi özel bir numarası vardır ve her
bilgisayara özel verilen o numaranın eşi benzeri yoktur. TCP/IP kısaltmasıyla anılan bu numara (İngilizce
açılımı "Transmission Control Protocol/ Internet Protocol") bir anlamda, uluslararası bilgisayar ağında yer
alan milyonlarca bilgisayarın diğerleri ile karışmamasını, her birinin benzersiz ve tek olmasını sağlamaktadır.
Bilgisayarının TCP/IP numarasını biliyor musun? Bilmiyorsan öğrenebiliriz.
Kendi bilgisayarının TCP/IP numarasını öğrenmek istiyorsan http://www.ipbul.org adresine bağlan.
i ■<!.,i,
d
(
•'
top./ -. v, ipbm-org
»
KftytıtlerÖMaj*te»m Programla-.: £ İP 8ul 0*g -Tikle İp Adresin... K
Dosya
Düzen
Gcninüm
Sık Kuftanıbnlar
Aralar
■ . .m -.» ■
ismüeni
■■:
p
» s ö x
|•Ü İ .
Yardım
09.12.201219:43:1$
jf
W<& Sinesi O P »taHm taisuk ism ütinaurt) ,
& A d n & m «B r? : t m m t c Pf®teco( i*» h&tonmt «hm * İF «araarasu bsr ««twöfiCA§}* bağlanan ftar b^sayannC yulı modem) «dreSF^öroJliı numaraser») M ® «der. İnternete b a p her
modemin de bir ip adresi vardır. Su ip adres tetal ip adresinden fca^msaadir. Y ari avsttete yasa $ yerinizdeki M^sayaıısnıan ip adresi iç ip adresınizdir. Aseak internette gorûma ip adresi
intenete bağlandığına moderne ait İp adresidir. Yani iş yeıte&de «a tane bilgisayar vatsa bunların her cninin iç{tafca! a$> İp si farklıdır ancak internete o-tsk W modemle bapaRddeğından
internette gdriinen ip adresi tetdör. S e n e d e bu aç ve daş fp adteSieri bidMriyte ten |W abiBr.{Bii süede gözüken adres ise internete çıtaf ip a d re sin izi.) ip adresleri nokteteria ayılm ış 4
tene s-av:dBn oîuşmskls beraber her bir sayı 0-255 «rast bir değere sahip û laşfe Örnek; 114.23.16.252 gibi. Tabifci bu bahsedilen IPV4 dûr. Ayrıca yem kuiiamrna başlanan ÎPVŞ
adreslerleri de mevcuttur. Hem îPV4 olsun hem IPV6, mtem•?“ ■?*ym ip adresine 8e yada daha fada Mpnsn sahip obuası da mümkün değâdir. Lokal ip adfestertai kendimiz feeSrfeyebametöe
beraber internet ip adresten böe Internet ftoimett sunan pravıder ter tarafından verilmekte olup bizim bunu kendi isteğinize göre değirm em iz imkansızdır,, £ğ*r internet sağlayıcım* size
statik U r ip adresi tahsis etmedi w modemin her kapanıp açdmannds fart* bir c adresi ettm M k olarak t in tahsis « S ir. Ve bu sizin « art Internet ağandaki sac- ozgu benursis kimlik
n-umaramadır.
' f
i ______________________________________ ___________________ . >
..
Kırmızı ile yazan değer senin bilgisayarının kullanmış olduğu TCP/IP numarasıdır.
Bir web sitesine bağlanmak için, kullandığın internet
W WW nedir?
Son yılların dünyada en bilinen kısaltması olan
I tarayıcının adres çubuğuna o sitenin web adresini
yazıp Enter tuşuna basarsın. Web site adresleri
W W W harflerinin World (Dünya) Wide (Çapında)
genelde şöyle yazılır:
Web (Ağ) anlamına geldiğini biliyor muydun?
B İB İ
İnternet üzerinde bilgi paylaşımının en fazla
C9M[j^
fc
http;//wıw,mdJ.gov.tr/
yapıldığı ortam olan WWW (dünya çapında
I
I
4 »* ™T.C. MİLLİ EĞİTİM BAKA... x Ç ...,
ağ), aslında internet Explorer, Mozilla Firefox
veya Google Chrome gibi internet tarayıcılarla
erişilebilen web sitelerinden meydana gelmektedir.
Bilgisayarının internete bağlanmasını sağlayan
TCP/IP protokolüne bağlı olarak çalışan HTTP,
1http://www.odtuyayinoilik.com/
D n
I & O D T Ü Yayıncılik
İlk başta, http ifadesini, ardından www kısaltmasını
WWW'nin çalışmasını sağlayan protokoldür. HTTP
ve sonra bağlanmak istediğimiz web sitesinin adını
(İngilizce açılımı HyperText Transfer Protocol),
yazarız.
metinler, resimler, animasyonlar ve videolar
Burada aklına şöyle bir soru geldiğini düşünüyorum:
içerebilen web sayfalarının, bilgisayarlar arasında
"Hani, diğer bilgisayara o bilgisayarın TCP/IP
sorunsuzca aktarılmasını sağlayan uluslararası bir
numarası ile bağlanıyorduk? Neden internet
standart ve anlaşma olarak açıklanabilir.
tarayıcıda TCP/IP numarasını yazmıyoruz da, web
Bazen internet ile www kavramlarının birbirleri ile
adresi yazıyoruz?" Alan adı olarak da adlandırdığımız
aynı anlamda kullanıldığına şahit oluruz. Aslında çok
benzer şeyler olmakla beraber, internet milyonlarca
bilgisayarların birbirlerine bağlanmalarını ifade
ederken, W W W birbirlerine bağlı çalışan bu
bilgisayarlar üzerinden aktarılabilen metin, resim
ve video gibi verileri kapsayan birçok internet
hizmetlerinden birinin adıdır.
web adresleri, aslında bağlanmak istediğimiz
web sitelerinin kısa yoludur. Nasıl mı? Cep
telefonlarındaki Rehber ne işe yarar? Genelde
arayacağımız numarayı hatırlamakla uğraşmak
yerine telefonumuzdaki rehbere girip, arayacağımız
kişinin adını bulup arama tuşuna basarız. Benzer
şekilde, 192.168.1.28 veya 212.174.188.120 gibi
TCP/IP adreslerini yazmak yerine odtuyayincilik.
com veya meb.gov.tr gibi alan adlarını kullanırız.
İstersen, internet tarayıcının adres çubuğuna bir
web sitesinin TCP/IP adresini yazarak da o siteyi
görüntüleyebilirsin! Bir sitenin TCP/IP numarasını
nasıl mı öğreneceksin? Mesela Milli Eğitim Bakanlığı
Gelen ekranda ping meb.gov.tr yazarak klavyende
web sitesi olan http://www.meb.gov.tr adresinin
Enter tuşuna bas.
TCP/IP numarasını öğrenelim.
■ ■ ■ M i
T e lif Hakkı <c> 2009 Microsoft Corporation . Tüm hak]
Başlat düğmesini tıkladığında açılan penceredeki
k lıd
----1
M
C:\U3 ers\ 3 e lcuk>ping n e b .g o v.tr
metin kutusuna cmd yaz.
Aşağıdaki ekranla karşılaşacaksın.
Programlar (1)
MI cmd
8elgeler (499)
[ j ant
Lj antenv
Q ccmplcte-ant-cmd.pl
Kırmızı çerçeve içinde gördüğün değerler Milli
Eğitim Bakanlığı web sitesini yayınlayan sunucu
bilgisayarın TCP/IP adresini göstermektedir.
İstersen, internet tarayıcının adres çubuğuna elde
JSI Diğer sonuçlar
ettiğin TCP/IP değerini yaz ve Enter tuşuna bas.
Web sitesinin açıldığını göreceksin.
Klavyende Enter tuşuna bastığında aşağıdaki siyah
ekranla karşılaşacaksın.
BB C.\WındowsVsyst*m32\cmdexe‘î^ ^ j
Yalnız bazı web siteleri,TCP/IP değeri ile kendisine
M
lic ro s o ft Windowa [Surum fi.t 76011
T e li f Hakkı <c> 2009 Mir.rosof fc Corporation. Ti.ii h a k la rı sa klıd ır
ulaşmaya çalışan internet tarayıcılarının bu
’ :sUsers\se lı:uk>-.
isteklerini engeller ve sitenin görüntülenmesine izin
vermez!
Kısaca, www ile başlayan alan adlarını, gitmek
-l|
istediğimiz sitelerin adreslerini daha rahat
hatırlamak için kullanırız. Esas önemli olan internete
Çocuklar İçin WebTasarımı
<| 3
bağlı çalışan her bilgisayara verilen TCP/IP değeridir, istediğin bir web sitesinin kendi bilgisayarındaki
internet tarayıcıda görüntülenmesi için her iki bilgisayarın da internete bağlı ve birerTCP/IP değerine sahip
olması gerekmektedir.
WWW nasıl çalışır?
Bilgisayarının başına oturdun, internet tarayıcını açtın ve adres çubuğuna
www.odtuyayincilik.com adresini yazıp Enter tuşuna bastın. O andan itibaren, nasıl oluyor da,
odtuyayincilik web sitesinin sayfaları senin bilgisayarında görüntülen meye başlıyor?
"Sunucu x istemci" yapısı içerisinde çalışan web, sunucu olarak adlandırılan bir bilgisayar üzerinde
yayınlanan web sitelerini, isteyen kullanıcıların bilgisayarlarındaki internet tarayıcılarında görüntülenmesini
sağlıyor.
"Sunucu x istemci" yapısını mucitlergaraji.com web sitesine erişimin üzerinden açıklamaya çalışalım.
istemci
istemci
2
internet
3
odtuyayincilik.com
Web Sunucusu
istemci
1. Internet tarayıcının adres çubuğuna odtuyayincilik.com adresini yazıp Enter tuşuna bastığında, bu
siteden bir istekte bulunmuş olursun (kısacası bu durumda sen istemcisin).
2. Daha önce söylediğimiz gibi odtuyayincilik.com alan adı, telefon rehberlerindeki isimler gibi sadece
bir etikettir, internetteki bazı özel bilgisayarlar
I Dur, dur hemen kızma! Her ne kadar, HTML'nin
odtuyayincilik.com alan adının yayınlandığı
L harfi (Language), Dil anlamına gelse de M's<|
sunucu bilgisayarın TCP/IP adresini belirler ve
(Markup), İşaret anlamına gelmektedir. Yani,
bu bilgisayara doğru hızla ilerler,
aslında HTML bir bilgisayar programlama dili
3. İstek ulaştığında, sunucu bilgisayar,
odtuyayincilik.com sitesini bir istemcinin
görüntülemek istediğini anlar,
4. odtuyayincilikcom sitesinin web sunucusu, bu
değil, bir işaret dilidir. Şimdi, aradaki fark ne diye
soracaksın. Cevaplamaya çalışalım:
En bilinen işaret dili, işitme engellilerin kullandığı
dildir. Aşağıdaki bazı örheklerine bakalım:
isteğe karşılık sitenin ilkvveb sayfasını istemci
bilgisayara geri gönderir,
5. İnternetteki belki onlarca bilgisayar arasında
birinden diğerine aktarılarak istenilen web
sayfası, internet üzerinde istemci bilgisayara
doğru bir yolculuğa çıkar,
6. En sonunda, istemci bilgisayarın internet
tarayıcısında odtuyayincilik.com sitesinin ilk
sayfası görüntülenir.
Bir web sayfası ne kadar uzun bir yolculuktan sonra
görüntülenebildi, değil mi? ©
HTML nedir?
HyperText Markup Language'in kısaltması
olan HTML, metin, resim video, animasyon
gibi içeriklerin internet Explorer, Mozilla Firefox
veya Chrome gibi internet tarayıcılar tarafından
anlamıyla bir konuşma dili olmamakla beraber, belli
görüntülenebilmesini sağlayan bir çeşit
el ve kol hareketleri ile çeşitli kavramların karşıdaki
programlama dilidir. Ama aslında programlama dili
kişiye anlatabilmesine izin verir.
değildir!
Benzer şekilde, HTML, Small Basic, Visual
Basic, C#, C++ gibi tam bir programlama dili
olmamakla beraber, sunucu bilgisayardan istemci
bilgisayara gönderilen bir web sayfasının istemci
Default,aspx vveb
sayfası
ilk açtığında
karşılaştığın sayfa
Neden.html vveb
sayfası
Sayfanın üst
bölümünde
gördüğün "Neden" isimli köprüye
tıkladığında açılan
sayfa
bilgisayardaki vveb tarayıcı tarafından doğru şekilde
görüntülenmesi için gerekli işaretlen içerir. HTML
işaretleri "<" (küçük) ve ">" (büyük) sembolleri
arasına yazılır. Web sayfasındaki HTML işaretlerini
alan vveb tarayıcın, her bir işaretin ne anlama
geldiğini kendince "yorumlar" ve ne anlıyorsa onu
sana gösterir.
Örneğin, <img> işareti, bir resim gösterileceğini
ifade ederken, <table> işareti bir tablo çizilmeye
başlanacağını gösterir. <a href> işareti bir köprü
Projemvar.aspx vveb Sayfanın üst
sayfası
bölümünde
gördüğün "Projem
Var" isimli köprüye
sayfa
Hakkimizda.html
vveb sayfası
Sayfanın en altında
bulunan "Hakkımızda"
isimli köprüye
sayfa.
kurulacağını gösterirken, <b> işareti bir metnin
Web sayfalan, "html""htm","aspx""php"
kalın yazılacağı anlamına gelir.
gibi uzantılara sahip olabilirler. Zaman zaman
bahsedeceğimiz teknik sebeplerden kaynaklanan
Bu kitaptaki tüm çalışmalarımızda, onlarca
bu uzantı çeşitliliği içerisinde, biz tüm derslerimizde
işaretin en önemlilerini beraberce öğreneceğiz
"htm l"uzantısını kullanacağız.
ve geliştireceğimiz vveb sayfalarının neresinde bir
Bir vveb sayfası yapmak için nelere
ihtiyacımız var?
resim, neresinde bir animasyon veya neresinde
bir paragraf yazı olacağına bu html işaretlerini
Not defteri: Bugün vveb sayfaları, vveb siteleri
kullanarak sitemizi görüntüleyen "istemcilerin
yapmak için harika bilgisayar programları var. Birkaç
vveb tarayıcılarına bildireceğiz.
tıklamayla birçok iş yapabildiğimiz bu programlar
Web sayfası mı vveb sitesi mi?
yerine sen bu eğitimlerde vveb sayfaları geliştirmek
için bütün o programların atası sayılabilecek olan
Bir vveb sitesi, bir veya daha fazla sayıda vveb
"not defterini" kullanacaksın. Not defteri, metin
sayfasından meydana gelir. Mesela,
yazmak dışında hiçbir özelliği olmayan,
odtuyayincilik.com adresindeki vveb sitesi, onlarca
vveb sayfasından meydana gelmiştir.
W e b Tasarım ının Temel Kavramları
bilgisayarındaki en basit programlardan birisidir.
VVindovvs'da sol alt köşede bulunan Başlat
düğmesini tıkladığında açılan pencerede not
defteri yazdığında göreceğin Not Defteri
programının simgesi
I düzenleme programı olan Paint'i kullanacağız.
Paint programının simgesi (£ 0 şeklindedir.
şeklindedir.
Ekranın sol alt köşesinde bulunan Başlat
düğmesini tıkladığında açılan pencerede paint
yazdıktan sonra klavyenden Enter tuşuna basarak
t
1 Not Defteri
çalıştırabilirsin.
l|| Çalışma Not Defteri
.jy Kişisel Net Defteri
P ro o ra m la K l)^
■Jğ Projeler
Kişisel bilgiler
l§ ) cocukkenBasiamalîProjesi
Denetim Masası (1)
f iy Çocuklar tein teknoloji serbest etkinlikler taslak
^
tfe482BfâK»3
t|482İH9099
fiC İP
'fi CİP
f i cip
f i C1P.21.11.2011 .Sibel
Fotol>a_6494325_$ubscription_Monthlyj.
B
CUPART_OF_38â50_SM)PG
B
CUPART.OF.63147.SMJPG
B
CUPART.OF_10956_SMJPG
Ö j Encapsulation [Arşiv] * Ceviz Forum
|
Diğer sonuçlar
^
(jJ EncapsuUtıcn [Arşiv] •Ceviz Forum
f i CB\21J1.20U
P
Windows özelliklerini aç veya kapat
Belgeler (627)
B
CUPART_OF_2458?_SM)PG
B
CUPART.OF.24695.SMJPG
B
CUPART.OF.2460T7_SMiPG
B
CUPART_OF_24618_SMjPG
S
CUPART.OF_25092.SbW G
P Ciğer sonuçlar
Gelişmiş programlar kullanarak sadece bir iki
tuşa tıklayarak web sayfalarını hızlıca oluşturmak
yerine, vveb sayfalarımızı bu basit programla
geliştirmemizin sebebi HTML'nin temellerine
inmek istememizdir. "W eb Tasarımı" derslerinin
sonunda, bir vveb sayfasının/web sitesinin nasıl
çalıştığını, ekranda gördüklerinin arka tarafında
neler döndüğünü çok iyi anlamış olacaksın.
Paint: Web sayfalarımızda kullanacağımız
resimlerin üzerinde ufak tefek işlemler yapmak için
yine Windows'unda bulabileceğin en basit resim
Web tarayıcı
Geliştirdiğimiz vveb sayfalarının nasıl göründüğünü
test etmek için İnternet Explorer, Mozilla Firefox
veya Chrome gibi tanınmış tarayıcılardan istediğin
bir tanesini kullanabilirsin. Biz, ekran görüntülerinde
genellikle İnternet Explorer kullanacağız.
Daha detaylı bilgi almak için
I www.mucitlergaraji.com adresini ziyaret et.
Bu bölümde öğreneceklerimiz
v|?»>, m
i M y ia s im r. w ı
'^tbya metili d feiiek
iB Ş jj$ W
■■!■■■.
Ö a ş i t r n o f f r r t j i V i f i ' ı f e ■ ..iıft'h ö -
' fi
I f g j
IIK
W
t U
ı«-<. ■
i
Basit bir web sayfasında nefer olmalıdır?
Aşağıda Gazi Üniversitesine ait
www.gazi.edu.tr web sitesinin ilk sayfasına ait HTML işaretlerinin bir kısmını görüyorsun.
i c ^ . j p g " * İt » “KArtöphj^“ >»«îfht»*48* tiîdth-*Âi*><'io*cript><İJi| s « » v ü p T o * id / l/ 2B 12/ l / r 9/ 24593b4bİ>a:ld39e936a 6B 7a 885o02Ğ8265ad 2G M - İC « ı . j p g ” a l t « ”Kötöplıaı*f ” b * l * h t - ”4« ”
wjdtha"4«*> < /n ö ic-i 5t>Kötaphart«</a></Iİ><li><* h r e f- ”b ttp ://» *b 5l t e « . i « i . e d u .tr / ” t i t l e * ”w ebsite»‘ d a t a - t * r g e t * ”# ”x i f l f » r c - ”/ X x l. p n g " d a ta origif»al»“/u p lo a d /l/ 2812/ l / 19/ 2bB4f 51d 61e$dlb 947592ad 6f 7B57c5bd*fdB 443-ico n . j p g ’ a l t » ”WebSitem* h e ig h t - " 4« “ w idth»”48" x n o s c r i p t X İ « g
src»**
■“*------- H jj * “ •** '
■*—*■ - • » - • u J .c l * — *
Iw4ah*ı>*i|*
n rid th * "4 8 "> < /n o scrİp t> W e b S İt# » < /'» > < /lİ> < lİj
Iref»
icon.jpg" alt-’fiazi Hastanesi” h#ight
htight*“4g" width-"48 "x/ncscript>Gazi H a s t a n e s i< /a x /lix lix a hr«rf» "h ttp ://gu n et.ga z i.e d u .tr /fa c u lty c o n n e c tio n /” title -" F a c u lty Connection* d rta -ta rg « t» " * ”X in g
w « V l* l.p n g * data'origfna]«”/uploed/;i/2Bl2/3/2/c7c7b2c8f682S$2adcfc97818be494cSld65«96f-icon.jpg” a l t - ”Fecwlty Connection” h eigh t*”4g* w idt(:= "48'*xnoscrip txiırg
$rc»”/tıploed/i/2822/3/2/c7e7felc8Bb8iŞ52adcfc978:i8ba494cSld65e96f-icon. jpg” a l t - ’ Faculty Connection” beigf*t*"48” *idth»*48“x /n o s< r ip t> P a cu lty C o n n e e t i o n < / a x / l i x l i x s
hr*f»”h ttp î//gun et.gaii.edu.tr/dreaaspark/” titl«»"H icrosoft Oreanspark” data*target»”#"xim g src»”/lx l.p n g " data«riginal-”/upload/l/2fl2/i/24/a2$0d89S34Sldc8d449S4a«a73cd4llbd49dl#2Bicon.jpg” a 2 t-“* ic r o so ft Orcaaspark” h e ifh t- ”4 f ” width*"4g’ xr*o*crip txim g
sf<
««v>.*yu»ıA
-”/«pJood/i/»12/l/2«/a2S8da9534SXdcSd44P5*aPa73ed4llbd49dle»-İcon.jpgMa /ı/M i3 /ı/} a /a2sad895345idc8d44954aaa73cd4ll0d49dle7e-icon.jpc" a l t s ”H icrosoft Oreamspark’ h«lght«"48" w idth»"48"x/noscript>M icrosoft D rem *park</ax/ll><lt:
bref»”/s ite /g a z i -urtf.v*r*it«si/posts/vie«»/title/dergiler *215” t i t i # - "Dergiler” tfata-targot* • X i* g sre-YİJCİ.png dataorİ»inal-“/upload/l/2P12/l/19/47e5«a6102blacddce#5O»0)82-*7S?69Deb7d3f4-icon. jpg” a l t - ”0 « r g iltr h eigb t- 48 w idth- 48 x n o s c r ip t x ia g
*re»"/upload/l/3»X2/S/:i8/9?eS8aM«blacddcee»a#3824757S99eb7d3f4-icon,jpg" alt«"O ergil«r* b#igh t-’ *8” width*”48 x / n o s c r i p t > O e r g i l e r < / a x / l i x l i x » href» h ttp .
u n iuersitesi.gazi.edu.tr/p o5ts/vien/title/u zak tan-egitin-87S S” t i t l e » ”lftaktan E ğ itin " d a ta -ta r g et-’ e ”x i n g a re* * /İx l.p n g ” dataeriginal*Vupload/l/2812/l/19/13S87S#8d8e3blcb654c738b7adffae3bbbl91b9 ■i con. jpg" alt»"Uzakten eğitim ” height«”48” *ddtb*”48”><noscriptX a*g
Srt'VuplO»d/l/2ei2/l/19/139«7S88d8#3blcWS4<;7J8b7adffa#3bbbl91b9-icon.jpg* alt«"V*alct*n E ğ itin ” h*ight*"48“ *rİdth«"48”x/no*efipt>4teafctan CğitİJK/a > < / li > < l ix a
href-”h ttp }//gazi-u n iversitesi.gati-ed u .tr/p o«t*/vie«/title/*b -p n ogran lari-8S I8" t i t l # * ”5osyal Birim ler’ data-target="#”x i « g src«"/lxS.png" dataorifinal»"/upload/l/2812/l/19/29İdlf23f 32838f83î*932d?a347fb87f68b4ce?-icon. jp g ’ a l t - ’Sosyal Ş ir in le r ’ h e ig b t-“48“ w id th -‘48“x n o scr ip t> < in g
src- V uplo*d/l/2M 2/l/I9/291dlf 23f328J8f 83i*932d7*34?fW7f98t»4ce7 *i ton. j pg” e l t - ”5o»y«l Ş ir in le r ” h « ig h t'“4«" width«”40”x /n o * c r ip t >So*y*l • ir i* l c r < /a x / l l> < l i > < «
href*”httpı//wuw.gaii5en.gazi.echi.tr/” tltle-"G*3İ5EM* dat*- target*
X İı*f »rc»*/ljcl,png” d ata-origin *l*”/uplosad/i/2B12/i/lS/2f5C€B03S3®63e2f4eı9 fBS59S5c66S97S92fdff9icon.jpg” alt«"6ariSEM” heigbt*’4S" uidth»’48“><noscriptXing cre*”/upload/l/2912/l/19/2f5660£3& 38£3e2f4e9fB5S965c66597691fdff9-icon. jpg’ a l t - ’ SaziSEH" h e ig h t» ”48”
vidtb-”48*x/noscriptXîaziSEM</ax/li><Iİ><a h ref-’h ttp ;//g a z i-ü n iv e r site si -g a zi, e d u .tr /p o sts/v ie w /title /a b -p r o g r a n la r i-8818” t i t l e » ‘*Â8 P rogranları” d a ta 'ta r g e t» ”# ”x i n g
sr<*”/ix3,.png* data-orig£naî#*/upload/l/2812/l/19/el49Bd82e6bdlela$882Se87blSB68e9264a8348-İCOn.j|^> * l t - “A8 Programları” lıeigh t*”4 8 ” width*”48"x«*ö*ce£|»txi*g
s<‘c*’ /upIoad/l/2012/l/19/eİ498d62e6bdlala5S825e8?bî5888e9264a8348-i«on. jpg” alt*"A8 Programları* height*"48” widtho"48’ X /noscript>A fi P r o g r a * la r ı< /a > < /li> < lix a
href#”ans://194.27.17.6:198* t i t l e - ’ftadyo ûazi" date«target*’#’ x i n g src**/îxl.png" data-original-"/upl{»d/l/2B 12/l/19/dead593d27cc842d2aa63583f21fe4f36c5b90d3-iccjn. j pg”
a lt« ”Radyo 6asi” h#lgbt«**48" «£dth-”4 8 * x n o scrip tx in g src*Vwpload/i/28i2/i/19/deadS93d27ec842d2aa63S83f22fe4f38c5b9Bd3-ieon. jpg* a l t * “ftodyo ö azi" H*ight»*48* width**48">
</noscript>8adyo G a z l< /a x /lix li> < a hr*f«<http://nedya.gB Z i.edu.tr/* t i t l e * ”fiazi«edya" d a ta -ta r jet* ”# ”x i a y » r ç-’Vliel.png* dataoriginal«“/uplûad/l/2B12/l/19/3bfd6972e6b2633f2ca382794de87da62141f648-ican.jpg" a lt« ”6azi#tedya” height»“48” n id tb -“48”><noscript><ing
»rc*"/opioad/l/2912/1 /19/5bfd8972e6b26 33f2ca382794d*87dâ82141f640 • i con. jpg” alt-"6azi*edya” h e ig b t-”48” w idth-*48*>< /noscript> G a2İM «dy»c/ax/U xiİ> <t
hrefa”fıttp://wMr,acil(ders.org.tr/* t i t l e - ’Açjk Ders M alzeneleri” d»t*-target=”#”x i * f »rc“* /lxi.p n g" data-
!İ~
o r i ^ n * l « V u p 1o a d / l/2 W 2 /l/39 /e3 de 29c8 69d f21 ccef7 e9 97ff3 79 ac3I6ecf37 da -icon .jpg* a l t - ’ A ç ı k D ers H a lz e n e l e r l” h e i g h t - ” * S " w i d t h - “ 4 a " > < f t 0 5 c r i o t X i n «
s r c » /uplo#d/l/2812/l/i9/e3de29c889df2iccef7e997ff379ac316ccf37da>icon. j p g ” a l t - " A ç ık D e rs M a lz e n e le r i" be igh t* »“4 8 " w i d t t ı - " 4 8 *xX/n
/ noosc
sr
c ip
r i pt>
t >A
A çc ik
ik Oers
Oers
Nasıl? Korktun mu yoksa? Bir web sayfası bu
şekilde karmaşık gibi görünen işaretler içermekle
beraber, aslında oldukça basit bir yapıya sahiptir.
Web Tasarımı eğitiminde alacağın toplam 9
dersten sonra, gözünü korkutan bu işaretler
sana oldukça basit gelecek ve bu kodları okuyup
anlayabileceksin!
Dedik ya, bir web sayfasının aslında çok basit bir
yapısı vardır. Temelde, basit bir web sayfasında
sadece 8 satır ve 8 kelime bulunur:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Şimdi bu satır ve kelimeleri beraber inceleyelim:
« a lz e * e le r i< /a x /lix li> <
<html>
<head>
< title >
</head>'
r
<body>
i
l <body>
Bir web sayfasını, bir insan vucuduna benzetirse
<html> işareti vücudun yani sayfanın başladığıı
</html> işareti ise vücudun yani sayfanın bittiğ
göstermektedir.
<head> işareti, vücudun kafasını gösterirken,
Not Defteri programı açılır.
</head> kafa bölgesinin bittiğini göstermektedir.
<head> ve </head>işaretleri arasına web
sayfasında görüntülenmeyen buna karşılık sayfa
içinde çeşitli görevleri yerine getiren kodları ve
html işaretlerini yazarız,
<title> ve </title> işaretleri arasında bir anlamda
insana vücuduna isim verebiliriz. <title> işareti ile
verdiğimiz isim, bir web tarayıcının Başlık olarak
isimlendirilen en üst bölümünde görüntülenir.
<body> ve </body> işaretleri arasında ise
Aşağıdaki kodları açtığın not defterine yaz. Lütfen,
hazırladığımız web sayfamızda görüntülenmesini
işaretleri doğru ve eksiksiz yazmaya çalış.
istediğimiz tüm metin, resim, video, animasyon gibi
içeriklerimizi ve başka vveb sayfalarına veya web
sitelerine kuracağımız köprülerimizi ekleyebiliriz.
İlk vveb sayfamız!
Windows'unun sol alt köşesinde bulunan Başlat
ts A4sî -Sai Deten
CKOm fetm ûtrvırrtm ftnim
‘C b tad*
Muciti « b a r a j ı 'rm
<
/title>
</htcd>
ihosm ! dini as
<bcdy>
Herkes* merhaba) A r tık b*n d# v*eb sayfası h a zırla y a b iliy o ru m .
</body>
■c/htmi*
düğmesini tıkla ve açılan penceredeki metin
kutusuna not defteri yazıp klavyende Enter tuşuna
SC?.Hn7
bas.
Şimdi yazdığımız ilk sayfayı kaydedip sonra
çalıştıralım. Bakalım nasıl bir ekran görüntüsü ile
karşılaşacağız.
Not defterinin menü çubuğunda bulunan Dosya'yı
tıkladıktan sonra açılan menüde Kaydet'i tıkla.
■"■T®
cw*
m
__
r'Kİ*
»*
*•
W
5 _ Ctrt»S~|!0>f9tİ£İin1z
ttm.
ÇS
taiT
»>
<7M
f|
cm
*p fık bendev*ebsayfası Hazırlayabiliyorum.
ât?.Sin?
Kaydet düğmesini tıkladığında, bu sayfayı ilk defa
kaydettiğin için Farklı Kaydet penceresi açılır ve
Ve ilk vveb sayfamız çalışmaya hazır. Şimdi
dosyayı bilgisayarında hangi klasörde hangi isimle
simgesini çift tıkla. Bakalım geliştirdiğin sayfayı
kaydedeceğin sorulur.
Masaüstüne git ve seni bekleyen ilksayfam.html
beğenecek misin?
W fari* Kaydet
ly y
-
lâ f Sık Kullanılanlar
r
K it a p lık la r
Dosyalarınet görmek için bir kitaplık açın ve klasör, tarih ve diğer özellikleri ku...
_^JÇarjıdanYûŞctern j
flBâsaüst^"^ J|
iH ö n Y e rîe r
Değiştirme tarih i
Tür
20.33,201215:59
Kitaplık
25,0320122218
Kitaplık
0 Resimler
2553^312 2218
Kitaplık
8 Video
25.03.23122218
Kitaplık
İJ
j|| Belgeler
Kitaplıklar
Müzik
jJ
:"fi Belgeler
J> Müzik
§
m
P—
t‘<8»
afctiiUiydJi di, MOustaıs I
tSUfâıiteı«ı«cfl)
irıMiiil- *■
Resimler
S Video
Bilgisayar
ilk web sayfanı açtığında aşağıdakine benzer bir
V
görüntü ile karşılaşırsın:
DosyaAdE *.txt
Kayıt tuni i Metin Belgeleri (*.txt)
Kaydet
% Klasörleri; Gizle
|
Açılan pencerede sol tarafta Masaüstü simgesini
tıkla, çünkü ilk vveb sayfanı Masaüstü'ne
kaydedeceksin.
Masaüstü'nü tıkladıktan sonra, Penceredeki Dosya
Adı kutusuna ilksayfam.html yaz ve bir altındaki
Kayıt türü açılan penceresinde de Tüm Dosyalar'ı
seç.
Kırmızı çerçeve içinde gördüğün gibi sayfanın
rI MAro, M
m Mkum u .
[
Duienle *
'İX Sık
gösterilmektedir.
1
’
il Karşıdan Y&ltm
Kitaplifclâr
Sisten »*sewo
flffi htoftustii
j-j Belgeler
7
d
\
Bilgisayar
*• Miiîik
^.'Resimler
9 video
8rigif*yar
Sâ
KayıtMnir
Sarı çerçeve içinde, <title> ve </title> işaretleri
arasına yazdığın Sayfa Başlığı görünmektedir.
Sen 'ferler
>ı Kitaplıklar
adresi Masaüstü'nde bulunduğu klasör olarak
ûssûsî
>« s İİ ko f
Ağ
Siste»
Anüvina
Mavi çerçeve içinde ise <body> ve </body>
işaretleri arasına yazdığın metin görünmektedir.
Çok basit de olsa, ilk vveb sayfanı hazırladın. Ancak,
daha yolun çok başındayız!
İ y r - M k )f® C-W«WV»felltM
f<9 MucW«KSmjı'n» HeıyMinc
ta * *
<htmı>
Helkese mertwb«! Artık ben de web soyftı» hflMriayatoftyoram-
<head>
< t1t1 g>
MucitlerGarajı ’na Hoşgelditrlz
</t1tİe>
</head>
<body>
Herkese merhaba! Artık ben de web sayfası hazıı
</body>
</htrai>
Kırmızı çerçeveler içinde gördüğün gibi, ekranının en altındaki Görev Çubuğu'nda hem ilksayfam.html web
sayfasının Nötjİ kodlarının bulunduğu Not Defteri programı hem de bu
görüntülendiği Internet
Explorer programı açık olarak bulunmaktadır.
Bundan sonraki tüm çalışmalarımızda benzer şekilde, kodlarımızı Not Defteri programında yazdıktan sonra
kaydedip, İnternet Explorer'da görüntülenmesini sağlayacağız.
İşaretleri hatalı veya eksik yazarsan...
işaretleri eksiksiz yazman oldukça önemli, çünkü işaretleşti yorumlayarak ekran görüntüsünü oluşturacak
olan bir vveb tarayıcı eksik veya hatalı yazılan işaretleri yanlış yorumlayacak ve sonuç olarak ekranda
istemediğimiz görüntüler oluşacaktır. Örneğin aşağıda <body> işaretinin parantezini kapatmadan
yazıyoruz.
<head>
< tit le >
M u c itle rG a ra jı’ na H oşgeldiniz
< /tit1e>
kbody 1
Herkese merhaba! A r tık ben de vveb sayfası h a zırla y a b iliy o ru m .
</body>
</html>
Sen de aynısını yapar mısın? ilk önce yazdığın kodlarda <body> simgesinin kapanış işaretini (>) sil, Not
Defteri'nin Dosya menüsünden Kaydet'i tıkla. Ardından, Internet Explorer'da açık olan ilksayfâm.html'yi
görüntüle ve klavyende F5 tuşuna bas. F5, internet Explorer sayfasını "yenileyerek" Not Defteri'nde biraz
önce yaptığın değişikliğin uygulanmasını sağlayacaktır.
Ne oldu? Bomboş bir internet Explorer ekranıyla karşılaştın, değil mi?
‘3*ilksayfen -Not Deften
'DöeBîV'KçimGtm
ioemVtfdtm
j»•
ZP
C:\Usro\sekufc\Document5\Desktop\ifitsayfdm.btmJ
3M
udteGarajı'ıuHoşgeküniz >L-,.,|V.J
<htm1>
<head>
<tit1e>
M ucitierGarajı*na Hoşgeldiniz
</tıt1e>
«yhnnİH
h4FKIİ8
</body>
</htmı>
^ Ü Ü İ'
IS i
Dosya
Dû2*n
Götünüm
P
»C
X
SAKulanılanlar Araçlar Vardım
v
merhaba! Artık ben de web sayfası hazır *
s a s tn l
Bunu zaman zaman yaşayacaksın. Bazen, biraz önce harika çalışan vveb sayfan, birkaç işaret ekleyip birkaç
küçük değişiklik yaptıktan sonra bir anda görünmez olacak, çalışmayacak. Bunun sebebi, eklediğin yeni
işaretlerde veya yaptığın değişliklerde hatalı veya eksik bir şeyler yazmış olmandır.
Şimdi, not defterindeki kodlarımızda eksiğimizi düzeltip sayfanın görüntülendiği vveb tarayıcısında tekrar
F5 tuşuna basalım. Sorun giderildi, değil mi?
Yazıyı biraz süsleyelim!
Microsoft Word programını kullanıyor musun? O programda yazdıklarını süslemek veya bazı metinlere
dikkat çekmek için neler yapıyorsun?
* Metin kalınlaştırma,
* Metin eğik yazı (italik),
* Metin altı çizili,
* Metin renklendirme,
*Yazı tipi boyutu,
*Yazı tipi ve daha birçok metin biçimlendirme özelliğini kullanabiliyorsun. Web sayfanda bulunan metinleri
de en az Microsoft Word programında olduğu kadar süsleyebileceksin.
Kalın: Web sayfalarında bir metni kalın yazmanın en kolay yollarından biri <b> ve </b> işaretlerini
kullanmaktır. Bold (yani kalın) kelimesinin ilk harfini alan <b> ve </b> İşaretleri arasındaki metin kalın
yazılır.
^rtnfl >
<head>
« title »
M u c itle rG a ra jı'n a H oşgeldiniz
< /title>
</head>
<body>
.......................
Herkese merhaba! A rtık ben de [<b>web sayfası< /b > ]hazırlayabiliyorum .
</bodv>
**■
Burada gördüğün gibi <b> ve </b> işaretleri arasında yazılan "vveb sayfası" ifadesi web tarayıcıda kalın
olarak görüntülenecektir.
Dosya
Düzen
G ö rü n ü m
Sık Kullanılanlar
Araçlar
Yardım
Herkese merhaba! Artık ben de web sayfastjtıa2trlayab3iyorum.
<b> işareti kalın yapılacak metnin başına, </b> işareti ise sonuna konuyor ki, vveb tarayıcı birçok yazı
içerisinden hangilerini kalın yapacağını kolaylıkla anlayabilsin.
Eğik yazı (italik): Bir vveb sayfasındaki metinleri eğik yazı (italik) ile yazmanın en kolay yolu <i> ve </i>
işaretlerini kullanmaktır, italic (yani eğik yazı) kelimesinin ilk harfini alan <î> ve </i> işaretleri arasındaki
metin eğik yazı ile,yazı lir.
<ht»l>
<head>
< title>
M u c itle rG a ra jı’na H oşgeldiniz
< /title>
</head>
<body>
Herkese[<i>ınerhaba</i>|[ A rtık ben de <b>web sayfası</b> h a z ırla ya b iliyo ru m .
</body>
Burada gördüğün gibi «i> ve </i> işaretleri arasında yazılan "merhaba"ifadesi vveb tarayıcıda eğik yazı olarak
görüntülenecektir.
$
1___
®
C:\Users\selcuk\Documents\Desktop\ilksayfam.html
Ç,p MucitlerGarji.com Çocuklar k ju ı
Dosya
Düzen
Görünüm
MucitlerGarajı'na Hoşgeldiniz
Sık Kullanılanlar
Araçlar
Yardım
YiczkAs^merhaba?]Artık b e n d e w e b s a y f a s ı hazırlayabiEyorum.
«i» işareti eğik yazı yapılacak metnin başına,
fareli iıe sonuna konuyor ki, vveb tarayıcı birçok yazı
ilerisinden hangilerini eğik yazı yapacağını kolaylıkla anlayabilsin.
Altı çizili: Web sayfalarında bir metni altı çizili yazmanın en kolay yollarından biri *ib> ve </u> işaretlerini
Yıllanmaktır. Underline (yani altı çizili) kelimesinin ilk harfini alan «u> ve </u> işaretleri arasındaki metnin
a c h tm l>
<head>
<title>
M u c i t l e r G a r a j ı ’ na H o ş g e ld in i z
< / t it le >
</head>
< bod y>
H e rk e se < i> m e rh a b a < / i> i A r t ı k ben de <b>web s a y f a s ı< / b > < u > h a z ır l a y a b il i y o r u m < / u > .
</body>
——.... ............
—*
< / h t « 1>
Burada gördüğün gibi <u> ve </u> işaretleri arasında yazılan "hazırlayabiliyorum'ifadesi vveb tarayıcıda lifi
çizili olarak görüntülenecektir.
g j C:\Users\5elcuk\Documents\Desktop\ilksayfam.html
Mjf5'!LefGarİi<C0m^QCUİC>af »9- i &
Dosya
Düzen
Görünüm
MucülerGarajı na Hoşgeldiniz x |
Sık Kullanılanlar
Araçlar
Yardım
H erkese merhaba* Artık ben d e w eb sa\'fasM hn7irlavfabflhfortını
<u> işareti altı çizilecek metnin başına, </u> işareti ise sonuna konuyor ki, vveb tarayıcı birçok yazı
içerisinden hangilerini altı çizili yapacağını kolaylıkla anlayabilsin.
Yazı ve zemin rengi: Web sayfalarında görünmesini istediğimiz metin, resim, video ve animasyon gibi
içerikleri koyduğumuz <body> işaretinin bir özelliği olan text ile görünen metinlerin rengini değiştirirken,
bgcolor ile zemin rengini değiştirebiliriz.
c h t m l>
<head>
< title>
M u citle rG a rajı'n a Hoşgeldiniz
< /title>
^
.n, ,^
<body [bgcol or="red^[text="white'>
Herkese <ı>mernaDa</î>! Aktık Ben de <b>web sayfası</b> <u>hazırlayabil iyorum</u>.
</body>
^/htın 1v
Gördüğün gibi, <body> işaretinin içerisine "bgcolor=red"yazarak gövdenin renginin kırmızı olacağını ve
"text=white"yazarak gövdedeki metin renginin beyaz olacağını belirtmiş olduk.
f i l ..ı l S i , • f î j C:\Users\selcuk\Documents\Desktop\ilksayfam.html
MkîÖerGarü,com Çocuklar ki... |§j| MucitlerGarajı’na Hoşgeldiniz X
Dosya
Düzen
Görünüm
Sık Kullanılanlar
Araçlar
Herkese merhabal Artık ben de web savfası
Yardım
■ h ih b h h b H İ
Bazen, html işaretlerinin içerisine bu şekilde kelimeler ekleriz. Burada metin anlamına gelen text kelimesi,
içinde bulunduğu <body> işaretinin kapsadığı metinlerin tamamının rengini belirlememize yardımcı olur.
Buna karşılık, yazılarımızın tamamını tek bir renk yapmak yerine, farklı farklı renklerle görüntülemek istersek,
yazı renklerini başka bir yöntemle belirleyeceğiz.
Benzer şekilde, backgroundcolor yani arkazeminrengi anlamına gelen bgcolor kelimesi, <body> işaretinin
kapsadığı tüm alanın arka zemin rengini değiştirmemizi sağlarken, <body> işaretinin kapsadığı alanın
sadece belli bir bölümünün arka zemin rengini değiştirmemiz gerekirse, farklı bir yöntem kullanmamız
gerekecek.
www.mucitlergaraji.com adresini ziyaret et.
Bölüm
Yazılarımızı süsleyelim - 1
fli ı bıumlet ntııme tjcimr
* ,< b r > v e < p > İş a r e tte n
*Stvleo/elltûı
o vlltklerı
3
Yazılarımızı
süsleyelim -1
Web sayfalarımızda kullandığımız metinlerin
2.
Açılan pencerede Yeni satırını tıkla.
3.
Yeni satırını tıkladığında açılan pencerede
istediğimiz gibi görünmesi için kullanabileceğimiz
birçok html işareti bulunmaktadır. Bu bölümde bu
işaretlerin en çok kullanılanlarını öğreneceğiz.
Bölüm 3 ve Bölüm 4'te kendimizi ve yaşadığımız
şehri tanıtan üç adet web sayfası geliştireceğiz.
Birden fazla vveb sayfasının bulunduğu işler
yapacağımız zaman, bunları masaüstüne
kaydetmek yerine, oluşturacağımız bir klasörün
içine kaydederiz. Böylece, dosyalarımızı düzenli bir
biçimde saklayabiliriz.
Web sayfalarımız için klasör
oluşturalım
Klasör satırını tıkla.
Bundan sonraki tüm derslerimizde kullanacağımız
Klasör
bir klasörü Masaüstü'nde oluşturalım. Eminim
klasör yaratmayı biliyorsundur, ama kısa bir tekrar
"TSsSyof^™
Microsoft Access Verrtabanı
Bit eşlem resmi
Kişi
yapmakta fayda var:
Microsoft Word Belgesi
Journal Belgesi
Microsoft PowerPoint Sunusu
1. Masaüstü'nde boş bir alanda farenin sağ tuşunu
tıkla.
Microsoft Publisher Belgesi
Görünüm
VVinRAR arşivi
Sıralama ölçütü
ATL MFC Trace Tool settings file
Yenile
Metin Belgesi
Yapıştır
Microsoft Excei Çatışma Sayfası
Kısayolyapıştır
XMind Workbook
VVinRAR ZIP arşivi
ÜÛ Paylaşılan Klasör Eşitler
Evrak Çentesi
Ekran çözünürlüğü
I y|
Araçlar
| ıflf Kişiselleştir
m m ıtar jk 4«
4. Masaüstü'nde bir klasörün oluştuğunu ve
klasör adını yazacağın alanın beyaz zemin
üzerine mavi yazı olarak geldiğini göreceksin.
Web derslerimizde kullanacağımız klasörümüz
hazır. Bu klasöre gözün gibi bak, çünkü
bundan sonra yaptığımız her şeyi bu klasöre
kaydedeceğiz.
Üç web sayfası hazırlayalım
Şimdi, üç adet vveb sayfası hazırlayacağız.
Bunlardan ilki genel olarak kendimizi tanıtırken,
İkincisi hobilerimizi anlatacak ve üçüncüsü ise
yaşadığımız şehir hakkında bilgiler sunacak.
Kendimizi tanıtalım
Not Defteri 4 H p programını çalıştır. Aşağıdakine
benzer bir yazıyı kapsayan bir sayfa hazırlayacağız:
"Selin Özdemir'in Web Sitesine Hoşgeldiniz!
Merhaba,
Ben Selin Özdemir. 2002 yılının Eylül ayında
Ankara'da dünyaya gelmişim. Kız kardeşimin
5. Yeni Klasör yazan alana BenimSitem yaz.
adı Melis.
Yalnız, tam istediğim gibi iki kelime birleşik ve
ilk harfleri büyük olarak yazmanı istiyorum. Eğer.
Yeni Klasör vazan alan üst resimde gördüğün
O da 2007 yılının Kasım ayında dünyaya geldi.
Bu sene 4. sınıfı bitirdim.
gibi bevaz zemin üzerine mavi değilse, klasörü
Sizlere hem hobilerimden hem de yaşadığım
bir kez fare ile tıkladıktan sonra klavyenden
şehirden bahsedeceğim."
F2 tuşuna bas. Şimdi klasörün ismini
Sen de benzer bir yazıyla kendi tanıtacaksın.
değiştirebilirsin.
Açmış olduğun boş Not Defteri sayfasına aşağıdaki
HTML kodlarını ve kendini tanıtan yazıyı yaz:
<html>
<head>
< tıtle >
S e lin ö zd em ir'in web s ite s i
< /title >
</h«ad>
<body>
S e lin ö zd em ir'in web s ite s in e H o şg eld in iz l
Merhaba,
Ben S e lin Özdemir. 2002 y ılın ın E y lill ayınd a A nkara'da dünyaya gelm işim . K ız kardeşim in adı M e lis.
0 da 2007 y ılın ın Kasım ayında dünyaya g e ld i.
S iz le re hem hobilerim den hem de yaşadığım şehirden bahsedeceğim.
</body>
</html>
Gördüğün gibi, kendimizi tanıtan yazıyı <body> ve </body> işaretleri arasına yazdık.
Şimdi, bu sayfayı Masaüstü'nde bulunan BenimSitem adlı klasöre kaydedelim. Not Defteri programının
Dosya menüsünden Kaydet'i tıkla.
Ifiasy» Ş Oteen
l
gîçim
görünün*
Yeni
Ctrt*N
Mm
Ctrl* O
I
nMHİS)«eL»
Ysrdım
b S it e s i
Sayfa Yapm...
Yazdır,»
CtrM»
>b Sitesine Hoşgeldiniz!
Çıta?
İen‘3 e TTn "ÎK 'a iiTr. 2002 y ı lın ı n Eylül ayında Ankara’ da dünyaya ge
0 da 2007 y ı lın ı n Kasım ayında dünyaya g e ld i.
Sizle re hem hobilerimden hem de yaşadığım şehirden bahsedeceğim.
</body>
</htmı>
Açılan pencerede, sol tarafta bulunan Masaüstü'nü tıkladıktan sonra, ortadaki pencerede BenimSitem adlı
klasörü çift tıkla.
İÜ 3
Farklı Kaydet
İ l i
Oûzenl* 1
Û
M âsaüstû
» j *t H A
►
Yen» k lasö r
S * Kullanılanlar
jj. Karşıdan Yüklem
İasinda Ben
Dosya klasörü
BenimSitem
Dosya klasörü
Kitaplıklar
camtasia S
Masaüstû
Ardından, pencerenin alt tarafındaki Dosya Adı alanına index.html yaz. Son olarak, Kayıt türü alanında Tüm
Dosyalar'ı seç ve Kaydet düğmesini tıkla.
- «
a*
index,htmi
T KayıtMrü: TümDosyalar
--------------------- 1
►
.. III
rtjjl Bilgisayar
3 .............- ......—
•
Kaydet
Kodlama: ANSI
Klasörleri Gide
▼
-
D
iptal
Dosyamıza index.html adını neden verdik?
Genellikle, birden fazla vveb sayfasının
bulunduğu vveb çalışmalarında, ilk olarak
çalışmasını istediğimiz sayfayı indexveya default
olarak adlandırırız. Böylece, sunucu bilgisayarlar,
bir vveb sitesi görüntülenmek istendiğinde, ilk
j j Karşıdan Yüklem
kolayca anlayabilir.
M Mâiaüstü
Masaüstü'nde bulunan BenimSitem adlı klasörde
index.html adlı bir dosya oluştu.
Yanda görmüş olduğun index.html simgesini çift
Sİ
K Sık Kullanılanlar
olarak hangi sayfayı görüntülemesi gerektiğini
,
îndcx
lJ j | S o n Y « te r
"m Kitaplıklar
i
Belgeler
tıkladığında vveb sayfamız vveb tarayıcı içerisinde
görüntülenecektir.
etıc^Ma»
Ü .«mi
&\UMfi\Etkufc.\ûocum
«ntı\D*sfctop\8
G&rOndm
Sık Kullanılanlar
Araçlaı
Sefa Özdemir'kı Wdb Sitcsinr Hoçgddiıizî Merhaba. B«ö S d » Öîdetnir. 2002 \iktm E>M aşında Ankara'da dünyaya gçimîşen. Ka kardeşimia adsMdb. O da 20Q? yıkan Kasen «jmfc dünyaya gckfi
İ M » henı hoMomdası ham de y«|*iğro şdârdea bâfesedeeefieL
Nasıl? Sayfa beklediğin gibi görünmedi, değil mi? Halbuki vveb sayfamızı hazırlarken metni dört satır olarak
yazmıştık. Bu görüntüde işe sadece iki satır var. ikinci satırda, metin birinci satıra sığmadığı için bir alt satıra
otomatik olarak indi. Neden? Microsoft VVord'de hangi satıra ne yazarsak aynı şekilde görünür. Burada
neden böyle oldu?
Beni dikkatle dinle, çok önemli bir şey öğrenmek üzeresin: Bir vveb sayfasının yapmasını istediğin her şeyi
ona işaretlerle söylemek zorundasın!!!
işaret dili ile söylemediğin hiçbir şey istediğin gibi görüntülenmez. Hadi, şimdi bu işaretlere bir bakalım.
<br> işareti
Birçok işaret harfi aslında, İngilizce kelimelerin ilk iki harfinden meydana gelmektedir. Örneğin, <br>
işaretindeki br, İngilizce break kelimesinden gelmektedir ve sözlük anlamı "kırmaktır". Web işareti olarak
anlamı ise, bir metni istenilen yerden bölüp bir alt satıra kaydırmaktır. Bir metnin hangi noktadan bölünüp
bir alt satırdan devam etmesini istiyorsan, o noktaya <br> işaretini koyacaksın.
....
7 inde»•
Dosya
Duzan
Biçim
Görünüm
'jpppîpnnmj '
Yardım
<head>
< titl«>
S e lin özdem ir'in web S ite s i
< /title>
</head>
<body>
S e lin özdsaifildn Web S ite s in e Hoşgel di n iz ! |<br> |
Merhaba, t <br>J
Ben S e lin ozdeinir. 2002 y ılın ın E y lü l ayında Ankara'da dünyaya gelmişim. K ız kardeşim in adı M elis.
o da 2007 y ılın ın Kasım ayında dünyaya g e ld i.
S iz le re hem hobilerim den hem de yaşadığım şehirden bahsedeceğim.
</body>
:</html>
Gördüğün gibi, metnimizde iki noktaya <br> işareti koyduk. Şimdi istersen Not Defteri'nde Dosya
menüsünden Kaydet satırını tıklayarak istersen Ctrl ve S tuşlarına beraber basarak dosyanı kaydet.
Daha sonra, kapatmadıysan, ekranının en altındaki Görev Çubuğu'nda bulunan vveb tarayıcını tıkla, index.
html sayfanı aç ve klavyenden F5 tuşuna basarak html kodlarında yaptığın değişikliklerin görünmesini
sağla. Eğer index.html sayfanı kapattıysan, Masaüstü'nde bulunan BenimSitem adlı klasördeki simgeyi
çift tıklayarak dosyanın vveb tarayıcıda açılmasını sağla.
1İQ C:\Usm\selcufc\Pccum«ms.Desktop\8«nim5ıt«m\ı?ıd*»;,,htTT)r
Dosya
Düsan
îı***""*
yl
Görünüm
Sık tCudarütaftlar
i
Areç&ir
i i |
* i »i
Yardım
fS E T T
B en S d k ı ÖzJzdemtr. 2002 y sto m E y tO jay ın d aA n k aa'd ad ü n y ay ag rh rp şim K ız k s d e ş i m ia a d iM d s . O d a 200? vtfengı K a sa n ay n ıd ad O n y ay a şe k i. S izlerehem hobilerim denhem d e yaşadatun şehirden
<br> işareti istediğimizi yapmış ve tam yazdığımız noktalardan metni bölüp bir alt satıra atmış.
Şimdi, <br> komutunu birkaç yere daha ekleyerek sayfamın biraz daha düzenli görünmesini sağlayacağım
<head>
Şalin özdemır’in web sitasi
</tit1#>
</head>
<body>
S e lin Ozdem ir' in web s ite s in e H oşgeldin iz! f<br>]
M erhaba,|<or>|
' ....
Ben se11rvT52aemir. 2002 y ılın ın E y lü l ayında Ankara'da dünyaya gelm işim .K ız kardeşim in adı Melis.
O da 2007 y ılın ın Kasım ayında dünyaya g e ld i. | <br>|
s iz ie re hem hobilerim den hem de yaşadığım şehirden bahsedeceğim.
</bodv>
</htmı>
Yeni eklediğimiz işaretleri, klavyendeki Ctrl ve S tuşlarına beraber basarak kaydettikten sonra, vveb
tarayıcıdaki sayfanı F5 tuşu ile yenile ve sayfanın son haline bir bak.
çt C:\Uttr5\wlcuk\D0curmnts\DMktop\BenimSitem\ind«x,html
0 Selin Özd«mif'inWeb Sitesi X
Dosya Düren Görünüm Sık Kullanılanlar Araçlar Yardım
Sefa Ozdemir'in Web Sitesine Hoşgeldiniz!
Merhaba,
Ben Sefa Ozdemir. 2002 ytlmmEylül aynıda Ankara'da dünyaya geimişimKız kardeşimin ad Melis. O da 2007 yıtam Kasan aynıda dünyaya geldi.
Sizîere hemhobilerimdenhemde yaşadğm şehirdenbahsedeceğim.
İstediğimiz gibi dört satır haline getirdik metnimizi, ancak birinci ve ikinci satır arasındaki boşluk biraz daha
fazla olsa keşke. İki satır birbirine çok yakın ve bu durum okumayı zorlaştırıyor. Acaba, iki satır arasındaki
mesafeyi biraz daha açabilir miyim?
<p> işareti
<br> işareti, metni yeni bir satıra kaydırırken, İngilizce paragraph,yani paragraf kelimesinin ilk haffi olan
p İle yazılan <p> işareti yeni bir paragraf açılmasını sağlar. Kodlarımızda "Selin Özdemir'in Web Sitesine
Hoşgeldiniz!"satırının sonundaki <br> işaretini sil. Diğer sayfadaki resimde gördüğün gibi ilk satırın başına
<p> ve sonuna </p> işaretlerini koy.
Öîüsya
Dujen gıçim
Çorunum fardım
<htmİ>
'
1
<head>
'
"
<tıtle>
S elin Özdemir'in web s ite s i
</title>
</head>
< p o d v>
kt»l
S e lin Özdemir'in web Sitesin e Hoşgeldiniz!
Merhaba, <br>
Ben Selin Ozdemir. 2002 y ılın ın Eylü l ayında Ankara'da dünyaya gelmişim.Kız kardeşimin adı M elis.
O da 2007 y ılın ın Kasım ayında dünyaya g eld i. <br>
S iz ie re hem hobilerimden hem de yaşadığım şehirden bahsedeceğim.
</body>
</htmı>
Ctrl ve S tuşları ile sayfanı kaydettikten sonra vveb tarayıcıdaki sayfanı F5 ileyenile ve değişikliği kendi gözlerinle
^^^^^|[^C:\U5efiV5<kü^d^currıervt5\P«ktop\BeırıimSİtem\tndex.html
U f Selin Özdemir’in Web Sitesi
Dosya
Düzen
Görünüm
' Jgg||
0
Sık Kullamianiar
İ-'' v
Araçlar
*1S|
^
-
H
^
Yardım
S e f a Ö z d e m â rm W e b S it e s in e H o f g d d ö â z !
Merhaba.
<C * ^
Bea Sefa Ozdemir, 2002 yıimmHylüİ ayında Ankara'da dünyaya gehmşim.Kîz kardeşimin adi Melis, O da 2007 yıkım Kassa ayında hayaya geldi.
Sîzlere hem hobilerimden hem de yaşadığım şehirden bahsedeceğim-
Sanırım, iki satır arasındaki boşluğun nasıl arttığı
dikkatini çekmiştir.
Kısacası, <br> işaretini yeni bir satır ve <p> işaretini
deyeni bir paragraf açmak için kullanıyoruz. <p>
işareti iki satır arasında <br> işaretine göre daha
fazla boşluk kalmasını sağlıyor. <p> işareti ile
başlattığımız paragrafı ise </p> işaretini kullanarak
soniandırtyoruz.
Yazılarım ızı biçim lendirelim
değiştirmiştik. Peki, yalnızca, metnimizin belli
bir kısmının arka zemin rengini ve yazı rengini
değiştirmek istersek ne yapacağız? Örneğin, ilk
satırın alt zemin rengini lacivert ve yazı rengini
beyaz yaparken, son satırın arka zemin rengini
mavi ve yazı rengini sarı yapmak istiyorum. Diğer
satırların rengi değişmeyecek.
HTML'nin yetersiz kaldığı bazı işleri yapabilmek
için DHTML isimli bir teknoloji devreye sokuldu.
HTML'nin başına eklenen D harfi İngilizce Dynamic
Hatırlarsan, geçen ders (Bölüm 2), <body>
kelimesinden gelmekte ve sayfalara dinamizm,
işaretinin içine eklediğimiz bgcolor ile arka
yani görsel hareketlilik katmayı amaçlamaktadır.
zemin rengini ve text ile tüm yazıların rengini
Sayfadaki metin, resim veya tablo gibi bileşenlerin
görsel özelliklerini Türkçe karşılığı biçim olan style kelimesini kullanarak belirliyoruz.
Buradaki örneğimizde, ilk satırda kullandığımız <p> işaretinin içinde kalan metnimizin biçimini style
özelliğini kullanarak düzenleyeceğiz.
Şimdi, aşağıda kırmızı çerçeve içinde gördüğün <p> işareti içindeki style özelliklerini sen de kendi vveb
sayfana aynen ekle.
indat - Not Dritcri
Bosya
Dus«n
Biçim
_
___________
'
_
fiürtinüm
~^ÎBİ111S IW P Ü W ^^
.
<htmT>
<h#ad>
<t1tle>
S e lin özdem ir'in web S ite s i
< /tit!e>
</Head>
<b£İJ&;________________________________
■
ı
m________________ -
Ep style= ''color:b1ue; baekground-color:yenow";>1
S e lin ozdemır in mo Site sin e hoşgeİd in iz !
</p>
Merhaba, <br>
Ben S e lin özdemir, 2002 y ılın ın Eylü l ayında Ankara'da dünyaya gelm işim .Kız kardeşimin adı M elis.
0 da 2007 y ılın ın Kasım ayında dünyaya g e ld i. <br>
S iz le re hem hobilerimden hem de yaşadığım şehirden bahsedeceğim.
</body>
</html>
Burada, vveb sayfasına şunu söylemiş oluyoruz: <p> ve </p> işaretleri arasında kalan metnin style (yani
biçimi) özelliğinin yazı rengi mavi (color:blue) ve arka zemin rengi sarı olsun (background-color:ye!low).
Klavyende Ctrl ve S tuşlarına beraber basarak sayfanı kaydet. Ardından, vveb tarayıcıdaki sayfana git ve F5
tuşuna basarak yaptığın değişiklikleri görüntüle.
i p ..Ş M Ü
... -
‘
m
a
m
ı .... . . .
t
C:\Users\sdcuk\Documents\Ocsktop\BcnimSitem\index.html
| © Selin özdemir’in Web Sitesi
Dosya
Düsen
Görünüm
f |
>•
Sık Kullanılanlar
Araçlar
•
»t
Vardım
S e f a Ö z d e n » ' » W e b S it e s in e H o ş g e ld im z i
i
M e rh a b a ,
Ben Sefa Özdemir. 2002 yıkan Eylül ayında Ankara'da dünyaya gelmişim.Kız kardeşimin adı Melis. O da 2007 yıkım K aan ayında dünyaya geldi
i Sizlere hem hobilerimden hem de yaşadığım şehirden bahsedeceğim
Derslerimiz sırasında, bazen HTML bazen de DHTML işaret ve özelliklerini inceleyeceğiz.
Bölüm
Yazılarımızı süsleyelim - 2
Yazı biçimlendirme işaret ve özellikleri
* Başlık işaretleri
* Kayan yazı işareti
* Liste işlemleri
4
Yazılarımızı
süsleyelim - 2
Web sayfalarımızda kullandığımız metinlerin
* En büyük başlıklar (1. derecede önemli
istediğimiz gibi görünmesi için kullanabileceğimiz
başlıklar)
birçok html işareti bulunmaktadır. Bu bölümde bu
işaretlerin en çok kullanılanlarını öğreneceğiz.
* Büyük başlıklar (2. derecede önemli
başlıklar)
Metin başlıklarımızı hazırlayalım
* Orta başlıklar (3. derecede önemli başlıklar)
Bildiğin gibi, kitaplarımızdaki yazılarımızda başlıklar
* Küçük başlıklar (4. derecede önemli başlıklar)
olur. Başlıkları kullanarak kitap bölümlerini ve
bölümlerin içindeki alt başlıkları belirleriz. Başlıklar
sayesinde kitaplarımız daha rahat okunabilir.
* M in ik b a ş lık la r
(5. derecede önemli başlıklar)
Türkçe"başlık"anlamına gelen heading kelimesinin
ilk harfini alan HTML işaretleri bulunmaktadır:
<h1> ve </hl > (1. derecede önemli başlıklar için)
<h2> ve </h2> (2. derecede önemli başlıklar için)
Başlık işaretlerini sadece metinlerindeki başlıkları
belirlemek için kullan. Metinleri daha büyük yazmak
için kullanma!
Resimdeki kırmızı çizgiler bir kitaptaki büyük
başlıkları temsi ederken, mavi çizgiler alt başlıkları
gösterir. Siyah çizgiler ise normal metinleri
göstermektedir.
Web sayfamızda kullanacağımız metinler için de
başlık seviyeleri belirleriz:
Şimdi, index.html sayfamızın birinci, ikinci ve
dördüncü satırlarında <h1>, <h2> ve <h3>
başlıklarını kullanacağız.
■
| inçten•Not Peften j
fîosya
Dtçen giçim fiörünûm
H
fardım
<htm1>
<head>
< title>
s e lin özdem ir'in web s ite s i
< /title>
</head>
<body>
<n stv l e="co1 o r: bl ue; backşrourıd-col o r: yel 1ow"j.
(<hl>jse1in özdem ir'in web site sin e Hoşgel dini
<m
kh2afrterhaba J</h2al <br>
Ben S e lin özdemir. 2002 y ılın ın Eylü l ayında Ankara'da dünyaya gelmişim.Kız kardeşimin adı H elis.
0 da 2007 y ılın ın Kasım ayında dünyaya g eld i. <br>
<h3>fciz le re hem hobilerimden hem de yaşadığım şehirden bahsedeceği m.[</h3>|
</oody>
</htmı>
Kırmızı çerçeve içindeki başlıkları benim gibi sen de index.html sayfana ekle. Daha sonra klavyenden Ctrl
ve S tuşlarına basarak dosyayı kaydet. Web tarayıcıdaki sayfana geri dön ve F5 tuşuna basarak yaptığın
değişikliklerin görünmesini sağla.
p !
Dosya
Diteerı
C: Us«fi îelc\jt O o'um tnîî D«Hop BenımSrtem intjw.htm!
ûörtinöm
Sık Kullanılanla#
Araçlar
Vardım
[Seün Özdemir'in Web Sitesine Hoşgeldinizî
I Başlık 1 <hl>
<h2>
[Merhabün ^ 3
B e n Seün Öıdetair 2002 vıtemEylÜl arymdâ Aokara'ck dtkı>aya gefcıişim Ki2 kadeşimin adı M«fe. O da 2Ö0T yıkım Kasan avmda «tenyaya geldi.
jS Iz k t * I
I hobilerimden
h « m d< y » j t d ı ğ u n ş t h l r d m b t h » M İ t e t f Irn lj
Kayan yazı
1 Baştık 3 <h3>
.{31 index - Not Defteri
[Dosya
Web sayfalarında sık sık kayan yazılar görürüz.
Aşağıdan yukarı veya sağdan sola kayan yazılarla
sayfamızda istediğimiz metinlere insanların
dikkatlerini çekebiliriz.
Şimdi, hobilerimizi tanıtan yeni bir vveb sayfası
oluşturalım. Not defteri
programın açık, değil
mi? Açıksa, Dosya menüsünden Yeni satırını tıkla.
JDüıen
giçim
J^ Y e n ^
Ûörünüm
C trl+ N j
Aç...
CtrkO
Kaydet
Ctrl+S
i
|
Farklı Kaydet...
Sayfa Yapısı.,.
Yazdır...
Boş bir not defteri sayfası açılmış olmalı.
Çıkış
Ctrl+P
m
\
Şimdi, hiçbir kod yazmadan önce, hemen sayfamızı kaydedelim. Neden mi? Bunu alışkanlık haline
getirmeni istiyorum. Yeni bir sayfa açar açmaz hemen kaydet ve kod yazma çalışmaların sırasında her
3-4 dakikada bir klavyenden Ctrl ve S tuşlarına basarak yazdıklarını kaydet. Böylece, elektrik kesintisi gibi
istenmeyen durumlarda o ana kadar yaptıkların uçup gitmez!
Bu vveb sayfamızı Masaüstü'ndeki BenimSitem adlı klasöre hobilerim.html adıyla kaydedelim. Dosya
menüsünden Kaydet satırını tıkla.
Ftrkh Kaydet
© O »
M a s a u s tü
Düşenle *
Art: MatattsW
►
m
Y eni M asö r
Şasinde Sen
TÖT Sık Kullamianiar
O c s y e k le s o ru
jft. K arşıdan Yükle m
dflP
%H|
D
ffÜ te S a
B e n im S ite m
S e n Y erler
D o s y a k la s ö rü
y ,, K itaplıklar
c a m ta s ia 5
Açılan pencerede sol taraftaki Masaüstü'nü tıkladıktan sonra ortadaki pencerede BenimSitem adlı klasörü
çift tıkla. Ardından, pencerenin alt tarafındaki Dosya adı kutusuna hobilerim.html yaz ve Kayıt Türü olarak
Tüm Dosyalar'ı seç.
U
Farktı Kaydet
C I0 <
Düzenle •
a d lt l
WStk Kullanılanlar
J Ş Karşıdan
Yüklem
Ad
Değiştirme tarihî
Tür
Ü j inde*
21.06,2012 23:55
HTML Belge
8 EE M asau stü
t.i. Son Yerler
jğji Kitaplıklar
3
Belgeler
Müzik
B
ti
Resimler
K İ Video
SÛ
B ilg is a y a r
IDosya Adı: hobUerim,html
[K a yıt tûrö:
İjfff Klasörleri Gizle
| Tüm Dosyalar
Kodlama: [AN SI
it !
;
d
Kaydet
iptal
J
m
Gördüğün gibi, tüm dosyalarımızı Masaüstü'nde
bulunan BenimSitem adlı tek bir klasörde
topluyoruz. Bunu yapmamızın ne kadar önemli
olduğunu ilerleyen derslerde göreceksin.
Şimdi, her vveb sayfasının en temel kodlarını
yandaki gibi hobilerim.html sayfasına ekle.
3 j h o b ile r im - f o t P a f t a
£>osya
D u je n
g iç im
g ö rü n ü m
y a r d ım
<html>
<head>
■ctitl e>
</title>
</head>
<body>
</body>
</html>
Hobilerim.html sayfasını aşağıdaki işaret ve metinleri ekleyerek hazırlamaya başlayalım:
<marquee> ve </marquee> işaretleri arasına yazılan yazılar, ekranda aşağıdan yukarı veya sağdan sola
kayarak ilerler.
" j h o b ilerim - N o t O e f tp i
D osya
D üzen
S c if f t
___
_
fiö rü n û m
f a r d ım
________________________________ r .n .
v ıjf .
frâ y
,tr rsğ ğ t
'
- - - - - - - - _______________
<htm1>
<head>
<title>
Selin özdemir’in H obileri
</title>
</head>
<body>
marquee>J
e liri özdemi r ve Müzik! Piyano çalmayı ve şarkı söylemeyi çok seviyorum
fc/marquee>]
</body>
</html>
Gerekli işaretleri ve yazıları ekledikten sonra, klavyenden Ctrl ve S tuşlarına basarak sayfanı kaydet. Daha
sonra, Masaüstü'ndeki BenimSitem adlı klasörde bulunan hobilerim.html simgesini çift tıkla. Hazırladığın
sayfanı vveb tarayıcı penceresinde göreceksin. Kırmızı çerçeveyi ben sonradan ekledim. Senin vveb sayfanda
görünmeyecek! "Bu da nereden çıktı şimdi?"diye kafandan geçirme!
— —
—
!jj laiİS8fesâ| jfjj
:um
»nt*\D«*ktop\8«nim
Sit«m
\hobiknm
,htm
l
|pSetinözdemir'inHobileri
ji!4nrfınl»r Araçta Vardım
HİS
*■
m
*
^SdmözdemirveMüzik!Piyanoçalmayıveşarkısöyi
*» .---.... ......
........
cum
ents\Oesktop\Bef>im
Srtefn\hobilerim
.htm
l
||P SelinÖzdem
ir'inHobileri x
luHamlanlar
Araçlar
1 |1J__
-________
*
„
mm
p*
.% * .
Mm
Vardım
^Sdfeı ö z d e m ir v e M fta k i Piyano çatm ayı v e şarka söylemeyi ç o k » eviyom n
IflgljgljJfŞîî
,TTr"
« { » ■
jfcjı'flte. •I f i C ıUscmselcuk\Oocumentr4>esktap\8enlmSitım\lıobıtflnm btml
İğ S*lln Özdemir’in Hobileri
1, |jj
|g
»$
*r
&■
Z itM M
m S k s ...
Ocs/* DVıtn Gotunum Sık Kulmânltr Artçhr Yârdım
İ
İ
1İ İ İ ® ; İ S
L
^
[ İ
S dsı Özdemir vı* Möak! Piyano çalmayı ve şarkı «ödemeyi çok seviyorsan
mmrnm
■
m
J
-m
M A M I
p -t* i4 $ î
C:\Usefs\sdcuk\Documents\DesletopKBenimSitem\hobilenm,html
| | | Selin özdemir'in Hobileri
Dosya Düzen
•- L j ,
|
^
cr
^
>»İi
%
|
.ı**,
... -.ite » ( B i l i
1« * * » •
İm
« ..■ *
%
**
Görünüm Sık Kullanılanlar Araçlar Yardım
■dmvt Mödc! Piyanoçatajm ;arleı sJjtoneyiçoksniyaıım
Nasıl? Yazın, ekranda sağdan sola kayıyor mu? Peki, nasıl aşağıdan yukarı kaydıracağız? Veya nasıl daha
yavaş veya daha hızlı kaydıracağız? Bu dediklerimizi ise <marquee> işaretinin özelliklerini değiştirerek
gerçekleştireceğiz.
Özellik
Açıklama
Alabileceği Değerler
Örnek
Direction
Yazının kayma yönünü belirler
Right (sağdan)
Down (aşağıya)
Up (yukarıya)
<marquee direction=rigtht> Selin </marquee>
(Sağa gider)
<marquee direction=down> Selin </marquee>
(Aşağı gider)
<marquee direction=up> Selin </marquee> (Yukarı
gider)
Loop
Yazının kaç defa kayacağını
belirler
Boş olabilir veya
•'dan büyük bir sayı yazılır
<marquee> Selin </marquee> (yazı sürekli kayar)
<marquee loop=ı>Selin</marquee>(yazı bir kez
kayar, sonra durur)
<marquee loop=A>Selin</marquee>(yazı a kez
kayar sonra durur)
serolidelay
Yazının kayma hızını belirler
Küçük değer hızlı
kaymasını, büyük değer
yavaş kaymasını sağlar
<marquee scrolldelay=o- ->Selin</marquee> (çok
yavaş)
<marquee scrolldelay=r« •>Selin</marquee> (biraz
daha hızlı)
<marquee>Selin</marquee> (en hızlı)
Kayan yazımızı biraz da renklendirelim mi? Kırmızı çerçeve içindeki kodları dikkatli bir şekilde kendi sayfana
ekle. Lütfen, noktalı virgül ve iki nokta üst üste işaretlerine dikkat et.
—
JJosy*
M»
ftiçîMi ûjörünüm %tf4m
< tı»a d >
S«H n özdsm lr'in Hob1l«r1
</head>
<body>
<narquM Istvl« a 1'back^round-cfllpr :pink; co lo r: b1u«; font-siz«:30;
i<pn: c«n t«r:T fo raction=uat>
S e lin flzdem ır va Mttefk!
..........
</iRarqua«>
</body>
</htmı>
Kodlarını yazdıktan sonra klavyenden Ctrl ve S tuşlarına basarak dosyayı kaydet. Daha sonra, hobilerim,
html sayfasının açık olduğu vveb tarayıcı ekranını görüntüle ve F5 tuşuna basarak yaptığın değişiklikleri izle.
■j a'; C:\Ustrt\ielcuW)otumems'.0esktop'.8er«mSitefn\hobibtfHTi.html
0 SefmOrdemir'ınHobıl«n
Poty
Puîtn
(tenimin*.
S* Ku<l»mitnler Artçler Yardım
Selin Özdemir ve Müzik! Piyano çalmayı ve şarkı söylemeyi çok seviyorum
ft,
(MMfeMktA CbKufiW(B
$ ‘ftirt Cte.«ow« Malttı
Dm
lljjf f lp
S* tMdmsmm. m#*?
*wtm
Şit$
O&jfenE'**
Hmyt»
wmw«
* İştiföl
S*. IUtt»nı&ea£»ı Ançftı
.Selin Özdemir ve Müzik! Piyano çalmayı ve şarkı söylemeyi çok seviyorum
<marquee> işaretinin style'ını (yani biçimini) belirlemek için arka zemin rengini (background-color)
pembe (pink); yazı rengini (color) mavi (blue); yazı büyüklüğünü (font-size) 30 ve yazının sayfa hizalamasını
(text-align) orta (çenter) olarak belirledik.
Dikkatini çekmiştir, yazı artık aşağıdan yukarı doğru kayıyor. Bunu nasıl yaptığımızı gördün, değil mi?
<marquee> işaretinin Direction özelliğini up olarak belirledik. Böylece yazı aşağıdan yukarı doğru kayıyor.
Liste işlemleri
Bazen, yazılarımızı listeler halinde sunmak isteriz. Örneğin, Microsoft VVord gibi bir programı kullanarak
ülkemizdeki coğrafi bölgeleri yazman istendi. Aşağıdaki gibi bir liste hazırlarsınız.
p i Ü
O i*
■*> ’
NM
Gim j Öde
& ««
O
/
Sayfa 0 «*m
Safvuruiar
Call6rieG«wl«*j;tt
* A*
Aa’
Gözsen Geçir
^
Bdgcl ■M krotoftVtadiPI
Görünüm
•= * |= - *^5*
î*
f
A4Ç{ĞğHt | t
I fMomsP I 9
f i * * * i î*-1 âı*
Boyaöîi i
Pano
Postalar
______
fi :
Paragraf_
E iır n iA ^ g
M n w ı
E|»
A M tn lz
iç A nadolu
Karadeniz
Doju Anadolu
Güneydoğu Anadolu
Bu türden numara verilmeksizin yapılan listelerin yanında, örneğin bizden ülkemizin en büyük beş şehrini
sırasıyla yazmamız istenseydi, Microsoft Word'de şöyle bir liste oluştururduk:
» T M
■9 * 0
Gmt
:»
g e ^ d - M ic ro so ft W o rd ’ | | |
ffcft
Sayfa Düzeni
Başvurular
Postala*
CaiibrtfGfw(Je) - i l i
* A - 1* i A ı ’ | ^
j■
K
T
&
•
al»
X,
X'
/ Biçim 6oya<n<
Gözden Geçir
Görünüm
: tu
W
*ır
%
fS B p a
M
Pano
... 111.
j’.ij
tiZi îifM
C i
IH
r; i
r -c n s I
m
m
m
jı*
Paragraf
ı &
Â a Ç ç Ğ fH t
i f
•m *
r» {
m
ı. İstanbul
A
î
& j
Web sayfalarımızı hazırlarken de benzer listeler oluşturmamız gerekebilir. Bu listeleri bazen numarasız
bazen de numaralandırarak oluştururuz.
Şimdi, Selin arkadaşımızın sevdiği müzik türlerini bir listeleyelim:
^ hol)B«rim - Not SriMfi
J3»ıy» Patw flitimfiacMimî*6m
’
^________________________________________
................................................................ ... .....
<html>....
<ht«d>
selin özdemir'in Hobileri
</title>
</head>
<body>
<marquee style=’’background-color: pink; color:blue; fo n t-s ize :30; text-align:çenter;" direction=up>
Setin özdemir ve Müzik! Piyano çalmayı ve çarkı söylemeyi çok seviyorum
</marquee>
4p>
^
Sevdiğim Müzik T ü rle ri:
<uİ>
<1i > Klasik müzik
<İ1> Yabancı pop müzik
<li>Türkçe pop müzik
?/ul>
j
</body>
</htm1>
Gördüğün gibi, </marquee> kapanış işaretinden sonra <ul> ve </ul> işaretlerinin arasında başına
<li> işareti koyarak Selin'in sevdiği müziklerin bir listesini hazırladım. Bu kodları hobilerim.html sayfana
ekledikten sonra klavyenden Ctrl ve S tuşlarına basarak kaydetmeyi unutma.
Şimdi de hobilerim.html sayfanın açık olduğu vveb tarayıcı ekranını aç ve F5 tuşuna basarak yeni
yaptıklarını görüntüle.
C:\U**ff\s«lcult\Oocum
«ntt\DeriSop\Bm
n<m
Sa«m
'vho*>ıleonvhtm
l
SelinÖzdem
ir'inHobileri * ^
Detye DûîenGöriM
âmSdcKuM
*ndanl«r Arsçlsr Y*td«n
■■■■■I
1181 It^MİllSgİ î İ i
fffp
lif Ş§
| Ü ^Ü f
.....
s&CT;' âSfe 11111
SevdikMttakTfcfeit <^3
« p > işaretinin o luşturdu ğ u boşluk
• Klasik »«lak
• Yabana pop müzik
• 'Türkçe pop ınösik
Gördüğün gibi, Selin'in sevdiği müzik türleri başlarına birer nokta işareti gelerek listelendi. Bu şekilde
numarası olmayan listeler oluşturmak için yazılarımızı Türkçe anlamı "sırasız liste" olan İngilizce "unordered
list" kelimelerinin ilk harflerinden oluşan <ul> ve </ul> işaretlerinin arasına yazıyoruz. Listedeki her bir
' ’■
maddenin başına İngilizce list kelimesinin ilk iki harfinden oluşan <li> işaretini ekliyoruz.
Bir de istersen, Selin'in sevdiği müzisyenleri listeleyelim. Ama bu sefer, en çok sevdiği birinci müzisyeni, ikinci
müzisyeni ve üçüncü müzisyeni belli edecek şekilde numaralandıralım. Aşağıdaki kodları hobilerim.html
dosyana ekle.
|| hobüerim * Not Defteri
Dosya
Dujen
Hiçim
fiöfünüm
________ A fifti,.
■
iandım
<htm1>
<h«ad>
S e lin özdem ir'in H ob ileri
< /title>
</head>
<body>
<marquee style="backaround-color:pink; color:b1ue; fo n t- siz e:30; text-a1ign: çen ter;" direction=up>
S e lin özdemir ve Müzik! Piyano çalmayı ve şarkı söylemeyi çok seviyorum
</marquee>
<P> .
Sevdiğim Müzik T ü rle ri:
<uİ>
< İi» K la sik müzik
<li> Yabancı pop müzik
<1i»Türkçe pop müzik
</ul»
fZ
------------------- \
<br»
En Sevdiğim M üzisyenler:
<ol»
<İi> sertab Erener
<li> C eline Dion
<li> Beethoven
&?}>
J
Bu kodları ekledikten sonra hobilerim.html dosyanı klavyeden Ctrl ve S tuşlarına basarak kaydetmeyi
unutma. Şimdi de hobilerim.html dosyanın bulunduğu vveb tarayıcını aç ve F5 tuşuna basarak yaptıklarını
görüntüle.
Selin özdemir ve Müzik! Piyano çalmayı ve şarkı söylemeyi çok seviyorum
Sevdiğim M ü zik T ttrlen;
• Klasik müzik
• Yabancı pop müzik
• Türkçe p op tniızık
E n S e v d a m M û m y e fik r:
İ.
Sertab Erener
2.
C ekne D ion
3. B eeth o v en
Selinin en sevdiği müzisyenler sırasıyla görüyoruz. Türkçesi “sıralı liste"olan İngilizce Ordered List kelimelerinin
ilk harflerinden oluşan <ol> ve </ol> işaretleri arasına yazılan liste maddeleri otomatik olarak birden başlayarak
numaralandırılır. Senin ayrıca, sıra numarası yazmana gerek yok!
Listelerimizi hazırladık ama görüntü çok sade. Hadi biraz süslemeye çalışalım:
Listelerimizin başında bulunan "Sevdiğim MüzikTürleri"ve"En Sevdiğim Müzisyenler"cümlelerini <h2> ve
</h2> işaretleri ile ikinci seviye başlık olarak şekillendirmek istiyorum.
Ocsyj Düzen
Biçim
Görünüm
Yardım
<htm1>
<head>
<tit1e>
Se lin özdemır' in H obileri
</title></head>
<body>
<marquee sty1e="background-eo1or:pink; color:blue; font-size:30; text-a1ign:çenter;" direetion=up>
Se lin özdemir ve Müzik i Piyano çalmayı ve çarkı söylemeyi çok seviyorum
</marquee>
<P>
İ<h2>l Sevdiğim Müzik T ü rle ri: [</h2>]
<ul>
<1ı> Klasik müzik
</ul>
----
< li> Sertab Erener
< li> Celine Dion
< li> Beethoven
< /ol>
Sözü geçen satırları <h2> ve </h2> işaretleri arasına aldım. Ardından, yaptığım değişiklikleri klavyemdeki
Ctrl ve S tuşlarına basarak kaydettim ve hobilerim.html sayfasının bulunduğu web tarayıcımda F5 tuşuna
bastım.
Sevdiğim Müzik Türleri:
e Klasik müzik
• TarfcçepopmOak
En Sevdiğim Müzisyenler:
1. Sertab Erener
2. C d n e Dion
3. Beethoven
Sözü geçen iki satır <h2> ve </h2> işaretleri sayesinde birer başlık haline geldi.
Üçüncü sayfamız: yasadigimsehir.html
Bu bölümde son olarak yaşadığımız şehri
tanıtacağız. Selin Ankara'da yaşadığı için ülkemizin
Başkent'ini tanıtacak.
Kırmızı çerçeve içinde gördüğün gibi dosyamızı
kaydetmediğimiz için not defteri "Adsız" olarak
isimlendiriliyor.
Hemen Dosya menüsünden Kaydet satırını
tıklıyoruz.
Kayan yazı ve listeyi beraber kullanalım
Şimdi aşağıdaki vveb sayfasını hazırlamaya
[ Adsız - Not Defteri
Dosya
Düzen
Biçim
Görünüm
başlamadan önce yeni bir not defteri sayfası açalım.
Yeni
Ctrl+N
Zaten açık olduğunu düşündüğüm Not Defteri
Aç...
Ctrl+O
programının Dosya menüsünde Yeni satırını tıkla.
Kaydet
Ctrl+S J
yO index - Not Defteri
Farklı Kaydet...
f Dosyal Düzen
Biçim
Görünüm
Yeni
Ctrl+N~~]
A ç...
Ctrl+O
Kaydet
Yardı
Yazdır...
:
Ardından, açılan pencerenin sol bölümünden
Masaüstü'nü tıklıyoruz ve sonra orta bölümde
Ctrl+P
BenimSitem adlı klasörü çift tıklıyoruz. Son olarak
je ;
Çıkış
Ctrl+P
Çıkış
ab
Sayfa Yapısı...
Yazdır...
Sayfa Yapısı...
Ctrl+S
Farklı Kaydet...
in
\
< lr v >
Açılan yeni not defteri sayfasında bir vveb sayfasında
bulunması gereken en temel html kodlarını yazalım:
pencerenin en altındaki Dosya Adı kutusuna
"yasadigimsehir.html" yazıyoruz ve Kayıt türü
olarak "Tüm Dosyalar"ı seçiyoruz
H U »
-3
* j *f jj Arg; HsSM/StU
j * * Menus»
Düzenle»
fm
Adsa
m
iîLm
m
m
m
titm
iaâ1m
.Not
....Defteri
..
Dosya Düzen Biçim Görünüm Yardım
[
< h tm l>
< head>
< t it 1 e >
< / t it 1 e >
< /h ead >
< b o d y>
< /b o d y>
< / h tm ı>
Yardı
YeniMasa
SAKuBendeni»»
* MH'H" VuH»»
|fe Menustu J
H} Son Yerler
si «tıpuUeı
H *&*•»
J? MûÜK
f i!
te *
0
fienım&tem
Ooîv» lliS&t
f i l
W
I H
ttJPA*Î.Qf.HlS»#WXWa*>P
«ili Minkten »hnanlar
3 '*'rJİt0
l
’M BU^cıyer
- ...... I I . ,
[DötykAdf yuadigimscMrM
TümCos^f
# KUs&ltriGitkı
||
:h*dlj»i|f>*fc*t»ııra
]3
♦ 1
jANSI
+l |
Aç
j
Şimdi, yasadigimsehir.html adlı vveb sayfasını aşağıdaki kodları yazarak hazırlıyoruz:
Dosya
Düzen
Biçim
Görünüm
Yardım
[■<Jıtın1>
«head>
,
< title>
s e lin 'in Yaşadığı şe h ir: Ankara
< /tıtle>
</head>
<body>
Başkent Ankara<br>
Ben, ülkemizin Başkent' i Ankara’ da yaşıyorum.
Toplam nüfusu 5 milyon civarın d a olan Ankara,
aynı zamanda ülkem izin en büyük ik in c i ilıd ir.< b r>
Anadolu to p ra k la rın ın orta bölümünde bulunan Ankara'nın toplam 25 ilç e s i bulunmaktadır.
</body>
</htmı>
Klavyendeki Ctrl ve S tuşlarına basarak sayfanda yaptığın değişiklikleri kaydettikten sonra Masaüstü'nde
bulunan BenimSitem adlı klasördeki yasadigimsehir.html simgesini çift tıklayarak vveb tarayıcında
açılmasını sağla.
(B İR İ
C:\Usm\sriculı\Oocumcnts''Desldop\B«nimSit<m\yaMdigirn«hir.htnıl
[,|Ş Selinin V3^dı§ı Şchin Anfc..
Dosya
X
Düsen
Görünüm
L J
jj |
Sık Kullanılanlar
Araçlar
B u k j 1823
JL__| 11 j |
Vardım
! G tri
W
i £ 2 3 s * î * n e k l* r * I
Başkent Ankara
; Ben, ülkemizin Başkent'i Ankara'da yaşıyorum. Toplam nüfiısu 5 milyon civarmda olaıı Ankara, aynı zamanda ülkemizin en büyük ikinci Sidir
: Anadolu topraklanma otta bölümünde bulunan Ankara'ma toplam 25 İçesi bulunmaktadır.
i
"Anadolu topraklarının..."şeklinde başlayan satırın hemen öncesine yazdığımız <br> simgesi, bu cümleyi
bir alt satıra kaydırdı.
Şimdi ilk satırı başlık haline getirelim ve sayfanın biraz daha renkli görünmesini sağlayalım.
y a M dig ım seh tt *
fio ıy a
D ü je n
£ iç im
D eften
g ö rü n ü m
*$ M
I
:
fa rd ım
<html>
<head>
<tit1e>
S e lin 'in Yaşadığı Şah ir: Ankara
< /title>
</head>
________
pbody bgcolor=' pink 1 text=* b lue
Khl>taşkent Ankarap/hî>kbr>
Ben, ülkemizin Başkent'i Ankara'da yaşıyorum.
Toplam nüfusu 5 milyon civarında olan Ankara,
aynı zamanda ülkemizin en büyük ik in c i ilid ir.< b r>
Anadolu top rakların ın orta bölümünde bulunan Ankara'nın toplam 25 ilç e s i bulunmaktadır.
</body>
önceki sayfada çerçeve içinde gördüğün kodları ekledikten sonra, sayfanı Ctrl ve S tuşları ile kaydet.
Daha sonra, yasadigimsehir.html sayfasının bulunduğu vveb tarayıcı pencereni aç ve F5 tuşuna basarak
yaptıklarının görüntülenmesini sağla.
W 1'
#
."'""'He*- H M H H M H H H
H İH
Mİ
—i,.™
® » ---.. ........... i/jy
•¥
|
# #
i
M __
§.] C:\Users\selcuk\Documents\Desktop\BenimSitem\yasadigimsehir.html
[ H Selin in Yaşadığı Sehin Ânk.
Dosya
DOzen
Görünüm
' fe n J
■
■ H
Sık Kuftandanlar Araçlar Yardım
*
İ§
Başkent Ankara
Ben,ülkem
izinBaşkeot’iAnkara'dayaşıyorum
.Toplamnüfusu5m
âyoadvarmdaoianAnkara, mzam
andaüBrem
trmeabuyukikinciflicür
Anadohıtopraklanasıortabohim
ündebuhm
asAnkara'matoplam25içesibufunm
akîadu.
ay
<h1 >ve </h1 >ile Başkent Ankara satırının başlık olmasını sağlarken, <body> işaretinin arka zemin rengi
(bgcolor) özelliğini pembe (pink) ve yazı (text) rengi özelliğini mavi (blue) olarak belirledik.
Şimdi de Ankara'nın ilçelerini bir liste olarak hazırlayıp aşağıdan yukarıya kayarak çalışmasını sağlayacağız.
tu p ıa ııı rıu ıu s u
s mı iy o n c i v a r ırıu d u ı a ı ı M im a ra ,
aym zamanda ülkem izin en büyük ik in c i ilid ir .< b r »
Anadolu to p ra k la rın ın o rta bölümünde bulunan A n k a ra 'n ın to p la
Ru i l çelerd en b a z ıla r ı ş u n la rd ır:
k o l» !
< lı> A ltın d ağ
<li>Ayaş
<1i »Beypazarı
<1i»Çankaya
<1i »G ölb aşı
<1i»Kazan
<11»K eçiö ren
<1i > K iz ı1cahamam
<1i» N a ili han
< li» P o la t lı
<1i » Ş e r e fii koçhi sa r
<1i »Yen i mahal 1e
</ol»ı
</body»
</html»
ilkönce, <ol> ve </ol> satırları arasına yazdığımız Ankara'nın bazı ilçe adlarının başına koyduğumuz <li>
işareti bildiğin gibi her satırın liste maddesi olmasını sağlıyor.
ttcsyn Düsısn Gefû«öm SıkKaHanıi*nfc» Ar*-;6*r Yardam
Başkent Ankara
ara. A-sa-sı S a k 'rt. A A b s .te .
f c l l l f t l f t afifjîdan yite ri
t tir y ® dtffiısrn safi&w®fe-ifin <m arquee> m
</marquee> JftfşfJerM doğru yere ekieyftseğfeve Direction özettiğini "upf olâ®fctaniFni§yac^ıı,
a n a u v <u
kyp ı a a faı
c ıif s s
v ı
wa
u u iu t t iM f t u c
BU i 1çelerd en b a z ıla r ı s u n ia r d ır :
gmarguee d irectıo n = u p » j
<o1>
<1i»A ltındağ
<11»Ayaş
<11»Beypazarı
<11»Çankaya
<11»Gölbaşı
<11»Kazan
<11»Keçidren
<11»Kızılcahamam
<11»N ailıhan
<11» P o la tlI
<11» ş e r e fi 1koçh isar
<11»Yenimahal1e
< /ol»
</«ıarquee»J
</body»
w u ıt ııt a ıı
«
Gördüğün gibi, <marquee> ve </marquee> işaretlerini <ol> ve </ol> işaretlerinin başına ve sonuna
koyduk. Böylece, liste işaretleri, kayan yazı işaretleri içinde kaldı ve listedeki tüm yazılar kayarak çalışmaya'
başladı.
A nadoto topraktanran o rta böfflaaatöaflte tmlunao A nkaraaın toplam £> a ç s a PunmroaKtadit. Ma flçetarden bazdan şunlardır:
1 Aiöndağ
2. A ı
3. Beypazarı
Anadolu topraktemun orta böhJraûncfe butoıan Ankara'ma toplam İ S ilçesi buhumıaktacta . Bu üç eterden kâzdan şasâatĞ r.
I. Aitmdağ
% Ayaş
3.
Beypazarı
. 4. Ç ankaya .
5, Gölbaşı
6, Kazan
7, Keçiören
S KnakabaraaB»
9, NaMan
1A
Anadolu topraklanan ona bölümünde bulunan Ankara'n» loplara 25 ilçesi bıiumnaktads. Bu üçelerden bazdan şualarda:
8
Kizıkahamaın
9. Natthan;
ç
.■
/■
■»Vj-y».
v--.-.- ■v■
'■
■
■
'-V
ıo PoLıtiı
11
Şereflikoçhisar
12
Vcramahalie
ı ^' ^ ^ ^ ^ ^ S m İS İ m MÎMî M § S ^$ S :S İS xM ^m S S m Mw ^ S !:,
îfcU'
wm$mMs§
ttlftİPlİP
Sayfalarımız Arasında
Köprü Kuralım
Bu derste, öğreneceğimiz köprü kavramı, aslında Word Wide Web'in denilen kavramın temelini
oluşturmaktadır. İnternette sörf yapılabilmesini sağlayan teknoloji olan köprüler, bize farklı vveb sayfaları
arasında bağlantı kurarak, bunların arasında gezinti yapma şansını vermektedir.
Bu derste, Masaüstü'ndeki BenimSitem adlı klasörde bulunan üç sayfayı birbirine bağlayacağız:
* index.html
* hobilerim.html
*yasadigimsehir.html
Yapacağımız bağlantılar sayesinde, şu anda her biri birbirinden bağımsız çalışan üç vveb sayfası bir araya
gelerek bir vveb sitesi meydana getirecekler.
BenimSitem adlı vveb sitesi:
Şimdi öncelikle, Not Defteri 4||||| programının
1
j
[
I
jj
Dosya menüsünde Aç... satırını tıkla.
Imb'İmikİSBI
Yeni
C lrl.N
A f»
C W +Û ] :
Kaydet
Crri-S
Farklı Kaydet,,,
Sayfa Yapıtı,.,
Yaldır,..
Çitel
Ctrt*P
Açılan pencerede sol bölümde Masaüstü'nü
tıkla ve ardından orta bölümden BenimSitem
adlı klasörü çift tıkla. Açılan pencerenin sağ
alt köşesinde gördüğün "Metin Belgeleri f.txt)"
kutusunu tıkla ve "Tüm Dosvaları"seç.
mm
p K
..11AÇ
tS I Am: Masoöitö
İ MaMöstu
•Q * i
Dikenle1
Yent klasör
%5r Sık Kullanılanlar
*9
■Sistem Klasörü
# Karşıdan Yüklem
[ B
Masaustu]
Anttvirus
Dosya klesoru
Son Yerter
5 t Kitaplıklar
asp.net
i Ws*l*r
Dosya Masörü
Müzik
Besinde Sen
Dosya klasörü
te Resimlet
f j Video
5* Btkjıîa.a?
£
Yerel Disk (O )
«3
Yerel disk (Di)
BenimSitem
Ossye klasörü
G
Metıı Belgeleri (' M )
Metin
Ossye Adı:
M
Kodlama: İA N S
iptal
BenimSitem adlı klasörün içinde görmüş olduğun vveb dosyaları arasında index.html'yi çift tıklayarak aç.
.
:;
JA Ç
_
.
n
r
I
-
Mi k
____I
I j j ► BenimSitem
Düzenle 1
# Karşıdan Yüklem
■
mm.? a m
Yeni klasör
T& Sık Kullanılanlar
Masaüstu
‘'g i .Son Yerler
60
Değiştirme tarihi
Tür
§1 hobilerim
23^6.20İÂ 11:52
HTMlBeSae
3,06.201218 16
"3 5 Ö ÎH T i r
HTM l Be^r
j j j inde»
ştj yasadigiımehir
“a Kitaplıklar
U
Belgeler
4 ] Müzik
Resimler
H
ttm
k y ! \ A r j . S fn irrSi
video
jfp Bilgisayar-
Sm Yerel Disk (Cı)
, :r Yerel Disk (D>
Dfisya Adı:
Web sayfasının kodlarını görmüş olmalısın.
H Î M İ Belge
Çosy» Dügen giçim fiftfunöm
<htm1>
<head>
<title>
Selin özdemir'in Web Sitesi
</title>
</head>
<body>
<n style="color:blue; background-color:yel1ow">
<nl>Se11n özdemir'in Web Sitesine Hoşgeldiniz!</hl>
</p>
<h2>Merhaba,</h2> <br>
Ben Selin özdemir. 2002 y ılın ın Eylül ayında Ankara'da dünyaya gelmişim.Kız kardeşimin adı Melis,
0 da 2007 y ılın ın Kasım ayında dünyaya geldi. <br>
<hî>sizlere hem hobilerimden hem de yaşadığım şehirden bahsedeceğim.</h3>
</body>
</html>
Şimdi, aşağıdaki yeni kodları index.html sayfana ekle:
^
g in rie »- N o t D e f t e r i
Dcsya
Düzen
Biçim
Gürünüm
'
“ 1
^
41i
Yardım
<html>
<head>
Selin özdemir'in web Sitesi
</title>
</head>
<body>
<p style="color:blue; background-color:yeliow">
<hl>Selin özdemir'in Web Sitesine Hoşgeldiniz!</hl>
</p>
Ben S e lin özdem ir. 2002 y ılın ın E y lü l ayında Ankara'da dünyaya g elm işit
O da 2007 y ılın ın Kasım ayında dünyaya g e ld i. <br>
<h3>sizlere hem hobilerimden hem de yaşadığım şehirden bahsedeceğim.</\
fcbr><br>l
fca hrefg"hobilerim.html”»Hobilerim iç in tıkla</aj [<br> ]
Ra hrefa”yasadigimsehir.html"»Yaşadığım şehir için tıkla</a> 1
</body>
</htmı>
Kodları index.html sayfana ekledikten sonra klavyenden Ctrl ve S tuşlarına basarak dosyanı kaydet.
Ardından, Masaüstü'ndeki BenimSitem klasöründe bulunan index.html simgesini çift tıklayarak vveb
tarayıcında açılmasını sağla.
h
j
... - İ İ C İ 1î f . C:\Users\selcuk\ Documeniî\D esktop\.Benim îitem \inde<,htm l
Selin Ö zd e m ir'in Wefc Sitesi
Dosya
Düzen
G ü rü n ü m
X
Sık Kullanılanlar
...
T
Araçlar
V ardım
v
*
*
Selin Özdemir'in Web Sitesine Hoşgeldiniz!
: Merhaba,
| Ben Se£n özdemir. 2002 ydmmEylül anoda Ankara'da dünyaya geUşân Kız kardeşinin ad Melis. O da 2007 yıhnm Kasan aymda dünyaya geldi.
' Sizlere hem hobilerimden hem de yaşadığım şehirden bahsedeceğim.
Hobilerim için tıkia
Yasadığım Şehir için tıkla
Kırmızı çerçeve içinde gösterdiğim sayfanın en
gezdirdiğinizde el simge el şeklini alır. Köprü
altındaki değişikliği gördün mü? <a href> ve </a>
üzerinde farenin sol tuşunu tıkladığında hedef
işaretleri arasına yazdığımız metinler, mavi renkte
adrese gidersin.
ve altı çizili olarak görüntülendi.
Ana sayfamızdan index.html'deki köprüleri
Fare imlecini bu yazıların üzerine getirdiğinde
tıklayıp hobilerim.html ve yasadigimsehir.
imlecin el şeklini aldığını göreceksin ^ ) . Bu
html sayfalarına gidebiliyoruz. Peki, tekrar index.
simgeyi tanıyorsun değil mi? Fareyi yazı üzerinde
html sayfasına nasıl geri döneceğiz? Hadi beraber
tıkladığında <a href=""> tırnak içinde yazdığımız
yapalım!
sayfaya gidersin.
İlkönce, Not Defteri programında Dosya
<a> ve </a> işaretleri web sayfalarında
menüsünden Aç... satırını tıkla. Açılan pencerede
kullanabileceğimiz en temel komutlardan birisidir.
sol bölümde Masaüstü'nü tıkladıktan sonra
<a> işaretinin href özelliğine köprü kurulacak
orta bölümde BenimSitem adlı klasörü tıkla.
olan vveb adresini yazarız. Bu işaretler arasına
Pencerenin sağ alt köşesindeki Metin Belgeleri
yazacağımız metinler otomatik olarak mavi renkte
(.txt) yazan kutuyu tıklayarak Tüm Dosyalar'ı seç.
ve altı çizili gösterilir ve fare imlecini üzerinde
BBB
î i j j t
L JO
A J J İ ► BenimSitem
▼
J
------ ------------------------------- _
Düzenle ▼
49
Ara: BenimSitem
Yeni klasör
iH Ad
VC Sık Kullanılanlar
Değiştirme tarihi
jjJ(ar|idanYûklem j
fi 1
a
e
Tür
Aramanızla eşleşen öğe yok.
Ç W Masaüstû ]
'M Son Yerler
İ0Ü Kitaplıklar
s
d Belgeler
Jfı Müzik
E
Resimler
H Video
Bilgisayar
&
Yerel Disk (O )
Dfisya Ad»
—
Kodlama: ANSI
-1 [Metin Beİgeieri (*.bcÖ
▼
âç
^
I ,s
j
iptal
Orta bölümde gördüğün dosyalardan hobilerim.html'yi çift tıklayarak aç.
f
Ay
%
•
Düzenle *
îir Sık Kullanılanlar
A Karşıdan Yüklem
■ Masaüstû
[
H Son Yerler
1
i
Kitaplıklar
J
d Belgeler
fi j
fer a
Yeni klasör
a*
^
H Ara: BenimSitem
:Â u \ h * BenimSitem
•
Ad
Değiştirme tarihi
Tür
cTj hobilerim
23.06.201211:52
HTML Belge
18 index
23.06201218:33
HTML Belge
ş îj yasadigimsehir
23.06201217:35
HTML Belge
Hobilerim.html sayfasına aşağıdaki kodları ekle.
MIKM
9W]f I I * UOVNUI VUIIU~V.VIVI lUIIINy VVIVI . U I UC , I V IIV '9 l4 « t «fVp L C A f A I I V^l I ■V.CIIUC
S e lin özdemir ve Müzik! Piyano çalm ayı ve şarkı söylemeyi çok seviyorum
</marquee>
<P>
<h2> Sevdiğim Müzik T ü rle r i: </h2>
<ul>
<li> K la s ik müzik
</ul>
<br>
<h2>En Sevdiğim M üzisyenler: </H2>
<ol>
<İi> Sertab Erener
<li> c e lin e Dion
<li> Beethoven
</ol>
href= "index.htm l">Geri Dön</a>]
</bodv>
</htmı»
Gördüğün gibi </body> işaretinin hemen üzerine eklediğimiz kodla, hobilerim.html sayfasında bulunan
Geri Dön köprüsüne tıklandığında index.html sayfasına gitme imkanımız oluyor.
e Klarik.mttrik
• Y aban a pop tmmk
• Ttlrkçe pop rnüak
1. Sertab Erener
2. CefcveDion
3. Beethoven
Kırmızı çerçeve içinde gösterdiğimiz Geri Dön köprüsünü tıkladığında, index.htm l sayfasına gidebildiği
göreceksin.
Geri Dön köprüsü oluşturma işini bu defa yasadigim sehir.html sayfası için yapalım. Not Defteri
programında Dosya menüsünden A ç ... satırını tıkla. Açılan pencerede sol bölümde Masaüstü'nü
tıkladıktan sonra orta bölümde BenimSitem adlı klasörü tıkla. Pencerenin sağ alt köşesindeki Metin
Belgeleri (.txt) yazan kutuyu tıklayarak Tü m Dosyalar'ı seç.
151Aç
mm -mi ►BenimSitem J
Düzenle m:
BmmSitem
M
p
!
m- a •
Yer»» klasör
Ad
"Inf Sık Kullanılanlar
[ B
1 !|
w 4f
Yüklem
Tür
M&saöstû 1
% Sor» Yerler
Kitaplıklar
U
Belgeler
tğt Müzik
§gi Resimler
flf Video
M Bilgisayar
f e Yerel Disk (Cı)
«SU Yerel Disk (Of)
Dfisya Adt;
i
Metin
KoAjmes uMSL
T.txt)
iptal
iti
a
Orta bölümde gördüğün dosyalardan yasadigimsehir.html'yi çift tıklayarak aç.
öiktnte ff
...
■ Yen» İdas&r
ıs
-
a
#
Adi
Değiştirme teriN
İH Katidan Yüklem
•|fj:hetritorim
23.Û6J012 Î2 J0
HTML Belse
İH Maîaüstû
m
BM M U U 33
HTML Belge
Sik Kullanılanlar
f§ Sen Yerler
£sj Kitaplıklar
H j Belgeler
J> MtteUc
'T8
i
) mûm
I ®yasaol»gimseh*r
i
1
yasadigimsehir.html sayfasına aşağıdaki kodları ekle.
îy ?
h tm l
seê
bu ııç e ıe ra e n nazı ia n ş u n ıa ra ır;
<marquee d ire ctio n *u p »
<ol>
<1i >A ltın d ağ
<li>Ayaş
<1i »Beypazarı
<1i»Çankaya
<11»Gölbaşı
<11»Kazan
<11»Keçiören
<1i » K iz ı1cahamam
<11»N ailihem
<11»Polat1ı
<1i » ş e re fi i kochi sar
<11»Yenimahal1e
</ol>
</marquee»
Eça h re f= "i ndex. html "»G e ri Pön</a»~]
</body»
</html»
Göfdö|fln gibi </body> işaretinin hemen özerine eklediğimiz k©dla, yasadigimsehir.html sayfasında
bulunan Geri Dön köprüsüne tıklandığında index.htm( sayfasına gitme imkanımız oluyor.
||fj C:\U*ers\selculADocuments\Desktop\Ben(rınSıtem\y«sadigirra«hir.html
ÜSetlinYaşadığıŞehinAnk...
Peşya KHteen Görünüm S& kumandanlar Ar»jfrt Yardım__________
___________
__________________________ __________
Başkent Ankara
Ben,
Başkent i Ankara'da yaşıyorum. T&pbm oüftısu 5 radyon av arad a olan Ankara, aym zamanda fifltenHan e» böyük sJdodi
Aftsdofa toptakfattt»» o tu HSürrıünde hdm m Ankara'n» topiam 25Mçe^fe*dttQ«sikü*d», Be İçderdea bazdan şeoterdsr,
0MptMfr\4İı f5 V*& it* /
^
' ^'V
^ - Jl** * ' 1
7
İL
iW^ ^
•
v5 *' VV/ ' < { *
‘-^vSir*vV’V’"V'
İV
^41"?'**!ı*,ı^-f»î* '’-v'i
Başka bir vveb sitesine köprü kurmak
Şu ana kadar sadece Benim Sitem adlı klasörümüzde bulunan vveb sayfaları arasında köprü kurduk. Peki,
Selin hobilerim.html sayfasında bulunan "En Sevdiğim Müzisyenler" başlığı altındaki Sertab Erener'in resmi
vveb sitesine bir köprü kurmak isterse ne olacak?
Fazla değişik bir şey yapmamıza gerek yok aslında. Sadece Google'a gidip Sertab Erener'in vveb sitesinin
adresini öğreneceğiz. Gerisini zaten bildiğini göreceksin.
W eb tarayıcının adres kutusuna www.aooale.com.tr yaz ve klavyenden Enter tuşuna bas.
Google
Google penceresinde arama kutusuna "Sertab Erener"yazıp Enter tuşuna bastığında Sertab Erener ile ilgili
bulunan w eb sitelerinin listesini ve adreslerini görürsün.
■
I I» !l https /wviiv,\goo<yl»com4r/*tv<=tr&cutput;ieirch&aciıentgpyy-»b&qrSertab*erener&ogsSertab*«en#f&aa=f&aqı=g4&aqis&gsjxhp-3.X L7572Î-S1255.C
sertab erener • Google'da Ara x
Dosya
Düzen
»Siz
Gcrünüm
Arama
Sik Kullanılanlar
Gürseller
Ptsy
Araçlar
O
m *
—
m ♦
’ _ Z T Z 2
Vardım
H a b e ri»
Gmait
Dokumanlar
Takvim
Çeviri
Blogger
Daha fazlası *
t j u EüuüU
Sertab erener
Arama
Yakİ«%ffc4.768Ü8Ösonuç bulundu|S,44 sürüye)
He» şey
Sertab Erener Resmi Sitesi; Sertab Erener Albümleri. Sarkılan Dinle.
Görseller
Sertab Erener Resmi Sitesi Sertab Erener Hakkında Sertab KSpleri İzle, Şarkıları
Dinle, Şarkı Sözleri ve Dahası...
Videolar
Haberler
Dahe fazla
Ankara
Konumu değiştir
Wefo
Türkçe yazılmış sayfalar
Sertab Erener -Vikıpedi
ir.
Sertab Erener (d. 4 Arafck 1964; İstanbul). Türk pop şarfctcıst. 19901ar ve 2000'ler
boyunca sürekli albümlere imza atan sanatçı, 2003 yılındaki Eurovision Şarkı —
Kategori Sertab Erener -Albüm -Here i Am
Sertab Erener (sertaberenerl on Tvvitter
toSter com/serteberener
Loading secim te be taking a whife. Tvvitter mey be över capadty or experienclng a
momentti? hiecup. Try again or vtehTvritter Steius for mora informetion
Kırmızı çerçeve içinde gördüğümüz gibi Sertab Erener'in vveb sitesinin adı www.sertab.com. Artık adresi
bulduğumuza göre hobilerim.html sayfasına istediğimiz köprüyü kurabiliriz.
İlk önce, Not Defteri programında Dosya menüsünden Aç... satırını tıkla. Açılan pencerede sol
bölümde Masaüstü'nü tıkladıktan sonra orta bölümde BenimSitem adlı klasörü tıkla. Pencerenin sağ alt
köşesindeki Metin Belgeleri (.txt) yazan kutuyu tıklayarak Tüm Dosyalar'ı seç.
i Aç
•I 4f j
►fanimSitem _J~
Düzenle »
Ara: BenimSitem
m *
Yeni klasör
Ad
'hT Sık Kullanılanlar
jg. Karşıdan Yüklem
a «
Tür
[ M Masaüstû ]
12 Son Yerter
Kitaplıklar
f§ Belgeler
j ) Müzik
S
Resimler
9 Video
flP Bilgisayar
fe Yerel Disk (C:)
r a Yerel Disk (D-.)
Dgsya Adı:
Kodlama: ANSI
Orta bölümde gördüğün dosyalardan hobilerim.html'yi çift tıklayarak aç.
%■ ,
—
fa ife jİM l ^ * Be™mS*«n
Düzenlt
▼
Yeni M
..
f
jü
v a m
23.06.201211:52
HTML Belge
■ Masaüstü
f j înctac
23.06.201218*33
HTML Belge
'ÜŞ Son Yede'
® yasadigimsehir
23136.201217:35
HTML Belge
hobilerim
|
» j * f m Ara: SemmSiten
—-A
Sık Kullanılanlar
jg Karşıdan Yüklem iL c
?;
Ad
|
........
;£§ Kitaplıklar
;’»! Belgeler
«j
Değ iştırme tarihi
Tor
H ob ilerim .h tm l sayfasına aşağıdaki kodları ekle.
V i n ç t i V |U C C
9 V I I C -
U a ^ U I
U U IİU ~ V U IU I
• U 1 I İIN. ,
V .U I U I
iU IU C )
I U l I U 'd
İ4 C .C . .
Selin özdemir ve Müzik! Piyano çalmayı ve şarkı söylemeyi çok
</marquee>
<p>
<h2> sevdiğim Müzik T ü r le r i: </h2>
<ul>
< li> Klasik müzik
< li> Yabancı pop müzik
</ul>
<br>
<h2>En Sevdiğim Müzisyenler: </H2>
< o l> ________________________________
<1 i >L<a hrefg"http: //www, sertab. com"^ Sertab Erener
< li> Celine Dion
< li> Beethoven
Listemizde Sertab Erener'in bulunduğu satırda yaptığımız değişikliği görüyor musun? Sen de gerekli
eklemeleri yaptıktan sonra klavyeden Ctrl ve S tuşlarına basarak hobilerim.html dosyasını kaydet. Daha
sonra, Masaüstü'ndekl BenimSitem adlı klasörde bulunan hobilerim.html simgesini çift tıklayarak vveb
sayfasının vveb tarayıcıda görünmesini sağla.
• Klasik millik
• Yabancı pop müzik
• Türkçe pop müzik
CL SgjtffeBffglğf J
İ. Cefatü**
3.
Beethoven
Sertab Erener köprüsüne tıkladığında, ünlü müzisyenin vveb sitesine gidersin. D ene bakalım!
92
K
İE d ll
l http: r,..
Selin Özdemir'in Hobileri
Dosya
D uan
COrunum
r
~
m-
sertaİ3,cem
P*
Sertab Erener Resmi Sitese S...
Sık Kullanılanlar
Araçlar
X
■m
# M |r
«.
«
Yardım
sertaberener
wi m w a
hakkimdr v id e o la r fo to pahlar m ü * sertas ne v a riy o r? e tk in lik le r
sertaberener
—
M
d
İ M
Sertab Erener Fanlar» araşma sen 4e teatıfi
B
C o n n ed w ith Facebook
hayran
Dosya m enüsünde Aç... satırını tıkla.
E-posta'ya köprü kurmak
Web sitene girenlerin e-posta adresini tıklayarak
seninle düşüncelerini paylaşmalarını istem ez
miydin? Örneğin, Selin arkadaşımız, vveb sitesini
L
Yeni
Ctrl+N
A ,„
CM *0 1!
kullananların [email protected] e-posta
Kaydet
adresine görüş ve düşüncelerini göndermelerini
Farklı Kaydet...
istiyor.
Ctrt+S
Sayfa Yapısı...
Yazdır»,
Ctrl-P
Şimdi, Masaüstü'ndeki BenimSitem adlı klasörde
bulunan index.html dosyasına "Görüşlerini
paylaşmak için bana e-posta gönder" satırını
ekleyeceğiz. Bu satırı tıklayan kullanıcının
bilgisayarındaki e-posta yazılımı otomatik olarak
açılarak Selin'in [email protected] adresine
e-posta gönderm eye hazır bir şekilde bekleyecek.
Çıkış
Açılan pencerede sol bölüm de Masaüstü'nü
tıkla ve ardından orta bölüm den BenimSitem
adlı klasörü çift tıkla. Açılan pencerenin sağ
alt köşesinde gördüğün "Metin Belgeleri 0 x 0 "
kutusunu tıkla ve "Tüm Dosyaları"seç.
Şimdi öncelikle, Not Defteri ^
j programının
m*
▼
1MMasaûrtü ►
Dönenle ▼
K- a m
<fc
t
it
.İt- KırştdanYüklem
[ 91 Masaüstü 1
S
Son Yerler
j g Kitaplıklar
Hl Belgeler
Müzik
Ü ) Resimler
3
▼14 f |;:| Ara: Mmaûstö
Yeni klasör
W Sık Kullanılanlar
M i
pi
I
Video
H
Sistem Klasörü
Antrvirus
Dosya klasörü
asp.net
Dosya klasörü
Şasimi# Sen
Dosya k la s ö r ü
BenimSitem
Bilgisayar
Dosya klasörü
j * Yerel Dîsfc <C:)
c-i Yerel Disk 0t)
3
Ü
Dgsya Adiî
Metin Belgeleri (*.trt)
BenimSitem adlı klasörün içinde görmüş olduğun vveb dosyaları arasında index.html'yi çift tıklayarak aç.
( ^ * | js ► BenimSitem
Düzenle ▼
m
Ad
na i
J t Karşıdan Yüklem j
9 1 Masaustü
& î hobilerim
5jj| ^°n Yerler
Jjf Kitaplıklar
Değiştirme tarihi
[ W\ index
f f | yasadi-gimsehir
jD |
| Ara: BeoimSjtem
Yeni klasör
İ k Sık Kullanılanlar
j
. . . i 4* !
w
a
«
Tör
23.06201211452
HTML Belae
23JS62ÜI21&16
HTML B eje
23M2012 Î7;3!
HTML Belge
i S]
13 Belgeler
Müzik
m I Resimler
j
9
Video
AP Bilgisayar
He Yerd Disk (0 )
l
Yerel Disk (D;)
**
4
,.v,.
Dfisya Âdr.
M*
t
■
•r- ] fTüm Dosyalar
Kodlama; ANSI
&
>
İptal
i:
^
uvuy*
<p s ty le * "c o lo r:b lu « ;
background-color: yellow ">
< n l>S elin ö zd e m ir'in w«b s ite s in e H oşg eld in iz!< /h l>
</p>
<h2>Merhaba, </h2> <br>
Ben S e lin özdemir. 2002 y ı l ı n ı n E ylü l ayında Ankara'da dünyaya gelm işim .Kız kardeşimin adı M elis.
0 da 2007 y ı l ı n ı n Kasım ayında dünyaya g e ld i. <br>
<h3>sizlere hem hobilerim den hem de yaşadığım şehirden bahsedeceğim.</h3>
<br><br>
<a h ref="hobi1e ri m.html">Hobi1e ri m iç in tıkla< /a> <br>
<a hre f=”yasadigim sehir. html">Yaşadığım ş e h ir i ç in tık la</a>
kbr>)________________________________________________________________________________________________
[ea h ref= "mai 1t o : se l inozdemi r@l i v e . com">Görüşl e r in i paylaşmak iç in bama e-posta gönder</a>)
</body>
</html>
Kodları ekledikten sonra klavyenden Ctrl ve S tuşlarına basarak index.html dosyanı kaydet.
M asaüstü'ndeki BenimSitem adlı klasörde bulunan index.html simgesini çift tıklayarak, sayfanın vveb
tarayıcıda açılmasını sağla.
O
p
C:\Users\selcukADocument5\De5ktQp\BeflimSrtem\index.htmt
J
$jp Selin Ö zde m ir'in W eb Sitesi
Dosya
D üzen
G ü rü n ü m
^
^
Sık K uüam ianlar
4%0 .
|f §
Araçlar
fJ
M
İ D
İ N
İ
M
M
£ L * Jt a JI ,ıılu lM * .
m .jM
Vardım
Merhaba,
Ben Selin özdemir 2002 vıkun Eyhil ayında Ankara'da dünyaya gekmşanKız kardeşimin adı Meis. O da 200? yıkan Kasın aymda dünyaya geldi
Sîzlere hem hobilerimden hem de yaşadığım şehirden bahsedeceğim.
BofefedBa id n tflda
V a s a d & m Ş e h ir iç in s k k
^ G ö r ü ş l e r i n i p a y l a ş m a k te in b a n a e - p o s t a g ö n d e r
J
Kırmızı çerçeve içinde gösterdiğim köprü tıklandığında, kullanıcının bilgisayarında hangi e-posta gönderm e
programı kuruluysa, otomatik olarak çalışarak [email protected] adresini alıcı kutusuna ekler.
ppl H
I
■ *
| BM
I
•
Adsa - İlet» (H TM L)
*
Ekle
Seçenekler
■Sil ^ K o p y j l j
T
& 1&
f» j
| Kime...
i jsefinozdemr(Btve.com
j
j
Bilgi...
Gözden Geçir
T
A ‘ a* 1 ‘3
yapıttır
K
♦
j F Biçtin Boyamı j
Pano
Metni Biçimlendir
A
•{ |
i
^
îjt; t ü
Temel Metin
İS 9 ı a
m& s sasr
Dosya
Adres Adlan
Defteri Oenetle ; Eki e
Adlar
öğe
Ekle *
Ekle
imza
*
m a m
-
©
T İzle f Yüksek Önem Düzeyi
# Dü}ük önem Düzeyi
Etiketler
fi
yakınlaştır
Yakınlaştır
> ®ı
I Konu;
index.html'deki "Görüşlerini paylaşmak itin bana e-p osta gö n d er"satırı tıklandığında, benim
bilgisayarımda Microsoft Outlook programı e-p osta gö n d erm e aracı olarak çalışmaya başlıyor.
fl Bölüm
Resimlerimizi ekleyelim!
Bu b ö lü m d e öğreneceklerim iz
Resim türleri,
Resim özellikleri,
Web sayfasına resim,ekleme.
Dosya yolları,
Web sayfasındaki resme köprü kurma,
Resimlerimizi Ekleyelim
Resim dosyası türleri
Eminim biliyorsundur ki her bilgisayar dosyasının
da bilgi verir. Örneğin, .bmp ve .tiff uzantılı resim
dosyaları sahip oldukları resimleri daha net ve
bir uzantısı vardır. Dosya uzantıları bir anlamda
kaliteli gösterirken, .jpg, .gif veya .png dosyalarının
bilgisayar dosyalarının soyisimleri gibidir. Bir
sahip olduğu resimlerin kalitesi daha düşüktür.
dosyanın uzantısına bakarak onun ne tür bir
Sakın hemen aklından "demek ki web sayfalarımızda
dosya olduğunu ve çalışmak için hangi programa
.bmp veya .tiff uzantılı resimleri kullanacağız"diye
gereksinim duyduğunu anlayabiliriz.
geçirme! Tam tersi, sayfalarımızda kesinlikle .bmp
Örneğin:
veya .tiff uzantılı resimleri kullanmayacağız!!! Neden
mi? Çünkü bu .bmp ve .tiff uzantılı dosyalar çok
* Microsoft Word programında oluşturulan
kaliteli resimler göstermekle beraber, dosyalar
dosyaların uzantısı .doc veya ,docx: Mektup.doc,
oldukça büyük oluyor.
görevlistesi.docx gibi
* Microsoft Excel programında oluşturulan
dosyaların uzantısı. xls veya ,x lsx : Maliyet.xls,
sınıflistesi.xlsx gibi
* Web dosyalarının uzantısı .html veya .htm
index.html, hobilerim.htm g ib i:
Benzer şekilde, resim dosyalarının da uzantıları
Küçük eşya taşıyan kamyon hızlı giderken...
vardır:
*.bmp
*.jpg
*.gif
*.png
* .tiff
Bunlar bilgisayarlarda en fazla kullanılan resim
Büyük eşya taşıyan kamyon o kadar yavaş ilerler ki
dosyası türleridir. Peki, farkları nedir? Resim dosya
onu herkes geçebilir!
uzantısı, sahip olduğu resmin durumu hakkında
İnternette d e büyük resim dosyaları ile hazırlanan
Böylece bilgisayarında «bmp» uzantılı dosyaları
vveb sayfaları çok yavaş bir şekilde açılırken,
listelemiş oldun. Bunlardan herhangi birisinin
küçük resim dosyaları ile hazırlanan vveb sayfaları
üzerinde farenle sağ tıkla ve açılan m enüde
çok daha hızlı görüntülenir. Bu sebeple, vveb
«Kopyala» satırını tıkla.
sayfalarımızda .gif, .jpg veya .png uzantılı resimler
B iA Jj
kullanacağız.
■
aJ
u r ııe ıu ju ıu r ıııe ıı u c ıı t u r ic
Gönder
Şimdi resim dosyaları arasındaki dosya büyüklüğü
sorununu daha iyi anlamamıza yardımcı olacak
bir örneğe bakalım. Ekranının sol altında bulunan
Başlat düğm esini tıkla ve açılan penceredeki kutuya
*.bmp yaz.
■P" 'M .. . ıı'lTıi ...... . '
Belgeler (721)
[d|i Background.bmp
W productLabel.bmp
£. Background.bmp
M A_ActivationPrivacy_MD_N.bmp
idBi Bolum5-resim.bmp
IdEl splash.bmp
l&:, A_Bullet_MD_N.bmp
|§§ A_PhoneActiv8tion.MD.N.bmp
f ) Diğer sonuçlar
{jj£j A.PreductUcense.MD_N.bmp
£ş CJCey_Md_N.bmp
B il greentick.BMP
*.bmp
Kap
H redX.bmp
S
xball.bmp
B
xballl.bmp
üŞBl stylekon.bmp
,£k Background.bmp
S i productLabel.bmp
Daha sonra Masaüstü'nde boş bir noktayı sağ tıkla
S i Bolum5-resim.bmp
ve açılan m enüde "Yapıştır" satırını tıkla. Üzerinde
M splash.bmp
d en em e yapacağımız bmp uzantılı dosyayı
masaüstüne kopyalamış olduk.
\ p Diğer sonuçlar
f j *.bmp
jje
/s i, i * -
ı ı f l h
#
Kapat ~~j
1 II
j
Ben şu .bmp uzantılı resim dosyasını kullanacağım.
Resmin kalitesi nasıl? Fena değil. Şimdi bu resmi bilgisayarımızda bulunan Paint
programını
kullanarak .jpg uzantılı yapalım v e aradaki kalite farkına bakalım.
M asa ü stü 'n d e bulunan Resim adlı .bmp uzantılı resmi sağ tıklıyorum v e açılan p en cered e Birlikte aç
satırını tıkladığımda yeni açılan yan p en cered e Paint
Bununla payla;
|
vVcndetMFetoğrafGörüntüleyicisi
§|
■
Ş*
MnAMKüv* Mode Mateer
VAndenvs
üs*PfroteGelery
: İ Ş VVmdens Medu Çenter
Varsayılan programı seç...
Arşive ekle.,.
ArşiveeWe "resim,rar"
Sdoffcr ve «post» gönder...
Sıb)t* 'fttân-rM1' ve epesti gönder
Öneefci Sürümleri Geri Yükle
Gönder
jfîğ programını tıklıyorum.
Resmin, Paint programı içinde açıldığını göreceksin. Paint programının sol üstünde bulunan Giriş
sekm esinin solundaki açılan m enüyü tıkla
Giriş
B Û B I
Görünüm
Açılan p en cered e Farklı Kaydet satırına g eld iğin d e sağ tarafta görüntülenen JPEG resmi satırını tıkla.
Mm
I £NSfCNM
j Fotoğrafı
JUirnUiaUaÂatk^M
mtmmmmmm
r*
=
IM&O.
■
çınaıı yüksek t a lıtr s î kaydedin«
D
B «*>*«
f P N İ ......................
3
f Her turlu r«m i yüksek kifûtiit kıy$t$*n vt
btsgiüjarınıKla kutlarsın.
i
| ipFremi
*“®*r
6»st bâr (»İM dutûk fcaHted* kaydedin « e»
postada veya W«tı ı e kullanm-
| j gîğerb*Çimta
1
lu ^ ttim ola» dosya Haleni arasından « 0 » yapmak
ifin farktı Kaydet ı*etıjım kutusunu açın-
J-ponad* gönder
■ f i j Masaustu *rka filanı oUrak »y#rl*
0|e*tikler
i p . £a»nt Hakkında
Açılan Farklı Kaydet penceresinde, sol bölü m d e Masaüstü'nü tıkla. Pencerenin altında Dosya Adı
kutusunda "resim" v e Kayıt türü kutusunda ise "JPEG" ifadelerini görüyorsun.
Düzenle »
Yeni klasör
Q
M Karşıdan Yüklem | |
M, Masaustu
J
^
|jp *
—
s Kitaplıklar
Sistem Klasoıu
;
-0
3
Sön Yerler
Sistem Klasörü
^8 Kitaplıklar
0
Belgeler
^
M oâk
'İ L
Bilgisayar
f l P P H f Sistem Klasörü
Resimler
feiL
4- Klasörü
v K Sistem
£§ Video
'♦
ŞİŞ Bilgisayar
Sfej
*1
.. m M
AntiviruS
(^ ^ a A d j^ e ttm ^ ^
]
j K a y ıt t û r ü : JPEG C ^ » f f ^ e g ^ p ç % î ? j j |
* W»6H«fiGa*
j
11
Ipm
i
Kaydet düğm esini tıkla, .bm p uzantılı resim dosyası
şimdi d e .jpg uzantılı olarak kaydoldu.
M asaüstü'nde iki adet resim adlı dosya var. Şimdî
JoMjratyıü:
ö n c e birincisine çift tıkla ve resmin netliğine ve
J P E G « a i{j0 8 )
Ektikte a ç
kalitesine bak. Sonra o pencereyi kapat ve ikinci
Konum:
C:\ü#erı'®eÛS@euiften^s0^dsp
{jkryut:
resmi çift tıkla ve onun netliğine ve kalitesine bak.
J
VWndews ftaoğıafSÖMrıiû [s Oeğlför... ^
80.0 KB (82.007 b ^ t ) J
»ekteki boyut:
84.0 KBC86.01S bayt}
Oluşturma
24 Haziran 2$f28ugûri, SdikSis&ses
D e b im e :
24 Haziran 2®12lkıgif% f t d s i f e f e »
önem li farkı şimdi göreceğiz. Şimdi ilk resim
Grifhn;
24 Haziran 2012 Buşun. 8 dakika önce
dosyasının üzerinde sağ tıkla ve açılan pencered e
Ozniefikier
§ 3 Sait okunur
Arada çok önem li bir fark gördün mü? Cevabım
duyar gibi oluyorum! Galiba "hayır"dedin. Esas
GeSpiş,.,
Özellikler satırını tıkla.
m
M asaüstu a rta planı olarak ayartı
mtmk
Y aaİtr
54a* y ö nü nd e döndür
Saa*
y&j&im
terem * döndür
Baktığın dosya BMP uzantılı dosya ise şu ekranla
karşılaşırsın:
ISET Smart Security i t tara
Gdişrraş seçeneldef
Birlikte aç
Sunun la paylaş
Arşive ekle...
Arşive ekle "resim .rar'
Sekiştir ve eposta gönder...
Sdoşiır" resim.rar' ve eposta gönder
I
Bdkteaç
Önceki Sürümleri Geri YiüUe
Gönder
Kes
5
Windcw Fofoğr^ Goontu
Derstir
C\Users\selcuk\Döoumert3\Desktop
[m
Dekteki boyut:
549 K B1562 554 bayt}
552 KB (565 248 bayt)
Kopyala
Ksayoi Oluştur
m
Okijtuma:
24 Haziran 2012 Buğun. 55 dakika önce
Değiştim»
24 Hssran 2S12 Bugün. 1 saat önce
Enşm
24 Haâran2Q12 Bugün. 55 dakka önce
Yeniden A d W r
Öêllildtr
Oımteöder
3Sa*okurajr
Ö G izlı f
Özelliklerine baktığın dosya, JPEG uzantılı dosya ise
şu ekranla karşılaşırsın:
Taman
|
iptal
j
vygsia
JPEG uzantılı dosyanın büyüklüğü 80 kilobayt iken,
BMP uzantılı dosyanın büyüklüğü 549 kilobayt.
Sence hangisini taşıyan kamyon daha hızlı gider?
Gigabyte: 1 gigabyte 1024 m egabyte
Veya se n c e hangi dosyanın bulunduğu vveb sayfası
değerindedir.
daha hızlı açılır?
Sayfam ıza resim ekleyelim
Kilobayt nedir diye soruyorsun galiba.
W eb sayfalarına resim eklem ek için <img> işareti
Bilgisayarlarda saklanan verilerin hafızada
kullanılır. <img> işaretini ve özelliklerini kullanarak
kapladıkları alanı ölçm ek için aşağıdaki birimler
sayfamıza resimler ekleyebilir, genişliğini ve
kullanılır:
boyutlarını değiştirebiliriz.
• •
Sayfamıza resim eklem ed en ö n c e yapm am ız
Gigabyte
gereken çok önem li bir şey var: Ekleyeceğimiz
W Megabyte
resimleri, vveb sayfalarımızın olduğu klasörün
Kilobyte
içindeki bir klasörde tutmak!!!
Byte
Sayfana eklem eyi düşü ndü ğün .jpg, .gif veya .png
Bit
uzantılı resimleri M asaüstü'nd ek i BenimSitem
adlı klasörde yeni oluşturacağımız resimler adlı
Bit: Bilgisayardaki en küçük veri boyutu birimi.
klasöre ekleyeceğiz.
Byte: 1 Byte 8 bit'tir. Ekrandaki bir h a r fi byte
Masaüstü'ndeki BenimSitem adlı klasörü aç ve
değerindedir.
boş bir yerde sağ tıkla. Açılan m en ü d e Yeni satırını
Kilobyte: 1 kilobyte 1024 Byte değerindedir.
tıkla v e yanında açılan küçük p en cered e Klasör
satırını tıkla.
Megabyte: 1 m egabyte 1024 kilobyte
değerindedir.
Klasör
Kısayol
Sık Kullanılanlar
$ Karşıdan Yüklem
M Masaüstü
!H|Son Yerler
4
W
& 1
WJ
hobileıim
indec
Görünüm
yasadigims
ehir
>i j j |
Gruplandırma ölçütü
►!
Bu Masörü özelleştir...
Müzik
tt
Kişi
Microsoft Word Belgesi
Journal Belgesi
Microsoft PovverPcint Sunusu
S
Microsoft Pubiisher Belgesi
^
WinRAR arşivi
Q
Metin Belgesi
A T I MFC Trace Tool settings füe
Kısayol yapıştır
8
3 öğe
d§]
Yapıştır
İ p Resimler
1
Bit eşlem resmi
Sıralama ölçütü
Yenile
i
Microsoft Access Veritabanı
Şt
153
►1
m
’Ş ğ Kitaplıklar
U Belgeler
3 ]
Bununla paylaş
►i
Paylaşılan Klasör Eşitleme
►1
1
n[ â
XMînd VVorfcbook
WinRAR ZIP arşivi
Evrak Çantası
Oluşturulan klasörün, adını değiştirmek üzere Yeni Klasör yazılı alana resimlerim yaz.
Düzenle ▼
Sık
^ Aç
lötaghğaêklejj^
Bununla
paylaş ▼
E-posta
Yaz
Yeni tela
Kullanılanlar
jg. Karşıdan Yüklem
■
Masaüstû
index
H Son Yerler
yasadigims
ehir
Klasörün adının değiştiğini göreceksin.
(
il
* f [ij Ara: BenimSitem
ı -"I j, » BenimSitem ►
Dikenle ■*
^
Aç
r--__
Kitaplığa ekte r
Bununla paylaş
E-posta
Yaz
Yeni klasör
i-f Sık Kullanılanlar
,jş. Karşıdan Yüklem i
% Masaüstû
% Son Yerler
^Sr j
hobilerim
inde*:
yasadigims
ehir
Şimdi yapman gereken, w eb sitendeki sayfalarına eklemek istediğin resim dosyalarını resimlerim adlı
klasör kaydetmek olacak.
Selin, sevdiği müzisyenler olan Sertab Erener'in, Celine Dion'un ve Beethoven'in resimlerini hobilerim.html
dosyasına ekleyecek. Bu yüzden, G oogle Görsel aramaları kullanarak, bu kişilerin resimlerini, resimlerim adlı
klasöre ekleyecek.
Web tarayıcının Adres çubuğuna aooale.com .tr yaz ve klavyende Enter tuşuna bas. Açılan G oogle
sayfasının sol üst bölüm ünde bulunan Görseller köprüsünü tıkla.
vg009te.ccm.trimghp?îıi=tr€öae=wi
(âlhttps
^İ0ms9»eS<)ıwH«
G crw w r^Sı|düjtorabnlar
Düzen
SIz
♦Siz
Aram a Ii1 Gorsefier
G ö rs e le r i1 Pfay
mt
Araçlar
*i
Vardım
Haberler
Gm aiİ
Dokumanlar
Takvim
Çeviri
Blogger
Daha fazlası *
, Ggörsel
o arama
o g le
as
m P P 11
Arama kutusuna önce Sertab Erener yazıp Enter tuşuna basıyoruz.
MU»
ftTtferaaiich&hktf&wure«shp&b«fx
Dosya
Düsen
-»Sîz
Gorurıüm
Aroma
S»k KuSaralaniar
6 ö O e lk r
Google
i a t M - erener
2§eq= sertab-efeftö&ag=f&asjraglCMkarjk&gsJs sm§JL0îl0.252!9$-254342
l l i i l I I | l |y il3 illi:,;; ,lö ii i l ^ s l İ S l t i İ t a l
|f § sertab erener - Googteda Ara x L
P&y
Araçlar
Vardım
Haberler
Gmail
O o lâ B m İB r
sertab erener
Arama
Hetşey
|
sertab erener esaavâsian satsfe «ener bu böyle sertab erener a ç * adete*
Gorseîîar
Hsfeoter
C-afta farte
Herhangi bir zaman
Son 24 saat
S ü lM ta
Ö m l a n lk M M *
Bulunan resimlerden ilkinin üzerinde sağ tıklayıp Resmi Farklı K aydet... satırını tıklıyoruz.
te llili
G O ü d e
sertab erener
Arama
YaMaşdc t 600 000 sonuç bulundu (0.30 saniye)
Bağlantıyı Aç
Her şey
Bağlantıyı Yeni Sekmede A ;
Görseller
Bağlantıyı Yeni Pencerede A ç
Hedefi Faildi K ayd et,.
Videolar
Hedefi Yardır
Haberler
Deha fule
^R«miFMj*Kayd^-^^"
Resmi Gönder...
Resim Yardır...
Herhangi bir zaman
Son 24 saat
Son 1 hafta
Resimlenme Git
A ıta Plan Olarak Belide
n a zlim .n et
Öze* aralık belirte
400 * 300 - Sorup
Erener Kimdir Biyoç
Benzer Diğer boyut
- v n m
Tum sonuçlar
Konuya göre
»
S
r
“sor ■
Kopyala
Kaayotu Kopyala
' Yaptır
Tümünü Seç
Açılan pencerede, solda bulunan Masaüstü'nü tıkladıktan sonra orta bölümde BenimSitem'i çift tıkla.
Ardından, biraz önce oluşturduğumuz resimlerim adlı klasörü çift tıklayarak aç. Son olarak, pencerenin
altındaki Dosya Adı kutusuna Sertab yaz ve Kaydet düğmesini tıkla.
m
■jş Resmi Kaydet
K jS K ; , i9 1 I
► BenimSitem a resimlerim I
Oosenle *
İ T S& Kullanılanlar
M Arar resimlerim
f7 M Masaustü
M5°**V«f«r
D e ğ iştirm e ta rih i
ra
Jj. Rarydan YOİikffl; i
^
» |
fi 1
Yeni Maser
] |j
Tür
A r a m a n ız la e ş ie ş e n ö ğ e y o k .
I
Kitaplıklar
H Belgeler
Mâsât
ÜJ
HH Resimler
İ l video
'İÜ Bilgisayar
Öfisya Adt; sertab
(s
Kayıt tünü [JPEG C jpg)
I Klasörleri Gizle
[ f
jgjS
İ] [
İptal
Aynı yolu izleyerek Celine Dion v e B eeth oven 'in resimlerini d e G o o g le 'd a n bulup M a saü stü 'n d ek i
BenimSitem adlı klasördeki resim lerim alt klasörüne kaydet. Aşağıda resim lerim adlı klasörün üç resmin
d e kaydedilm iş halini görüyorsun.
U
► BenimSitem ► resimlerim
'
Kitaplığa ekle '
Düzenle
, f Sık Kullanılanlar
■» |
Slayt gösterisi
Bununla payla;
Yaz
pj 4« j; rttimieriftı
m
Yeni klasör
~a
Karşıdan Yüklem
H i Masaüstü
Son Yerle
beethoven
Q
celinedion
sertab
Kitaplıklar
®
Belgeler
J ) Müzik
iğ i Resimler
ü
Video
Şimdi, Not Defteri program ında Dosya m e n ü sü n d e n A ç... satırını tıkla. Açılan p e n c e re d e sol b ö lü m d e
M asaüstünü tıkladıktan sonra orta b ö lü m d e Benim Sitem adlı klasörü tıkla. P encerenin sağ alt
M M
llllllıfiill
C
M
î
► BenimSitem' "^j|
Düzenle »
| | Âtw
■w
ıs -
Yen, Massr
Değdirme tarihi
SıkKollemtanlar
® Karşıdan Yukiem
|1
‘S i Son Yerler
!İ
1
JŞ) Belgeler
J> Müzik
|
£ * Resimler
9
a
m
’ Tur
Anmmüts eşleşen sğe yek.
T 91 Mauöstü 1
Ç* KitepMder
P j
jtt
Video
i9 Bilgisayar
& Yerel Disk (0)
Yerel OtsMO:}
-
nı
<
...
.... . . ^ 4
•r
Basya Adı:
Kodlama! l^ S iİâ
guletin Belgeleri (M Ü) ■
.
flt.İ f
âî.
W tr, ^
s ;
!
!
M
î
Orta b ölü m d e görd ü ğü n dosyalardan hobilerim.htmryi çift tıklayarak aç.
3 As
j .. I ,ı ► BenimSitem
^
D ü z e n le
»
|
]‘]
T
Masaüstû
^|fj Son Yerler
!§§ Kitaplıklar
_ .
p |
A r o .- B e n i m S i t e m
a
Ad
fi
#. Karşıdan Yüklem
|
1
Y e n i k la s ö r
-T Sık Kullanılanlar
■
—
hobilerim
Değiştirme tarihi
Tör
m
2 3 X 1 6 3 1 2 1 1 :5 2
H T M L B e lg e
Ö] index
2 3 .0 6 .2 0 1 2 1 8 :3 3
H T M L B e lg e
f ö yasadigimsehir
2 3 .0 6 .2 0 1 2 1 7 :3 5
H T M L B e lg e
i
Aşağıda kırmızı ç erçev e içinde g örd ü ğü n kodları hobilerim .html dosyana ekle.
«s./ m a i
<p>
<h2> sevdiğim Müzik Türleri: </h2>
<ul>
< li> Klasik müzik
</ııl>
<br>
<H2>En Sevdiğim M üzisyenler: </h2>
<Ol ^
< li> <a href="http://www.sertab.com"> sertab Erener </a> |<br>]
îmg srçg"resim lerim /sertab.jpg”>
< li> c e lin e Dion
<li> Beethoven
< /© !»
<a href= "index.htm l"> G eri Dön</a>
</body>
Klavyende Ctrl v e S tuşlarına bastıktan sonra, M asaüstü'ndeki Benim Sitem adlı klasördeki hobilerim .htm
sim gesini çift tıklayarak aç v e n e yaptığını gör!
Selin Ozdemir ve Müzik! Piyano çalmayı ve şarkı söylemeyi çok seviyorum
• Klasik müzik
• Yabana pop müzik
• Törkçe pop müzik
2. CefineDkm
3. Beethoven
Geri Dön
İşte, vveb sayfamıza bir resimde ekledik. Celine
Dion ve Beethoven resimlerini nasıl ekleyeceğini
anlatmayacağım. Onları sen kendin ekleyeceksin!
Yazmış olduğum uz <img src="resimlerim/
sertab.jpg"> koduna bir g ö z atalım: <img> işareti,
Türkçesi resim olan İngilizce image kelimesinden
gelmektedir. <img> işaretinin src özelliği Türkçesi
kavnakolan İngilizce source kelimesinden
gelmektedir, src özelliği, eklenecek olan resim
dosyasının adresini, adını ve uzantısını ister:
Resimlerim klasörü, resim dosyasının bulunduğu
adresi ifade eder,"/"işareti, resmin adresini yazarken
klasörleri belirtmek için kullanılır. Resmin adresi
verilirken her klasör adının sonuna bir"/" işareti
konulur.
Sertab, eklem ek istediğimiz resim dosyasının adını
gösterir, .jpg, eklemek istediğimiz sertab adlı resim
dosyasının uzantısını gösterir.
Resim dosyasına köprü kurm ak
Hatırlarsan, daha önceden, <a href=http://www.
sertab.com>Sertab Erener</a>, komut satırı ile,
müzisyenin vveb sitesine köprü kurmuştuk. Kullanıcı
ekranda gördüğü Sertab Erener kelimelerini
tıkladığında, hed ef vveb sitesine gidebiliyordu.
Şimdi d e aynı köprüyü müzisyenin resmine kurmak
istiyoruz. Yapmamız gereken tek şey resim işaretine
<a href> ve </a> işaretlerini eklemek olacak.
<marquee styıe = oacKşrourıa-co lo r: pırın; co lo r : dlue; r o rs t-s ız e ; 5ü; t e x t -j
S e lin özdemir ve Müzik! Piyano çalmayı ve şarkı söylemeyi çok seviyorun
</marquee>
<p>
<h2> Sevdiğim Müzik T ü r l e r i : </h2>
<ul>
<1i> K lasik müzik
<li>Tü rkçe pop müzik
•</ul>
<br>
<h2>En sevdiğim Müzisyenler: </h2>
<ol>
< li> <a hre f="h t t p ://m m .sertab.com"> sertab Erener </a> <br>
9a h ref= "h ttp : //www. se rtab . com"j <i mg s r c= "resi mİ e r i m /sertab. jpg">f</a>|
;<11> celin e Dion
<li> Beethoven
</ol>
<a href=”i ndex. html">Geri Dön</a>
</body>
Klavyende Ctrl ve S tuşlarına bastıktan sonra hobilerim.html sayfasının görüntülendiği vveb tarayıcım
ve F5 tuşuna basarak yaptığın değişikliği görüntüle.
Selin Özdemir ve Müzik! Piyano çalmayı ve şarkı söylemeyi çok seviy<
• Klasik müzik
• Yabancı pop rmıak
• Türkçe pop toüzk
2 , Celine Dion
3 . Beethoven
Bilmiyorum dikkatini çekti mi, resmin etrafında Sertab Erener yazısıyla aynı renkte bir çerçeve oluştu. Bu
çerçeve, resimde bir köprü kurulduğunun işareti! İnanmıyorsan resme tıkla ve ne olacak gör!
w w w .m u citlergaraji.com adresini ziyaret et.
Bölüm
Tablolar ne işe yarar?
Tabloların işlevleri ve özellikleri,
Bir vveb sayfasına tablo eklemek,
Bir tabloyu biçimlendirmek
7
Tablolar ne işe
yarar?
Bilgisayar dünyasında tabloları en çok hangi programlarla beraber kullanırız? Microsoft VVord'de tabloları,
bilgilerimizi düzenlem ek için sık sık kullanırız:
Si y
t*
U S S U ' Sarış ‘ Ekit
Sayfa Düzeni
Başvurular
__ î m . -------
m
m
Sörûnûm
A ı'
&
1..............................................................
ü
f i
Sözden (Seçik
Postalar
m
^
CatibRtGüvftj * 11
* A* A*
—1 4 |f o o r * a
Y*P«îtw
K T A • ak* X, K'
.
J
Boyıcnı ;
|S . 'S
M S
|-S*
^ ” 21*
fin p ıf .
*'
| ApÇçĞgHt :
A a Ç ç fif 4 aÇ çĞ g A c t Ç
A a fç ü ğ , i '
Bajltkl
Baştık 2
fonu Başl.,, Alt Konu.,,
1| 1 fkrrmal 1( t Aralık fok
StlBer
fiil
Bilgisayar dünyasında tablolar. en çok hangi programlarla beraber kullanırız? MicrosoftW onfde
tabioiarı, binlerim izi düzenlemek için sık sık fcutancnz:
öğrenci No
375
568
942
1012
ı
Adı Soyadı
Hakan Kara
Ayşe Beyaz
Fatma Pembe
AB M avi
Sınav 1
90
95
80
80
SH08V2
80
85
70
100
Ortalama
85
90
75
90
Örneğin bir sınıf listesini düzenli bir biçimde
Tablo içindeki her bir satırın, bir veya daha fazla
oluşturmak için, tablolar oldukça uygun araçlardır.
sütunu bulunur. Yandaki resimde görüldüğü gibi:
HTML sayfalarında da aynı şekilde, benzer birçok
* Satır T e ait Sütun 1, Sütun 2 ve Sütun 3,
bilgiyi düzenli bir biçimde sayfaya yerleştirmemiz
gerektiğinde sıklıkla kullanmamız gerekecek olan
* Satır 2'ye ait Sütun 1, Sütun 2 ve Sütun 3
araç <table> ve </table> işaretidir.
* Satır 3'e ait Sütun 1, Sütun 2 ve Sütun 3 tabloyu
Her bir tablo satır ve sütunlardan meydana gelir.
Satır 1
Satır 2
Satır 3
Sütun 1
Sütun 1
Sütun 3
Sütun 1
Sütun 2
Sütun 3
Şutun. 1
Sütun 2
Sütun 3
oluşturmuştur.
Bir html tablosunda satır ve sütunları gösterm ek
için:
*Türkçe tablo satırı anlamına gelen İngilizce
Küçük bir tablo örneği yapalım
table row kelimelerinin ilk harflerinde oluşan <tr>
Not defteri programında yeni bir sayfa açalım ve
ve </tr>
aşağıdaki kodları ekleyelim.
ve
<htm1»
* Türkçe tablo verisi anlamına gelen İngilizce
table data kelimelerinin İlk harflerinden oluşan
<head>
<tit1e>Tab1o deneme s a y fa s ı< / title >
</head>
<body>
R ta b le b o rd e rsl»}
<td> ve </td> işaretleri kullanılır.
6ED
HTML'de bir tablo oluşturmak için <table>, <tr> ve
<td> işaretlerini doğru bir sıra içerisinde kullanmak
:<td>l</td> 1
;<td>2</td>
<td>3</td> J
zorundayız. Aksi takdirde, tablo doğru olarak
R / tr> ]
görüntülenem ez:
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<w>
</td> <td>
A
N.
O.
V
<tr>
<td>
</td>
<td>
</td>
<tr>
<td>
</td> <td>
A
>
CL
V
<table>
</table>
t<Aable>~‘1
</body>
Kodları yeni sayfaya ekledikten sonra Dosya
m enüsünde Kaydet satırını tıkla.
* <table> işareti bir tablonun başladığını ve
</table> işareti bir tablonun bittiğini gösterir,
* <tr> işareti bir tabloda yeni bir satırın başladığını
ve </tr> işareti bir satırın bittiğini gösterir,
* <td> işareti bir tablo satırında yeni bir sütunun
başladığını ve </td> işareti bir sütunun bittiğini
gösterir.
j~fiogya'j|Dügen
fiiçim
Görünüm
Yeni
Ctrl+N
A ç-
Ctri+Ö
i f " Kaydet
Ctrt+S J ;
Farktı Kaydet...
Sayfa Yapısı...
Yazdır...
Çıkış
Ctrf+P
Açılan p e n c e r e d e , sold a Masaüstü'nü tıkla v e alttaki Dosya Adı kutusuna tab lodenem e.htm l yaz. Son
olarak Kayıt türü kutusund an Tüm Dosyalar'ı seçtik ten sonra Kaydet d ü ğ m esin i tıkla.
farklı Kaydet
Masaüstü ►
Düzenle
Yeni klasör
m
Sık Kullanılanlar
Kitaplıklar
[
B S Masaüstü
S
a
Sistem Kîescru
A Karadan Yüklem
1
se tc u k
S o n Y e r le r
k
SslemKtalSÖtÜ
K it a p lık la r
*
V 3
Bilgisayar
•M
B e lg e le r
Sistem KUîc-tü
t> Müzik
> £ Resimler
Ağ
Sistem Ktasero
; B Yide*
A dobe Reader X
• İÜ Bilgisayar
[
Kaytt türü; İ Tûm Oosyaiar
' j~ ~ ~
Kocama; ANSI
Klasörleri Gizle
Ardından, Masaüstü'nde olu şan tab lodenem e.htm l adlı vveb sayfasını çift tıklayarak aç.
İfc
s{ ^
C:\User5\selcuk\0ocuments\Desktop\tablodeneme.html
J§§ Tablo denem e sayfası
Dosya
Düzen
Götünüm
| î f p s | < = 3 S a tır 1
js ps 1< c j z 3 S a tır 2
X
i
Sık Kullanılanlar
m
.
Araçlar
:• ^
^
Yardım
£
•
Web tarayıcıda açılan sayfamız, iki satır halinde üç
satıra ait sütunları oluşturmak için yine benzer
sütunlu bir tablo görüntüledi. Tablonun etrafındaki
işaretler kutlandık.
çerçeveyi <table> içine yazdığımız border=1
[<table border=1>*1
özelliği ile görüntüledik. Border özelliğine
yazacağımız sayının değeri arttıkça, çerçevenin
g tr p
kalınlığı artar. Border özelliğini hiç yazmazsak
<td>l</td>
veya 0 (sıfır) yazarsak tablonun etrafındaki çerçeve
!<td>2</td>
görünmez.
<td>3</td>^
Kırmızı çerçeve içinde gösterdiğim iz <table>
!S3
işareti ile başlattığımız tabloyu </table> işareti 1le
fetd>4</td>T
bitirdik.Tabloyu başlattıktan sonra mavi çerçeve
ktd>5</td>î
içinde ilk satırımızı <tr> işareti ile başlattık.
P 7 fr îp
Ardından üç adet <td> ve </td> işareti ile, ilk
[</table>]
1
satırda yer alan sütunları oluşturduk. Itk satırın
sütunları bittikten sonra ilk satırı bitirmek üzere < /
tr> işareti kullandık. Ardından, ikinci satır ve ikinci
l|
Bir HTML tablosunda görüntülenm ek istenilen
metin veya resmin mutlaka <td> ve </td>
işaretleri arasına yazılması gerekmektedir.
Yaşadığım ız şehrin resimlerini ekleyelim
Hobilerim.html sayfasına sevdiğimiz müzisyenlerin resimlerini eklemiştik. Şimdi de, yasadigimsehir.html
sayfasına, şehrimizin resimlerin] tablo kullanarakekleyeceğiz.Tablolar, metin, resim, animasyon ve video
gibi içerikleri vveb sayfalarına daha düzenli yerleştirmemize yardımcı olan çok önemli araçlardır.
Şimdi, G oogle Görsel aramalardan, yaşadığın şehire ait 9 adet fotoğraf bul ve bunları Masaüstü'ndeki
BenimSitem in altında yer alan resimlerim klasörüne
* sehirl.jpg
* sehir2.jpg
* sehir3.jpg şeklinde kaydet
Dosya
Düzen
♦ S te
Görünüm
A ra m a
Sık Kullanılanlar
G ö rse lle r
P îay
Araçlar
Yardım
H aberler
G m a il
D o k u n a n la r
T ak vim
Ç e v iri
B lo g g e r
D ah a fa z la s ı -
Google
görsel arama
Ankara
Şehrinin adını G oogle Göseller'e girdikten sonra klavyenden Enter tuşuna bas.
Gelen resimlerden beğendiklerinin üzerinde sağ tıkla.
BaŞaotryıAç
Bağlantıyı Yeni Sekmede Aç
Bağlantıyı Yeni PerKertde Aç
Hedefi fafck Kaydet,.
S i*
Hedefi Yâiefer
1
[
Resmi FM ttK çd *..
p
1
İfi»
m
i
«w*»
Kreaycfej Kopyala
__________________
j ankafaljpg
i
Tümünü Seç
ityMgıgMttr
■ u i m sev'gtsohbeioom
458 « 342 -Ankara anıtkabir rasümtj
Sık Kullanılanlara Ekle..
Açılan pencerede, sol bölüm de Masaüstü'nü tıkladıktan sonra, orta bölüm de ö n ce BenimSitem
klasörünü sonra resimlerim klasörünü tıkla. Alttaki Dosya Adı kutusuna sehirl, sehir2, sehir3, sehir4...
gibi adları girdikten sonra Kaydet düğm esini tıkla. Yalnız burada önem li bir nokta, Dosya Adı kutusunun
h e m e n altında yer alan Kayıt türü kutusunda .jpg, .gif veya .png yazıyor olabilir. Bu ü ç ü n d e n birisi
o ld u ğ u sü re c e bir sorun yok. Bunlardan farklı bir tür görüyorsan, o resmi k ayd etm ek ten v a z g e ç m e k için
İptal d ü ğ m e sin i tıkla.
Benim Sitem adlı klasörünün altındaki resim lerim klasörün de kayd ettiğin resimleri görüyor olm alısın.
Düzenle
., „ „
Kitaplığa ekte *
;
.
>T Sık Kullanılanlar
Karşıdan Yüklemeler
Bununla payla; *
Ad
Slayt gösterisi
Tarih
g j Beethoven
Yaz
Yeni klasör
Tür
Boyut
Etiketler
’
24.06.2012 22:49
JPEG resmi
6 KB
24.06.2012 22:49
JPEG resmi
9 KB
B jse h irl
2506.201211:54
JPEG resmi
8 KB
İg se h iû
25.06201211:54
JPEG resmi
11KB
■
Masaüstü
g j celinedicn
S
Son Yerler
Kitaplıklar
£ § uhir?
254)6201211:54
JPEG resmi
4 KB
0
Belgeler
jjg sehir4
25.06.201211:54
JPEG resmi
12 KB
^
Müzik
g j sehirS
2S.06.201211.54
JPEG resmi
9 KB
fiS Resimler
g seh iı6
25.06201211:54
JPEG resmi
10 KB
g j Video
Q sehir7
254)6.201211:54
JPEG resmi
15 K8
254)6201211:54
JPEG resmi
9 KB
B
Bilgisayar
#
ğ g Yerel Oisk(C:)
sehiıB
Q
sehiı9
254)6201211:56_____________ JPEG resmi
10 KB
İŞ
sertab
24.06.2012 22:19 _____________JPEG resmi
6 KB
f~g Yerel Disk (D:)
%
Ağ
Artık, yasad igim sehir.h tm l vveb sayfasına, ta b lo için d e g ö r ü n e c e k 9 resm i ekleyebilirim .
Ö ncelikle, Not D efteri program ında Dosya m e n ü s ü n d e n A ç ... satırını tıkla. Açılan p e n c e r e d e sol
b ö lü m d e Masaüstü'nü tıkladıktan sonra orta b ö lü m d e Benim Sitem adlı klasörü tıkla. P en ceren in sa ğ alt
köşesin d ek i M etin Belgeleri (.txt) yazan kutuyu tıklayarak Tüm Dosyalar'ı seç.
■O l
a *
/{
(
/f c l»
Düzenle *
▼
J
► BenimSitem
| Ara: BenimSitem
Yeni klasör
m
a
Ad
"İİ Sik Kullanılanlar
31
Değdirme tarihi
^J^K«|idanYöWem
Tür
[ 1E Masaüstû ]
m Son Yerler
Kitaplıklar
8 Belgeler
Müzik
B Resimler
E l Video
Bilgisayar
iflp ı
fic Yerel Disk (O)
i- * Yerel Disk (D:)
Dosya Adı:
* 1 jİMetin Belgeİeri (*.txt)______ } *
Kodlama: ANSI
"i r
&
İptal
p
.-----------------------------------------------------J t t BenimSitem
Düzenle »
Yeni klasör
Jk
lâf S«k Kullanılanlar
i$ Karşıdan Yüklem
1
■* * f | A m BenimSitem
32 *
A
Ad
.... P j
m
Değiştirme tarihi
Tür
|İ ğ hobilerim
23.06.201222:20
HTML Belge
■
Masaüstû
§ ) inde*
23.06.2012 18:33
HTML Belge
^
Son Yerler
§ 5 yasadigimsehir
23.06.201217:35
HTML Belge |
Î0ğ Kitaplıklar
1
f § Belgeler
|
m
afi Müzik
Birkaç adım içerisinde, aşağıdaki gibi Ankara resimlerini 3 satıra 3 sütunluk bir tablo içerisinde
görüntüleyeceğiz.
Ancak, adım adım gitmekte fayda var. Öncelikle,
Klavyende Ctrl ve S tuşlarına basarak dosyada
tablonun ilk satırındaki birinci hücreyi yapan kodları
yaptığın değişiklikleri kaydet.
yazacağız. Aşağıda renkli çerçeve içindeki kodları
Gördüğün gibi, kırmızı çerçeve içerisinde başlangıç
sayfanda doğru yerlere ekle.
<table> ve bitiş </table> işaretleri verilmiştir,
<n>yemmanaı ıs
<table> başlangıç işaretinden hemen sonra
</o1>
ilk satırın başlangıç <tr> işareti mavi çerçeve
</marquee>
<table border»10>~]
içerisinde görülüyor. Birinci satırın bitiş işareti </
tr> hemen iki satır altta yazılmış. <tr> ve </tr>
ktr> J
ng sr c=" re s i mi e ri n/sehi r l . jp g "x /td >
S İ S
k/tabte>]
«a h r e f= ”in d ex.h tm V ,*Geri Dön</a>
< /b o d y >
</htKl>
işaretleri arasına yazılan <td> ve </td> işaretleri,
satırdaki ilk sütunumuzu oluşturuyor. Sütun
işaretleri <td> ve </td> arasına ilk resmimizi
gösterecek olan <img> işareti yazılmıştır.
Şimdi Masaüstü'ndeki BenimSitem adlı klasördeki
< ii> Y em m anaı ıe
< /o 1>
yasadigimsehir.html simgesini çift tıkla ve
</m arquee>
yazdığımız kodları çalıştır. Bakalım ne olmuş?
< ta b le b o rd e r= 10>
< tr>
< t d x i mg s rc = " r e s im 1e r i m / s e h i r l . j p g " x / t d >
İE
m
K ' - ' IS
CÛswUe*cvfc’'Pocumtnts\D«ktop\BenimSitem\yaîad
j ^ Sefift‘in Yaşadığı Şehir:
Dosya
Düzen
Görünüm
‘
Sik Kullanılanlar
^
Araçlar
Yardım
Başkent Ankara
|c td x im g s rc = " r e s im 1e r i m /s e h i r 2 . jp g " x / t d > ]
</tr>
</tab1e>
<a h r e f= " in d e x .h tm 1">Qeri Dön</a>
</body>
Ben, 5thaasâ» BasteaYt Ankaa'da yspyorom. Toptaa orâfusu 5 milyon ctvsrsı
Anadolu topraklarının orta bSHta&Mfe tahinin Anlatanın toplam 2S ilçesi buta
S. Kizüoahaffian!
yiIİılıag
9.
10. Poiaıİ!
11. Şa«fla®öıisar
Klavyende Ctrl ve S tuşlarına basarak dosyada
yaptığın değişiklikleri kaydet.
12. Y«îrin>halle
VVeb tarayıcındaki yasadigimsehir.html sayfasını
aç ve F5 tuşuna basarak yaptığın değişikliğin
görüntülenm esini sağla.
Başkent Ankara
Sffl. stornan BiğfatafsAnteit'd*yapf-mm Îsçrî*» «Bftuo S
»«saate«as. Ateuı, .*ywm m ût
«s tSiyiH. ıkn»
Geri Ban
Tek resimden oluşan bir tablom uz oldu. <table>
işaretinin Border değerini 10 gibi yüksek bir değer
vererek, tablo çerçevesinin kalın olmasını sağladık.
Şimdi de, birinci satırda ikinci sütunumuzu
Tablomuzun ilk satırında ilki sütun oluştu.
oluşturup onun da içinde başka bir resim
Sütunlarda kullandığımız <img> işareti ile
görüntülem eye ne dersin?
istediğimiz resimleri görüntüleyebildik.
Aşağıda kırmızı çerçeve içindeki kodları
Şimdi d e tablomuza ikinci satırı ekleyelim ve bu
yasadigimsehir.html dosyasına ekle.
satırda iki sütun olmasını sağlayalım. Bunun için
renkli çerçeve içindeki kodları yasadigimsehir.
htm l sayfasında doğru yerlere ekle:
Yaptığın değişiklikleri klavyendeki Ctrl ve S
</marquee>
tuşlarına basarak kaydet.
< table border=10>
Kırmızı çerçeve içinde gösterdiğim iz ikinci satırın
< tr>
açılış <tr> işareti ile ikinci satırın kapanış </tr>
< tdxim g s rc = "re s i*1 erim /sehi r l , jp g "x / td >
< tdxim g s r c * "r e * i mi «r1 m/s«h1
rZ. jp g ” x /td >
işareti arasına sütunların <td> ve </td> işaretlerini
</tr>
ekledik. Sütunların içinde kullandığımız <img>
@ 23—
ytd x im g s rc « ” res1 «1 erim /s«hi r4 . jp g "x / ta ? ;
işaretleri ile resimlerin görünmesini sağlamış
lg td x i mg src= "re si rol e ri m/sehi r 5. ^ p g "x /td a,
oluyoruz.
</tab1e>
Web tarayıcındaki yasadigimsehir.html sayfasını
<&h re f» " 1nd*x. html "x îe r1
Oön</a>
tekrar aç ve F5 tuşuna basarak yaptığın değişikliğin
</body>
</html>
görüntülenm esini sağla.
Başkent Ankara
'■ • - • mn V r
•
.
-
P K eç sS re s
S.
■im - ■ı Y " "
mm i .
■
•
ItlMsSsSl** ■
j
,
m ' b ı â mm A n k a r a a ® to p la ® 25 â ç e s i
r
.
* '
„
•
,
!
M rn -l ı :
B u üjp stetfes i: sz: i. ş u a l a r t e
Tablomuzda yeni bir satır ve bu satırda da iki tane
sütun oluşturduk.
ı ı
«s ı ı ı r\ uv_ m ı
<1i »Yenim ahalle
</ol>
</marquee>
Son olarak, tablomuzu üç satır ve üç sütunlu
yapmak için yasadigimsehir .html sayfasını
aşağıdaki gibi düzenle.Tablomuzda, ilk iki satırı ve
her bir satırda ikişer sütunu zaten oluşturmuştuk.
Şimdi, ilk iki satırımıza üçüncü sütunları ekleyeceğiz.
Ardından, üçüncü satırı oluşturup, bu satırda da üç
sütun olmasını sağlayacağız:
r
ctab le border =10>
<tr>
<tdximg src=' re sim le rim /se h irl. jp g "x /td >
ctdxim g src=' re s i mİ e ri m/sehi r Z . qpg"x/td>
<tdximg src=' re s i mİ e r i m/sehi r 3. jp g "x /td >
</tr>
<tr>
<tdximg src=" re s i mİ e r i m/sehi r4 . jp g "x /td >
<tdximg src=' re s i mİ e r i m/sehi r5 .jp g "x / td >
<tdximg src=" 1re s i mİ e r i m/sehi r6 . }p g "x /td >
</tr>
<tr>
<tdximg src=* 1re s i mİ er i m/sehi r7 . jp g ” x /td >
<tdximg src=" re s i mİ e r i m/sehi r8 . jp g "x /td >
<tdximg src=' re s i mİ e r i m/sehi r9. jp g "x /td >
</tr>
g/tab1e>
<a h re f= "index.htm l">Geri Dön</a>
</body>
</html>
Yaptığın değişiklikleri klavyendeki Ctrl ve S tuşlarına basarak kaydet.
Web tarayıcındaki yasadigimsehir.html sayfasını tekrar aç ve F5 tuşuna basarak yaptığın değişikliğin
görüntülenmesini sağla.
Gördüğün gibi, üç satır ve üç sütundan oluşan toplam 9 gözlü bir tablo oluşturduk ve her bir gözde <img>
işaretlerini kullanarak farktı resimlerin görünmesini sağladık.
im
es ı ı i N v v ı ı 1 o a ı
<1i >Yeni mahal 1e
</ol>
</marquee>
< table border=10 |sty1 es"b o rd er-co 1o r:n avy; b o rd e r- sty le : dashed;"}[<tı>
'
< td x i mg src = "re si mi e r i m/sehi r l . j p g "x /td >
< td x i mg src= "resim İerim /seh i r2 .jp g "x / td >
< tdxim g src= "resim İerim /seh i r3 . jp g "x / td >
</tr>
!<tr>
< tdxim g src= "resim İerim /seh i r4 . q p g"x/td >
< td x i mg s rc « "re s i mİ e r i m/sehi r5 . q p g"x/td >
< td x i mg src = "re si mİ e r i m/sehi r6 . j p g "x /td >
</tr>
;<tr>
< td x i mg s rc « ” re s i mİ e r i m/sehi r7 . q p g"x/td >
< tdxim g src »"re s im le rim /se h ir8 .q p g "x / td >
< td x i mg src = "re si mİ e r i m/sehi r9 . ]p g "x / td >
</tr>
</table>
<a h re f= "i ndex. htm l"> Q eri Dön</a>
</body>
</html>
Tablomuzu biçimlendirelim
Tablomuzun çizgi şekillerini ve renklerini değiştirelim mİ? Aşağıda kırmızı çerçeve içindeki kodları
yasadigimsehir.html sayfasına ekleyerek tablomuzun dış çerçeve rengini değiştirelim.
Klavyende Ctrl ve S tuşlarına basarak yasadigimsehir.html sayfanda yaptığın değişiklikleri kaydet
<table> işaretinin görsel özelliklerini belirlememize yardımcı olan style özelliğinin;
Border-color (çizgi rengi) değerini navy (lacivert) ve
Border-style (çizgi biçimi) değerini dashed (kesik çizgi) yaptık.
Yasadimsehir.html sayfasının bulunduğu web tarayıcını aç ve F5 tuşuna basarak yaptıklarının
bSröntfllersmalrt sağla.
Bölüm
Sayfalarımıza ses ve video
ekleyelim.'
Ses ve video dosya türleri,
Ses ve video dosyalarıntnözellikleri,
Web sayfalarına ses ve video eklemek,
8
Sayfalarımıza ses
ve video ekleyelim
İnternette en fazla ne yapıyorsun?
* Oyun oynuyorum,
* Film izliyorum,
türünün kendine göre olumlu ve olumsuz
yönleri bulunmaktadır. Ses dosyalarının avantaj
ve dezavantajları, dosyanın kilobyte olarak
büyüklüğüne, ses kalitesine ve farklı vveb
tarayıcılarda kolaylıkla çalışabilme durumlarına göre
* Müzik dinliyorum,
değişebilmektedir.
Tahmin ediyorum bunları çok sıkyapıyorsundur.
Dosya türleri ile avantaj ve dezavantajlarına şöyle bir
Peki, sen de geliştirdiğin vveb sayfalarına ilginç
göz atmakta fayda var:
sesler, videolar eklemek ister misin? Bunu yapmak,
sayfaya resim eklemek kadar kolay değil. Ses ve
video dosyalarının vveb sayfalarında çalıştırılması
için bazı ek dosyalar gerekmektedir. Bu tür
dosyaların vveb sayfalarında çalıştırılması kimi
zaman sorun yaratabilir. Bu derste, sayfalarımıza
* .mid (MIDI - Musical instrument Digital
Interface): .mid uzantılı ses dosyaları hemen hemen
tüm vveb tarayıcılarda sorunsuz olarak çalışabilen
oldukça küçük boyutlarda bir ses dosyası türüdür.
Ancak, işin kötü tarafı,.mid'ler sadece bilgisayar
çıkabilecek sorunlara da göz atacağız.
ortamında kaydedilebilen ve sadece belli çalgı
aletlerinin sesini çıkartabilen oldukça eski bir dosya
türüdür.
Ses dosya türleri
* .wav (VVaveform Extension) veya ,wma
ses ve video eklemeyi öğreneceğiz. Bunun yanında
(Windows Media Audio): Oldukça yüksek ses
U
n !l/
fJÜ
fPtl7^
...s*
kalitesine sahip olan ,wav veya .wma dosyaları,
birçok vveb tarayıcıda sorunsuz bir şekilde
çalışabilmektedir. İsterseniz hemen şimdi ,wma
uzantılı ses dosyanı oluşturabilirsin.
Ekranın sol alt köşesindeki Başlat düğmesini tıkla
Web sayfalarında kullanılabilecek 4-5 farklı
ses dosyası türü bulunmaktadır. Her bir dosya
ve açılan pencerede kutuya ses yaz. Ses kaydedicisi
programının listelendiğini göreceksin.
Programlar (1)
1 %, Ses Kaydedicisi
Denetim Masası (26)
Kendi sesini kaydetm ek istiyorsan, Kaydı Başlat
4İ Ses
M
Ses kaydetme sorunlarını bul ve düzelt
dü ğm esini tıkla ve konuşmaya başla. Elbette,
f a Ses kayıttan yü rü tm e sorunlarını bul ve düzelt
bilgisayarına bağlı bir mikrofon olduğunu
Belgeler (4140)
varsayıyorum! Kısa bir d e n e m e konuşmasından
j y ses
J İ ses
sonra Kaydı Durdur düğm esini tıkla.
j İ ses
Müzik (3)
Ses Kaydedicisi
y y Kalimba
m
a«ye s is t!
|j ■ Kaydı Durdur j 0000*2
[ 2 Maid with the Flaxen Hair
|#1 Sieep Away
■
B
..................... ;
m
| Kaydı Üuıuur ŞAkt+Kj
Açılan Farklı Kaydet penceresinin sol
f i Diğer sonuçlar
bölü m ü nd e Masaüstü'nü seçtikten sonra orta
bölü m d e BenimSitem klasörünü çift tıklayarak
aç. Pencerenin altındaki Dosya Adı kutusuna
deneme yaz. Daha sonra Kaydet düğm esini
Ses Kaydedicisi programı seçili ise klavyeden
tıklayarak ilk ses dosyanı kaydet.
Enter tuşuna bas. Ses Kaydedicisi programının
küçük ekranı açılacaktır.
;P
* BenimSitem t
1ÜT Sık Kutlanılan!»
.|fi Karşıdan Vü«cm
Değiştirme tarihi
1®
25.0 6 .2 0 12 11:5 7
Dosya « a s *
id Menustu j
£
Yerler
^ Kitaplıklar
S
Belgeler
j t Müzik
İ Ü Resimler
3
Video
r Dosye
j % ıt t f lf f t [ Windowş Medta Ses D o sya
Diğer sanatçılar: Katkıda bulunan sanatçı...
j
A lb üm : A lb ü m belirtin
[;
'y j
İptal
'
- 1
Ancak, .wav veya .wma dosyalarının en büyük
İngilizce sourçe kelimesinden gelen özellik, vveb
dezavantajı dosya büyüklükleridir. ,wma dosyaları
şayiasında çalınmak istenen ses dosyasının adresini
kilobyte olarak büyük oluşturulduklarından, uzun
ve adını belirlememizi sağlar.
ses kayıtlarına uygun değillerdir,
.mp2 veya .mp3 (Motion Picture Expert): Son
yıllarda oldukça önem kazanan ve sık kullanılan
Hidden: Web tarayıcılar, ses dosyasını çalmak İçin
bîr program kullanırlar. Gizli anlamına gelen Hidden
özelliği True değerine sahip olursa, bu program
gösterilmeden ses dosyası çalınır. Hidden özelliği
mpeg dostlarının en büyük Özelliği, .wav
Faise değerini alırsa, müziği çalan program vveb
veya .wma gibi dosyalara göre çok daha küçük
tarayıcıda gösterilir.
boyutlarda kayıt oluşturabilmeleridir. Ses kalitesi
de oldukça iyi ©lan bu dosya türlerinin en büyük
dezavantajı ise çalıştırılacakları web tarayıcıların bazı
ek programlara gereksinim duymasıdır.
.ra veya .ram veya .rpm (Real Audio): .mp2
Autostart: Ses dosyasının sayfa görüntülenir
görüntülenmez çalmaya başlamasını istiyorsan
autostart ÖzelliğineTrue değerini ataman
gerekmektedir,
veya jsnpö dosyalarından d;aha da küçük kayıtlar
oluşturabilen bu dosyalar, vveb sayfalarından
Loop: Döngü anlamına gelen özellikle, bir ses
indirilmesi en kolay ve hızlı olan türlerdir. Dosyanın
dosyasının kaç defa çalışacağını belirleyebilirsin,
küçük olmasına bağlı olarak ses kalitesi de düşük
ölan Real Audio türünün çdıştırılabilmesiifln web
tarayıcıların bazı ek programlara gereksinimi vardır.
<embed> işareti
Web sayfalarına ses veya video dosyaları eklemek
için <embed> işareti ve bu işaretin özellikleri
kullanılır.
Loop özelliğine £L veyaTrue değerini atarsan, ses
sürekli çalar. Faise değerini atarsan ses bir defa çalar
ve durur,
Web sayfamıza bir ses dosyası
ekleyelim
Web sitemizi ziyaret edenleri kendi sesimizle "Web
Siteme Hoşgeldiniz" şeklinde karşılayalım mı? Selin,
ses kaydedicisi programı kullanarak Masüstü'ndeki
<embed src="SesDosyasıAdı.uzantısı"
BenimSitem klasöründe, ziyaretçileri için bir ses
hidden="true" autostart="true" loop="true" >
kaydı düştürdü.
Şrc: Daha önce <img> işaretinde karşılaştığımız
Düzenle »
Kitaplığa e k l e
Sık Kullanılanlar
Son Yerler
3
M
B u n u n la p a y la ş ■
r ı
S )
k i
resimlerim
hobilerim
îı
İS Karşıdan Yüklem
■ f Masaüstü
■
f
"r\ " >
hl
W MAİ
Ü T
y .
Hoşgeldiniz
indw
______ J
vasadtgims
ehir
Kitaplıklar
Belgeler
J l
M ü z ik
S I
R e s im le r
S
V id e o
5 öğe
Sen d e benzer şekilde bir"hoşgeldiniz"ses kaydı
oluşturarak Benim Sitem adlı klasöre kaydet.
Adsız - Not Defteri
KBilIBft
*
“ —
Dosya || Düzen
Görünüm
Yeni
Şimdi aşağıdaki kodları Benim Sitem adlı klasörde
bulunan index.htm l dosyasına ekleyerek, ses
Biçim
Ctrl+O ]
L_
kaydımızın çalışmasını sağlayalım.
Kaydet
Şimdi öncelikle, Not Defteri
Farklı Kaydet...
program ının
Dosya m e n ü sü n d e A ç... satırını tıkla.
Ctri+N
Ctrl+S
Sayfa Yapısı...
Yazdır...
Ç.k.ş
Ctrl+P
-
Yardım
Açılan pencerede sol bölüm de M a sa ü stü 'n ü tıkla ve ardından orta bölüm den BenimSitem adlı klasörü çift
tıkla. Açılan pencerenin sağ alt köşesinde g ö rd ü ğ ü n "Metin Belgeleri f.txt)" kutusunu tıkla ve "Tü m Dosyaları"
SeÇ'
f§ §
® Masaüstû ►
▼j
Yeni klasör
Düşenle
m
%
»
0 Karşıdan Yüklem
L M i Masaüstû *\
H
Son Yerler
İÜ Kitaplıklar
-
m
a
Ağ
f Sistem Klasörü
Antivirus
Dosya klasörü
asp.net
l|§ Belgeler
^
| Asv: Masaüstû
Dosya klasörü
Müzik
Basında Ben
S»i Resimler
Dosya klasörü
j j j Video
BenimSitem
Dosya klasörü
m Bilgisayar
£® Yerel Disk (O)
ö
Yerel D i^ c P )
Dosya Adı:
Metin Belgeler» (*,txt)
Kodlama: ANSI.
İptal
3
BenimSitem adlı klasörün içinde görm üş olduğun vveb dosyaları arasında index.htmryi çift tıklayarak aç.
İS Si
© M
ti
M> Baiıöftım
Düzenle»
TZpBAi*
Yen» klasör
•sâv
NÜ :
lâf Sık Kullanılanlar
:j$. Karşıdan Yüklem
§s£ *
m
T ir
Jf 1 hobilerim
23j06JCÜ2 İ1üS2
&MM2V&M
ım m ım s
HTML. İeİ|sj
’f İİ Son Yerler
|
g
M Masaüstû
M
M
f B yısangimfdhir
HTML Sefa®
HTML Setgej
fiili
i
i
M Bilgisayar
&
Yerel Oisk(C)
m Yerel Disk <Dı)
* 4 f a f f i - ı - ^ t T i t i r i T f f i *a t i t •"•-r.ırtmmmmrnmmJ
*1
îtTum Dosyalar
Dfisya Adn
Kojamar İWIS1
I
I fi
İptal
index.html vveb sayfasının kodlarını görm üş olmalısın, Şimdi, aşağıda kırmızı çerçeve içinde gösterdiği
satırı kendi sayfanda < b od y> işaretinin h em en altına eklem elisin.
4 inde* - Not Defteri
D osya
Düzen
Biçim
G örü n ü m
Ya rd a n
<html>
<head>
<title>
s e lin özdem ir'in web s i te s i
< /title >
i</head>
kembed src= "h o sg e ld in i2 ■wroa" h i dden='*fal se " lo o p = "tru e" au to start= '*tru e"> J
<p s ty le= '"cö lo r: 6 i ue; bacKgrourid-ioIo r : y e I low >
<nl>Se1in özdem ir'in web S ite sin e H oşgeidiniz!</hl>
|< /p >
Ben s e lin özdemir, 2002 y ılın ın Eylül ayında Ankara’da dünyaya gelmişim,Kız
İO da 2007 y ılın ın Kasım ayında dünyaya g e ld i, <br>
<h3>sizlere hem hobilerimden hem de yaşadığım şehirden bahsedeceğim.</h3>
< brx b r»
<a href»"hobileriffl.html">Hobilerim iç in tık la < /a > <br>
Kodları yazdıktan sonra, klavyende Ctrl ve S tuşlarına basarak dosyanı kaydet.
Eğer açık değilse, Benim Sitem adlı klasörde bulunan ı*ndex.html sim gesini tıklayarak sayfayı vveb
tarayıcında çalıştır.
Ö j C ;\U 5 ere\selcu k \D o cu m en t5 \D <» lrto p \B en im S rtem \in d e x .h tm l
4§? Selin ö z d e m ir 'in W eb Sitesi
D osya
D üzen
-- «IHI—
G ö n ın u m
X
mm
Sık K uHemtaniar
------- ---
m m
■
i
k------_ ---- ---------------
«
A raçlar
V ardım
1
rnrnmm
Merhaba,
Ben Sefa Özdemir 2002 yânın Eylül avmda Ankara'da dünyaya geMsan-Kız kardeşinin adı M * . O da 2007 y*am Kasan ayında dünyaya gekS
Sizlere b en hobilerimden bent de yaşadığım şehirden bahsedeceğim.
Hobilerim içm t&İa
Sayfanın başına yerleşen simgeyi gördün mü? Ve
.mpg veya .mpeg (Moving Pictures Expert Group):
kaydettiğin ses otomatik olarak çalışmaya başladı
internet Explorer, Mozilla Firefox ve Chrome gibi
mı?
tanınmış birçok vveb tarayıcıda sorunsuz çalışan
internetteki en popüler video türüdür.
Sence, ses çalma programı neden sayfanın en
üstünde görüntülendi? Çünkü, <embed> işaretini
.mov (öuickTime): Apple firması tarafından
hem en <body> işaretinin altına yazdık ve vveb
geliştirilen .mov dosyaları, oldukça popüler
tarayıcı sayfayı yüklerken ilk olarak <embed>
video türlerinden birisi olmakla beraber VVindovvs
işaretini gördüğü için ilk sırada onu görüntüledi.
kullanan bilgisayarlarda internetten ücretsiz bir
program indirilirse çalışır.
Eğer, ses programının görünm eden sesin
çalışmasını istiyorsan, yapman gerekeni biliyorsun.
.rm veya .ram (Real Video): Videoların hızlı
Sadece Hidden özelliğinin değerini True yapman
çalışmasına izin verecek kadar küçük dosya türü
yeterli olacaktır.
olmakla beraber, videonun görüntü kalitesi diğer
dosya türlerine göre oldukça düşüktür.
Sayfamıza vid e o ekleyelim
•swf veya .flv (Flash): Son 13-14 yılın en
Web sayfamıza video eklem ek için d e <embed>
popülerlerinden birisi olmakla beraber son bir iki
işaretini kullanacağız. Ses dosyasına benzer şekilde,
yıldır yavaş yavaş kullanım oranı düşen bu video
video dosyalarının da farklı türleri vardır ve her
türü, çalıştığı bilgisayarlarda küçük bir programın
türün avantajları ile beraber dezavantajları da
kurulu olmasını ister. Aksi taktirde çalışmaz.
bulunmaktadır.
Flashplayer olarak adlandırılan ücretsiz program,
Önemli video dosya türleri şunlardır:
kurulabilir.
internete bağlı bir bilgisayara birkaç dakika içinde
.avi (Audio V ideo Interleave): Windows kullanan
.mp4 (MPEG-4): İnternetteki bu en yeni video
tüm bilgisayarlarda rahatlıkla çalışan bu dosya türü,
türünü, youtube.com gibi en büyük video sitesi de
Windows olmayan bilgisayarlarda çalışmamaktadır.
önermektedir. Mp4, dosya büyüklüğünü düşürür ve
VVeb'deki en yaygın video türlerinden birisidir.
mümkün olan en kaliteli görüntüyü sağlar.
,wmv (VVindovvs M edia Video): VVindovvs kullanan
Yasadigim sehir.htm l sayfasına vid e o
ekleyelim
bilgisayarlarda sorunsuz çalışan bu dosya türü,
VVindovvs olmayan bilgisayarlara ancak ücretsiz bir
program internetten indirilirse çalışır.
Daha ö n ce söylediğimiz gibi video dosyalan
vveb sayfalarına ses dosyalarında olduğu gibi <embed> işareti ile ekleniyor.Tek önem li fark, videoların
görüntüsü olduğu için görüntünün ekrandaki büyüklüğünün ve yerinin ayarlanması gerekmektedir.
Bu sefer, kendi bilgisayarımızdaki bir videoyu kullanm akyerineyoutube.com adresindeki bir videoyu
sayfamıza ekleyeceğiz. Selin'in yaşadığı şehir olan Ankara'yı tanıtan bir videoyu, yasadigimsehir.html
sayfasına ekleyeceğiz.
Öncelikle, youtube.com sitesine giderek arama kutusuna "Ankara tanıtım filmi''yazıp klavyede Enter tuşuna
basıyoruz.
Bulunan videolardan, dördüncü sıradaki videoya tıklayarak açıyoruz.
ü lt ® h^^/vw/v^..yout»^com''reîijfe?segrdı_ûefy=anfeara»t»«^4‘^lt^4f^ıw*rafni*>201i8to^s:»nk-af»*tan%C4%ttt%C4%Blr
O
aftfejNi ta n ıtım film i 2011
Dosya
D üsen
G ö rü n ü m
Stk Kullandaniar
YotıjJB
A raçlar
Yardım
«akara tam lım M
2311
Ankara Tanıtım Filmi hero0rersci.comYouTube.FLV
Oy serfıaipacus i S monSıs
3
; § fi vmn
Ankara tanıtım videosu
tim vtdfroau A nkara ü temastı vâfeö*u
fyfH*®öTw*O0#Ç<*rti$ m11 # «feş**
ste3öfcıı& t
ANKARA TANITIM FİLMİ
utceo c e k m i e h fotoğraf catktusi «unsu s e s u e n d V » *
p ro d ü k s iy o n H taaeT iB S m t s m a t »
» mtmıa
vetân
mm
Ankara Turizm Rehberi Tamtam Filmi
1
%I
Anfcvi Tandan Fimi
«feara»afisi i 7 matnms ago i ? 1 f ine»»
Açılan sayfada, video film çalışmaya başlar. Videonun hem en altında bulunan ve "paylaşmak"anlamına
gelen Share düğm esini tıkladıktan sonra açılan küçük pencerede "yerleştirmek"anlamına gelen Embed
düğm esini tikla.Youtube.com, bu videoyu kendi sayfamıza yerleştirmemiz için gerekli kodları hazır olarak
verecek!
h t t p :/ / y o u t u . b e A / 4 m b 2 Q x Q /
Opöons^
p tı ı-ım iM
mum
Kodların üzerinde fareyle sağ tıklıyorum ve Kopyala satırını tıklıyorum.
After mstersg your seledıon copy and pasie flıe eroöftsl code above The ceste changes öased
«ıôorsttecöen.
Artık bu kodları yasad ig im seh ir.h tm l sayfasında uygun bir yere yerleştirebilirim.
Şimdi, Not Defteri programında Dosya menüsünden Aç... satırını tıkla. Açılan pencerede sol bölümde
Masaüstü'nü tıkladıktan sonra orta bölümde BenimSitem adlı klasörü tıkla. Pencerenin sağ alt
jjjA?
*
Düzenle *r
H
Ben,m
SitemJ
!■i f jj
S tic K u l l a n ı l a n l a r
g
M
M a se û s tü
fH
S o n Y e r le r
]
-
Lİ
#
T*
D eğiştirm e tarihi
Ad
r
p\
A»i- eertaKÎitem
Yeni klasör
İ.M- K e r y t t o n Y ü k l e m i
f
*
A ram em zia eşleşen e ğ e yok.
j
mkitaplıklar
3
B e lg e le r
J i
M ü z ik
S £
R e s im le r
S
V id e o
" Ş r B ilg is a y a r
ğ i n Y e r e l D is k ( C : )
t a
Y e r e l D is k (E h )
‘İM e t in B e ig e le r iC
D o s y a A d ı:
JO
K c t f a m a ; !; A N S I
i
iptal
mi
f jjf o f
!
D ü z e n le
w r
I
i
►BenimSitem
km M
»
1
AmtBenmSiem
Y e n i k la s ö r
S ık K u lla n ı la n l a r
*
!
m
m
-
a
D e ğ iştirm e tarih i
T ik
#
;j j ) K a r ş ı d a n Y ü k l e m
İ l i h o b ile r im
2 3 .0 6 2 0 1 2 22:20
H TM L
B elge
j
S İ
M a sa ü stü
S
2 3 .0 6 .2 0 1 2 X 8 :3 3
HTML B elge
j
g
S o n Y e r le r
| | j y a s a d ig im s e h ır
2 3 .0 6 ^ 1 2
H TM L
B elge
\
i
i
i g § K it a p lık la r
İÜ ) B e lg e le r
J>
M ü z ik
i
1
1
m
l M e t
X 7 :? S
Âplan yasadigimsehir.html s^ftısiud® <h1 >Başkent Ankara</h1 > kodlarının bir altında boş bir satır
tfcpPiilaMrti»SiğtıttlpatelÇffiJI pgfBSftdf Yapıştır'ı tikli..
_ ş ; y a s a d ig im s e h k - N o t D e fte r i
£o sya
D ügen
g iç im
g ö rü n ü m
Y a r d ım
<html>
<head>
< title >
S e l i n * i n Y a ş a d ığ ı Ş e h i r : A n k a ra
< / t it le >
</head>
cb o d y b g c o lo r = ,,p i n k n t e x t = " b l u e ” >
< h l> B a ş k e n t A n k a r a < / h lx b r >
< P
,_________________________
B e n , ü lk e m iz ]
Toplam n ü fu s !
a y n ı zamanda!
A n a d o lu t o p r p
Bu i l ç e l e r d e j L
<marquee d i r i
G e ri Â l
iyo ru m .
M ık a r a ,
ilid ir .c b r ;
lılu n a n Ankaı
Kopyalı
Yapıştır
Tü m ü n ü Seç
<ol>
< li> A İt m d a ğ
< li> A yaş|
< li> B e y p a z a r
<1 i > ça n k a y a i
< li> G ö lb a ş ı |
<1i >Kazan
S a ğ d a n s o la o k u m a d ü z e n i
U n ic o d e d e n e t im k a r a k t e r le r in i g ö s t e r
U n ic o d e d e n e tim
k a r a k t e r i e k le
İME Aç
Yeniden Dönüştürme
Youtube'da kopyaladığımız kodların sayfamıza geldiğini göreceksin.
3
O o syaPü ıg n
Ndt D e f l e r i ________
Biçim
ŞOnanOrn
___ __________
-
Yardım
<htm1>
<head>
<title>
S e lin 'in Yaşadığı Şeh ir: Ankara
</titl«>
</head>
<body bgcolor»"pink" te x t*” b1ue’‘>
<hl>Başkent A n kara< /hlxbr>
<iframe width*”420" height*“ 315" src="http://wiıw. youtube.com/embed/v4inb2QxQARl'' frameborder»"0'
al 1owfu11screen></1 fraine»
Htır>|
Ben, ülkemizin Başkent'i Ankara'da yaşıyorum.
Toplam nüfusu 5 milyon civarın d a olan Ankara,
aynı zamanda ülkem izin en büyük ik in c i ilid ir.< b r>
Anadolu to p ra k la rın ın o rta bölümünde bulunan Ankara'nın toplam 25 ilç e s i bulunmaktadır.
Bu ilç e le rd e n b a z ıla rı şu n la rd ır:
<ınarquee di rection=up>
Yapıştırdığım kodlar uzun bir satır olduğu için
Src özelliği videonun g eleceği kaynak adresi işaret
frameborder="0" ifadesinden sonra fareyle
ederken.
tıklayıp Enter'a basarak kodlarının devamının bir alt
satıra inmesini sağladım.
Frameborder özelliğinin O değerini alması
çerçevenin etrafında sınır çizgisi olmaması
<iframe> bir vveb sayfası içine bir çerçeve açarak
içine bir başka sayfa veya içerik yerleştirmemize
yardımcı olan bir işarettir. Bu işlemle, bir anlamda,
kendi sayfamız içine youtube.com sitesinden
içerik alıyoruz.
anlamına gelmektedir.
Allovvfullscreen, kullanıcının videoyu tam ekran
yapabilm esine izin verilmesi anlamına gelmektedir.
Klavyende Ctrl ve S tuşlarına basarak eklediğimiz
kodları kaydet.
<iframe> işaretinin vvidth özelliği açtığımız
çerçevenin genişliğini belirlerken, height özelliği
açtığımız çerçevenin yüksekliğini belirliyor.
M asaüstü'ndeki BenimSitem adlı klasörde
bulunan yasadigimsehir.html simgesini çift
tıklayarak sayfanın vveb tarayıcıda açılmasını sağla.
|gjC:\Usere\sdcuk\Documcnt5\Deslrtop\lknimSrtern\yasadigiroschir.html
j f j Selin'in Yaşadığı Şchin Ank... x |gjggg|j
Dosya
Düzen
Görünüm
a
Sık Kullanılanlar
Araçlar
Yardım
Başkent Ankara
Ben; ûScenaan Başkent'i Ankara'da yaşıyorum Toplam nüfusu 5 rfyon civarında olan Ankara, aynı zamanda ülkemizin en büyük Sancı ilidir.
Anadolu topraklanma orta böftimünde bulunan Ankara'nın toplam 25 ilçesi bulunmaktadır. Bu ilçelerden bazdan şunlardır:
2 Ayaş
3. Beypazan
4. Çankaya
......
' v
■■ ■..
■ ....... ..
î. Ğelbaşr
■ ...Kazan
?- Keçiören
Videomuz çalışmaya hazır. Video çerçevesi üzerine tıklayarak izlemeye başla!
B ö lü m
Sayfalarımıza üst etiket
(meta tag) ekleyelim
Description ı,st * M
Keyvvords usl etiketi
Robots üst etiketi
Content-type ■t etiketi
Refresh üst etiketi
Sayfalarımıza üst etiket
(meta tag) ekleyelim
Üst etiket (meta tag) nedir?
site n d e hangi bilgilerin o ld u ğ u n a ö n celik le üst
etik etlere bakarak karar verm ektedir.
W eb sitesinin yapım ını bitirdikten sonra, intern et
kullanıcıları G o o g le, Bing, Y ahoo gibi aram a
Bir ö rnek v erm ek gerekirse, 5. sınıf m atem atik
m otorlarını kullanarak site n e ulaşm ak v e ziyaret
d e r sin d e ü ç g e n ler k on u su n u çalışm ak istiyorsun
e tm e k isteyebilirler. İşte, vveb arama m otorlarının
v e in tern et tarayıcını açıp G o o g le gibi bir arama
site n d e b u lunan bilgileri bulup, aram a yapan
m o toru n a "üçgenler 5. sınıf konu anlatım ı"yazıp
insanlara su n ab ilm esi için site n d e ü st etiketleri
klavyend en Enter tu şu n a basarsın. Bu konuyu
(m eta tag) d ü z g ü n bir şek ild e hazırlaman
kapsayan vveb siteleri G o o g le tarafından bulunur
gerekm ektedir, çünkü bu arama m otorları senin
v e aram a sonuçlarına g ö r e bir sitey e girip çalışm aya
başlayabilirsin.
I
___ ......
'
. '
'
-
L
h I M.
| f •?§ üçgenler 5. sınıf konu ani;- x
^
-
e
<İljwwwgoogleîorrU^rf[tr&sc3ient«psy-ab&qg%C3%BC%C3%A7genSef*S.ı-s%C4%31n%C4%B1f*fconu*anlat%i &
G o o g le
[üçgenler 5. sınıf konu anlatım ]
2
Arama
Her şey
Görseller
Videolar
m m vKteokomıaniatimi corn* S-stnif-ucgenter-konu-anteömi/
S sınıf üçgenler videolu konu anlatımı «e çözümlü sorular 5 sınıf üçgenler video izle
seyret
Haberler
Daha fazla
Ankara
Konumu değiştir
Web
T ü r k ç e y a z ılm ış
m to
Sayfaların
» * ıt dersıziesene comfetiketM-Sinrf ucgenlerAonu-anlatimi lıtml
4 Slnif üçgenler konu anlatimi izle. 4 Slnlf üçgenler konu anlatlml ders videosu 4
Sinif üçgenler konu anlatimi sorulan.
m m tombak cem t Ders Notlan >Matematik
17 Kas 2008 - üçgenler konu anlatımı dosyasını Örneğini kağıdını sorulan».
indir,download.yttkle ■Matematik -Ders ... Yeni Pencerede Açılır (S Saniye Sürer)...
\
Olun
|
kelimelerin ile en ilgili olandan daha az ilgili olana
Resimde;
doğru bir liste olarak sıralar.
1 numaralı çerçeve arama m otorunun adresidir. En
çok kullanılan arama motorları şunlardır:
Üst veri olarakTürkçeleştirdiğimiz Meta Tag'ler
kısaca, arama motorlarına w eb sayfaları hakkında
w w w .aooale.com .
sayfanın kısa tanımı, anahtar kelimeleri, sayfayı
w w w .vahoo.com .
yapan kişinin adı ve sayfada kullanılan dil karakter
kümesi (Türkçe karakterler vb.) gibi bilgiler sağlar.
ww w.bina.com
2 numaralı çerçeve ise arama motorunda aradığın
kavrama ait anahtar kelimeleri yazabileceğin metin
Şimdi en önem li m eta tag'lere bir g öz atalım.
Tanımlama (Description)
kutusudur. Anahtar kelime, arama yapacağın
Hazırladığın w e b sitesiyle ilgili tem el tanımlamaların
kavramı kısaca özetleyen kelime veya kelime
yapıldığı etikettir. Burada, hazırladığın w eb sitesini
gruplarıdır. Örneğin, MucitlerGaraji.com çocuklar
bir iki cüm leyle tanımlayabilirsin. Description
ve gençlere yazılım eğitimleri sağladığına göre
etiketinin tem el kullanımı şu şekildedir:
sitemizi bulmak için bir arama motorunda "çocuklar
için programlama" veya "çocuklar için w eb tasarımı"
cmeta name="description" content="Site
anahtar kelimelerini yazarsın.
tanımlaması buraya yazılacak"/>
3 numaralı çerçeve ise arama sonucunda bulunan
Description etiketinin tem el kodlaması şu
w eb sitesi listesidir. Arama motorları, yazmış
şekildedir: <meta name="description"
olduğun anahtar kelimelere en uygun w eb
kodunu yazdıktan sonra content özelliğinin içine
sitelerini bulur ve bunların adreslerini senin anahtar
hazırladığın w eb sitesiyle ilgili açıklamayı ekleriz.
fiosya
Düsen
fiıçim
görünüm
Yardım
<html>
<head>
<meta names"descript1on" content="Bu s e lin özdemir’in s it e s id ir . Kendisi 2002 y ılın d a
dünyaya gelen S e lin in h o b ile ri ve doğduğu şe h ir g ib i konularda b ilg i a la b ilir s in iz .’V
< title>
S e lin özdemir’ in web S ite s i
< /title>
</head>
<body>
<embed src="hosgeldi n iz .wma" fvidden«"false" loop= "true" au to start*"tru e">
<p style = "co lo r:b lu e ; background-color.'yello**"»
< nl> Se1in özdem ir'in web S ite s in e Hoşgeldiniz!</hl>
</p>
<h2>Me rh a b a . </H2> <br>
Selin'in vveb sitesinde bulunan index.html sayfasına
yukarıdaki değişikliği yaparak ilk Description
ve listeleme ihtimali o kadar artar.
Keyvvords etiketinin tem el kullanımı şu şekildedir:
etiketini eklemiş olduk.
<meta name="description" content="Anahtar
A n ahta r Kelim eler (Keyvvords)
Kelime 1, Anahtar Kelime 2, Anahtar Kelime 3
Keyvvords de aynı Description gibi arama
" />
motorlarının geliştirilen vveb sitesini daha kolay
Yukarıdaki kodları incelediğin zaman bir sayfa
bulmasına yardımcı olur. Description etiketi,
için birden fazla anahtar kelime kullanabileceğini
sitemizin ne amaçla geliştirdiğini ve özelliklerini
görebilirsin. Anahtar kelime kullanırken hazırladığın
açıklayan kısa bir yazıyken, anahtar kelimeler
vveb sitesiyle ilgili doğru kelimeleri seçm eye dikkat
(keyvvords) arama motorlarına bir şey aramak için
etm en gerekir. Aksi takdirde, arama motorlarının
yazılan kelimeleri ifade eder. Keyvvords etiketinde,
vveb siteni bulup kullanıcılar gösterm e ihtimali
sitenle ilgili ne kadar doğru ve çok anahtar kelime
azalır.
tanımlarsan, arama motorlarının senin siteni bulma
ı; inde* * N ot Defteri i
g osya
D ûjen
fiıçim
ĞOfünum
ja n tım
<html>
<head>
<meta name="description” content="Bu S e lin ö z d e m ir'in s i t e s i d i r . Kendisi 2002 y ılın d a
dünyaya gelen s e l i n 'i n h o b ile ri ve doğduğu ş e h ir g ib i konularda b i l g i a l a b i l i r s i n i z . ”>
<metaname="keywords" content=”se1in özdemir, ilk ö ğ re tim ö ğ re n c is i, sertab erener h a y ra n ı, Anka
.....
......................................
< tıtıe >
s e lin ö z d e m ir'in web s it e s i
< / t it le >
</head>
<body>
<embed src="hosgeldiniz.wm a" h idden="false" lo op="tru e" a u to sta rt= "tru e ">
<p s ty 1e * "c o lo r: b lu e ; background-color: y e l1ow">
Yukarıda, Selin'in vveb sitesinin kaynak kodunda
görüldüğü gibi keyvvords etiketinin içinde anahtar
kelimeler vermen gerekiyor. Buradaki örnekte, Selin,
arama motorlarında "selin özdemir" veya "ilköğretim
öğrencisi" veya "Sertab Erener hayranı" veya "Ankara"
yazan birisine kendi vveb sitesinin gösterilmesini
Robotlar (Robots)
Robot kelimesi ilginç geldi, değil mi? Hazırlamış
olduğun vveb sitesinin her zaman arama motorları
tarafından bulunarak kullanıcılara görüntülenmesini
istemeyebilirsin."Hazırladığım vveb sitesinin arama
motorlar tarafından bulunmasını ve gösterilmesini
hedefliyor.
neden istemeyeyim ki?"diye düşünebilirsin.
Bazen istemeyebiliriz! Örneğin, vveb siteni
içine yazdığın kodlar senin vveb sitenin arama
yeni hazırladığın ve halen eksikleri olduğu için
motorları tarafından takip edilip edilmem esini
başkalarının görmesini istemeyebilirsin. Arama
sağlıyor. Virgülden önce yazdığın index kodu vveb
motorlarının siteni bulmasını bir süre engellem ek
sitenin arama motorları tarafından takip edilmesini
isteyebilirsin. Bu ve benzeri durumlarda Robots
sağlar. VVeb sitenin arama motorları tarafından takip
etiketini kullanarak hazırladığın vveb sitesinin arama
edilmesini istemiyorsan virgülden ön ce noindex
motorları tarafından takip edilip, edilm em esine
yazman gerekiyor. Virgülden sonra yazdığın
karar verebilirsin. Robots etiketinin kullanımı şu
kodlarla da vveb sayfandaki köprülerin takip edilip
şekildedir:
edilm em esini sağlayabilirsin. Köprülerin arama
cm e ta n am e ="ro b o ts"
co n ten t="in d ex,fo llo w " />
motorları tarafından takip edilmesini istiyorsan
virgülden sonra follovv yazman gerekirken,
köprülerin arama motorları tarafından takip
Kodları incelediğimizde cmeta name="robots"
edilmesini istemiyorsan virgülden sonra nofollovv
ifadesinden, etiketin robot türünde
yazman gerekir. Nofollovv ile, arama motorlarının
olduğunu görürüz. Burada asıl önem li olan
sayfandaki diğer sayfalara olan köprüleri de
content="index,follow" kodudur. Content'in
engellem iş olursun.
3? ifiöSK- Not Defterî
fiosy# Döien Biçim fiörûnflm £w<fcm
chtml>
ch«ad>
cmeta name="description" content="Bu S e lin özdem ir'in s it e s id ir . Kendisi 2002 y ılın d a
dünyaya gelen s e li n 'i n h o b ile ri ve doğduğu şehir g ib i konularda b ilg i a la b i li r s i n i z . ">
cmeta name=''keywords'' content="selin özdemir, ilköğretim öğrencisi, sertab erener hayranı, Ankara">
cmeta name="robots" content="noindex. nofollow">
c title >
s e lin Ö zdem ir'in vveb s ite s i
< /title>
c/head>
cbody>
/a rn K a H
e r r e '^ n c n a l r l î m T
vuma” h ,i r l / ( a n B " f a l e a ” ^ n r ^ n e " t r ı ı a ll, a ı » t f t « t a r f ,= ,V r « ı a ,,\
Selin'in vveb sitesinin kaynak koduna baktığımızda
artık sitesinin herkes tarafından görülebilmesini
zaman Robots etiketinde content'in içerisine
istediğinde, content'in içerisine index, follovv
noindex ve nofollovv yazılmış. Yani, Selin şu
yazacak.
anda vveb sitesinin ve linklerin arama motorları
tarafından takip edilmesini istemiyor. Elbette,
Content-Type
Hazırladığın vveb sitesinin içerik dilini belirlemek
için content-type işareti kullanılır. Content-type
Web sayfası hazırlamanın zor aşamalarından birisi
de, sayfada kullandığın dile ait (Türkçe, İngilizce,
Fransızca, Rusça, Arapça gibi) harflerin ve işaretlerin
sorunsuz bir şekilde görüntülenmesidir. Sayfada
kullandığın dile ait özel harf ve işaretlerin sorunsuz
olarak görüntülenmesi için gerekli ayarlamaları
yapmazsan, vveb sayfalarını görüntüleyenler
aşağıdaki gibi tuhaf işaretler içeren metinlerle
(içerik dili) işareti ile istemiş olduğun bir dile ait tüm
harf ve işaretleri sorunsuz olarak görüntüleyebilirsin.
Örneğin, Türkçe'de "ı,ş,ç,ö,ğ,ü, İ,Ş,Ç,Ö,Ü"gibi harfler
tüm dillerde yok. Bu yüzden hazırlamış olduğumuz
vveb sitesinin sahip olduğı dil türünü content-type
işareti ile Türkçe olarak belirlemezsek bir önceki
sayfada gördüğümüz tuhaf işaretlere sahip metinler
ortaya çıkabilir.
karşılaşabilirler:
Mesela MucitlerGaraji.com'da content-type ile dil
jO
M u c itta rG a ra ji.c o m
Türkiye*ma başkenti Ankara'ciyr.
Ankara'nyn plaka koçtu 06*dyr.
I tanımlaması yapılmasaydı aşağıdaki metni anlamak
ne kadar da zor olurdu, değil mi?
Neden Mucitler Garajy
Verdidimiz örneklerdeki insan taryn önemli bir ortak noktasy, teknolojinin bir üretim aracy olduöu gerçeöini çocuk yapta fark etmeleridir!
Bir dider ortak noktalary ise, genellikle çalypmaiaryna ilk olarak bir evin garajynda baplamyp olmalarydyr.
M ucitlerGaraji.com , 9 -1 6 ya p grubundaki çocuklarymyza Milli Eöitim sistemimiz tarafından sunulmayan "üretim od ak ly teknoloji
edltinıinl". "bizim evim izin o a ra t» v o k kir bahanesini ortadan kaldırarak Online vermeyi amaçlamaktadyr.
M ucitiergaraji.com eöitim portalynyn tem el felsefesi, çocuklarymyza var olan bir teknolojiyi hyzly ve kolay bir pekiide kullandyrmak d edil,
direndikleri teknolojinin alt yapysyny, çalypma prensiplerini ve onu olupturan biiepenteri de görmelerini ve direnmelerini saüamaktyr.
M ucitlerGaraJi.com . Program lam a, 3 0 Görsel Ta sa rym , W e b Ta s a rym y, Robot Ta s a rym y v e Ü re tim i, O yu n P rogram lam a ve
Girişim cilik gibi 21. vüzyyi ib dünvasynvn ve sosyal vabantvnvn veni nesillerden beklediü cebitli bilgi ve becerileri çocuklarymyza
kazandyrmayy hedeflemektedir.
Aslında vveb tarayıcıları (yani G oogle Chrome,
name="Content-Type" ile Content-Type işareti
İnternet Explorer, Mozilla Firefox, Safari vb.) son
oluşturulduktan sonra co n ten t özelliğinin içerisine
yıllarda çok daha zeki davranarak vveb sayfasında
sayfandaki içeriğin türünü ve kullanması gereken
kullanılan dili otom atik olarak tanımaya başladılar.
dili belirtiyorsun. Charset=UTF-8 ile bu vveb
Ancak, bu otom atik dil tanım a özelliği bazen
sayfasının UTF-8 koduna sahip harf, rakam ve
düzgün çalışmayabiliyor. Bu yüzden, işimizi
işaretleri kullandığı belirtilmiştir.
şansa bırakmadan, sitemizi kullanan kişinin vveb
Türkçe'ye özel harfleri sorunsuz görüntüleyebilm ek
tarayıcısının sayfalarımızda kullandığımız dili
için, vveb sayfalarının dilini
sorunsuzca tanımasını sağlayacak kısacık kodlamayı
sayfalarımıza eklemeliyiz.
*Windows-1254,
Content-Type işaretinin tem el kullanımı şu
* iso-8859-9,
şekildedir:
* Iatin5,
cm eta http-equiv="Content-Type"
* x-mac-turkish kodlarından birisi ile
content="text/html; charset=UTF-8" />
belirleyebilirsin.
Yukarıdaki kodları incelediğin zaman
turkiyetanitim * Notepad
File
Edit
Formst
V «w
H«4p
<html>
<head>
< title> H u citle rG araji. com</title>
cmeta http-etjuiv“ "content-type" content” "te x t/ h ta lj charset“ UTF-8">
</head>
<body>
Türkiye'nin başkenti A nkara'dır. < b r »Ankara'nın plaka kodu 86'd ır .
j</body>
! </htnl>
Yukarıda hazırlanan vveb sitesinin kaynak koduna baktığın zaman content-type işareti oluşturulduktan
sonra vveb sitesinin dilinin UTF-8 olarak yazıldığını göreceksin. Yukarıdaki kodun ekran görüntüsü ise şu
şekilde olur:
ı— _ _ _ ıııı_ ıı_ ı_ _ ı<ııııııııııııııı>^ _ ı_ _ >^ _ ^ _ ıı___ _ ıııııııııııııı_>^ _ ^ _ ^ _ _ ^ _ _
i
mlah
d ' G \ U se rs\U ğu r\D e slcto p ',tu rk P
Türkiye'nin başkenti Ankara’dır.
Ankara'nın plaka kodu 06'dtr.
'»
ö
|
igŞ Mu<ftteiGaraji.com
S ö z lü k
DHTML:
Dynamic HyperText Markup Language (Dinamik Hiper Metin İşaret
Dili) kelimelerinin baş harflerinden oluşan bir kısaltmadır. Zaman
içerisinde HTML'nin vveb sayfalarını oluşturmada yetersiz kalması
sebebiyle CSS ve JavaScript teknolojilerinin beraber kullanılmasıyla
ortaya çıkmıştır. Günümüzde vveb sayfalarına görsel hareketlilik
kazandıran en etkili teknolojidir.
HTML:
HyperText Markup Language (Hiper Metin İşaret Dili) kelimelerinin
baş harflerinden oluşan bir kısaltmadır, internette çalışan vveb
sayfaları oluşturmak için kullanılan işaret dilidir.
HTTP:
HyperText Transfer Protocol (Hiper Metin Transferi Protokolü)
kelimelerinin baş harflerinden oluşan bir kısaltmadır, internette,
sunucu ve istemci arasında verilerin nasıl aktarılacağını belirleyen
kural ve yöntemleri kapsayan protokoldür.
İnternet:
Birçok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında
yaygın olan ve sürekli büyüyen bir iletişim ağıdır.
İstemci:
İnternette, sunucu bilgisayarlardan veri alan kullanıcı bilgisayarlara
"istemci"denilir. İstemci bilgisayarların bilgiye erişim yetkileri sunucu
bilgisayarlar tarafından belirlenir. Eğer bir bilgisayardan internete
bağlanılarak vveb siteleri ziyaret ediliyorsa o bilgisayar istemci(Client)
bilgisayardır.
Sunucu:
internette gezinen kullanıcıların istemiş olduğu verileri onlara dağıtan
bilgisayarlara ve bu bilgisayarlara yüklenen özel yazılımlara verilen
genel addır.
TCP/IP:
Transmission Control Protocol/lnternet Protocol (iletişim Kontrol
Protokolü/İnternet Protokol) kelimelerinin baş harflerinden oluşan bir
kısaltmadır, internette bulunan bilgisayarlar ve diğer araçlar arasında
veri iletişimini olanaklı kılan iletişim protokollerinin genel adıdır.
Web sayfası:
HTML ile oluşturulan ve vveb tarayıcılarda görüntülenebilen, metin,
ses, video, animasyon gibi içerikleri barındıran dosyalara vveb sayfası
denilir.
Web sitesi:
Web kullanıcılarına bilgi aktaran veya hizmet sunanTveb sayfalarının
tüm ünü kapsayan bir dosya topluluğudur.
Web tarayıcı:
Web tarayıcısı, kullanıcıların internette yer alan vveb sayfalarını
açmasını sağlayan bir yazılımdır.
WWW:
VVorld Wide Web (Dünya Çapında Ağ) kelimelerinin baş harflerinden
oluşan bir kısaltmadır. Milyonlarca bilgisayarın birbirine bağlanarak
çalışmasından meydana gelen internetin vveb sayfaları yoluyla veri
sağlayan halidir.

Kitap Bölümlerinin Açıklaması

Transkript

Benzer belgeler

vodafone freezone 18. türkiye liselerarası müzik yarışması

btp 102 arasınav 2 cevaplar

E-Okul Kullanıcı Tanımlama - hatay il millî eğitim müdürlüğü

Tam Metin(URL)

Kapsamlı Dosya Desteği Gelişkin İşlevsellik Shell Extension

Bu-Soz-Kimin-27 Ludwig van Beethoven Bu sözün

Genç Türk cazcılarının albümleri

İçerik Listesi