Blog

reklaminiz.site
Kas 15 th, 2017
Web Tasarım-YazılımYorum yapılmamış

Web Tasarım – HTML ile web site kodlama

Web tasarım - html - head - body - footer

Web Tasarım – HTML ile web site kodlama

Web tasarımda ilk olak html kodlama ile web site arayüzümüzü nasıl yapmamız gerektiğini anlatacağım. Html kodlama ile sitemizde yer almasını istediğimiz yada görselliğini ayarlayabiliriz. İlk olarak isterseniz html kodlamanın nasıl yapılması gerektiğini anlatmaya başlayalım.

Html ile web site kodlama – Başlangıç

Öncelikle html kodlama ile yaptığımız web sitenin veri tabanı fonksiyonu yada işlemsel bir fonksiyonu yoktur. Html kodladığımız site şablon olmaktadır. Html kodladığımız bir web site içerisinde yazılarımızı yada veritabanlı işlemleri asp.net,php gibi kodlama dilleri ile yapmaktayız.

Html site tasarlarken terimlerin benzerliği ve yapısı ile alımıza ilk gelen insan vicuduna benzediği olabilir. Öncelikle düzenli olması açısından masaüstünüze yeni bir klasör açmamız iyi olur. Açtığımız klasöre yeni metin belgesi açalım ve adına index diyelim.

Açtığımız not defterinde artık html kodlamaya başlaya biliriz. İlk olarak metin belgemize yazmamız gereken kodlardan biri ve kesinlikle olması gereken ilk kodumuz “<html></html>” dir. Yazdığımızı ilk kod kesinlikle bir insan vicududur. Bundan sonra yazacağımız kodların hepsi “<html> İçerik  </html>”  içerik yazan kısımda yer alacaktır.

Metin belgemize isterseniz kopyala yapıştırda yapabilirsiniz. Ama kodlara alışmanız için her seferinde kendiniz elle yazarsanız dahada akılda kalacaktır. Metin belgemiz şuanki görüntü

Web tasarım - html
bu şekildedir. Şimdi insan vicudunda olması gerken noktalardan biri olan baş yani “<head></head>” kısmıdır. Baş kısmı yani “<head></head>” kısmı ilerdede göreceğimiz css,css3,js gibi sitenin stil yada görselliğinin düzenlendiği kısımdır. Arama motorlarının sitenizde site hakkında açıklamaları çektiği nokların bulunduğu yerdir. Bunun en güzel örneklerinden biri de browserimizden bir web siteye girdiğimizde sekmenin üstünde sayfanın adının yer alması şimdi o konudada ekleyerek tasarımızda ilk olarak yatığınız işlem olucaktır.

Web tasarım - html - head

Not defterinize görüntü bu şekilde yer alıcak unutmadan arkadaşlar html kodlarken genelde “<>” bu bir kalıp oluşturak anlamına gelir. Kalıbı kapatmak için ise “</>” dikkat ettiyseniz kodlardada aynı şekildedir. Devam edelim şimdi bir tasarım için baş kısmını olurturduk ve gövde yani sitenin düzenini oluşturalım. Onun içinde kullanmamız gereken kod “<body></body>” burda dikkat etmeniz gereken şeyler var. “<body>” kısmında içeriklerinizin düzenini ve dizaynını kodlayacağınız için seo uygun fazladan kod yazmanıza hiç gerek yok yani bi işlemi bi kodla yapmanız güvenli ise çok iyi olur. Bir işlem için fazladan kod kullanmanız ilerleyen sürelerde kesinlikle sitenizin hızını düşürecektir. Not defterimizdeki görüntü

Web tasarım - html - head - body

Burda dikkat ettiyseniz head ve body yani baş ve gövde iç içe değil ayrı buna kesinlikle dikkat edin. Birde bildiğiniz gibi bütün web sitelerin alt kısmında duruma göre kapalı rekte bulunan bir bölme var telif hakkı yada site sahibinin adının geçtiği sitenin menülerinin bulunduğu kısımdır. Bildiğiniz gibi vicudumuzu ayaklar dik tutar ve tasarımıda bitirmemiz için “<footer></footer>”  kullanacağız. Not defterlerinize bu kodudada eklediğimizde görsellik böle olacaktır.

Web tasarım - html - head - body - footer

Şimdi yaptığımız dosyayı kayıt edelim ve not defterine dikkatli baktığınızda uzantısı “.txt” dir. Şimdi ondan ufak bi değişiklik yapıcaz ve “index.txt” olan metin belgemizi “index.html” olarak değiştirelim ve iconu değişecektir. Chrome kullanıyosanız onun iconu yada hangi internet tarayıcısını kullanıyosanız. Onun şeklini alıcaktır iconunuz. Üstüne tıkladığımızda boş bir ekran gelicek ama sekmenin başlığına baktığınızda “Merhaba Dünya” yazdığını göreceksiniz.

Web tasarım - txt - html çevirme

Bu konuyu ayrıntılı anlatmamın sebebi bir evi yaparen temelini ne kadar sağlam yaparsanız ilerde bir depremde kolay kolay yıkılmaz. Web tasarım konusunda size html derslerimizi anlatmaya başladım diğer dersimizde sitenin “<head></head>” kısmından başlıyacağız. Head kısmında nelerin kodlandığını nelerin yer aldığınız ayrıntılı bir şekilde anlatarak dersimizdeki akışıda fark edeceksiniz. Yorumlarınızı bekliyorum arkadaşlar merak ettiklerinizi sorabilirsiniz.

İlk yorum yapan siz olun.

Yorum ekle