Web Tasarımı

HTML5 Dilinin Genel Kullanımı, Etiketler,
Formlar ve
Semantic Web Sayfa Düzeni

Neden HTML5 Önemli
 Birincisi en son sürüm de o yüzden tercih etmemiz
gerekiyor
HTML5’in yeni web standartlarını getirmesi
 Hızlı ve kolay kodlama
 Modern yapısı
 Mobil cihaz desteği
 Tarayıcı desteği
 Temiz Kodlama Sistemi
 Semantik web ve genişletilebilirlik

 Daha iyi veri girişi
 Video ve ses desteği
 CSS3 ile daha zengin içerik hazırlama
 Çevrimdışı uygulama yetenekleri
 Doğal API ler ile güç artışı
 Yerel veri depolama
 Oyun programlama
 Mobil uygulama geliştirme

HTML5 Kodlarının Yazımı, Element Kavramı
ve Sayfa Sözdizimi
Elementler
 HTML5 dilindeki amaç, belli başlı etiketler arasında
göstermek istediğimiz verileri yazmaktır.
 Etiket dediğimiz <etiket> </etiket> tir.
 Etiketler bir başlangıç ve bitiş olarak tanımlanır. Her
etiket mutlaka kapatılmalıdır.
 Örn: <p><b> Bu kalın harfli bir cümledir. </b></p>

HTML5 Sözdizimi
 HTML5 kodlarını yazarken herhangi bir metin tabanlı
editör, web sayfası tasarlama programını
kullanabilirsiniz.
 Bir de kodları yazarken hepsinin doğrudan dola yaslı
olmadığını, bazılarının içe doğru girintili olduğunu
görebilirsiniz. Bu kodlama aşamasında okunabilirliği
rahatlatmak için uygulanan bir metottur.

 .html formatı ile çalıştıracağız.
 Bu sayfanın hangi sürümde hazırlandığı kontrol
edilecek.
 Tüm HTML5 içerikleri <html> </html> içerine yazılır.
 Sonra sayfa ikiye ayrılır.
 Birinci kısımda bir takım sayfa eklentilerini
kapsayacak olan <head> </head> ve sayfanın
başlığını <title> </title> etiketidir.

 Sayfanın karakter kodlaması, yani hangi konuşma
dili ile hazırlandığı veya buna benzer bir takım kimlik
belirleyiciler <meta> etiketi ile yapılır.
 Eğer sayfaya dışarıdan CSS ve JAVA kodları
eklenmişse, onların bağlantıları burada <link> etiketi
ile belirtilir.
 Sayfa içeriği yani tarayıcıda görünecek olan veriler
de <body> </body> etiketleri içinde yer alır.

Elementlere Özellikler(Attribute) ve Stil (Style) Verme
 Özellikler:
 id: Bir elemente ait tanımlayıcı kimliktir. Her bir elemente ait sadece tek
bir değer olabilir. Yani her birinde farklı olmalıdır. CSS veya JavaScript ile
erişmek için kullanılır.
 title: Element için tanımlayıcı bir isim. CSS veya JavaScript ile erişmek
için kullanılır.
 value: Element için bir değer tanımlanır. Örn. Bir form elementi ise onun
değeri verilir.
 alt: Normalde tarayıcıda görünmeyen, ancak o elementi tanımlayan
genellikle arama motorlarının o elementin içeriği tanımlayabilmek için
referans aldığı özelliktir.
 src: Eğer gömülü bir içerik kullanılacaksa kaynağı belirtir. Mesela <img>
etiketi kullanıldığında, mutlaka o etiket için kaynak belirtilmelidir.
 href: Link yani bağlantı kurmak istediğinde hedef adres belirtilir.
 disabled: Genelde form elementlerinde kullanılır ve pasif olması için
kullanılan bir özelliktir.
 style: Biraz detaylıdır. Stil tanımlaması anlamına gelir. Aslında CSS ve
tanımlamanız gereken stilleri, bu özelliği kullanarak birbiri peşi sıra
ekleyerek elemente aktarabilirsiniz.

Metin ve Paragraf Yazma
 Web sayfalarının temelini metinler oluşturur.
 Arama motorları için web sayfalarında yer alan
metinler, doğru şekilde uygun formatta kodlanmış
olması çok büyük bir önem teşkil etmektedir.
 Bir de kullanıcı tarafından bakıldığında metinlerin
