{"id":2467,"date":"2020-05-11T12:29:59","date_gmt":"2020-05-11T09:29:59","guid":{"rendered":"https:\/\/bilogtek.com\/?p=417"},"modified":"2020-05-11T12:29:59","modified_gmt":"2020-05-11T09:29:59","slug":"html-2","status":"publish","type":"post","link":"https:\/\/www.bilogtek.com\/?p=2467","title":{"rendered":"Html 2"},"content":{"rendered":"\n

BA\u011eLANTILAR:<\/h1>\n\n\n\n

Web sayfalar\u0131m\u0131z\u0131n i\u00e7eriksel k\u0131sm\u0131n\u0131 bitirdi#imize g\u00f6re !imdi web sayfalar\u0131nda en \u00e7ok kullan\u0131lan unsurlardan biri ba#lant\u0131lara (Hyperlink)ge\u00e7ebiliriz.Ba#lant\u0131lar ziyaret\u00e7inin bir t\u0131klama ile, sitenizin i\u00e7inde veya d\u0131!\u0131nda, belirledi#iniz herhangi bir adrese gitmesini sa#lar.Ba#lant\u0131lar browser’a <a<\/strong>> etiketi ile bildirilir.<\/p>\n\n\n\n

href<\/td>Ba#lant\u0131n\u0131n adresi bu parametreyle bildirilir<\/td><\/tr>
target<\/td>Sayfan\u0131n a\u00e7\u0131laca#\u0131 yeri belirler.Target parametresi,a\u00e7\u0131lacak sayfa yeni <\/strong>bir sayfa olarak a\u00e7\u0131lacaksa‘_blank’<\/strong>,ayn\u0131 pencere i\u00e7inde a\u00e7\u0131lacaksa ‘_self<\/strong>‘,ayn\u0131 pencerere i\u00e7erisinde \u00fcstten itibaren <\/strong>a\u00e7\u0131lacaksa ‘_top<\/strong>‘ de#erini al\u0131r.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

<a href=http:\/\/www.sayfaadi.com target=\u201dblank\u201d> Sayfa Ad\u0131 <\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

Sayfam\u0131zda yukar\u0131daki sayfa g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi \u201cSayfa Ad\u0131\u201d\u00a0 ad\u0131nda\u00a0 www.sayfaadi.com\u00a0 <\/a>Internet\u00a0 sitesine\u00a0 ba\u011fl\u0131 bir yaz\u0131 yazar.Bu ba\u011flant\u0131ya t\u0131klad\u0131#\u0131m\u0131zda Sayfaadi.com sitesi yeni bir pencerede a\u00e7\u0131l\u0131r.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ba\u011flant\u0131lar konusuna girmeden sayfam\u0131za nas\u0131l resim ekleyece#imizi g\u00f6rm\u00fc!t\u00fck.7imdi bu resimleri nas\u0131l bir ba#lant\u0131 haline getirebiliriz bunu g\u00f6relim.A!a#\u0131daki \u00f6rne#i yazd\u0131#\u0131n\u0131zda, \u00fczerine t\u0131klan\u0131nca istedi#iniz bir adrese yeni pencere a\u00e7an bir resim elde edersiniz.<\/p>\n\n\n\n

<a href=http:\/\/www.sayfaadi.com <\/a>target=”blank”> <img src=”deneme.gif” ><\/a><\/p>\n\n\n\n

TABLOLAR:<\/h1>\n\n\n\n

Metinleri listelerin yan\u0131s\u0131ra tablolar yard\u0131m\u0131yla da d\u00fczenleyebiliriz. S\u00f6rf yaparken rastlad\u0131\u011f\u0131n\u0131z sayfalar \u00e7o\u011funlukla i\u00e7 i\u00e7e ge\u00e7mi! tablolardan olu!ur. Bu nedenle iyi bir sayfa tasarlamak i\u00e7in tablolara hakim olmak gereklidir. Tablolar <table>…<\/table> etiketleri aras\u0131na yaz\u0131l\u0131r.<tr> etiketi bir yatay s\u0131ra olu!turulur, bu yatay s\u0131ra istenilen say\u0131da <td> etiketiyle h\u00fccrelere b\u00f6l\u00fcn\u00fcr.A!a#\u0131daki \u00f6rne#e bakarak tablo mant\u0131#\u0131n\u0131 anlayabilirsiniz<\/h2>\n\n\n\n
<table border=”1″> <tr> <td >H\u00fccre1<\/td> <td >H\u00fccre2<\/td>  <\/td><\/tr><\/tbody><\/table>



<\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n\n\n

– 4 –<\/h2>\n\n\n\n
<td >H\u00fccre3<\/td> <\/tr> <tr> <td>H\u00fccre4<\/td> <td>H\u00fccre5<\/td> <td>H\u00fccre6<\/td> <\/tr> <\/table>  <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

H\u00fccre4 H\u00fccre5 H\u00fccre6<\/p>\n\n\n\n

<TD< td><\/p>\n\n\n\n

bgcolor<\/td>H\u00fccrenin i\u00e7inin rengini belirler.<\/td><\/tr>
background<\/td>H\u00fccre i\u00e7ine resim koyar.<\/td><\/tr>
border<\/td>H\u00fccre etraf\u0131na yerle!tirece#iniz \u00e7er\u00e7evenin kal\u0131nl\u0131#\u0131n\u0131 belirler<\/td><\/tr>
bordercolor<\/td>\u00c7er\u00e7eve rengini belirler<\/td><\/tr>
bordercolorlight<\/td>\u00c7er\u00e7evenin sol ve \u00fcst kenarlar\u0131n\u0131n rengini belirler<\/td><\/tr>
bordercolordark<\/td>\u00c7er\u00e7evenin sa# ve alt kenarlar\u0131n\u0131n rengini belirler.<\/td><\/tr>
align<\/td>H\u00fccrenin yatay konumu belirler<\/td><\/tr>
cellspacing<\/td>H\u00fccre etraf\u0131ndaki \u00e7er\u00e7evenin kal\u0131nl\u0131#\u0131n\u0131 belirler.<\/td><\/tr>
  cellpadding<\/td>H\u00fccre i\u00e7indeki elemanlar\u0131n (metin, resim, vs.) \u00e7er\u00e7eveden uzakl\u0131#\u0131n\u0131 belirler.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

<html><\/p>\n\n\n\n

<head><\/p>\n\n\n\n

<title>Bu bir table denemesidir<\/title><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<body><\/p>\n\n\n\n

<table width=\u201d250\u201d height=\u201d250\u201d bgcolor=\u201d#ffffff\u201d border=\u201d2\u201d bordercolor=\u201d5\u201d bordercolrlight=\u201daqua\u201d bordercolordark=\u201dblue\u201d align=\u201dleft\u201d cellapacing=\u201d2\u201d cellpadding=\u201d2\u201d><\/p>\n\n\n\n

<tr><\/p>\n\n\n\n

<td align=\u201dcenter\u201d>h\u00fccre<\/td><\/p>\n\n\n\n

<\/tr><\/p>\n\n\n\n

<\/table><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/html><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u00c7ER\u00c7EVELER (FRAME):<\/h1>\n\n\n\n

\u00c7er\u00e7eve tekni#i, bir web sayfas\u0131n\u0131 istenilen miktarda par\u00e7aya b\u00f6l\u00fcp, bu sayfa \u00fczerinde birka\u00e7 sayfa birden g\u00f6r\u00fcnt\u00fclenmesine olanak verir. Bu tekni#in en \u00e7ok kullan\u0131lan varyasyonu, sayfan\u0131n sol veya \u00fcst k\u0131sm\u0131ndan k\u00fc\u00e7\u00fck bir alan\u0131 b\u00f6lmek (yani sayfay\u0131 ikiye b\u00f6lmek), bu k\u00fc\u00e7\u00fck alana men\u00fc bilgilerini, di#er b\u00fcy\u00fck alana ise sayfan\u0131n as\u0131l i\u00e7eri#ini yerle!tirmektir.<\/p>\n\n\n\n

– 5 –<\/h2>\n\n\n\n

Fakat !unu da belirtmekte fayda var, bir\u00e7ok tasar\u0131mc\u0131 estetik a\u00e7\u0131s\u0131ndan \u00e7er\u00e7evelere pek s\u0131cak bakmaz; genelde \u00fcst \u00fcste tablolar kullanmay\u0131 tercih eder. Yine de pek s\u0131k kullan\u0131lmayan bu tekni#i akl\u0131n\u0131z\u0131n bir yerinde tutun, belki faydal\u0131 olabilir.<\/p>\n\n\n\n

\u00c7er\u00e7eve tekni#inde, ilk \u00f6nce parent(ana) frame denilen bir sayfa olu!turmak gerekir. <Frameset>… <\/frameset> etiketlerinin parametreleri olan cols ve rows ifadeleri ile sayfay\u0131 dikey ve yatay olarak ne oranda b\u00f6lmek istedi#imizi browser’a bildiririz. Src parametresi ile ana \u00e7er\u00e7evenin b\u00f6l\u00fcmlerinde g\u00f6r\u00fcnt\u00fclenecek sayfalar\u0131n adreslerini bildirdikten sonra, geriye biraz \u00f6nce adreslerini bildirdi#imiz sayfalar\u0131 uygun bir !ekilde haz\u0131rlamak kal\u0131r. 7imdi bu kar\u0131!\u0131k ifadeyi a!a#\u0131daki \u00f6rnekle daha iyi anlayal\u0131m, sonra da <frameset> etiketini inceleyelim.<\/p>\n\n\n\n

<html><head><\/p>\n\n\n\n

<title>\u00c7er\u00e7eve\u00f6rne#i<\/title><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<frameset cols=”150,*”><\/p>\n\n\n\n

<frame name=”menu” src=”menu.html”><\/p>\n\n\n\n

<frame name=”esas” src=”esas.html”><\/p>\n\n\n\n

<\/frameset><\/p>\n\n\n\n

<noframes><\/p>\n\n\n\n

<body><\/p>\n\n\n\n

<h1>Browser’\u0131n\u0131z\u0131n s\u00fcr\u00fcm\u00fc sayfam\u0131z\u0131 g\u00f6r\u00fcnt\u00fclemeye uygun degil, l\u00fctfen daha yeni bir s\u00fcr\u00fcm y\u00fckleyip tekrar deneyin!<\/h1><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/noframes><\/p>\n\n\n\n

<\/html><\/p>\n\n\n\n

Burada yapt\u0131#\u0131m\u0131z !ey ana sayfay\u0131 soldan 150 piksel geni!li#inde b\u00f6l\u00fcp iki sayfa elde etmekten ibaret. Ayr\u0131ca browser’a soldan ilk b\u00f6l\u00fcme (150 px olan b\u00f6l\u00fcm) ‘menu.html’, ikinci b\u00f6l\u00fcme ise ‘esas.html’ sayfalar\u0131n\u0131 yerle!tirmesini bildirdik.<\/p>\n\n\n\n

Burada dikkat edilmesi gereken nokta <frameset> etiketinin <\/head> ile <body> etiketleri aras\u0131na yerle!tirilmesidir.<\/p>\n\n\n\n

<Noframes>…<\/noframes> <\/strong>etiketleri i\u00e7inde yer alan b\u00f6l\u00fcm ise \u00e7er\u00e7eveden anlamayan eski s\u00fcr\u00fcm browser’lar i\u00e7indir. 7imdi a!a#\u0131daki kodlardan ilkini ‘menu.html’<\/strong>, ikincisini ise ‘esas.html’ <\/strong>ad\u0131yla ana pencereyi kaydetti#iniz dizine kaydedin.<\/p>\n\n\n\n

Menu.html<\/p>\n\n\n\n

<html><\/p>\n\n\n\n

<head><\/p>\n\n\n\n

<title>menu<\/title><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<body bgcolor=”teal”><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/html><\/p>\n\n\n\n

Esas.html<\/p>\n\n\n\n

<html><\/p>\n\n\n\n

<head><\/p>\n\n\n\n

<title>esas<\/title><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<body bgcolor=”Red”><\/body><\/p>\n\n\n\n

<\/body><\/h2>\n\n\n\n

<\/html><\/p>\n\n\n\n

Son olarak tekrar ana sayfay\u0131 a\u00e7t\u0131#\u0131n\u0131zda (ismi \u00f6nemli de#il, yeter ki di#er iki sayfa ile ayn\u0131 dizinde bulunsun!) sonu\u00e7 a!a#\u0131daki gibi olacakt\u0131r:<\/p>\n\n\n\n

– 6 –<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

A!a#\u0131da <frameset> etiketinin parametrelerini g\u00f6r\u00fcyorsunuz :<\/p>\n\n\n\n

  Rows<\/td>  Safay\u0131 enine b\u00f6lmenizi sa#lar<\/td><frameset rows=”150,*”> <frame name=”menu” src=”menu.html”> <frame name=”esas” src=”esas.html”> <\/frameset><\/td><\/tr>
  Cols<\/td>  Sayfay\u0131 boyuna b\u00f6lmenizi sa#lar<\/td><frameset cols=”150,*”> <frame name=”menu” src=”menu.html”> <frame name=”esas” src=”esas.html”> <\/frameset><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

cols ve rows parametreleri piksel de#eri alabilecekleri gibi ‘%’ cinsinden de de#er alabilirler, \u00f6rne#in:<\/p>\n\n\n\n

<frameset cols=”%20,%80″><\/p>\n\n\n\n

Daha \u00f6nce kulland\u0131#\u0131m\u0131z ‘*’ ifadesi ile b\u00f6l\u00fcnecek alan\u0131n geni!li#ini browser’a b\u0131rakabiliriz:<\/p>\n\n\n\n

<frameset cols=”%20,*”><\/p>\n\n\n\n

Son olarak sayfay\u0131 \u00fc\u00e7e veya daha fazlaya da b\u00f6!ebiliriz:<\/p>\n\n\n\n

<frameset rows=”150,200,100,*”> ifadesi ile ana pencereyi d\u00f6rde b\u00f6leriz.<\/p>\n\n\n\n

  frameborder<\/td>Ana sayfan\u0131n b\u00f6l\u00fcmleri aras\u0131nda s\u0131n\u0131r \u00e7izgisi olup olmamas\u0131s\u0131n\u0131 belirler.(‘yes’, ‘no’; veya ‘1’, ‘0’ de#erlerini al\u0131r)<\/td><frameset cols=”150,*” frameborder=”1″> <frame name=”menu” src=”menu.html”> <frame name=”esas” src=”esas.html”> <\/frameset><\/td><\/tr>
  Border<\/td>  \u00c7er\u00e7eveler aras\u0131ndaki s\u0131n\u0131r\u0131n kal\u0131nl\u0131#\u0131n\u0131 piksel cinsinden belirler.<\/td><frameset cols=”150,*” border=”10″> <frame name=”menu” src=”menu.html”> <frame name=”esas” src=”esas.html”> <\/frameset><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

7imdi de <frame><\/strong>; etiketinin parametreleri:<\/h2>\n\n\n\n
Src<\/td>Bunu zaten biliyorsunuz, \u00e7er\u00e7eve i\u00e7inde g\u00f6r\u00fcnt\u00fclenecek sayfan\u0131n yeri<\/td><\/tr>
marginwidth<\/td>Sayfan\u0131n solundaki kenar bo!lu#unu belirtir<\/td><\/tr>
marginheight<\/td>Sayfan\u0131n \u00fcst\u00fcndeki kenar bo!lu#unu belirtir<\/td><\/tr>
Noresize<\/td>‘1’ veya ‘0’ de#erlerini al\u0131r, ‘1’ verilirse pencere boyutlar\u0131 sabitlenir.<\/td><\/tr>
Scrolling<\/td>‘yes’, ‘no’, ‘auto’ de#erlerini al\u0131r, kayd\u0131rma \u00e7ubuklar\u0131n\u0131n durumunu belirler.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u00c7er\u00e7evelerle \u00e7al\u0131!maya ba!lamadan \u00f6nce bilmeniz gereken \u00f6nemli bir nokta:<\/p>\n\n\n\n

Hat\u0131rlarsan\u0131z ba#lant\u0131lar konusunda <a> <\/strong>etiketinin target <\/strong>isimli bir parametresi oldu#undan ve bu parametrenin ‘\u00c7er\u00e7evead\u0131’ de#erini alabilece#inden bahsetmi!tik. Bu parametre bize ba#lant\u0131n\u0131n belirtti#i adresdeki sayfan\u0131n ad\u0131n\u0131 verdi#imiz \u00e7er\u00e7eve i\u00e7inde a\u00e7\u0131lmas\u0131n\u0131 sa#lar.?sterseniz bunu bir \u00f6rnekte g\u00f6relim.<\/p>\n\n\n\n

Bu sayfay\u0131 index.htm ad\u0131yla kaydedin<\/p>\n\n\n\n

Bu sayfay\u0131 menu.htm ad\u0131yla kaydedin<\/p>\n\n\n\n

– 7 –<\/h2>\n\n\n\n

<html><head><\/p>\n\n\n\n

<title>\u00c7er\u00e7eve\u00f6rne#i<\/title><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<frameset cols=”150,*”><\/p>\n\n\n\n

<frame name=”menu” src=”menu.htm”><\/p>\n\n\n\n

<frame name=”ana” src=”esas.html”><\/p>\n\n\n\n

<\/frameset><\/p>\n\n\n\n

<noframes><\/p>\n\n\n\n

<body><\/p>\n\n\n\n

<h1>Browser’\u0131n\u0131z\u0131n s\u00fcr\u00fcm\u00fc sayfam\u0131z\u0131 g\u00f6r\u00fcnt\u00fclemeye uygun degil, l\u00fctfen daha yeni bir s\u00fcr\u00fcm<\/p>\n\n\n\n

y\u00fckleyip tekrar deneyin!<\/h1><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/noframes><\/p>\n\n\n\n

<\/html><\/p>\n\n\n\n

<html><\/p>\n\n\n\n

<head><\/p>\n\n\n\n

<title>menu<\/title><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<body bgcolor=”teal”><\/p>\n\n\n\n

L\u00fctfen \u00f6rne#i g\u00f6rmek istiyorsan\u0131z <a href=\u201dlink.htm\u201d target=\u201dana\u201d>t\u0131klay\u0131n<\/a><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/html><\/p>\n\n\n\n

Bu sayfay\u0131 esas.htm ad\u0131yla kaydedin<\/p>\n\n\n\n

<html><\/p>\n\n\n\n

<head><\/p>\n\n\n\n

<title>ana<\/title><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<body bgcolor=”Red”><\/body><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/html><\/p>\n\n\n\n

Bu sayfay\u0131 da link.htm ad\u0131yla kaydedin<\/p>\n\n\n\n

<html><\/p>\n\n\n\n

<head><\/p>\n\n\n\n

<title>menu<\/title><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<body bgcolor=”yellow”><\/p>\n\n\n\n

<h1>Bu sayfaya menu.htm sayfas\u0131ndaki linke t\u0131klayarak k\u0131rm\u0131z\u0131 sayfam\u0131z\u0131n(ana \u00e7er\u00e7evesinde) yerine bu sayfa a\u00e7\u0131lm\u0131!t\u0131r.<\/h1><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/html><\/p>\n\n\n\n

Yukar\u0131daki \u00f6rne#in ekran \u00e7\u0131k\u0131ts\u0131 a!a#\u0131daki gibi olacakt\u0131r.<\/p>\n\n\n\n

Ye!il Sayfadaki Linke T\u0131klamadan \u00d6nce                            Ye!il Sayfadaki Linke T\u0131klad\u0131ktan Sonra<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

BA\u011eLANTILAR: Web sayfalar\u0131m\u0131z\u0131n i\u00e7eriksel k\u0131sm\u0131n\u0131 bitirdi#imize g\u00f6re !imdi web sayfalar\u0131nda en \u00e7ok kullan\u0131lan unsurlardan biri ba#lant\u0131lara (Hyperlink)ge\u00e7ebiliriz.Ba#lant\u0131lar ziyaret\u00e7inin bir t\u0131klama ile, sitenizin i\u00e7inde veya d\u0131!\u0131nda,…<\/p>\n","protected":false},"author":1,"featured_media":2643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[377,392,760],"class_list":["post-2467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-egitim","tag-html","tag-ikinci-ders","tag-tablolar"],"_links":{"self":[{"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=\/wp\/v2\/posts\/2467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2467"}],"version-history":[{"count":0,"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=\/wp\/v2\/posts\/2467\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=\/wp\/v2\/media\/2643"}],"wp:attachment":[{"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}