HTML 5 NEDR Web sayfas gelitirmek iin retilen

HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html Editor: • Notepad • Web. Matrix • Dreamweaver • Visual Studio Community Edition

Profesyonel Editor Avantajları �Kodlama yaparken Auto-Complete özelliği sağlar. �Web. Matrix ücretsizdir

Neden Ana Sayfa İsmi İndex. html Olur?

İlk Uygulama

Başlıklık Elementleri

Başlıklık Elementleri

Başlıklık Elementleri �Not: başlıklar birer bir standarttır. h 1’den daha büyük yazı yazmak için stilleri kullanabiliriz. Sınır tam anlamıyla programcıya kalmıştır.

Metin Elementleri Yazıları ekranda farklı olarak göstermeyi sağlar. Kendi fikir ve düşüncelerimizi en doğru şekilde yansıtabilmesi için hepsi ayrı görevler almıştır. P strong Span mark Div small Em br

Metin Elementleri

Yorum Ekleme - Comments �Yorumlar, yazılan kodun daha kolay okunmasını sağlamaktadır. Yorumlar tarayıcılar tarafından yok sayılır, yani yorumu dikkate almaz. Yorum etiketi �" <!-- " karakterleri ile açılır ve " --> " karakterleri ile kapatılır ve yorumumuz bu etiket içine yazılır.

Kaynak Kodu / Source Code �Sayfaların kodlarını / kaynağını görebilmek için sayfa üzerindeyken sağ tıklayıp "Kaynağı Göster" diyebilirsiniz.

Liste Elementleri Sıralı Liste(Ordered list) �ol �li � 1, 2, 3, … �a, b, c… �A, B, C, … �I, III, IV, …

Liste Elementleri Sırasız Liste(Unordered list) �ul �li �Yuvarlak, kare, baklava, …

Liste Elementleri

Link Elementleri

Link Elementleri �Text-decoration: none = Linke tıklama işleminden sonra altı çizili özelliğini kaldırır. Style ayarı yaptığımızdan, <style> tagleri içersinde yer alır. �Target: “_blank” = Linke tıkladığımızda sayfayı farklı bir sayfada açmamızı sağlar.

Link ve Resim Elementleri

Link ve Resim Elementleri Eğer resimleriniz web sayfanızın bulunduğu klasörden farklı bir yer de bulunuyor ve bulunduğu konum üst bir klasörde ise İmg src=“. . /” şeklinde erişmemiz mümkündür

Link ve Resim Elementleri

Link ve Resim Elementleri Not: İmage için anlatılan kurallar, linkler içinde geçerlidir. Hedef sayfaya erişim sağlarken a href=“. . /” mantığı ile yapılabilir. Uygulama: Resim için yaptığımız uygulamanın bir değişiğini sayfalar içinde yapınız.

Formlar ile Bilgi ve Giriş �Input 1. 2. 3. 4. 5. 6. 7. 8. 9. Text Password Number Tel E-mail url Date Time Submit �Textarea

Formlar ile Bilgi ve Giriş

Formlar ile Bilgi ve Giriş �autofocus="true" = Bu özellik sayfa ilk yüklendiğinde, klavyeden herhangi bir tuşa bastığımızda otomatik olarak yazılacak alanın belirlenmesinde kullanılır. �Value=“” bütün type lar da kullanılır. Amaç yazılan kutuda sayfa ilk açıldığında varsayılan olarak istenilen değerin gözükmesini sağlar.

Combobox ile Seçim �Select ◦ ◦ ◦ Option Optgroup Label Value selected

Combobox ile Seçim Çoktan Tek Seçmeli

Seçim Elementleri Çoktan çok veya Hepsi görünür seçmeli �Checkbox ◦ İd ◦ Name ◦ Checked �Radio ◦ İd ◦ name

Seçim Elementleri Çoktan çok veya Hepsi görünür seçmeli

Seçim Elementleri Çoktan çok veya Hepsi görünür seçmeli �Tarayıcılar, ekranda gördükleri yazı karakterlerini farklı yorumlayarak birbirlerinden farklı büyüklükte gösterebilir. Eğer belli bir standart büyüklüklerinde ve bütün tarayıcıların aynı yorumu getirmesini istiyor isek, <h 4, h 3. . > gibi taglerini kullanmamız gereklidir. �checked : varsayılan olarak checkbox kutusunun seçili olarak gelmesini

