BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

Save this PDF as:
 WORD  PNG  TXT  JPG

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1"

Transkript

1 BMT 202 Web Tasarımı Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1

2 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 HTML 5 -<section> Örnek 1 Yük. Müh. Köksal GÜNDOĞDU 11

12 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

13 HTML 5 -<nav> Örnek 2 Yük. Müh. Köksal GÜNDOĞDU 13

14 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

15 HTML 5 -<footer> Örnek 3 Yük. Müh. Köksal GÜNDOĞDU 15

16 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

17 HTML 5 -<video> Örnek 3 Yük. Müh. Köksal GÜNDOĞDU 17

18 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

19 HTML 5 -<audio> Örnek 5 Yük. Müh. Köksal GÜNDOĞDU 19

20 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

21 div nedir? Yük. Müh. Köksal GÜNDOĞDU 21

22 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

23 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

24 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

25 Div Örneği 1: Div nedir? Yük. Müh. Köksal GÜNDOĞDU 25

26 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

27 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

28 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

29 Div nedir? Çerçevelerinin noktalı olmasını isterseniz Yük. Müh. Köksal GÜNDOĞDU 29

30 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

31 Div nedir? background: arka plan rengi Background:#EFEFEF; Yük. Müh. Köksal GÜNDOĞDU 31

32 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

33 Div Örneği 2: Div nedir? Yük. Müh. Köksal GÜNDOĞDU 33

34 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

35 Div Örneği 3: Div nedir? Yük. Müh. Köksal GÜNDOĞDU 35

36 javascript? Yük. Müh. Köksal GÜNDOĞDU 36

37 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

38 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

39 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

40 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

41 Javascript Javascript Örneği 1: Yük. Müh. Köksal GÜNDOĞDU 41

42 Javascript Javascript Örneği 1: Yük. Müh. Köksal GÜNDOĞDU 42

43 Javascript Javascript Örneği 2: Yük. Müh. Köksal GÜNDOĞDU 43

44 Javascript Javascript Örneği 2: Yük. Müh. Köksal GÜNDOĞDU 44

Web Tasarımının Bugünü ve Geleceği

Web Tasarımının Bugünü ve Geleceği Efe ÇİFTCİ Çankaya Üniversitesi Bilgisayar Mühendisliği Bölümü Ocak 2011 www.efeciftci.com Dünya tarihinde yayınlanan ilk web sayfaları, olabildiğince basit tasarımlara sahipti ve ağırlıklı olarak metin

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

GELİŞMİŞ İNTERNET UYGULAMALARI

GELİŞMİŞ İNTERNET UYGULAMALARI Ünite 1: HTML5 HTML nin kısa tarihçesi: GELİŞMİŞ İNTERNET UYGULAMALARI 1991 World Wide Web ve HTML 1 ortaya çıktı 1995 HTML 2.0 1997 HTML 3.7 1998 Web Standarts Project 1999 HTML 4.0 2000 XHTML 1.0 2004

Detaylı

DIV KAVRAMI