HTML ve CSS için başlangıç kılavuzu

Web sitesi oluşturmak isteyenler, HTML ile er ya da geç karşılaşır. Bu yüzden önümüzdeki video eğitimlerinde birlikte güzel HTML dünyasını keşfedeceğiz. Adım adım göreceksiniz, bu dilin ne olduğunu ve nasıl stilde kombinasyonu ile web siteleri oluşturabileceğinizi. Ancak başlangıçta bir soru var: Aslında HTML ve stil tabakları ile ne oluyor? Bu video eğitiminin sonunda, web siteleri oluşturmak ve test etmek için hangi yazılıma ihtiyacınız olduğunu da öğreneceksiniz.

Java gibi programlama dillerinin aksine, HTML'de daha fazla eğitim gerektirmeden çok hızlı bir şekilde ilk sonuçlara ulaşabilirsiniz. Başlangıç için gereken tek şey, bir düzenleyici ve bir tarayıcıdır. Bu video eğitimde, ilk HTML belgenizi oluşturacak ve hemen tarayıcıda çıktı alacaksınız. Ve bu arada HTML belgelerinin, yani web sayfalarının nasıl yapılandırıldığını veya hangi temel yapıya uyulduğunu öğreneceksiniz.

Öğrelediniz gibi, Element, Etiket ve Öznitelik kavramları arasındaki ilişkiyi ilk bölümde öğrendiniz. Şimdi bu şeylerin HTML belgelerinde nasıl kullanılabileceğine odaklanacağız. Bu video eğitiminin sonunda, HTML kodunuzu sözdizimsel doğruluk açısından nasıl kontrol edebileceğinizi öğreneceksiniz.

Web siteleriniz sadece resimlerden değil, aynı zamanda metinlerden de oluşacak. Ve metinler, sadece iyi okunabilirlik açısından bile, mantıklı bir şekilde yapılandırılmalıdır. Bunun için HTML birçok öğe sunar. Bu video eğitiminde metinler için en önemli yapılandırma öğeleri tanıtılacaktır. Ayrıca HTML'nin kendi karakterlerinin nasıl maskelenebileceği ve program listelerinin nasıl çıkarılabileceği hakkında bilgi edineceksiniz.

Metinlerin iyi okunabilirliği için mantıklı bir biçimlendirme gereklidir. Ve bu, başlık ve metin paragrafları gibi sadece yapılandırma öğelerinin ötesine geçer. Örneğin HTML'de alıntıları belirleyebilir ve belirli bölümleri kalın veya italik olarak gösterebilirsiniz. Gerekli ekipmanı sağlayan bu video eğitimdir.

HTML'de her zaman karşılaşacağınız öğelerden biri listelerdir. Bu sadece yapılacaklar listeleri, iletişim bilgileri değil, aynı zamanda menü tanımları için de geçerlidir. Listeler HTML'de çok önemli bir rol oynarlar. Bu yüzden onlara detaylı bir şekilde bakmak önemlidir. Bu video eğitiminde HTML'nin sunduğu tüm liste türlerini öğreneceksiniz. Bunlar, sıralı listeler, numaralı listeler, tanımlayıcı listeler ve menü listeleridir. Ayrıca listenin gerektiğinde nasıl görsel olarak özelleştirileceği konusunda ipuçları da alacaksınız.

Tablolar web sitelerinde hala önemli bir rol oynamaktadır. Ancak bu sadece verilerin sunumuna ilişkin geçerli olmaktadır. CSS yokken veya tarayıcılar tarafından henüz tam olarak desteklenmediği dönemlerde, tablolar ayrıca çok farklı bir amaca hizmet etmekteydi: Düzenleri uygulamak için kullanıldı. Tablo hücreleri içine tekil sayfa ögeleri yerleştirildi. Bunun sonucunda oluşan düzen tabloları canavarları CSS sayesinde neyse ki artık geçmişte kaldı. Günümüzde web tasarımında tablolar yalnızca gerçekte amaçlandıkları için kullanılmaktadır: verilerin düzenli bir şekilde sunulması için.

Uyumlu görünen tablolar zorunlu olarak aynı sayıda hücre içermek zorunda değildir. Bu video eğitiminde, tablo hücrelerini nasıl birbirine bağlayabileceğinizi öğreneceksiniz. İkinci bölümde, tabloların nasıl başlıklandırılacağını öğreneceksiniz. Bu yön önemlidir çünkü bu şekilde ziyaretçilere sonuçta hangi verilerin olduğunu hemen gösterebilirsiniz. Video eğitimi, HTML'de tabloların tasarımına detaylı bir bakışla tamamlanmaktadır. Çünkü önceki HTML sürümlerine kıyasla bu alanda çok şey değişmiştir.

