Bir web sitesi olu\u015fturulurken ilk olarak web sitesi tasar\u0131mc\u0131s\u0131 sitenin kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc photoshop gibi bir programda tasarlar. Daha sonra yaz\u0131l\u0131mc\u0131 tasarlanan bu web sayfalar\u0131n\u0131 HTML kodlar\u0131 ile yazarak sayfan\u0131n \u015fablonlar\u0131n\u0131 olu\u015fturur. Ve i\u015fte tam da buradan sonra CSS kodlar\u0131 devreye girer. CSS kodlar\u0131 ile haz\u0131rlad\u0131\u011f\u0131n\u0131z \u015fablonlar\u0131n boyutlar\u0131n\u0131, renklerini, bi\u00e7imlerini, \u015fekillerini ve site i\u00e7erisinde kullanaca\u011f\u0131n\u0131z yaz\u0131 tiplerinden tutun sitenin mobil uyumlu olmas\u0131na kadar her t\u00fcrl\u00fc i\u015flemi\u00a0uygulayabilirsiniz. Dilerseniz bu CSS kodlar\u0131n\u0131\u00a0HTML i\u00e7erisine g\u00f6mersiniz dilerseniz ayr\u0131 bir klas\u00f6r i\u00e7erisine yaz\u0131p HTML i\u00e7erisine\u00a0\u00e7a\u011f\u0131rma linki ekleyebilirsiniz. Ancak bizim tavsiyemiz HTML ile CSS kodlar\u0131n\u0131 ayr\u0131 dosyalarda bulundurman\u0131z y\u00f6n\u00fcnde olacakt\u0131r. Sonu\u00e7 olarak,\u00a0\u00a0yukar\u0131da bahsetti\u011fimiz gibi iyi bir web sitesi tasarlayabilmeniz i\u00e7in HTML\u2019nin yan\u0131nda CSS de bilmeniz\u00a0\u00e7ok\u00a0\u00f6nemlidir. Bunlara ek olarak, e\u011fer daha ileri seviye web siteleri tasarlamak istiyorsan\u0131z. Javascript\u00a0programlama dilini<\/strong>\u00f6\u011frenmeniz gerekmektedir. Javascript ile web sitenize hareketli g\u00f6rseller, a\u00e7\u0131l\u0131r men\u00fcler, oyunlar ve animasyonlar haz\u0131rlayabilirsiniz. Yukar\u0131da CSS ile HTML kodlar\u0131na m\u00fcdahale edebildi\u011fimizden bahsetmi\u015ftik. Javascript ile hem HTML hem de CSS kodlar\u0131na m\u00fcdahale edip d\u00f6n\u00fc\u015ft\u00fcr\u00fcp, d\u00fczenlemeniz m\u00fcmk\u00fcnd\u00fcr. Bunlara ek olarak sitenin backend k\u0131sm\u0131 bulunmaktad\u0131r. Bu k\u0131sma \u00e7ok fazla de\u011finmeyece\u011fiz ancak \u015funu bilmenizde fayda vard\u0131r. Bir sitenin backend k\u0131sm\u0131 kullan\u0131c\u0131 kay\u0131t ve giri\u015f panelini yazd\u0131\u011f\u0131n\u0131z yerdir. Ve bu k\u0131s\u0131m PHP, ASP .NET tarz\u0131 programlama dilleri kullan\u0131larak yaz\u0131lmaktad\u0131r.<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n HTML <\/strong>\u0130\u00e7in Gerekli Programlar<\/strong><\/strong><\/p>\n\n\n\n Html kodu yazman\u0131z i\u00e7in herhangi ekstra bir programa ihtiyac\u0131n\u0131z bulunmamaktad\u0131r. Notepad kullanarak Html kodlar\u0131 yaz\u0131p \u00e7al\u0131\u015ft\u0131rabilirsiniz. Bunun i\u00e7in tek yapman\u0131z gereken notepad i\u00e7erisine Html kodlar\u0131n\u0131 ekledikten sonra dosyay\u0131 kaydederken dosyan\u0131za verdi\u011finiz ismin sonuna .html eklemeniz yeterli olacakt\u0131r. Bu \u015fekilde kaydetti\u011finiz dosyan\u0131n iconu kulland\u0131\u011f\u0131n\u0131z browser\u2019\u0131n iconuna d\u00f6n\u00fc\u015fecektir. Ancak notepad de kod yazarken hatal\u0131 veya eksik yazarsan\u0131z Notepad size herhangi bir uyar\u0131da bulunmayacakt\u0131r veya notepad de kod yazarken yazd\u0131\u011f\u0131n\u0131z kodlar\u0131 tamamlama gibi bir \u00f6zelli\u011fe sahip olamayacaks\u0131n\u0131z. Bu sayd\u0131\u011f\u0131m\u0131z iki \u00f6zelli\u011fi de bulabilece\u011finiz pek \u00e7ok program mevcuttur ancak biz size Adobe Dreamweaver\u2019\u0131 kullanman\u0131z\u0131 \u00f6nerebiliriz.\u00dccretli olsa da ger\u00e7ekten i\u015finizi \u00e7ok kolayla\u015ft\u0131racak bir programd\u0131r. Bunun haricinde notepad++ veya atom gibi programlar\u0131 da kullanabilirsiniz. Bu iki programda kodlar\u0131 tamamlama \u00f6zelli\u011fi mevcuttur ancak yazd\u0131\u011f\u0131n\u0131z hatal\u0131 veya eksik kodlar\u0131 bu programlar size g\u00f6stermez.<\/p>\n\n\n\n HTML<\/strong>\u2019in Genel Kod Yap\u0131s\u0131<\/strong><\/strong><\/p>\n\n\n\n Html in genel kod yap\u0131s\u0131 \u00e7ok basit anla\u015f\u0131l\u0131r bir yap\u0131dad\u0131r. Genel olarak yap\u0131s\u0131 \u015fu \u015fekildedir:<\/p>\n\n\n\n <html><\/p>\n\n\n\n <head><\/p>\n\n\n\n <title>Sitenizin Ad\u0131<\/title><\/p>\n\n\n\n <\/head><\/p>\n\n\n\n <body><\/p>\n\n\n\n <div id=\u201dmen\u00fc\u201d>Web Siteniz<\/div><\/p>\n\n\n\n <div class=\u201dmen\u00fc\u201d>Web Siteniz<\/div><\/p>\n\n\n\n <\/body><\/p>\n\n\n\n <\/html><\/p>\n\n\n\n Yukar\u0131da yazd\u0131\u011f\u0131m\u0131z bir web sitesini olu\u015fturman\u0131z i\u00e7in gereken en temel kal\u0131pt\u0131r. Bu yap\u0131n\u0131n ne oldu\u011funu a\u00e7\u0131klamadan \u00f6nce bilmeniz gereken bir nokta vard\u0131r. < > bu iki i\u015faret i\u00e7erisine yaz\u0131lan \u015feylere Html de etiket yani tag denmektedir. Ve bu yazd\u0131\u011f\u0131n\u0131z taglerin neredeyse her birinin bir a\u00e7\u0131l\u0131\u015f ve bir de kapan\u0131\u015f noktas\u0131 bulunmaktad\u0131r. Kapan\u0131\u015f\u0131 ise <\/ > bu \u015fekilde yine ayn\u0131 tag’i yazarak belirtmekteyiz. <\/p>\n\n\n\n Yukar\u0131daki \u00f6rnek \u00fczerinden anlat\u0131rsak; ilk olarak bir <html> tagi g\u00f6rmektesiniz ve bunu kapan\u0131\u015f\u0131 en sonda <\/html> \u015feklinde yer almaktad\u0131r. Peki bu tag ne i\u015fe yaramaktad\u0131r? \u015e\u00f6yle ki <html> bize bu yazd\u0131\u011f\u0131m\u0131z d\u00f6k\u00fcman\u0131n bir html d\u00f6k\u00fcman\u0131 oldu\u011funu belirtir ve bunun i\u00e7erisine yazd\u0131\u011f\u0131m\u0131z her \u015fey sitenin i\u00e7erisinde yer al\u0131r. En ba\u015f\u0131nda a\u00e7\u0131l\u0131p ve en sonunda kapanmas\u0131n\u0131n sebebi de budur. Daha sonra bunun i\u00e7erisinde ilk olarak <head><\/head> a\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f tag\u2019lerini g\u00f6rmektesiniz. Bu arada dilerseniz bu \u015fekilde yan yana da yazabilirsiniz ancak temiz bir g\u00f6r\u00fcn\u00fcm olmayaca\u011f\u0131 i\u00e7in pek tavsiye etmiyoruz. <head> tag\u2019i d\u00f6k\u00fcman bilgilerini tan\u0131mlama b\u00f6l\u00fcm\u00fcd\u00fcr. Yani bu b\u00f6lge i\u00e7erisinen web sitenizin browser \u00fczerindeki g\u00f6rd\u00fc\u011f\u00fcn\u00fcz ba\u015fl\u0131\u011f\u0131 yukar\u0131da da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi <title><\/title> etiketi aras\u0131na yazarak ekleyebilirsiniz. Dilerseniz yan\u0131na sitenizin ufak bir ikonununu ekleyebilirsiniz. Ayr\u0131ca bu b\u00f6lgede CSS ve Javascript gibi kodlar\u0131n\u0131z\u0131n bulundu\u011fu dosyalar\u0131n linklerini verebilirsiniz. <\/p>\n\n\n\n Ve \u015fimdi en \u00e7ok kod yazaca\u011f\u0131n\u0131z b\u00f6lge olan <body><\/body> tag\u2019ine gelelim. Sitenizin tamam\u0131 bu tag aras\u0131nda yer alacakt\u0131r. Ad\u0131 \u00fczerinde g\u00f6vde olan bu tag i\u00e7erisine sitenizin t\u00fcm \u015fablonlar\u0131n\u0131 hangi yap\u0131da d\u00fczenleyecekseniz ona g\u00f6re eklemeniz gerekmektedir. Ve bu \u015fablonlar d\u00fczenlenirken genellikle <div><\/div> tag\u2019i kullan\u0131lmaktad\u0131r. Bu tag size body i\u00e7erisinde i\u00e7i bo\u015f herhangi bir boyutu veya \u00f6zelli\u011fi olmayan alanlar yaratacakt\u0131r. Sizler bu divlere verdi\u011finiz id veya class\u2019lar ile onlar\u0131 CSS \u00fczerinden \u00e7a\u011f\u0131r\u0131p onlara renk, \u015fekil, resim ve boyut ekleyip bir site haline getireceksiniz. HTML in genel yap\u0131s\u0131 bu \u015fekildedir.<\/p>\n","protected":false},"excerpt":{"rendered":" HTML yani HyperText Markup Language, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 \u00fczere bir \u00e7e\u015fit i\u015faretleme dilidir. Hatta tam T\u00fcrk\u00e7e \u00e7evirisiyle \u201cK\u00f6pr\u00fc Metni Bi\u00e7imlendirme Dili\u201d diyebiliriz. Bu dil ile tasar\u0131m ve \u015fablonlar olu\u015fturabilir; bir web sitesi haz\u0131rlamak i\u00e7in bu dili kullanabilirsiniz. HTML metin tabanl\u0131 bir dildir….<\/p>\n","protected":false},"author":3,"featured_media":1249,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1248","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-genel"],"yoast_head":"\n![\"\"](\"https:\/\/www.guzel.net.tr\/blog\/wp-content\/uploads\/2019\/01\/shutterstock_746652751.jpg\")
<\/figure>\n\n\n\n