Video ve Ses �Video ◦ ◦ ◦ Src Loop Autoplay Controls Poster �Audio ◦ Src ◦ Loop ◦ controls

Video ve Ses �<!--Burada sadece genişlik değeri yazıldı. Bu yüzden yükseklik değeri otomatik olarak hesaplanır. Eğer manuel olarak girmek istersek yükseklik değerini de girebiliriz. Fakat en boy oranı tutmaz ise kalite olarak bozuk görülme ihtimalini unutmamız gerekiyor. Controls ise: başlatma, ileri geri sarma, ses açma kapama, ekranı kaplama özelliklerinin kullanılmasını sağlar autoplay: bu komutu eklediğimizde, sayfa yüklenir yüklenmez videonun başlamasını sağlar. -->

Video ve Ses �Autoplay özelliği kaldırması gerekiyor. Aksi halde eklediğimiz resmi hızlı geçer ve bir anlamı kalmaz. �Poster: Videoya ya poster eklememizi sağlar �Loop: Bu komut videonun sürekli olarak başa dönerek devam etmesini sağlar

Video ve Ses

<meta> Etiketi �<meta> etiketi ile bir web sayfasını yada sitenin arama motorları için bilgilerin tanımlanmasını sağladığı gibi, içeriğin kodlama biçimini de tanımlar. � 1 - <meta name=“description” content=“Blmyo Sitesi”/> Arama motorlarına bilgi verme amacını taşır. 2 -<meta name=“keywords” content=“HTML, HTML 5, CSS 2, CSS 3”/> Bir web sayfasının içeriğini temsil eden ve aralarına virgül konularak tanımlanan anahtar kelimelerini arama motorlarına tanıtmamızı

CSS 3(Cascading Style Sheets) �Stil şablonları olarak tanımlanan bu kodlama tekniği, HTML elementlerinin daha işlevsel özellikler kazanması için kullanılır. Tasarım tamamen CSS ile yapılmaktadır. �CSS kuralı bir seçici ile bu seçicinin sınırlarını gösteren { } süslü parantezler arasındaki CSS özelliklerinin tümüne denir.

CSS 3(Cascading Style Sheets) �Body{ color: red �} Bu kurala göre sayfanın yazı rengi kırmızı olacaktır. Sayfa düzeyind stil tanımı, sayfanın <head> kısmında <style> elementi bildirimi ile yapılır. <style> elementi başlangıç ve bitiş etiketleri vardır ve kullanımı zorunludur.

CSS 3(Cascading Style Sheets) Element Düzeyinde Stil Tanımı �Style niteliği alabilen her elementin bildirimi sırasında yapılabilir. �<p style=“color: red”> metin</p>

CSS 3(Cascading Style Sheets) 1. Blok Düzeyi Elementleri Bloklar halinde alta gelecek bir biçimde görüntü oluşturur. Bu duruma blok denir. <p> , <h 1, h 2, . . > elementini bu duruma örnek verebiliriz. Marginleri vardır. Margin(Dış Boşluk) Blok düzeyi elementlerin bir çoğu kendisine atanan içeriği görüntülerken bir dış boşluk bırakırlar.

CSS 3(Cascading Style Sheets) 2. Satır Düzeyi Elementleri <em>, <b>, <i>, <strong> Bu elementler içeriğii kaydırmaz, içerik bulunduruğu yerde biçimlendirilir. Margin dış boşluk bırakmazlar.

CSS 3(Cascading Style Sheets) Kutu Modelini Anlamak Bir elementin kutu modelinde margin(dış boşluk), padding(iç boşluk) ve bord (çerçeve kalınlığı) ile tanımlanmaktadır.

CSS 3(Cascading Style Sheets) 2. Satır Düzeyi Elementleri <em>, <b>, <i>, <strong> Bu elementler içeriği kaydırmaz, içerik bulunduruğu yerde biçimlendirilir. Margin dış boşluk bırakmazlar.

CSS 3(Cascading Style Sheets) Dahili CSS Uygulaması

CSS 3(Cascading Style Sheets) Harici CSS Uygulaması