Neredeyse hiçbir web sitesi grafikler olmadan gelmiyor. Bu yüzden grafikler konusu bu seride de önemli bir yere sahip. Bu ve sonraki video eğitimlerinde, web sitelerinize grafikleri nasıl entegre edebileceğinizi gösterilecek. Ancak başlangıçta başka bir yön ön planda: Hangi resim formatları aslında çevrimiçi kullanım için uygundur? İkinci bölümde ise resim yollarının nasıl referanslanabileceğiyle ilgili olacak.

Resimlerin temelde nasıl referans alınabileceğine önceki bölümde gösterilmişti. Ancak resimlere ilişkin son nokta henüz ulaşılmamıştır. Aslında resimler ilgili özellikler aracılığıyla daha ayrıntılı olarak tanımlanabilir. Bu videonun başlangıcında bu konuya değinilecektir. İkinci bölümde ise HTML5 sözdizimi aracılığıyla resim açıklamalarının nasıl uygulanabileceği açıklanmaktadır.

İnternetin çorbasındaki tuz, içerikleri birbirine bağlama olanağı sağlayan hyperlink'lerdir. Bu hyperlink'ler olmasaydı, günümüzdeki İnternet şekli düşünülemezdi. HTML'nin hyperlink tanımlamalarında size sunduğu seçenekleri bu ve bir sonraki video eğitiminde öğreneceksiniz.

HTML, hiperbağlantılarla ilgili olarak, önceki video eğitiminde gösterilenlerden çok daha fazla olanak sunar. Örneğin, e-posta bağlantılarını tanımlayabilir ve indirme için dosyalar sunabilirsiniz. Bu ve diğer bağlantı türlerini bu video eğitiminde öğreneceksiniz.

Önceden belirlemek gerekirse: Özellikle HTML5'te form alanları büyük bir gelişme kaydetti. Birçok yeni alan tipi sayesinde çok ilginç formlar oluşturulabilir. Bu yeni imkanları tabii ki öğreneceksiniz. Ancak bu video eğitimine giriş yapmadan önce, formları tanımlamak için gereken teçhizatı öğreneceksiniz. İlk olarak tek satırlı giriş alanlarının oluşturulmasıyla başlayacak. Bunların nasıl tanımlanacağını, nasıl önceden değerlerle doldurulacağını ve yazılmasına izin verilmeyeceğini göreceksiniz. Aynı şekilde şifre alanlarının tanımını da öğreneceksiniz. Sonuçta, bazen ihtiyaç duyulan bir alan türüdür.

Bu videoda, formalarınızı donatabileceğiniz diğer alan türlerini öğreneceksiniz. Daha spesifik olarak, seçim alanları, radyo düğmeleri ve onay kutuları hakkında bilgi edineceksiniz. Tüm bunlar, formlarda sürekli olarak ihtiyaç duyulan önemli öğelerdir. Bu nedenle, bu ve diğer öğeler üzerinde daha yakından bir göz atmaya değer.

HTML5 ile form alanında da önemli gelişmeler yaşandı, Özellikle formlarla ilgili birçok yenilik dikkat çekiyor. Artık kullanılabilir hale gelen pek çok yeni form özelliğine detaylı bir şekilde bakmak için yeterli sebep var. Artık sadece basit metin giriş alanlarının olmadığı bir döneme geldik. Nihayet kaydırma çubukları, tarih alanları vb. tanımlanabiliyor - ve tüm bunlar JavaScript kullanmadan mümkün hale geldi.

HTML5 formları dünyasına girişi önceki video eğitimi kolaylaştırdı. Ancak işler henüz bitmiş değil. Aslında HTML5 bu konuda daha fazlasını sunuyor.

HTML5'de tanıtılan alan türlerinin yanı sıra birçok diğer ilginç yön de bulunmaktadır. Şimdi örneğin Google'ın örneğinden yola çıkarak form alanları için otomatik tamamlama işlevini çok az çaba harcayarak gerçekleştirebilirsiniz. Bu ve diğer konular bu video eğitiminde gösterilmektedir.

