BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1
HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2
HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir. Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmiştir. Yük. Müh. Köksal GÜNDOĞDU 3
HTML 5 HTML 5 i kullanabilmek için sayfamızın en başına <!DOCTYPE HTML> eklenmelidir. <!DOCTYPE html> <html> <head> <title>başlık</title> </head> <body> Döküman içeriği... </body> </html> Yük. Müh. Köksal GÜNDOĞDU 4
HTML 5 Bu sürüme özgü bazı yeni kodlar gelirken, eskiden kullandığımız bazı kodlar da artık kullanılmayacaktır. HTML5'te kullanılmayacak kodları sıralarsak: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame> <frameset>, <noframes>, <strike>, <tt>, <u>, <xmp> Yük. Müh. Köksal GÜNDOĞDU 5
HTML 5 Bu kodların artık kullanılmamasının sebebi olarak, CSS ile de bu kodlarla yapılabileceklerin yapılması, HTML de bunlara duyulan ihtiyacın azalmasını söyleyebiliriz. HTML5 ile gelen yeni etiketler ise açıklamalarıyla beraber şöyle sıralayabiliriz: Yük. Müh. Köksal GÜNDOĞDU 6
HTML 5 <canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir. <audio>: Sayfaya ses oynatıcı bir modül ekler. <video>: Video oynatıcı bir modül ekler. <progress>: İşlem süreci göstergesi ekler. <caption>: Başlık olarak düşünülen metinleri düzenler. <header>: Sitenin başlık ve açıklama içeriğini alır. <nav>: Menüleri ve bir takım zaruri işlevleri içine alır. Yük. Müh. Köksal GÜNDOĞDU 7
HTML 5 <footer>: Sitelerin en alt kısmını içine alır. <article>: Makale, deneme tarzı yazıları kapsar. <aside>: Ana içerikte ayrı yazılan kısımdır. <datalist>: Düzenlenebilir elementlere otomatik tamamlama özelliği verilmesini sağlar. <details>: Detay bilgisi içerir. <embed>: Dışarıdan eklenen componentler için kullanılır. (Örn :.swf uzantılı dosyalar) <figcaption>: <figure> elementinin başlığını belirler. Yük. Müh. Köksal GÜNDOĞDU 8
HTML 5 <figure>: Çeşitli medya içeriği gruplarını belirler. <hgroup>: Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir. <mark>: Yazı içerisinde özellikle üstünde durulan kelimeleri belirler. <summary>: Yazının başlığını belirler. <time>: Tarih, saat verilerini kapsar. Yük. Müh. Köksal GÜNDOĞDU 9
HTML 5 -<section> Etiketinin Kullanımı Html 5 ile gelen section etiketi bir sayfada genel bir bölümü belirlemek için kullanılır. Sayfamızın başlığı, içerik, menü gibi kısımlarını etiketlerle gruplandırarak bir içerik olarak kullanabiliriz. Yük. Müh. Köksal GÜNDOĞDU 10
HTML 5 -<section> Örnek 1 Yük. Müh. Köksal GÜNDOĞDU 11
HTML 5 -<nav> Etiketinin Kullanımı Açılımı navigation dır. Sitemizdeki menü <nav> elementi içine yazılır. Bu element navigasyon alanları oluşturmak için kullanılır. Fakat <nav> elemanı link oluşturmak için kullandığımızda elemanını ya da ul ile ol elemanlarının yerine kullanılmaz. Sadece bu elemanları kapsar ve içeriği eleman gurubunu bir navigasyon alanı olarak tanımlar. Yük. Müh. Köksal GÜNDOĞDU 12
HTML 5 -<nav> Örnek 2 Yük. Müh. Köksal GÜNDOĞDU 13
HTML 5 -<footer> Etiketinin Kullanımı Açılımı navigation dır. Sitemizdeki menü <nav> elementi içine yazılır. Bu element navigasyon alanları oluşturmak için kullanılır. Fakat <nav> elemanı link oluşturmak için kullandığımızda elemanını ya da ul ile ol elemanlarının yerine kullanılmaz. Sadece bu elemanları kapsar ve içeriği eleman gurubunu bir navigasyon alanı olarak tanımlar. Yük. Müh. Köksal GÜNDOĞDU 14
HTML 5 -<footer> Örnek 3 Yük. Müh. Köksal GÜNDOĞDU 15
HTML 5 -<video> Etiketinin Kullanımı Sayfaya video yerleştirmek için kullanılır. Alacağı etiketler; Autoplay: Durdur butonuna basılmaz ise otomatik olarak başlatılacağını belirtir. Controls: Video kontrol nesnelerinin gözükeceğini belirtir. Loop: Video dosyasının her bitişinde tekrar yürütüleceğini belirtir. Muted: Video ses çıkışının sessiz olacağını belirtir. Yük. Müh. Köksal GÜNDOĞDU 16
HTML 5 -<video> Örnek 3 Yük. Müh. Köksal GÜNDOĞDU 17
HTML 5 -<audio> Etiketinin Kullanımı Sayfaya video yerleştirmek için kullanılır. Alacağı etiketler; Autoplay: Durdur butonuna basılmaz ise otomatik olarak başlatılacağını belirtir. Controls: Video kontrol nesnelerinin gözükeceğini belirtir. Loop: Video dosyasının her bitişinde tekrar yürütüleceğini belirtir. Muted: Video ses çıkışının sessiz olacağını belirtir. Yük. Müh. Köksal GÜNDOĞDU 18
HTML 5 -<audio> Örnek 5 Yük. Müh. Köksal GÜNDOĞDU 19
HTML 5 Etiketinin Kullanımı Daha ayrıntılı taglar için ; https://www.w3schools.com ziyaret edebilirsiniz Yük. Müh. Köksal GÜNDOĞDU 20
div nedir? Yük. Müh. Köksal GÜNDOĞDU 21
Div nedir? Html dilinde olmazsa olmazlardan bir tanesi div etiketidir. Div sayfanın her yerine yerleştirebileceğiniz bir bloktur. İçine her türlü içerik girilebilir. Divin asıl amacı sayfayı belirli bloklara bölerek içerik girişlerinin daha rahat yapılması, arka planların daha rahat atanması, özelliklerin daha rahat kullanılmasıdır. Özellikleri CSS içeriğinde tutulur yani CSS yapısı ile birlikte kullanılır. Yük. Müh. Köksal GÜNDOĞDU 22
Div nedir? id: Bu sizin divinize vericeğiniz benzersiz bir isim veya numara olabilir. Görünümü etkilemez ancak o div etiketinin nereye ait olduğunu ve stil dosyasında tanımlanmışsa özelliklerini rahat bulmanıza yarar. Yük. Müh. Köksal GÜNDOĞDU 23
Div nedir? class: Class özelliği stil dosyanızda belirlediğiniz özellikleri div etiketinize aktarmanıza yarar. Yük. Müh. Köksal GÜNDOĞDU 24
Div Örneği 1: Div nedir? Yük. Müh. Köksal GÜNDOĞDU 25
Div nedir? width: Blok parçanızın genişliğini belirtir. Yüzde veya piksel olarak kullanılabilir. Yük. Müh. Köksal GÜNDOĞDU 26
Div nedir? height: Blok parçanızın yüksekliğini belirtir. Yüzde veya piksel olarak kullanılabilir. Yük. Müh. Köksal GÜNDOĞDU 27
Div nedir? border: Blok parçanıza çerçeve eklemek için kullanılır. Çerçevenin kalınlığını, tipini ve rengini ayarlayabilirsiniz. Önce gelen 1px gibi değer borderın kalınlığını, ardından gelen solid, dotted gibi özellik şeklini ve son gelen özellik ise rengini belirler. Yük. Müh. Köksal GÜNDOĞDU 28
Div nedir? Çerçevelerinin noktalı olmasını isterseniz Yük. Müh. Köksal GÜNDOĞDU 29
Div nedir? background: Arka plan resmi Arka planın devam etmesini istemiyorsanız eğer aşağıdaki kodu kullanın Yük. Müh. Köksal GÜNDOĞDU 30
Div nedir? background: arka plan rengi Background:#EFEFEF; Yük. Müh. Köksal GÜNDOĞDU 31
Div nedir? text align: Blok parçanız içindeki içeriğin nasıl hizalanması gerektiğini ayarlamanız için kullanılır. Center, left ve right özelliklerini alabilir. Yük. Müh. Köksal GÜNDOĞDU 32
Div Örneği 2: Div nedir? Yük. Müh. Köksal GÜNDOĞDU 33
Div nedir? Style ler direkt divlerin içine yazılarak değilde style kalıpları oluşturarak uygulanırlar. Bu şekilde oluşturduğumuz bir sitili birden fazla yerde kolaylıkla kullanım imkanı sunarlar. Anlatılan bu etiketlere ek divlere birçok parametrede uygulanabileceği unutulmamalıdır. Yük. Müh. Köksal GÜNDOĞDU 34
Div Örneği 3: Div nedir? Yük. Müh. Köksal GÜNDOĞDU 35
javascript? Yük. Müh. Köksal GÜNDOĞDU 36
Javascript HTML dili her ne kadar metinler üzerinde neredeyse her türlü düzenlemeyi yapmamıza izin verse de, zayıf kaldığı bazı yönler vardır; mesela HTML bize web sayfalarına bir 'iş' yaptırtma, onları değişik olaylara veya durumlara duyarlı hale getirme imkanı sunmaz. Bu eksikliği Netscape firmasının yetkilileri de farketmiş olacak ki Aralık 1995 tarihinde, C dilinin browser'lara uyarlanmış hali diyebileceğimiz JavaScript'i piyasaya sürdüler. Yük. Müh. Köksal GÜNDOĞDU 37
Javascript 'JavaScript nedir?' sorusuna dönersek : Netscape'in piyasaya sürdüğü script dilidir. JavaScript HTML kodlarının içine yazılır. Yazılan kodun bir JavaScript kodu olduğu browser'a <script>...</script> etiketleri ile bildirilir. Tıpkı HTML gibi, JavaScript kodları da yorumlanmak için bir browser'a ihtiyaç duyarlar, yani sonuçta '.exe' uzantılı, bağımsız olarak çalışabilecek bir dosya oluşmaz. Yük. Müh. Köksal GÜNDOĞDU 38
Javascript JavaScript bir olay halinde işler; olay JavaScript açısından ziyaretçinin bir yere tıklaması, bir tuşa basması vs. olabilir. Yük. Müh. Köksal GÜNDOĞDU 39
Javascript JavaScript ile neler yapılabilir? JavaScript ile bir web sayfasına yukarıda tanımladığımız biçimde herhangi bir olayın gerçekleşmesi halinde herhangi bir iş yaptırabiliriz. Örnegin sayfada bir butona basıldığında sayfadaki bir 'text' kutusunun içine 'Click!' yazdırabiliriz. Burada olay ziyaretçinin butona tıklaması, iş ise text kutusuna 'Click!' yazılmasıdır... Javascript dilinde neredeyse olası her olay tanımlanmıştır, dolayısıyla yapılabilecek şeyler çok geniştir. Yük. Müh. Köksal GÜNDOĞDU 40
Javascript Javascript Örneği 1: Yük. Müh. Köksal GÜNDOĞDU 41
Javascript Javascript Örneği 1: Yük. Müh. Köksal GÜNDOĞDU 42
Javascript Javascript Örneği 2: Yük. Müh. Köksal GÜNDOĞDU 43
Javascript Javascript Örneği 2: Yük. Müh. Köksal GÜNDOĞDU 44