CSS 3(Cascading Style Sheets) Stilin bütün taglara uygulandığını görebiliyoruz.

CSS 3(Cascading Style Sheets) Class tanımlaması yaparak istediğimiz tagların farklı stiller almasını sağlamış o

CSS 3(Cascading Style Sheets) İd tanımlaması ile tekil olma özelliği ile farklı stiller oluşturmak için kullanılır

CSS 3(Cascading Style Sheets) �Not: Klavye den CTRL+K+D tuşlarına basar isek, web matrix kodların düzenini yeniden ayarlayarak doğru hale getirir.

CSS 3(Cascading Style Sheets) Padding: ustten başlar saat yönünde değerler gireriz. Text-shahow: gölge için kullanılır. İlk değer gölgenin soldan ne kadar uzakta oldu Üstten ne kadar uzakta olduğu, üçüncüsü koyuluğu ve son olarak renk işlemi yap

CSS 3(Cascading Style Sheets)

CSS 3(Cascading Style Sheets) �Solid: düz çizgi sağlar �Dashed: Kenarları kesikli yapar �Dotted: Kenarları noktalı yapar �Padding: boşluk olmasını istemediğimiz bölümlere 0 px girmemiz gereklidir. �border-radius değeri yükseklik ve genişlik değerinin tam yarısı ise, resim daire haline gelir.

3. Hafta

CSS Height and Width <style> div { height: 200 px; width: 50%; background-color: powderblue; } </style> <body> <h 2>Set the height and width of an element</h 2> <p>This div element has a height of 200 px and a width of 50%: </p> <div></div> </body>

CSS Height and Width <style> div { height: 100 px; width: 500 px; background-color: powderblue; } </style> <body> <h 2>Set the height and width of an element</h 2> <p>This div element has a height of 100 px and a width of 500 px: p> <div></div> </body>

CSS Height and Width <style> div { max-width: 500 px; height: 100 px; background-color: powderblue; } </style> <body> <h 2>Set the height and width of an element</h 2> <p>This div element has a height of 100 px and a width of 500 px: p> <div></div> </body>