HTML5 ile ilgilenenlerin Semantik konusundan kaçınmamaları gerekir. Bu ve önümüzdeki video eğitimlerinde, HTML5'in getirdiği en önemli öğeleri öğreneceksiniz ve belgelerinizi mantıklı bir şekilde yapılandırabilmeniz için kullanabileceğiniz. Aslında, bu mantıklı yapılandırma gelecek için web sitelerinizi güvence altına almak istiyorsanız kaçınılmazdır.

HTML5, birçok yeni yapılandırma öğesi getiriyor. Temelde hangi öğeler olduğu zaten önceki video eğitiminde gösterilmişti. Şimdi bu öğelerin nasıl kullanılacağına odaklanacağız. Çünkü bu öğeler, belgelerin anlamsal yapılandırılmasını sağlar. Bu video eğitiminde ilk olarak article ve section elementlerini öğreneceksiniz. Bu elementler, HTML belgelerinin temel yapısını oluşturur. Bu videonun sonunda div, article ve section arasındaki farklara tekrar göz atılacaktır.

HTML5'de belgeler sadece makalelere ve bölümlere ayrılmazlar. Aslında, başlık, altyazı vb. gibi birçok ek eleman semantik yapılandırma için mevcuttur. Bunların kesinlikle daha detaylı incelenmeye değer olduğu söylenebilir.

Bu semantik element serisinin son video eğitiminde daha fazla yapılandırma elemanı öğreneceksiniz. Aslında HTML5, navigasyon alanları, kenar notları ve özetler için de elemanlar sunmaktadır.

Eski HTML sürümlerinde medya içeriklerini entegre etmek bir kabus haline gelmişti. Videoları ve sesleri web sitesine getirmeye çalışmak için object ve embed elementlerinin kombinasyonu kullanılmıştı. Entegre edilen video gerçekten oynatılıp oynatılamayacağı belirsizdi. HTML5'te bu alanda da oldukça fazla gelişme kaydedildi.

Videoları nasıl gömebileceğinizi gördünüz. Şimdi videolar tabii ki ziyaretçilere web sitesinde sunabileceğiniz tek şey değil. Bu video eğitiminde, HTML5'in ses dosyalarını ve Flash filmlerini gömmek konusunda size neler sunduğu açıklanmaktadır. Çünkü çoğu zaman bu tür şeyleri de sayfanızda göstermek zorunda kalabilirsiniz.

HTML5'de artık çerçeveler yok. Ancak adını taşıyan iFrame'ler yeni HTML çağında da var ve HTML5'te de mevcut. Geleneksel çerçeveler bir sayfayı bağımsız bölgelere ayırırken, iFrame'ler aracılığıyla web sayfalarına istenilen kaynaklar entegre edilebilir.

HTML, içeriklerin yapılandırılması için kullanılır. Sayfa tasarımına geçildiğinde ise Kademeli Stil Şablonları (CSS) devreye girer. Çünkü CSS ve HTML kombinasyonu, sıkıcı bir HTML yapısından çekici web siteleri oluşturmaya olanak tanır. Bu nedenle CSS'ye daha yakından bir göz atmak yeterli bir sebeptir.

CSS ile ilgili sık sık karşılaşacağınız bir kavram, "seçiciler"dir. Bu seçiciler aracılığıyla, CSS ile biçimlendirilmesi gereken ögeler sonunda belirlenir. Bu video eğitiminde ilk seçicileri tanıyacaksınız. Tanıtılan seçiciler arasında öğe, kimlik ve evrensel seçiciler yer alır. Web sitelerinizi CSS ile tasarlarken günlük olarak karşılaşacaksınız.

Bazı seçiciler önceki video eğitiminde tanıtıldı. Tabii ki CSS'in sunduğu birçok başka seçici daha var.

Bu son Seçici Video Eğitiminde size özel Selektörlerin özel bir formunu tanıtıyorum. Bunlar, çoğu HTML öğesine değil, çıktı cihazı tarafından üretilen sözde yalancı sınıflar ve yalancı ögelerdir.

Bu ve gelecek video eğitimlerinde sizlere en önemli CSS özelliklerini tanıtacağım. Bu noktada asıl amaç CSS referansını sunmak değil. Daha çok CSS ile nelerin mümkün olduğunu anlamanız gerekmektedir. Bu noktada yazı stili ile başlayacağız. Bu video eğitiminde, fontlarla doğrudan ilgili olan tüm konuları tanıtacağım. Yazı stili ile ilgili başka özelliklerin de olduğunu unutmayın, bu özellikler önümüzdeki video eğitiminde gösterilecektir.

