Sıfırdan Web Tasarım : Html ve Css Eğitim Seti

HTML Projelerinin nasıl oluşturulacağını ve layout kavramının ne olduğunu öğreneceksiniz.

Header etiketlerini öğreneceksiniz.

ID ve Class kavramlarını ve aralarındaki farkları öğreneceksiniz.

Bu videoda html kullanarak inline ve block etiket çeşitlerinden bahsettik.Ve bu etiket çeşitlerinin farklarını anlattık. Inline etiketler bulunduğu satırı tamamen kaplamazken block etiketler tam tersine bulundukları satırı tamamen kaplayıp yanına başka element eklenmesini önler Bu etiket çeşitleri dışında bir çok etiket çeşidi daha bulunmaktadır bunlara ilerleyen videolarda değineceğiz.

Bu videomuzda link ekleme işlemini gördük. Linkler web sitelerini birbirine yönlendirmek için vazgeçilmezdir. Linkleri a etiketleri ile verebilirsiniz. A etiketlerinin href özelliği hedef linkler olarak ayarlanmalıdır. Yani linke tıkladığınızda sizi href içinde vereceğiniz linke yönlendirecek.

Bu videomuzda img etiketini gösterdim. Img etiketi adından da anlaşılabileceği gibi image yani resim dosyası eklemeye yarar. Resim ekleyerek bu resimlerin genişlik ve yüksekliklerini ayarlayabilirsiniz. Sayfalarınızda bolca görsel kullanmanız dileğiyle.

Bu videomuzda video etiketini gösterdim. Adı üstünde video eklemeye yarayan etikettir. Bu etiketin dışında YouTube ve DailyMotion gibi web sitelerini kullanarak web sitenize bu sitelerdeki videoları entegre edebilirsiniz. İyi seyirler :)

Bu videomuzda Audio etiketinden bahsettim. Bu etiket ile sayfamıza ses dosyaları yüklenebilir. Ses dosyalarının sayfanızdan indirilmesini de sağlayabilirsiniz. Herkese iyi çalışmalar.

Bu videomuzda Form ve Inputlardan bahsettik. Formlar inputları içinde tutan görünmeyen kutucuklar şeklinde düşünülebilir. Kelime anlamı olarak form zaten doldurulabilir alan anlamına gelmektedir. Bu şekilde düşündüğümüzde inputlar bilgilerin doldurulacağı alanlar olacaktır. Inputların fazlaca çeşidi bulunmaktadır. Videoda bu çeşitlerin bazılarından bahsettik. Örnek vermek gerekirse kullanıcıların kayıt olduğu sayfalar birer form olarak düşünülebilir. Kullanıcıların şifre veya kullanıcı adlarını girdikleri kutucuklar da input olarak düşünülebilir.

Bu videomuzda Liste oluşturmayı gösterdim. Listeler sembollerle veya sayılarla ifade edilebilir. Sıralı listeler sayılarla ifade edilir, düzenli liste olarak da geçer. İngilizce dilinde ordered list demektir. Bu yüzden Html dilinde ol etiketi ile sıralı liste oluşturulabilir. Sırasız listeler ise sayılar yerine sembollerle ifade edilir. İngilizce dilinde unordered liste demektir. Bu yüzden html dilinde ul etiketi ile sırasız liste oluşturulabilir.

Bu videomuzda Tablo eklemeyi gösterdim. Tablo eklenerek sayfalarınızda düzenli bir görüntü oluşturabilirsiniz. Tablolar günlük hayattaki gibi verileri daha düzgün ve düzenli şekilde tutmak için kullanılabilir. Tablo eklemek için table etiketi kullanılır. Table etiketinin içinde kullanılan td ve tr etiketlerini de gördük.

Bu videoda sayfa içi Css eklemeyi gösterdim.

Bu videoda sayfa dışı Css eklemeyi yani Css dosyası oluşturup sayfamız ile bağlamayı gösterdim.

Bu videoda html ve css ile seçtiğimiz rengi sayfamızda kullanmayı gördük.Html renk kodlarını color picker uygulaması ile seçip html sayfanızda kullanabilirsiniz. Herhangi bir yerde gördüğünüz herhangi bir rengi bu uygulama ile seçip kullanabilirsiniz.

JPicker linki : https://annystudio.com/software/colorpicker/