CSS Height and Width <style> div. ex 1 { width: 500 px; margin: auto; border: 3 px solid #73 AD 21; } div. ex 2 { max-width: 500 px; margin: auto; border: 3 px solid #73 AD 21; } </style> <body> <div class="ex 1">This div element has width: 500 px; </div> <div class="ex 2">This div element has max-width: 500 px; </div> <p><strong>Tip: </strong> Drag the browser window to smaller than 500 px wide, to see the difference between the two divs!</p> </body>

CSS BOX MODEL <style> div { background-color: lightblue; }</style> <body> <div> Deneme , Deneme Deneme Deneme. </div> </body>

CSS BOX MODEL <style> div { background-color: lightblue; width: 200 px; }</style> <body> <div> Deneme Deneme , Deneme Deneme. </div> </body>

CSS BOX MODEL <style> div { background-color: lightblue; width: 200 px; padding: 25 px; }</style> <body> <div> Deneme , Deneme Deneme Deneme. </div> </body>

CSS BOX MODEL <style> div { background-color: lightblue; width: 200 px; padding: 25 px; border: 25 px solid navy; }</style> <body> <div> Deneme , Deneme Deneme Deneme. </div> </body>

CSS Pseudo-classes

� � � � � <style> /* unvisited link */ a: link { color: red; } /* visited link */ a: visited { color: yellow; } /* mouse over link */ a: hover { color: hotpink; } /* selected link */ a: active { color: blue; } </style> <body> <p><b><a href="2. html" >This is a link</a></b></p> <p><b>Note: </b> a: hover MUST come after a: link and a: visited in the CSS definition in order to be effective. </p> <p><b>Note: </b> a: active MUST come after a: hover in the CSS definition in order to be effective. </p> </body>

Pseudo-classes and CSS Classes <style> a. highlight: hover { color: #990; } </style> <body> <p><a class="highlight" href="#">CSS Sınıf Kuralı</a></p> <p><a href="#">CSS Egitimi</a></p> <a href="#">deneme</a> </body>

Hover on <div> <style> div { background-color: green; color: white; padding: 25 px; text-align: center; } div: hover { background-color: blue; } </style> <body> <p>Mouse over the div element below to change its background color: </p> <div>Mouse Over Me</div> </body>

<style> p { display: none; background-color: yellow; padding: 20 px; } div: hover p { display: block; } </style> <body> <div>Hover me to show the p element <p>Tada! Here I am!</p> </div> </body>

CSS - The : first-child Pseudoclass � <style> � p: first-child { � color: blue; �} � </style> � <body> � <p>This is some text. </p> � <p><b>Note: </b> For : first-child to work in IE 8 and earlier, a DOCTYPE must be declared. </p> � </body>

CSS - The : first-child Pseudoclass <style> p: first-child { color: blue; } </style> <body> <p>I am a <i>strong</i> person. </p> <p><b>Note: </b> For : first-child to work in IE 8 and earlier, a DOCTYPE must be declared. </p> </body>

CSS 3(Cascading Style Sheets) P elementine farklı özellikler tayin edildi. Paragraf sayısı birden fazla olm

CSS 3(Cascading Style Sheets) Linklerin hover özelliği

Ower. Flow <style> div { background-color: #eee; width: 200 px; height: 50 px; border: 1 px dotted black; overflow: visible; } </style> <body> <h 2>CSS Overflow</h 2> <p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box: </p> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box. </div> </body>

Overflow <style> div { background-color: #eee; width: 200 px; height: 50 px; border: 1 px dotted black; overflow: scroll; } </style> </head> <body> <h 2>CSS Overflow</h 2> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box. </div> </body>

Overflow <style> div { background-color: #eee; width: 200 px; height: 50 px; border: 1 px dotted black; overflow: auto; } </style> </head> <body> <h 2>CSS Overflow</h 2> <p>The auto value is similar to scroll, only it add scrollbars when necessary: </p> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box. </div> </body>

Overflow <style> div { background-color: #eee; width: 150 px; height: 70 px; border: 1 px dotted black; white-space: nowrap; } </style> </head> <body> <div> <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. </p> </div> </body>

CSS Layout - inline-block <style>. floating-box { float: left; width: 150 px; height: 75 px; margin: 10 px; border: 3 px solid #73 AD 21; }. after-box { clear: left; border: 3 px solid red; } </style> <body> <h 2>The Old Way - using float</h 2> <div class="floating-box">Floating box</div> <div class="floating-box">Floating box</div> <div class="after-box">Another box, after the floating boxes. . . </div> </body>

CSS Layout - inline-block <style>. floating-box { display: inline-block; width: 150 px; height: 75 px; margin: 10 px; border: 3 px solid #73 AD 21; }. after-box { border: 3 px solid red; } </style> <body> <h 2>The New Way - using inline-block</h 2> <div class="floating-box">Floating box</div> <div class="floating-box">Floating box</div> <div class="after-box">Another box, after the floating boxes. . . </div> </body>

CSS Layout - The position Property There are four different position values: • static • relative • fixed • absolute

Position: Static <style> div. static { position: static; border: 3 px solid #73 AD 21; } </style> <body> <h 2>position: static; </h 2> <p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page: </p> <div class="static"> This div element has position: static; </div> </body>

Position: Relative <style> div. relative { position: relative; left: 50 px; top: 0 px; border: 3 px solid #73 AD 21; } </style> <body> <h 2>position: relative; </h 2> <p>An element with position: relative; is positioned relative to its normal position: </p> <div class="relative"> This div element has position: relative; </div> </body>

Position: fixed; Position fixed verdiğimiz div çakılı bir şekilde orada kalıyor hiç bir şekilde oynama yapmıyor. Ama bu özelliği ie 6 desteklemiyor. <style> div. fixed { position: fixed; bottom: 0; right: 0; width: 1000 px; border: 3 px solid #73 AD 21; } </style> <body> <h 2>position: fixed; </h 2> <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled: </p> <div class="fixed"> This div element has position: fixed; </div> </body>

Position: Absolute <style> div. relative { position: relative; width: 400 px; height: 200 px; border: 3 px solid #73 AD 21; } div. absolute { position: absolute; top: 80 px; right: 0; width: 200 px; height: 100 px; border: 3 px solid #73 AD 21; } </style> <body> <h 2>position: absolute; </h 2> <div class="relative">This div element has position: relative; <div class="absolute">This div element has position: absolute; </div> </body>

Position: Absolute �Absolute özelliğinin left ve right değerlerinin sayfaya göre olmamasını istiyorsanız, iç içe div içerisinde ve ona bağlı olan div’in position değeri relative olması gereklidir. �Bulunduğu div’e göre konumlandırmak istiyor isek; html’de iç içe olmalılar.

Overlapping(Üst Üste Binme)

Eğer katmanları istediğimiz sıra ile göstermek istiyor isek her katmana sırasına göre sayısal değer atamalıyız. Yüksek değer alan katmanlar üstte düşük değer alan katmanlar ise altta kalacaktır. Buna göre istediğimiz görüntüyü elde etmek için z-index değerleri vermeliyiz.

Uygulama

Uygulama <style>. container { position: relative; }. topleft { position: absolute; top: 8 px; left: 16 px; font-size: 18 px; } img { width: 100%; height: auto; opacity: 0. 3; } </style> <body> <div class="container"> <img src="trolltunga. jpg" alt="Norway" width="1000" height="100"> <div class="topleft">Top Left</div> </body>

Uygulama <style>. container { position: relative; }. bottomright { position: absolute; bottom: 8 px; right: 16 px; font-size: 18 px; } img { width: 100%; height: auto; opacity: 0. 3; } </style> <body> <div class="container"> <img src="trolltunga. jpg" alt="Norway" width="1000" height="300"> <div class="bottomright">Bottom Right</div> </body>

Uygulama

� 5. Hafta

Uygulama <style>. container { position: relative; width: 600 px; height: auto; }. center { position: absolute; top: 50%; width: 100%; text-align: center; font-size: 18 px; } img { width: 100%; height: auto; opacity: 0. 3; } </style> <body> <div class="container"> <img src="Beykoz-Üniversitesi-Gelecek-Kampüs. jpg" alt="Norway" height="auto"> <div class="center">Centered</div> </body>

Transparan <style> div. background { background: url(klematis. jpg) repeat; border: 2 px solid black; } div. transbox { margin: 30 px; background-color: #ffffff; border: 1 px solid black; opacity: 0. 6; filter: alpha(opacity=60); /* For IE 8 and earlier */ } div. transbox p { margin: 5%; font-weight: bold; color: #000000; } </style> <body> <div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box. </p> </div> </body>

Transparan Uygulaması

Transparan Uygulaması(devam)

Transparan Uygulaması(devam)

CSS Navigation Bar -Vertical <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>Note: We use href="#" for test links. In a real web site this would be URLs. </p> </body>

CSS Navigation Bar-Vertical <style> ul { list-style-type: none; margin: 0; padding: 0; } </style> <body> <p>In this example, we remove the bullets from the list, and its default padding and margin. </p> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body>

CSS Navigation Bar-Vertical <style> ul { list-style-type: none; margin: 0; padding: 0; width: 60 px; } li a { display: block; /* Genişliğini korumayı sağlar*/ background-color: #dddddd; } </style> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>A background color is added to the links to show the link area. </p> <p>Notice that the whole link area is clickable, not just the text. </p> </body>

CSS Navigation Bar-Vertical <style> ul { list-style-type: none; margin: 0; padding: 0; width: 200 px; background-color: #f 1 f 1 f 1; } li a { display: block; /*li ebatıyla uyumu için gereklidir. */ color: #000; padding: 8 px 16 px; /* Eğer yazılmaz ise, linkin etrafında boşluk olmaz sadece genişlik li’ye göre ayarlanır*/ text-decoration: none; } li a: hover { /* Change the link color on hover */ background-color: #555; color: white; } </style> <body> <h 2>Vertical Navigation Bar</h 2> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body>

CSS Navigation Bar-Vertical <style> ul { list-style-type: none; margin: 0; padding: 0; width: 200 px; background-color: #f 1 f 1 f 1; } li a { display: block; color: #000; padding: 8 px 16 px; text-decoration: none; } li a. active { background-color: #4 CAF 50; color: white; } li a: hover: not(. active) { background-color: #555; color: white; } </style> <body> <p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link. </p> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>

CSS Navigation Bar-Vertical <style> ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline; } </style> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body>