1. Gün / 2. Ders

Beyler bayanlar kısa tanımlardan sonra ufaktan kod yazmaya başlayalım. Öncelikle öyle şu etiket şu işe yarar falan demeyeceğim. internet önünüzde. Hangi etiket ne işe yarıyor çok açık bulabilirsiniz. Bulamazsanız da ben her daim destek çıkarım. Olaya örneklerle devam edeceğiz. Bunun için bir site tasarlayacağız. Daha doğrusu tasarım kısmına müdahale etmeden benim daha önceden hazırladığım bir tasarımı koda dökeceğiz. Tasarımı da anlatmaya kalkarsam içinden çıkamayız. Kaldı ki tasarım kısmı herkesin yapabileceği bir şey değil hayal gücüne ve zevke bağlı bir şey. Yazılım ise mantık olayı. Neyse konuyu dağıtmadan olaya giriyoruz.

ilk olarak işin temeli iyi bir klasör yapılandırması. Neyin nerede olacağını daha sonradan çok rahat bulabilmeniz ve dosyalar klasörlerin arasında boğuşmamanız için bu şart. Benim yapım şu şekilde.

+assets
+++css
---reset.css
---style.css
+++img
+++js
---jquery-2.1.4.min.js
+inc
---config.php
---session.php

ilk olarak reset.css dosyamızı oluşturalım. reset.css dosyamız bizim ne işimize yarar diyecek olursanız şöyle cevap vereyim. Bu dosyanın adı önemli değil fakat kodları bizim bazı gereksiz boşluklarımızı kenarlıklarımızı veya birçok özellikleri tüm tarayıcılarda uygun olacak şekilde stabilize etmeye yarıyor. Bizim bir başka yazılımcı arkadaşımız Eric Meyer'in oluşturmuş olduğu reset.css dosyasını kullanacağız. Linki: http://meyerweb.com/eric/tools/css/reset/

Linkten bakmak istemiyorsanız aşağıdaki kodları reset.css dosyasının içerisine yazın.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

// Bu ders hakkında sorularınız varsa alta yazabilirsiniz.