Bu videoda sayfamızın arka planına resim eklemeyi gördük. Sayfamızın arka planına sabit bir renk değil de bir resim eklemek istiyorsak kullanacağımız özellik background dır.Kullanımı ise ; body background=”Resmimizin yolu” Resim yolundan kastımız, ekleyeceğimiz resmin bilgisayarımızdaki yoludur.Mesela masaüstünde deneme.jpg adlı bir resmimiz varsa eklenecek kodumuz : body background=”deneme.jpg” olacaktır. Tabi eğer html dosyamız da masaüstünde ise. Masaüstünde değilse o anki konumunu, yukarıdaki adres çubuğuna tıklayarak öğrenebiliriz. Uzantımız gif veya png gibi farklı bir uzantı ise onu da belirtmeliyiz.Eğer bilgisayarımızdan değil de herhangi bir sitedeki resmi ekleyecek isek ,ekleyeceğimiz resmin sitedeki url sini yazmalıyız.Bunun için resme sağa tıklayıp resim url’sini kopyala veya resim konumunu kopyala kısmından url sini almalıyız.Aldıktan sonra deneme.jpg olan yere,url adresini yazıyoruz

Bu videoda html ve css kullanarak border (kenarlık) vermeye ve border radius özelliği ile elementlerin kenarlarını yuvarlak yapmaya değindik.Bu özellik ile tüm elementlere kenarlık ekleyebilirsiniz. CSS border özelliği bir HTML elementinin kenar / sınır çizgisinin kalınlığını, şeklini, rengini ayarlamaya yarar. Bir HTML Elementinin 4 kenarına da çizgi çekilebilir. Bu çizgiler birbirinden bağımsız, farklı özelliklere sahip olabilir.Border-style kenar çizgisinin tarzını belirtir. Bu çizgi düz, noktalı, parçalı çizgili ve daha pek çok stilde olabilir. border-style özelliği şu değerleri alabilir:

dotted - Noktalı çizgi

dashed - Kesik çizgilerden oluşan çizgi

solid - Düz çizgi

double - Çift çizgi

groove - 3 boyutlu oluklu çizgi. Bu efekt border rengine göre ortaya çıkar.

ridge - Çıkıntılı çizgi. Bu efekt border rengine göre ortaya çıkar.

inset - İçe doğru 3 boyutlu görünen çizgi. Bu efekt border rengine göre ortaya çıkar.

outset - Dışa doğru 3 boyutlu çizgi. Bu efekt border rengine göre ortaya çıkar.

none - Kenar çizgisi yok

hidden- Gizli kenar çizgisi

Padding , Element kenarı (div, p, img vb. içeriği) ile element içeriği (div, p, img vb. içeriği) arasındaki boşluktur (iç kenar boşluğu). Üst, alt, sağ ve soldan boşluk verilebilir. Aşağıdaki resimde arka planı gri, kenarlığı mavi renkte olan ve içinde anlamsız kelimeler yazan bir div var. Bu videomuzda padding özelliğini gösterdim. Padding özelliği elementlerin içinde bulunan yazıların veya içeriklerin kenarlara olan uzaklığını yani arada bulunan boşluğu düzenlemeye yarar.

Bu videomuzda box-sizing özelliğinden bahsettim.

Bu videoda sayfamızda font şeklini ayarlamayı ve dışarıdan font eklemeyi gösterdik.Font-family özelliği ile fontlarımızın şeklini düzenleyebiliyoruz. Dışarıdan font eklemek için Google Fonts kullanıyoruz. Yazı tipi, belirli bir stilde ve boyutta yazdırılabilir veya görüntülenebilir metin karakteri setidir. Yazı kümesi türü tasarımı yazı tipi ve bu tasarımın varyasyonları yazı tipi ailesi oluşturmaktadır. Bir font ailesi adı birden fazla sözcükten meydana geliyorsa, tırnak(” “) işareti içine alınmalıdır, örneğin: “Times New Roman”. Tek bir font kullanmak yerine birkaç alternatif font kullanmanız her zaman tavsiye edilir. Sitenizde özel fontları kullanmak isteyebilirsiniz. Tüm fontlar tüm bilgisayarlarda bulunmadığından (binlerce yazı tipi vardır ve çoğu ücretsiz değildir), CSS bir geri dönüşüm sistemi sunar. Tarayıcı tarafından görüntülenemeyen bir font kullanılmışsa web’in güvenilen fontlarından birini seçerek yazının sunulmasında problem çıkartmaz.