Bu video eğitimde tanıtılan CSS özellikleri aracılığıyla metinler ve karakterler görsel olarak uyarlanabilir. Örneğin, harfler arasındaki boşluklar değiştirilebilir ve metinler hizalanabilir. Bu özellikler de size metinleri çekici bir şekilde sunmada yardımcı olur.

Tabii ki CSS'de renk tanımlamaları ve grafik arka planları da olmazsa olmazdır. İlgili özellikler bu video eğitiminde sunulmaktadır. Çünkü CSS aslında bu alanda birçok olanak sunmaktadır. Sadece renkler ve resimler belirlemekle kalmaz, aynı zamanda tekrar eden arka plan grafikleri de mümkündür.

Web sitelerinin düzenlenmesi söz konusu olduğunda, dış kenar boşlukları ve aralıkların tanımıyla karşılaşacaksınız. Bu serinin son video eğitimlerinde kapsamlı bir örnek proje uygulanacak ve bu ve diğer CSS özelliklerinin nasıl kullanıldığı da pratik bir şekilde gösterilecektir.

CSS, metin paragrafları ve blokları için bazı ilginç özellikler sunar, bunları sizden saklamak istemem. Örneğin metin paragraflarını sola ve sağa hizalayabilirsiniz.

Dil çerçeveye geldiğinde, çoğu insan muhtemelen öncelikle tabloları düşünür. Ve gerçekten de çerçeveler, tablolarla ilişkilendirildiğinde önemli bir rol oynarlar. Fakat CSS ile çerçeveler başka elementlere de uygulanabilir. Ve bu çerçevelerin sonunda nasıl göründüğü de CSS tanımları aracılığıyla belirlenebilir.

Liste tanımlamanın nasıl yapıldığını muhtemelen uzun zamandır biliyorsunuzdur. Bu nihayetinde bu seri kapsamında detaylı bir şekilde gösterildi. Ancak aslında listeler fabrikasyon olarak şık değil. Optik olarak çekici görünmeleri için uygun CSS özellikleri bulunmaktadır. Bunlar nelerdir ve nasıl kullanılacaklarına bu video eğitiminde öğreneceksiniz. İkinci bölümde ise, karmaşık numaralandırmaların da gerçekleştirilebileceği counter'lardan bahsedilecektir.

Web sitelerinin düzenlenmesi söz konusu olduğunda, söz konusu kutu modeli sürekli yanınızda olacaktır. Çünkü bu şekilde sonuçta, öğelerin nasıl ve nerede yerleştirileceğini belirlenir.

Web sitesindeki öğeleri istenilen konumlara yerleştirebilmek için belirli CSS özelliklerine başvurmanız gerekir.

Önceki video eğitiminde, söz konusu olan Floating prensibi kısaca ele alındı. Konu o kadar karmaşık ki, burada Float konusu detaylı bir şekilde incelenecektir. Çünkü bu, CSS'teki önemli bir kavramdır. Bu konuyu anladığınızda, aslında web siteleri oluşturabilirsiniz.

Bugüne kadar verilen video eğitimlerinde HTML ve CSS ile çalışmanın temelleri anlatılmıştır. Şimdi tabii ki ilk meyveler de toplanmalıdır. Bundan dolayı, bir sonraki video eğitimlerinde adım adım bir örnek web sitesi oluşturulacaktır. Ancak bu video eğitiminde öncelikle farklı düzen seçeneklerini öğreneceksiniz. Çünkü uygun düzen şeklinin seçimi, bir web sitesinin tasarımı için yapacağınız düşüncelerin her zaman başında gelmelidir.

Pratik projemizde tipik sütun düzeninden hareket ediyorum. Ancak bu projeyi canlı ve renkli bir şekilde sunmadan önce, size nasıl sütun düzenleri oluşturabileceğinizi tam olarak göstermek istiyorum. Odak noktasında iki ve üç sütunlu düzenler olacak, çünkü hala çoğu web sitesinin temelini oluşturuyorlar.

