NotPad++ ile Site Kurulumu/ Part 4 Son Part

L4G H4CK

Üye
4 May 2022
80
33
9tzgprh.gif



o0cc16i.png



9tzgprh.gif





PROJE ŞABLONUNUN OLUŞTURULMASI

Öğrenilenleri tekrarlamak ve yeni kodlar öğrenmek amacıyla örnek bir site şablonu üzerinde çalışılacaktır.

İlk olarak şimdiye kadar öğrenilenlerden hareketle, yazılabilecek kodlar, Resimdeki gibi bir görüntü elde etmek için yeterli olmayacaktır. Bunun için HTML5 kodları ile sitenin ana çerçeveleri oluşturulmaya çalışılacaktır. Daha sonraki ünitede ise CSS kodları kavrandığında site resimdeki gibi bir görüntüye kavuşturulabilecektir.

hskmlaa.jpg




g9cwgmg.png




Site Başlığı Ve Dil Kodlaması

kfmy64h.jpg



Yeni bir kodla karşılaştık. <head> etiketi arasına yazılan kodlar, sayfanın genel ayarlarının yapıldığı bölümdür. Bu etiket içerisinde,

• <title> ile tarayıcı sekmesinde sayfanın başlığını görüntüleyebiliriz.
• <meta> ile hangi dil içeriğinin kullanılacağını belirtebiliriz (UTF-8 Türkçe karakterlerin de desteklenmesini sağlar.).
• <style> ve <script> ile farklı dosyaları sayfaya bağlayabiliriz. Bu konuya ilerleyen ünitelerde değinilecektir.



g9cwgmg.png




Site Banner’ı ve Gezinim Linklerinin Oluşturulması

3wuve99.jpg


Daha önceden div elementinin anlamsal olmayan yani içeriği her türden element alabilen bir element olduğu bilinmektedir. Burada id = “hgroup” olan bir div elementi oluşturulmuştur. Bu bölüm ilerleyen aşamalarda sitenin logo ve açıklamasının bulunduğu yer olacak.


g9cwgmg.png




Yeni Kodlar

• Form etiketi: Kullanıcıdan veri girişi almamızı sağlayan, tüm elementleri bir arada toplayan çerçevedir.

• Fieldset: Birbiri ile ilişkili elementleri bir arada toplayan bir çerçevedir.
• ul ve li: Madde işaretli metinler oluşturmamızı sağlayan elementlerdir. Birlikte kullanılan; <ul> madde işareti konulacak metin gruplarını, <li> ise her bir maddeyi içerir.


swyj0kq.jpg


Kodlayıcı Görevi
• Kullanıcının veri girişi yapmasına olanak sağlayan kaç tür <input> nesnesi vardır?

• İpucu: <input type=”?”> • Madde imlerinin görünümünü nasıl değiştirebiliriz?
• İpucu: <ul type=”?”>



g9cwgmg.png




Sitenin Slayt Resmi ve Ana İçerik Bölümünün Oluşturulması


a) Sitenin Slayt ReVsminin Oluşturulmas



femeqgp.jpg




g9cwgmg.png




b) Sitenin Ana İçerik Bölümünün Oluşturulması


77e7g21.jpg

20c7cjl.jpg




g9cwgmg.png




Yeni Kod!

Resim Galerisi » şeklinde bir görüntü nasıl elde edilir? Bunun için kodlara dikkat etmek gerekir.

<figcaption><a href="#">Resim Galerisi &raquo;</a></figcaption> Görüldüğü üzere » simgesi &raquo; kodu ile elde edilir. Bu türden kodlar varlık isimleri olarak adlandırılır. Benzer şekilde birçok simgenin varlık ismi vardır.




g9cwgmg.png




Sitenin Alt Bilgi Bölümünün Oluşturulması


6qao4w3.jpg

Bu ünite sonunda HTML5 ile site şablonunun ana çerçeveleri oluşturuldu. Böylece ünitedeki kazanımlara yönelik kodlama örneklerini uygulama fırsatı oldu. Şimdi yapılan kodlamaları, index.html şeklinde kendi isminizle oluşturduğunuz dizinin (klasörün) içerisine kaydediniz.



g9cwgmg.png



Herkese İyi Forumlar Dilerim.


256i85i.jpg


eew55ej.png
 
Son düzenleme:

ByZehirx

Yaşayan Forum Efsanesi
10 Şub 2012
12,381
1,976
Dinlenmede.
Güzel bir seri bu konular ayni zamanda farkli kod ihtiyaclarinin sorunu ve çözümü içinde kullanilabilir olduğu anlaşılıyor.
Ellerine sağlık
 

JohnWick51

Uzman üye
20 Mar 2022
1,865
770
28
9tzgprh.gif



o0cc16i.png



9tzgprh.gif





PROJE ŞABLONUNUN OLUŞTURULMASI

Öğrenilenleri tekrarlamak ve yeni kodlar öğrenmek amacıyla örnek bir site şablonu üzerinde çalışılacaktır.