Bir HTML sayfasına ikon eklemenin en basit yolu, bir ikon kütüphanesi kullanmakdır. En popüler ikon kütüphanesi Font Awesome'dır. Font Awesome benzeri pek çok ikon kütüphanesi mevcuttur. Web sayfasına bir ikon eklemek için satır içi (span veya i gibi) bir element kullanılır. HTML sayfanızda Font Awesome ikonları kullanmak istiyorsanız öncelikle Font Awesome CSS kütüphanesine sayfanızda link vermelisiniz. Bu videoda html ve css kullanarak sayfamıza icon eklemeyi gösterdik. Icon eklemek için gerekli olan tüm linkler aşağıda bulunmaktadır.

Text-align özelliği, Metinleri sayfa içinde veya kullanıldığı element içinde hizalamak için kullanılır. Bu videoda html ve css ile text align özelliğini kullanarak elementlerin içindeki metinlerin yerleşimini sağlamayı gördük.Text align özelliğini bir çok yerde kullanarak web sayfalarımızda daha güzel tasarımlar yapabiliriz.

Bu videomuzda hem inline hem block özelliği gösteren elementlerden bahsettik. Alışkanlıklar kolay kolay bırakılmıyor. Zamanında display:inline-block özelliğini Firefox desteklemediği(Firefox desteği 3. sürümden itibaren geldi) için kullanmıyordum. Hala orada kalmışım hiç kullanmıyorum bu özelliği, şimdi bir projede gerekti ve kullandım. Çok hoşuma gitti. Tekrar bir hatırlayalım display:inline-block özelliği hibrit bir özelliktir. Bir yanı satır içi davranırken bir yanı blok davranır. display:inline-block tanımı yapılmış elemanlar satır için akış içinde satır içi eleman gibi davranırken, elemente genişlik, yükseklik ve dikey margin değerleri tanımlanırsa satır içinde blok-level özelliğine bürünür. display:inline-block elementler çevresindeki elementlere ve satır içi kutu içeriklerine göre farklı davranışlar gösterir.

Göreceği uzunluk birimleri değişkendir. Sayfa veya ekran boyutu vb. etkenlere göre değerleri değişen ölçü birimleridir. Yani 1920x1080 çözünürlüğe göre yapılmış bir ölçülendirme 1366x768 çözünürlükte açıldığı zaman yeniden ölçeklenecektir. em: Üst elementin font boyutuna göre hareket eder ve M harfinin genişliğini ölçü için referans alır. Örnek: font-size: 12px olan bir div nesnesi içerisindeki p etiketine font-size: 2em verirseniz, p etiketi 24px lik bir font boyutuna sahip olur. ex: em birimiyle aynı mantıkta çalışır. Tek farkı küçük x harfinin yüksekliğini veya 1em’in yarısını ölçü için referans alır. ch: em ölçü birimi gibidir font ailesindeki 0 sayısının genişliğini ölçü için referans alır. rem:Root em olarak düşünebilirsiniz. em birimiyle aynı mantıkta çalışır. Tek farkı rem birimi html etiketini baz alarak çalışır. Örnek: html etiketinin font-size değeri 12px olsun. h1 etiketine 2rem, h2 etiketine 1.5rem verirseniz. h1 etiketinin font-size değeri 24px olur, h2 etiketinin ise 18px olur. vw: Viewport width. Pencerenin genişliğini % olarak baz alır. Örneğin 1vw = tarayıcı penceresinin genişliğinin yüzde 1’i anlamına gelir. Aynı şekilde 50vw = tarayıcı penceresinin genişliğinin yüzde 50’si. vh: Viewport height. vw biriminde olduğu gibi buda pencerenin yüksekliğini baz alır. Örneğin 1vh = tarayıcı penceresinin yüksekliğinin yüzde 1’i. 50vh = tarayıcı penceresinin yüksekliğinin yüzde 50’sidir. vmin: Tarayıcı penceresinin o anda vw veya vh uzunluklarından en küçük olanına göre değişir. vmax: Tarayıcı penceresinin o anda vw veya vh uzunluklarından en büyük olanına göre değişir. % :Yüzde. Üst elementi baz alır. Örneğin 600px genişliğe sahip bir element içerisinde p etiketi ile yazdığınız yazıyı o elementin yarısına kadar göstermek istiyorsanız p tagına width:50% değeri verirsiniz. Veya 600px genişliğe sahip bir element içerisinde 2 tane kutu oluşturmak istiyorsanız içerisine 2 adet yeni element oluşturup bunların genişliklerine 50% verirsiniz böylelikle yan yana 2 element elde edersiniz.

