{"id":2466,"date":"2020-05-11T12:08:40","date_gmt":"2020-05-11T09:08:40","guid":{"rendered":"https:\/\/bilogtek.com\/?p=412"},"modified":"2020-05-11T12:08:40","modified_gmt":"2020-05-11T09:08:40","slug":"html-baslangic-dersi","status":"publish","type":"post","link":"https:\/\/www.bilogtek.com\/?p=2466","title":{"rendered":"Html Ba\u015flang\u0131c Dersi"},"content":{"rendered":"\n
<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

HTML Ders Notlar\u0131<\/p>\n\n\n\n

izlere bu notlarla web sayfas\u0131 yap\u0131m\u0131 hakk\u0131nda k\u0131sa bir fikir vermeye \u00e7e\u0131l!aca#\u0131m. \u00d6ncelikli olarak bir web sayfas\u0131n\u0131n yani uzant\u0131s\u0131n\u0131 HTML (Hyper Text Markup Language)olan bir sayfan\u0131n \u00e7al\u0131!ma mant\u0131#\u0131na g\u00f6z atal\u0131m.HTML dilinde yaz\u0131lm\u0131! kodlar\u0131 servis sa#lay\u0131c\u0131s\u0131n\u0131n sunucusuna(Server) y\u00fcklersiniz (Upload).<\/p>\n\n\n\n

Bu sunucuda yay\u0131nlanan web sayfam\u0131z sitemize gelen ziyaret\u00e7ilerin browserlar\u0131 taraf\u0131ndan kodlar yorumlan\u0131r ve b\u00f6ylece ziyaret\u00e7i bizim sayfam\u0131z\u0131 g\u00f6rm\u00fc! olur.<\/p>\n\n\n\n

HTML diliyle baz\u0131 i!lemleri yapabilece#imiz gibi baz\u0131lar\u0131n\u0131 ise yapamay\u0131z.mesela metin bi\u00e7imlendirme, liste, ba#lant\u0131lar, resim kullanma, tablolar, \u00e7er\u00e7eveler ve forumlar yapabilirken etkile!imli ve olaylara duyarl\u0131 sayfalar, formlar\u0131 i!leyip de#erlendiren sayfalar yapamay\u0131z.<\/p>\n\n\n\n

Bir web sayfas\u0131 yapmak i\u00e7in tek gereken onu nas\u0131l tasarlayaca#\u0131m\u0131z\u0131 bilmektir.E#er bu i!i kod kullanmadan yapacaksan\u0131z Frontpage, Dreamweaver vs programlar\u0131 kullanabilirsiniz.Ama ben bu i!i kodlarla yapaca#\u0131m diyorsan\u0131z size tek gereken herhangi bir metin edit\u00f6r\u00fc(Metin edit\u00f6r\u00fc olarak Windows ta NOTEPAD\u2019i kullanbilirsiniz) .7imdi gelelim temel kodlar\u0131 tan\u0131maya:<\/p>\n\n\n\n

<html>\u2026<\/html><\/td>Bu kod browsera HTML belgesinin ba!lad\u0131#\u0131 ve biti#i yeri bildirir.B\u00fct\u00fcn di#er kodlar bu iki kod aras\u0131na yaz\u0131l\u0131r<\/td><\/tr>
<head>\u2026<\/head><\/td>HTML belgesinin ilk b\u00f6l\u00fcm\u00fcd\u00fcr.Bu b\u00f6l\u00fcme yaz\u0131lanlar metin olarak ekranda g\u00f6z\u00fckmez.<\/td><\/tr>
<title>\u2026<\/title><\/td>Head b\u00f6l\u00fcm\u00fc i\u00e7ine yaz\u0131lan Title kodu sayfan\u0131n ba!l\u0131#\u0131n\u0131n yaz\u0131ld\u0131#\u0131 b\u00f6l\u00fcmd\u00fcr.<\/td><\/tr>
<body>\u2026<\/body><\/td>HTML belgesinin b\u00fct\u00fcn i\u00e7eri#i bu kodlar aras\u0131na yaz\u0131l\u0131r.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Bu temel kodlar\u0131 g\u00f6rd\u00fckten sonra isterseniz bir HTML sayfas\u0131n\u0131n genel yap\u0131s\u0131na g\u00f6z atal\u0131m.<\/p>\n\n\n\n

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

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

<title>\u2026\u2026<title><\/p>\n\n\n\n

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

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

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

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

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

Bu temel yap\u0131y\u0131 kavrad\u0131ktan sonra basit bir sayfa yapabiliriz.<\/p>\n\n\n\n

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

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

<title>Deneme Sayfas\u0131<\/title><\/p>\n\n\n\n

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

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

Bu bir deneme sayfas\u0131d\u0131r<\/p>\n\n\n\n

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

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

Yukar\u0131da g\u00f6rd\u00fc#\u00fcn\u00fc kodlar\u0131 metin edit\u00f6r\u00fcne yaz\u0131p deneme.html ad\u0131yla kaydedersek ve bu deneme.html dosyas\u0131n\u0131 \u00e7al\u0131!t\u0131r\u0131rsak ekrana a!a#\u0131daki gibi Bu bir deneme sayfas\u0131d\u0131r yaz\u0131l\u0131 bir sayfa gelecektir.<\/p>\n\n\n\n

<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

– 1 –<\/h2>\n\n\n\n

MET\u0130N B\u0130\u00c7\u0130MLEND\u0130RME ET\u0130KETLER\u0130:<\/u><\/strong><\/strong><\/p>\n\n\n\n

HTML sayfas\u0131n\u0131n temel unsurlar\u0131n\u0131 \u00f6#rendikten sonra,art\u0131k i!in inceliklerine inebiliriz.?lk olarak yazd\u0131#\u0131m\u0131z metinleri !ekillendirmeye bakal\u0131m.A!a#\u0131daki tabloda yer alan etiketleri bilmemiz bu konuda bize \u00e7ok kolayl\u0131k sa#layacakt\u0131r.<\/p>\n\n\n\n

<h1>\u2026<\/h1><\/td>  Ba\u015fl\u0131k<\/strong><\/td><\/tr>
<h2>\u2026<\/h2><\/td>  Ba\u015fl\u0131k<\/em><\/strong><\/td><\/tr>
<h3>\u2026<\/h3><\/td>  Ba\u015fl\u0131k<\/strong><\/td><\/tr>
<h4>\u2026<\/h4><\/td>  Ba\u015fl\u0131k<\/strong><\/td><\/tr>
<h5>\u2026<\/h5><\/td>  Ba!l\u0131k<\/td><\/tr>
<h6>\u2026<\/h6><\/td>  Ba\u015fl\u0131k<\/em><\/td><\/tr>
<b>\u2026<\/b><\/td>Yaz\u0131lar\u0131 koyu yapar<\/td><\/tr>
<i>\u2026<\/i><\/td>Yaz\u0131lar\u0131n\u0131z\u0131 italik karakter yapar<\/td><\/tr>
<u>\u2026<\/u><\/td>Yaz\u0131lar\u0131n\u0131za alt \u00e7izgi koyar<\/td><\/tr>
<p>\u2026<\/p><\/td>Paragraf etiketi yapar. Paragraf\u0131n\u0131z\u0131n alt\u0131na ve \u00fcst\u00fcne bo!luk koyar.<\/td><\/tr>
<br><\/td>Sat\u0131rba!\u0131 yapar.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

7imdi yukar\u0131da \u00f6#rendiklerimizi bir \u00f6rnek ile uygulayal\u0131m.<\/p>\n\n\n\n

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

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

<title>Metin Bi\u00e7imlendirme<\/title><\/p>\n\n\n\n

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

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

HTML  size  metin  bi\u00e7imlendirme  konusunda  geni!  olanaklar  sa#lar.Metinleri  ister  <h1>kocaman<\/h1>  ister<\/p>\n\n\n\n

<h6>k\u00fc\u00e7\u00fcc\u00fck<\/h6> isterseniz <b>koyu<\/b>, <i>italik <\/i> veya <u>altyaz\u0131l\u0131<\/u> yazabilirsiniz.Yada sat\u0131rba!\u0131 yapabilir<\/p>\n\n\n\n

<br> veya <p> paragraf olu!turabilirsiniz <\/p><\/p>\n\n\n\n

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

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

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

FONT TAGI:<\/h3>\n\n\n\n

Metin bi\u00e7imlendirmek i\u00e7in yukar\u0131da g\u00f6rd\u00fc#\u00fcm\u00fcz etiketler d\u0131!\u0131nda biraz sonra g\u00f6rece#imiz <font>\u2026<\/font> etiketi de kullan\u0131l\u0131r.<\/p>\n\n\n\n

Font etiketi sahip oldu#u parametreler sayesinde metinlerin renk,yaz\u0131 tipi,boyut gibi \u00f6zelliklerini de#i!tirmenize yard\u0131mc\u0131 olur.?sterseniz bu etikette ge\u00e7meden \u00f6nce renklerden k\u0131saca bahsetmek yerinde olur. HTML\u2019de renkler hexdecimal formunda ifade edilir Bir renk 16’l\u0131k say\u0131 d\u00fczeninde 6 rakamdan olu!ur ve  Bu  d\u00fczende  9’dan  sonraki  say1\u0131ar\u0131 g\u00f6stermek i\u00e7in ‘A’dan ‘F’ye kadar olan harfler kullan\u0131l\u0131r. Bununla birlikte HTML baz\u0131 renklerin  ?ngilizce  isimlerini anlar; a!a#\u0131daki \u00f6rnekte bu renkleri g\u00f6rmektesiniz.<\/p>\n\n\n\n

– 2 –<\/h2>\n\n\n\n
Green=Ye!il<\/td>Red=K\u0131rm\u0131z\u0131<\/td><\/tr>
Black=Siyah<\/td>Yellow=Sar\u0131<\/td><\/tr>
Blue=Mavi<\/td>Orange=Turuncu<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Burada g\u00f6r\u00fclen renkler hexdecimal cinsinden de ifade edilebilir: \u00d6rne#in #FFFFFF beyaz ,#000000 siyah.<\/p>\n\n\n\n

Renkleri k\u0131saca tan\u0131d\u0131ktan sonra art\u0131k as\u0131l konumuza ge\u00e7ebiliriz.HTML belgesinin body b\u00f6l\u00fcm\u00fcne yazd\u0131#\u0131m\u0131z metni <font><\/font> etiketleri aras\u0131na alarak bu metne etiketin a!a#\u0131da da listelenen parametreleri do#rultusunda baz\u0131 \u00f6zellikler kazand\u0131rabiliriz<\/p>\n\n\n\n

Color<\/td>hexdecimal veya rengin ?ngilizce ismi de#erini al\u0131r<\/td><\/tr>
Face<\/td>Yaz\u0131 t\u00fcr\u00fcn\u00fcn ismi de#erini al\u0131r<\/td><\/tr>
Size<\/td>1 ile 7 aras\u0131nda istenilen de#eri al\u0131r<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

7imdi bu parametreleri bir \u00f6rnekte kullanal\u0131m:<\/p>\n\n\n\n

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

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

<title>Font kullan\u0131m\u0131<\/title><\/p>\n\n\n\n

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

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

Font etiketinin color parametresini kullanarak <font color=”#FF0000″>renkli<\/font><\/p>\n\n\n\n

<font color=”Blue”>yaz1\u0131lar<\/font><\/p>\n\n\n\n

<font color=”#00FF00″>yazabilir<\/font>;<p> de#i!ik yaz\u0131 karakterleri kullanabilirsiniz:<\/p>\n\n\n\n

<font face=”Verdana”>Mesela \u00f6yle!<\/font><p> Hatta yaz\u0131lar\u0131n\u0131z\u0131<\/p>\n\n\n\n

<font size=”+6″> b\u00fcy\u00fct\u00fcp<\/font><\/p>\n\n\n\n

<font size=”-1″> K\u00fc\u00e7\u00fcltebilirsiniz<\/font><\/p>\n\n\n\n

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

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

A!a#\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde de yukar\u0131daki \u00f6rne#in nas\u0131l \u00e7al\u0131!t\u0131#\u0131n\u0131 g\u00f6rebilirsiniz.<\/p>\n\n\n\n

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

ARKA PLAN ve BODY ET\u0130KET\u0130:<\/h1>\n\n\n\n

Web sayfas\u0131n\u0131n i\u00e7eri#e yaz\u0131 yazmay\u0131 \u00f6#rendikten sonra isterseniz web sayfalar\u0131m\u0131z\u0131n arka planlar\u0131n\u0131 renklendirmeye ge\u00e7elim. HTML belgesinin ekranda g\u00f6r\u00fcnt\u00fclenen b\u00f6l\u00fcm\u00fc olan body b\u00f6l\u00fcm\u00fcn\u00fcn ba!lad\u0131#\u0131n\u0131 browser’a<\/p>\n\n\n\n

<body> etiketiyle bildirdi#imizi biliyoruz. Bir etiketin herhangi bir parametresine atad\u0131#\u0131m\u0131z de#er, o etiketin olu!turdu#u alan i\u00e7erisinde ge\u00e7erlidir.Yani gibi <body> etiketinin parametrelerine verilen de#erler, b\u00fct\u00fcn sayfa i\u00e7in ge\u00e7erlidir.A!a#\u0131da bu parametreleri ve kullan\u0131l\u0131!lar\u0131n\u0131 g\u00f6r\u00fcyorsunuz.<\/p>\n\n\n\n

bgcolor            Sayfan\u0131z\u0131n arka plan\u0131n\u0131n rengini belirler<\/p>\n\n\n\n

background       Arka plana .gif,.jpg gibi HTML’in yorumlayabildi#i bir resim dosyas\u0131 koyman\u0131z\u0131 sa#lar<\/p>\n\n\n\n

text                 Sayfan\u0131zdaki metinlerin rengini belirler<\/p>\n\n\n\n

<body bgcolor=\u201dblue\u201d> Sayfam\u0131z\u0131n arka plan\u0131n\u0131 mavi yapar.<\/p>\n\n\n\n

<body background=\u201dc:\\belgelerim\\resim.jpg\u201d> Sayfam\u0131z\u0131n arka plan\u0131na resim.jpg isimli dosyan\u0131n i\u00e7eri#i ta!\u0131r.<\/p>\n\n\n\n

RES\u0130MLER ve IMG ET\u0130KET\u0130:<\/h1>\n\n\n\n

Bir web sayfas\u0131nda do#ru ve yerinde kullan\u0131ld\u0131klar\u0131nda sayfaya estetik a\u00e7\u0131s\u0131ndan \u00e7ok !eyler katarlar. fakat b\u00fcy\u00fck boyutlar\u0131 nedeniyle yava! y\u00fcklenirler.Bu da ziyaret\u00e7inin s\u0131k\u0131lmas\u0131na,hatta sayfay\u0131 terk etmesine neden olabilir.Bu<\/p>\n\n\n\n

– 3 –<\/h2>\n\n\n\n

nedenle, en az\u0131ndan Internet ba#lant\u0131lar\u0131 daha h\u0131zl\u0131 oluncaya kadar, resimleri ‘az ve \u00f6z’ <\/strong>kullanman\u0131z do#ru olacakt\u0131r.Resimler <img<\/strong>> etiketi arac\u0131l\u0131#\u0131yla kullan\u0131l\u0131rlar.A!a#\u0131da bu etiketin parametrelerini g\u00f6r\u00fcyorsunuz.<\/p>\n\n\n\n

src<\/td>Resmin bulundu#u dizini bu parametre ile bildiririz<\/td><\/tr>
width<\/td>Resmin geni!li#ini piksel cinsinden bildirir<\/td><\/tr>
height<\/td>Ayn\u0131 !ekilde resmin y\u00fcksekli#ini bildirir<\/td><\/tr>
border<\/td>Resmin etraf\u0131ndaki \u00e7izginin kal\u0131nl\u0131#\u0131n\u0131 belirtir.<\/td><\/tr>
align<\/td>Yatay      konum     belirler;left,right,center de#erlerini al\u0131r.<\/td><\/tr>
alt<\/td>Mouse resmin \u00fczerindeyken yazaca#\u0131n\u0131z meni g\u00f6sterir<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

<img src=”deneme.gif” border=”6″ align=”left \u201c alt=\u201dleft\u201d><\/p>\n","protected":false},"excerpt":{"rendered":"

HTML Ders Notlar\u0131 izlere bu notlarla web sayfas\u0131 yap\u0131m\u0131 hakk\u0131nda k\u0131sa bir fikir vermeye \u00e7e\u0131l!aca#\u0131m. \u00d6ncelikli olarak bir web sayfas\u0131n\u0131n yani uzant\u0131s\u0131n\u0131 HTML (Hyper Text…<\/p>\n","protected":false},"author":1,"featured_media":2644,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[260,377],"class_list":["post-2466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-egitim","tag-egitim","tag-html"],"_links":{"self":[{"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=\/wp\/v2\/posts\/2466","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=2466"}],"version-history":[{"count":0,"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=\/wp\/v2\/posts\/2466\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=\/wp\/v2\/media\/2644"}],"wp:attachment":[{"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bilogtek.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}