İlk olarak şimdiye kadar öğrenilenlerden hareketle, yazılabilecek kodlar, Resimdeki gibi bir görüntü elde etmek için yeterli olmayacaktır. Bunun için HTML5 kodları ile sitenin ana çerçeveleri oluşturulmaya çalışılacaktır. Daha sonraki ünitede ise CSS kodları kavrandığında site resimdeki gibi bir görüntüye kavuşturulabilecektir.

hskmlaa.jpg




g9cwgmg.png




Site Başlığı Ve Dil Kodlaması

kfmy64h.jpg

Yeni bir kodla karşılaştık. <head> etiketi arasına yazılan kodlar, sayfanın genel ayarlarının yapıldığı bölümdür. Bu etiket içerisinde,
Guzel. Ellerine saglik
 

'GHOST

Uzman üye
31 Mar 2022
1,390
568
9tzgprh.gif



o0cc16i.png



9tzgprh.gif





PROJE ŞABLONUNUN OLUŞTURULMASI

Öğrenilenleri tekrarlamak ve yeni kodlar öğrenmek amacıyla örnek bir site şablonu üzerinde çalışılacaktır.

İlk olarak şimdiye kadar öğrenilenlerden hareketle, yazılabilecek kodlar, Resimdeki gibi bir görüntü elde etmek için yeterli olmayacaktır. Bunun için HTML5 kodları ile sitenin ana çerçeveleri oluşturulmaya çalışılacaktır. Daha sonraki ünitede ise CSS kodları kavrandığında site resimdeki gibi bir görüntüye kavuşturulabilecektir.

hskmlaa.jpg




g9cwgmg.png




Site Başlığı Ve Dil Kodlaması

kfmy64h.jpg



Yeni bir kodla karşılaştık. <head> etiketi arasına yazılan kodlar, sayfanın genel ayarlarının yapıldığı bölümdür. Bu etiket içerisinde,

• <title> ile tarayıcı sekmesinde sayfanın başlığını görüntüleyebiliriz.
• <meta> ile hangi dil içeriğinin kullanılacağını belirtebiliriz (UTF-8 Türkçe karakterlerin de desteklenmesini sağlar.).
• <style> ve <script> ile farklı dosyaları sayfaya bağlayabiliriz. Bu konuya ilerleyen ünitelerde değinilecektir.



g9cwgmg.png




Site Banner’ı ve Gezinim Linklerinin Oluşturulması

3wuve99.jpg


Daha önceden div elementinin anlamsal olmayan yani içeriği her türden element alabilen bir element olduğu bilinmektedir. Burada id = “hgroup” olan bir div elementi oluşturulmuştur. Bu bölüm ilerleyen aşamalarda sitenin logo ve açıklamasının bulunduğu yer olacak.


g9cwgmg.png




Yeni Kodlar

• Form etiketi: Kullanıcıdan veri girişi almamızı sağlayan, tüm elementleri bir arada toplayan çerçevedir.

• Fieldset: Birbiri ile ilişkili elementleri bir arada toplayan bir çerçevedir.
• ul ve li: Madde işaretli metinler oluşturmamızı sağlayan elementlerdir. Birlikte kullanılan; <ul> madde işareti konulacak metin gruplarını, <li> ise her bir maddeyi içerir.


swyj0kq.jpg


Kodlayıcı Görevi
• Kullanıcının veri girişi yapmasına olanak sağlayan kaç tür <input> nesnesi vardır?

• İpucu: <input type=”?”> • Madde imlerinin görünümünü nasıl değiştirebiliriz?
• İpucu: <ul type=”?”>



g9cwgmg.png




Sitenin Slayt Resmi ve Ana İçerik Bölümünün Oluşturulması


a) Sitenin Slayt ReVsminin Oluşturulmas



femeqgp.jpg




g9cwgmg.png




b) Sitenin Ana İçerik Bölümünün Oluşturulması


77e7g21.jpg

20c7cjl.jpg




g9cwgmg.png




Yeni Kod!

Resim Galerisi » şeklinde bir görüntü nasıl elde edilir? Bunun için kodlara dikkat etmek gerekir.

<figcaption><a href="#">Resim Galerisi &raquo;</a></figcaption> Görüldüğü üzere » simgesi &raquo; kodu ile elde edilir. Bu türden kodlar varlık isimleri olarak adlandırılır. Benzer şekilde birçok simgenin varlık ismi vardır.




g9cwgmg.png




Sitenin Alt Bilgi Bölümünün Oluşturulması


6qao4w3.jpg

Bu ünite sonunda HTML5 ile site şablonunun ana çerçeveleri oluşturuldu. Böylece ünitedeki kazanımlara yönelik kodlama örneklerini uygulama fırsatı oldu. Şimdi yapılan kodlamaları, index.html şeklinde kendi isminizle oluşturduğunuz dizinin (klasörün) içerisine kaydediniz.



g9cwgmg.png



Herkese İyi Forumlar Dilerim.


256i85i.jpg


eew55ej.png
Eline sağlık
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.