CSS ile HTML öğelerinin özel durumlarını tanımlamak için sözde sınıflar kullanılır. Örneğin bir öğeye odaklanıldığında, mouse imlecini bir öğenin üstüne getirildiğinde veya bir linkin farklı durumlarına (ziyaret edilmiş veya edilmemiş gibi) stil vermek isteyebiliriz. Tüm bunlar için CSS Sözde Sınıfların kullanımı ile gerçekleştirilebilir. Bu videoda html ve css kullanarak hover özelliğinden , hover özelliğinin nasıl kullanıldığından , focus özelliğinden , focus özelliğinin nasıl kullanıldığından bahsettik. Hover ve Focus özellikleri birer sözde class olmaktadır. Sözde yani pseudo class özellikleri bir elementimiz herhangi bir şekilde tetiklendiğinde , üzerine tıklandığında veya mouse üzerine geldiğinde farklı olayları gerçekleştirmek için kullanılır.

CSS ile HTML öğelerinin özel durumlarını tanımlamak için sözde sınıflar kullanılır. Örneğin bir öğeye odaklanıldığında, mouse imlecini bir öğenin üstüne getirildiğinde veya bir linkin farklı durumlarına (ziyaret edilmiş veya edilmemiş gibi) stil vermek isteyebiliriz. Tüm bunlar için CSS Sözde Sınıfların kullanımı ile gerçekleştirilebilir. Bu videoda html ve css kullanarak hover özelliğinden , hover özelliğinin nasıl kullanıldığından , focus özelliğinden , focus özelliğinin nasıl kullanıldığından bahsettik. Hover ve Focus özellikleri birer sözde class olmaktadır. Sözde yani pseudo class özellikleri bir elementimiz herhangi bir şekilde tetiklendiğinde , üzerine tıklandığında veya mouse üzerine geldiğinde farklı olayları gerçekleştirmek için kullanılır.

Bu videoda html ve css kullanarak sayfamızda overflow özelliğini kullanmayı gösterdim. Overflow (taşma) özelliği, içerik öğesinin kutusundan taşması durumunda ne olacağını belirtir. Bu özellik, bir öğenin içeriği belirli bir alana sığmayacak kadar büyük olduğunda içeriği kırpıp kırmayacağınızı veya kaydırma çubukları ekleyip eklenmeyeceğini belirtir.

CSS konumu (position) özelliği, adından da anlaşılacağı gibi, öğenin web sayfasında nasıl konumlandırıldığını tanımlar. CSS konum (position) özelliği, komut dosyası animasyon efektlerinin kullanımını basitleştirmek için öğeler için alternatif konumlandırma kuralları seçmenize izin verir. Birkaç konumlandırma türü vardır:

Static :Varsayılan olarak HTML elemanları statik olarak konumlandırılmıştır. Statik bir konumlandırılmış eleman her zaman sayfanın normal akışına göre konumlandırılır. Top, right, bottom, left ve z-index özellikleri bu öğe için geçerli değildir.

Relative :Göreceli olarak konumlandırılmış bir öğe normal konumuna göre konumlandırılmıştır. Göreceli olarak konumlandırılan elemanlar, diğer elementler taşınır ve katmanlar(gimp, photoshop gibi resim katmanları) halinde bulunabilir, ancak element için ayrılan alan normal akışta korunur.

Absolute :Kendisini kapsayan bir üst öğeye relative konumlanmışsa öğeye göre konum almaktadır. Böyle bir eleman bulunmazsa, nesne web sayfasına göre konumlanacaktır.

Fixed: Sabitlenmiş bir eleman tarayıcı penceresine göre konumlandırılmıştır. Pencere kaydırılmış olsa bile hareket etmeyecektir.

Sticky :Yapışkan öğe göreceli ve sabit, kaydırma konumuna bağlı arasında geçiş yapar. Oluşturulan eleman kaydırma çubuğu gelene kadar position:relative gibi davranır, kaydırma çubuğu geldikten sonra position:fixed gibi davranır.

