Maps Engine uygulamasına gidiyoruz. Bir arama gerçekleştiriyoruz. Yeni bir harita tanımlıyoruz, başlık ve açıklamasıyla. Katman adını giriyoruz. Haritamız belirttiğimiz katmanın altında yer alıyor. Etiketini, ikonunu, rengini ve daha fazla özelliğini özelleştirebiliyoruz. Temasını bile değiştirebiliyoruz. Paylaşım ayarlarını belirliyoruz. Herşey bitince de klasöre tıklayıp siteme göm’ü seçiyoruz. Bize bir kod parçası veriyor. ‘iframe bloğu’… Bu kod bloğu responsive değil. Bu yüzden dışına bir div bloku açıyoruz. stiline de ” position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0;…
HTML Derslerinin linkleri düşmüştür, yenileme nedeniyle. Yakın zamanda ve acilen hepsini yenileyeceğim, sabrınız için teşekkür ederim.
XHTML HTML’nin ve XML’in (EXtensible Markup Language) karışımından oluşur.
XHTML; HTML 4.01’in tüm elementlerine dayanır, XML’in katı söz dizimini de içerir.
Neden/nedir XHTML?
İnternet üzerindeki çoğu sayfa düzgün olmayan yani kötü html’e sahiptir.
Bir tarayıcıda görüntülerken alttaki kodlar düzgün görüntülenecektir. (HTML kurallarına uymasa dahi):
<html> <head> <title>Bu düzensiz HTML</title> <body> <h1>düzensiz HTML <p>Bu bir paragraf </body> |
XML bir işaretleme dili ve herşeyin düzgün işaretlenmesi gerekir ki bu tür belgelere de well-formed yani düzgün biçimli belgeler denir.
XML verileri tanımlamak için tasarlanmıştır, ve HTML verileri görüntülemek için.
Farklı firmalara ait tarayıcıların günümüz pazarında , kimisi bilgisayarlarda çalışmakta kimisi de mobil cihazlar gibi küçük cihazlarda çalışmakta. Son bahsettiğimizde herhangi bir güç ya da kaynak yoktur düzensiz HTML’i düzeltecek.
Bununla birlikte -HTML ve XML’in birleşimi, W3C tarafından gelecek için ve şu an için en yararlı olan işaretleme dili olduğudur – XHTML.
Genel Olay Özellikleri
HTML 4; tarayıcıda, olaylara tetikleme izni vermiştir, tıpkı bir elemente tıklayınca çalışan Javascript gibi.
Javascript ve nesneye yönelik HTML de anlatacaklarım listesinde.
Aşağıdaki genel olay özellikler HTML5 içerisinde olayların etkileşimde bulunmasını sağlamakta.
Yeni : HTML5’teki yeni olay özellikleri.
Window(pencere) Olay Özellikleri
Window nesnesi için olay tetikleyicileri.
<body> tag’ına uygulanırlar:
| Özellik | Değer | Tanım |
|---|---|---|
| onafterprint Yeni | script | Belge basıldıktan sonra çalışır |
| onbeforeprint Yeni | script | Belge basılmadan önce çalışır |
| onbeforeonload Yeni | script | Belge yüklenmeden önce çalışır |
| onblur | script | Pencere odaklanmasını kaybedince çalışır |
| onerror Yeni | script | Bir hata gerçekleştiğinde çalışır |
| onfocus | script | Pencereye odaklandığında çalışır |
| onhaschange Yeni | script | Belge değiştirildiğinde çalışır |
| onload | script | Belge yüklendiğinde |
| onmessage Yeni | script | Mesaj tetiklendiğinde |
| onoffline Yeni | script | Belge çevrimdışı olduğunda |
| ononline Yeni | script | Belge çevrimiçi olduğunda |
| onpagehide Yeni | script | Pencere gizli olduğunda |
| onpageshow Yeni | script | Pencere görünür olduğunda |
| onpopstate Yeni | script | Pencerenin tarihi değiştiğinde ya da durumu |
| onredo Yeni | script | Belge bir tekrar yapma işlemine sahne olduğunda |
| onresize Yeni | script | Pencere yeniden boyutlandırıldığında |
| onstorage Yeni | script | Bir belge yüklendiğinde |
| onundo Yeni | script | Belge bir geri alma işlemine sahne olduğunda |
| onunload Yeni | script | Kullanıcı belgeden ayrılınca |
Form Olayları
Bir HTML formu içerisinde olay tetiklenir.
Tüm HTML5 elementlerine uygulanır,fakat çoğu form elementlerine uygulanır:
| Özellik | Değer | Tanım |
|---|---|---|
| onblur | script | bir element odaklanmasını yitirdiğinde |
| onchange | script | bir elment değiştiğinde |
| oncontextmenu Yeni | script | bir kaynak menu tetiklendiğinde |
| onfocus | script | Bir elemente odaklanıldığında |
| onformchange Yeni | script | Bir form değiştiğinde |
| onforminput Yeni | script | Bir form kullanıcı veri girişi aldığında |
| oninput Yeni | script | Bir element veri girişi aldığında |
| oninvalid Yeni | script | Bir element doğru olmadığında (invalid) |
| onreset | script | Bir form resetlendiğinde HTML5 desteklemiyor |
| onselect | script | Bir elment seçildiğinde |
| onsubmit | script | Bir form onaylandığında |
Tüm HTML5 etiketlerince desteklenen özellikler aşağıda listelenmiştir birkaç istisna haricinde. HTML5 Genel Özellikleri Yeni : HTML5’teki yeni özellikler. Özellik Değer Tanım accesskey character Bir elemente erişmek için klavye kısayolu tanımlar. class classname Bir element için class adı oluşturur (stil dosyası için). contenteditable Yeni true false Kullanıcının içeriği düzenleyip düzenlememe izni verilip verilmemesi – true, izinli – false, değil-. contextmenu Yeni menu_id Bir element için kaynak menu oluşturulması ile ilgili. dir ltr rtl Bir elementin içeriğindeki…
HTML5 hataları nasıl ayıklayacağının ve nasıl tüm html elementlerini kullanıp kuralların kestiriminde bulunarak birlikte çalışabilirliği artırmakta ve geliştirme maliyetini azaltmayı hedeflemekte.
Yeni html5’in bazı özellikleri; ses, video, grafik, sunucu taraflı veri depolama ve interaktif belgeler için işlevler. Hatta nav, header, footer ve figure gibi elementler de içermekte.
HTML5 çalışma grupları AOL, Google, IBM, Microsoft, Mozilla, Nokia, Opera ve yüzlerce satıcıdır.
Not; HTML5 henüz bir W3C tavsiyesi değildir!
‘Yeni’ yazanlar HTML5’teki yeni elementlerdir.
Alfabetik olarak sıralanmış tüm HTML etiketleri, işte referans noktanız!;
Form attributes yani;
Yeni form özellikleri;
- autocomplete,
- novalidate
Yeni input özellikleri;
- autocomplete,
- autofocus,
- form,
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget),
- height and width,
- list,
- min, max and step,
- multiple,
- pattern (regexp),
- placeholder,
- required,
Tarayıcı desteği;
| Attribute | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| autofocus | Hayır | 4.0 | 10.0 | 3.0 | 4.0 |
| form | Hayır | 4.0 | 9.5 | 10.0 | Hayır |
| form overrides | Hayır | 4.0 | 10.5 | 10.0 | Hayır |
| height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| list | Hayır | 4.0 | 9.5 | Hayır | Hayır |
| min, max and step | Hayır | Hayır | 9.5 | 3.0 | Hayır |
| multiple | Hayır | 3.5 | 11.0 | 3.0 | 4.0 |
| novalidate | Hayır | 4.0 | 11.0 | 10.0 | Hayır |
| pattern | Hayır | 4.0 | 9.5 | 3.0 | Hayır |
| placeholder | Hayır | 4.0 | 11.0 | 3.0 | 3.0 |
| required | Hayır | 4.0 | 9.5 | 3.0 | Hayır |
autocomplete Özelliği
Form ya da giriş alanının(input field) autocomplete ile otomatik tamamlama özelliğine sahip olmasını sağlar.
Not; Form etiketi ile çalışır autocomplete. Ayrıca; input->text, search, url, telephone, email, password, datepickersi range ve color ile de kullanılır.
Bu özelliğe sahip olan bir alanda yazmaya başlayan kullanıcı, tarayıcı alandaki verileri doldurabilecek şeylere dair ayarları göstermeye başlayacaktır.
Örnek ve deneme adresi için;
<form action="demo_form.asp" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form>
Not; bazı tarayıcılarda aktif etmeniz gerekebilir bu özelliği.
HTML5 birkaç yeni elemente ve özelliğine sahip formlar için.
Yeni form elementleri;
- datalist
- keygen
- output
Tarayıcı desteği
| Özellik | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| datalist | Hayır | 4.0 | 9.5 | Hayır | Hayır |
| keygen | Hayır | 4.0 | 10.5 | 3.0 | Hayır |
| output | Hayır | Hayır | 9.5 | 10.0 | Hayır |
datalist Elementi
Giriş alanı için ayarlar listesi belirler bu element.
Datalist’in içinde option elementi ile liste oluşturur.
Datalist’e id vererek, listelerdeki veri girişlerinin değerlerini alabilirsiniz;
Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
Deneme adresi…
İpucu; Option elementi daima bir value taşımalı.