düzgün bir tipografi ile sunulmuş olması
gerekmektedir.

Paragraflar
 <p> </p> paragraf oluşturma yani metin yazma
etiketidir.
 Paragraf etiketleri arasında otomatik olarak bir satır
boşluğu tanımlanır.
 Her paragraf satır başından başlar.

Başlıklar ve Başlık Sistemi
 Başlıklar büyüklüklerine göre seviyelere ayrılır.
 HTML5’te 6 tane başlık vardır.

Yeni Satır
 Metinler arasında yeni satırlar oluşturmak istenebilir.
 Break kelimesinden üretilmiş <br> etiketidir.

Kalın, İtalik, Vurgulu Yazılar
 Kalın yazı Bold <b></b>
 İtalik yazı İtalic <i></i>
 Vurgulu yazı Emphasized <em></em>

Küçük, Üs ve Alt Yazılar
 Üs yazı için Superscript <sup></sup>
 Alt yazı için Subscript <sub></sub>
 Küçük yazı için Small <small></small>

İşaretlenmiş Yazılar
 İşaretlemek metnin arkaplanının renklenmesidir.
 Background color özelliğine benzer.
 Marked kelimesinden <mark></mark> etiketidir.
 Etiket içinde yer alan metnin zemini sarı olur.

Üzeri ve Altı Çizili Yazılar
 Üzerlerini çizmek için Deleted <del></del>
 Altını çizmek için Inserted <ins></ins>

Liste Şeklinde Yazı
 Liste oluştururken her bir elemanın başına bir sayı,
işaret, harf sıralaması getirebiliriz.
 List kelimesinden <li> etiketidir.

Yazı ve Yazı Arkaplan Rengi
 <font></font> etiketi ile yapılır.
 Attribute olarak color kullanılır.
 Style tanımlaması kullanılarak color ile renk,
background-color ile arkaplan rengi verilir.

Yazı Font Büyüklüğü
 <font> </font> etiketleri arasına metin yazılır.
 Hem size hem style içinde font-size kullabılabilir.

Yazı Font Tipi
 Web sayfalarının tasarımında tipografi çok önemlidir.
Özellikle menü ve buna benzer navigasyon
butonlarında daha değişik font stilleri uygulanarak
ziyaretçinin dikkati çekilmeye çalışılır.

Yazıları Hizalama
 İstersek sola, ortaya, sağa, her iki tarafa olacak
şekilde hizalamayı yapabiliriz. Hizalamayı istersek
align attribute değeriyle istersek stil tanımlayarak
text-align özelliğiyle yapabiliriz.

Resim Ekleme Düzenleme
 Resim eklemek için image kelimesinden üretilen
<img/> etiketi kullanılır. Açtığımız etiketi doğrudan />
etiketi ile kapatıyoruz. Nedeni bu etiket için
tanımlayıcı bilgilerin attribut olarak eklenmiş
olmasıdır.
 <img/> etiketinin söz dizimi aşağıdaki gibidir..
 <img src=“”/>

Resim Hizalama
 Paragraf metni içinde resim bazen sağda bazen
solda olmaktadır. Bu işlem için style değeri içinde
float stili kullanılarak yapılır. Alacağı parametreler;
right, left, none olarak verilmektedir.

Dosya ve Sayfa Bağlantısı Kurma
 Bağlantıların bir diğer ismi linktir. Bir yazıya, butona,
resme veya buna benzer herhangi bir öğeye Mouse
ile sol tıklandığında başka sayfalara geçiş için
kullanılır. Link verme işlemi için Anchor
kelimesinden üretilen <a></a> etiketi ile yapılır.
Temel olarak iki adet attribute alır. Bunlar href ve
targettir.

iFrame ile İç Sayfa Gösterme
 Bir butona tıklanmadan <frame></frame> özelliğiyle
sayfa açabiliyorduk. Ancak iframe kullanımı SEO
açısından olumsuz bir örnektir. Çok ihtiyacınız
olmadıkça kullanmayın.

Video Oynatmak
 HTML5’in yeniliklerinden biri olan ve birçok video
yayını yapan web servislerini(başta Youtube)
rahatlatan gelişmelerden biri de video ses
dosyalarının hiçbir eklentiye gerek kalmadan web
sayfasında bir oynatıcı ile gösterilmesidir.
 HTML5’in desteklediği video formatları; MP4, OGG,