CSS ile sayfa planlamak için kullanılan yöntemlerden bir tanesidir float ve clear özelliklerinin kullanımı. Float bir elementi Normal Akışın dışına çıkarmak için kullanılan bir yöntemdir. Bir biri ardına sıralanmış elementlere float uygulandığında elementler eğer yeterli alan varsa yan yana dizilirler. Float Dinamik Göreceli Konumlandırma gibidir ve bu amaçla kullanılabilir. Clear özelliği ile float uygulanmış element’den sonraki elementlere float etkisini durdurmamız mümkündür. Örneğin iki paragrafınız olsun ve bunlardan sadece ilkini float uygulanmış elementin yanına koymak istiyorsunuz, bu durumda ikinci paragrafa clear özelliği atadığınızda bu element float uygulanmış elementin altında konumlanacaktır.

Bu videoda Html ve Css öğrenebileceğiniz 2 adet web sitesi gösterdik.Bu sitelerden html-css konusunda yardım alabilirsiniz veya html css konularını temel olarak öğrenebilirsiniz.

✅Sitelerin linkleri:

https://www.w3schools.com/

https://css-tricks.com/

Responsive web tasarım, duyarlı, uyumlu web tasarım anlamına da gelir. Son yıllarda adını sıkça duyduğumuz bu web tasarım şekli ilk olarak 2010 yılında ortaya çıktı ve son bir kaç yıldır dünyada ve ülkemizde popüler oldu. Responsive tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Genellikle desktop, tablet ve mobil versiyon olarak 3 kademeli şekilde tasarlanır. Bilindiği gibi web sitelerine mobil cihazlardan girildiğinde ziyaretçiler siteyi görüntülemekte ve gezmekte güçlük yaşarlar. Eğer girdikleri site responsive yada mobil site değilse, okumak istedikleri alanı ancak zoom yaparak, kısıtlı bir alanı görüntüleyebilirler ve kulanım zorluğu çekerler. Site menülerini gezmekte oldukça zordur ve menüler mobil uyumlu olmadığı için genellikle gitmek istedikleri linki bulamayabilirler. Responsive sitelere mobil cihazlardan girildiğinde menüler şekil değiştirip genellikle üstten açılacak şekilde kullanımı kolay bir versiyona dönüşür. Fontlar ve imajlar alt alta gelerek ekranda zoom yapmadan kolayca okunacak şekilde sıralanır. Hatta mobil versiyonda önem derecesi düşük elementler gizlenir, sadece ziyaretçiye sayfayla ilgili en yalın halde bilgi gösterilir. Arama motorlarında responsive siteleri ciddi şekilde destekliyor. Bir sayfanın arama motorlarında hem kendi alan adı hem de m.alanadi.com gibi farklı subdomain altında bir mobil versiyonunun olmasındansa tek url ile sayfanın responsive yapılması daha uygun buluyor. Çünkü mobilden yapılan aramalarda genellikle arama motorları sayfanın mobil uyumluluğuna dikkat etmeksizin sonuçları sıralıyor. Mobilden web site ziyaretleri dünyada %25 seviyelerine yükseldi ve kısa sürede daha da artacak. Bu sebeple responsive özellikli web sitelerinde ciddi bir artış öngörülüyor. Bu videoda Responsive tasarımdan ve viewport meta etiketinden bahsettik.Web sitenizde responsive tasarımlar oluşturmak için yapılması gereken tüm adımlara ve media query oluşturmaya da değindik.

Flex özellikle karmaşık projelerde web geliştiricilerinin işini kolaylaştıran, web sitesindeki elamanları yatayda ve dikeyde hizalamaya yarayan ve günümüzde oldukça popüler olan CSS layoutlarından biridir.

Neden Flexbox? Flex ile esnek bir yapı kurarak tasarladığınız siteyi responsive yapmanız çok daha kolaydır. Dikeyde ortalama flex yapısıyla çok kolaydır. Elemanların genişliğini ve yüksekliğini kolayca boyutlandırabilirsiniz. Günümüzde tüm güncel tarayıcılar tarafından desteklenmektedir.

Bu videomuzda Flexbox kullanımından ve Flexbox ile neler yapılabileceğinden bahsettik.Display özelliğinin flex durumunu ve Flexbox ile yerleşimin nasıl kolayca sağlanabileceğinden bahsettik.