Aşağıdaki video eğitimlerinde adım adım bir web sitesi düzeninin nasıl oluşturulabileceğini size göstereceğim. Bunun için farklı yaklaşımlar bulunmaktadır. Genellikle düzenlemeler Photoshop'ta yapılır. Sonrasında, sayfadaki bireysel elemanlar kesilir ve CSS ve HTML aracılığıyla tekrar bir web sitesi olarak bir araya getirilirler. Aynı şekilde burada da aynı işlem uygulanır. Ancak ben Photoshop yerine ücretsiz olarak kullanılabilir olan GIMP'i tercih ediyorum. Anlatılan adımlar Photoshop'ta da uygulanabilirler.

Kendi düzenine doğru ilk adımlar önceki video eğitiminde atıldı. Tabii ki hala birçok element eksik. Bunlar bu video eğitiminde eklenir. Daha sonra düzen hazır olduğunda, kesme işlemine, yani dilimleme işlemine geçilir. Çünkü bu sonuçta, oluşturulan tasarımın HTML ve CSS ile pratik olarak hayata geçirilmesini mümkün kılan adımdır.

Düzenlemeyi siz oluşturdunuz. Şimdi onun pratik uygulamasına geçiyoruz. Bu video eğitimde birlikte web sitesinin HTML temel iskeletini oluşturacağız.

Sayfanın temel yapısı hazır ancak henüz oldukça sade bir görünüme sahip. Bu video eğitiminde sayfanın içeriği genişletilecek. Odak noktası başlangıçta üst sayfa alanında bulunan menüdür. Bunun ardından sağ ve alt menü gelir.

Göz alıcı bir web sitesi için önemli bir faktör tabii ki yazı karakteridir. Bu serinin ilerleyen bölümlerinde HTML ve CSS'nin yazı düzenleme konusundaki size sunduğu imkanları öğrendiniz. Bu video eğitiminde, sayfanın görünümünü iyileştirmek için bunları kullanacağız. Bu arada, sadece klasik varyantlara odaklanmayacağız. "Egzotik" yazı tiplerinin kullanımı için sihirli kelime @font-face'dir.

Genellikle ziyaretçilere iletişim kurma imkanı sunmak önemlidir. En basit durumda, bir telefon numarası ve/veya e-posta adresi not alınabilir. Bu şekilde yapılabilir, ancak ziyaretçiler için çok konforlu değildir. Bu yüzden bu video eğitimde, ziyaretçilerin bizimle kolayca iletişime geçebileceği bir form oluşturacağız. Ve elbette, HTML5 ve CSS3'ün bize sunduğu imkanlardan faydalanacağız.

Formun temel yapısı ve temel düzenlemesi tanımlanmış ve tamamlanmıştır. Ve gerçekten, form şu anda oldukça çekici görünüyor. Ancak CSS3 sayesinde, formun görsel olarak daha ilgi çekici hale getirilmesi mümkün. Bu video eğitimde, form biraz daha düzenlenecek.

Mevcut zamanda web sitenizin geliştirilmesine kesinlikle çok zaman ve emek harcadınız. Konseptten başlayarak düzenin tasarımı ve HTML ve CSS'ye uygulamasına kadar. Dolayısıyla nihayet web sitenizi dünyaya tanıtmak için yeterli neden var demektir. İşte bu Video Eğitiminde tam da bu konu ele alınacak. Size web sitesini nasıl yayınlayacağınızı göstereceğim. İlk olarak doğru sağlayıcıyı ve uygun web alanı paketini nasıl edineceğinizi öğreneceksiniz. Sonra veriler, haklı olarak popüler olan FileZilla ile sunucuya yüklenecek. Ve sonra, evet web sitesi gerçekten çevrimiçi olacak.

Bu video eğitiminde, web siteleri oluşturmak için doğru geliştirme ortamına küçük bir bakış sunmak istiyorum. Zaten tamamlanmış web siteleri veya küçük tekil sayfalar yazmış olanlar genellikle bu editörlere sahiptir ve bu videoyu atlayabilirler.

Gösterilecek olanlar:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5-Şablonu, HTML5 ve CSS3 web siteleri için güçlü bir şablondur; HTML5'i mümkün olduğunca CrossBrowser uyumlu hale getirir ve JavaScript, CSS3 ve tabii ki HTML alanında bazı çok iyi kod şablonları içerir.

Bu video eğitiminde size bu özellikleri tanıtmak istiyorum. Şu anda HTML5 ve CSS3 alanında daha iyi bir şablon bulunmamaktadır.

Bu video eğitiminde, HTML5 ve CSS3 geliştirebileceğiniz çok faydalı araçları tanıtmak istiyorum.

Bunlar arasında:
html5css3box.com
kuler.adobe.com (şimdi https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com