WEBM’dir. En çok MP4 olanı kullanılmaktadır.
 Video eklemek için <video></video> etiketleri
kullanılmaktadır.
 <video src=“video.mp4”></video>

Ses Çalma
 Ses dosyası eklemek videoya göre daha basit
yapılıdır. MP3, OGG, WAV formatlı ses dosyaları
yüklenebilir.
 Ses eklemek için <audio></audio> etiketi kullanılır.
Bu etiketler içinde de <source></source> alt
etiketleri kullanılarak src attribut değeri ses
dosyasının adresi ve type metodu ile de ses
dosyasının değeri belirtilir.

Tablo ile Çalışma
 Tablo ile çalışmada tablo <table></table> etiketi ile
oluşturulur.
 Tablo içinde <tr></tr> etiketi ile satırlar,
 <td></td> etiketi içinde sütunlar oluşturulur.
 Tabloya başlık vermek için <th></th> etiketi
kullanılır.

Tablo Kenarlıkları
 Tabloda kenarlıkları görmek için boder stilinden
faydalanılır. Stil vermek için <head></head> etiketi
içinde <style></style> etiketi açılabilir stil
tanımlamaları yapılabilir.
 Erişim metodu olarak tablonun id attribut değerine
#mevsimler-aylar şeklinde erişiliyor.

Tablo Kenar Çizgisi
 Tablo yapısında hem tablonun dış çizgisi, hem de
hücrelerin dış çizgisi vardır. Bu çizgi aralıklarını
border-spacing stili ile düzenleyebiliriz.

Hücre İçi Kenar Boşluğu
 Hücrelerin içindeki yazıların hücre duvarlarına çok
yakın olmaktadır. İstersek hücre hat çizgisi ile
içindeki yazı içinde kenar boşluğu verdirebiliriz.
 Bunun için cellspacing değeri kullanılır.
 <table id=“mevsimler-aylar” cellspacing“5px”>

Satırları Birleştirme
 Birleştirme işlemi için rowspan=“” etiketi kullanılır.
 hangi <td></td> etiketi için kullanılırsa kendisi ve
kendisinden sonra gelen argüman kadar hücre
birleştirir.

Bloklar ile Çalışma
 Blok aslında <div></div> etiketi ile yapılan kutu
anlamına gelmektedir.
 <div></div> etiketi ile sayfa düzeni yapabilirsiniz.

Responsive Tasarım Temelleri
 Ekran boyutuna göre kendini yeniden şekillendiren
web sayfasıdır. Bunun en fark edilebilir örneği mobil
cihazlardan web sitelerine girdiğimizde görürüz.
Mobil cihazda sayfa kendini dar ekrana göre
şekillendirirken, geniş ekranda daha fazla içerik
sunmaktadır.

Formlar
 Formlar ziyaretçilerden birtakım bilgi almak için kullanılır.
 Formları oluşturmak için birtakım akıllı bileşenlerden
faydalanılır.
 <label> etiket
 Başlık oluşturmak için kullanılır.
 <input> tek satırlık metin kutusu
 Klavyeden giriş almak için kullanılır. Kullanıcı adı soyadı
gibi bilgilerin alınmasında kullanılır.
 <textarea> çok satırlık metin kutusu
 Genelde ziyaretçi formlarında en son mesaj kutusu
oluşturulur. Bu gibi alanlarda çoklu satırlı metin kutuları
gerekir.
 <button>
 Buttonları form içinde ve dışında serbest halde

 Form içinde iki farklı button vardır. Bunlar SUBMİT ve
RESET tir.
 RESET formu sıfırlar. Yani girilmiş tüm verileri ortadan
kaldırır.
 Submit, formu Get ve Post metodlarına göre
sunucu tabanlı bir dille değişken olarak aktarır.
 Form etiketi açılırken iki adet attribute değeri alıyor.
 Bunlardan action olanı, verilerin hangi sunucu taraflı
dil dosyasına gönderileceğidir.
 Method kısmında get veya post şeklinde veri
gönderimi yapılır.

Web Tasarımı

Recommended

Recommended

More Related Content

Similar to Web Tasarımı

Similar to Web Tasarımı (20)

More from dilarra

More from dilarra (7)

Web Tasarımı