HTML
HTML Renkler (RGB, HEX, HSL, RGBA, HSLA)
HTML’de oluşturduğum tagleri ve elementleri renklendirmemiz mümkündür. Bunu style niteliği içerisinde yapabilceğimiz gibi bazı özel niteliklerde bize yardımcı olmaktadır. HTML bir çok renk formatını desteklemektedir. Bunlar; RGB HEX HSL RGBA HSLA Ayrıca HTML’in kendine ait bazı renkleri bulunmaktadır. Bunlar; Renklerin kullanımı için temel yapıları renklendirmeye başlayalım; Örnek: <p style="color:tomato;"> Benim adım Çağrı Güngör yeni şeyler öğrenmeyi ve bildiklerimi başkalarıyla paylaşmayı çok seviyorum. </p> Önizleme: Benim adım Çağrı Güngör yeni şeyler öğrenmeyi ve bildiklerimi başkalarıyla paylaşmayı çok seviyorum. Başka bir özellik olan arkaplan için de bir örnek yapalım. Örnek: <p style="color:white;background-color:tomato;"> Benim adım Çağrı Güngör yen...
HTML Yorum Satırı
HTML’de yazdığımız kodları tekrar açmamız gerektiğinde veya bizim yazdığımız kodları başka birinin açması gerektiğinde kodlar karışık gelebilir. Düzenli yazıldığında bile belli başlı notlar yazılan kodların daha hızlı ve güvenli bir şekilde düzenlenmesini kolaylaştırır. Bu sebepten dolayı sayfanın tasarımında görünmeyen yorum satırları ekleyebiliriz. Yorum satırları ancak kodlar bir editörde açıldığı zaman görünecektir. Yorum satırlarının kullanımı şu şekildedir. < !– ………………. –> Örnek: <!-- Bu satırı sadece kod yazarken görebilirim -- > Kod satırları ile html sayfaların bölümleride ayrılabilmektedir. Örnek: <!-- Burada Menü Başlıyor -- > <nav> ..... .... .... ... </nav> <!-- Burada Menü Bitiyor...
HTML Adres Ekleme
HTML’de adres eklemek için özel bir etiket bulunmaktadır. Bu etiket içerisine yazdığımız adres web sitesi kullanıcılarının dışında yazılımlar tarafından da adres olarak algılanmaktadır. Arama motoru dostu (SEF) web sayfaları için bu etiket oldukça önemlidir. Adres etiketinin kullanımı şu şekildedir. < address > ……… < /address > Örnek: <address> Çağrı Güngör<br> Adres:<br> cagrigungor.com<br> Bostancı<br> İstanbul </address> Önizleme: Çağrı Güngör Adres: cagrigungor.com Bostancı İstanbul
HTML ile Kısaltmalar < abbr >
HTML kodları ile kısaltmalar kullanabiliriz. Bu kısaltmaların açılışlarınıda arkaplanda gösterebiliriz. Kısaltmalar için kullandığımız html etiketleri ; < abbr > …….. < /abbr > Kısaltmalar içerisine ek nitelik olarak title ile kısaltmanın açılımını ekleyebiliriz. Örnek: <p>Türkiye'nin en iyi üniversitelerinden biri olan <abbr title="Ortadoğu Teknik Üniversitesi">ODTÜ</abbr> 1956 yılında Ankara'da Kurulmuştur.</p> Önizleme: Türkiye’nin en iyi üniversitelerinden biri olan ODTÜ 1956 yılında Ankara’da Kurulmuştur.
HTML Alıntı (Quote ve Blockquote)
HTML’de alıntılar için hazırlanmış bir tag bulunmaktadır. Quote için kullandığımız tag < q >………… < /q > etiketleridir. Örnek: <h3>Mustafa Kemal Atatürk</h3> <q>Ne Mutlu Türküm Diyene</q> Önizleme: Mustafa Kemal Atatürk Ne Mutlu Türküm Diyene < blockquote > ile Başka Bir Kaynaktan Alıntı Yapabiliriz Başka bir kaynak üzerinden alıntı yapacağımız zaman blockquote etiketini kullanabiliriz. Örnek: <blockquote cite="http://www.toged.org"> Türkiye Oyun Geliştiricileri Derneği’nin (TOGED) desteği ve dernek üyelerinden TaleWorlds Entertainment’ın ana sponsorluğunda bu yıl dördüncüsü düzenlen Hacettepe Üniversitesi Programlama Yarışması (HUPROG) 6 Nisan tarihinde üniversitenin Beytepe Kampüsü’nde gerçekleştirilecek. </b...
HTML Metin Biçimlendirme Kodları
HTML de metinleri birden fazla metot ile oluşturabiliyorduk. Bunlardan en sık kullanılanlardan biri < p > ile paragraf olarak oluşturmaktı. Oluşturduğumuz metinler düzenli bir halde görünse bile üzerinde daha fazla biçimlendirmeye ihtiyacımız olabilir. Bunlar için özelleştirilmiş html etiketleri bulunmaktadır. Başlıcaları şöyledir; < strong > : Önemli Metinler < b > : Bold Metinler < i > : İtalik Metinler. < em > : Vurgulu metin < mark > : İşaretlenmiş Metin < small > : Küçük metin < del > : Üzeri çizilmiş Metin < sub > : alt indis içeren Metin < sup > : üst indis içeren Metin Yukarıda öğrendiğimiz yapıların tamamını bir örnek üzerinde inceleyelim. <p>Merhaba benim adım <strong>Çağrı Güngör</strong> ben eski bir...
HTML İçerisine CSS Yazma ( Stiller )
HTML ‘de ek tagler içerisine ek nitelikler yazabilceğimizi öğrenmiştik hatırlamayanlar için HTML Ek Nitelikler En sık kullanılan ek niteliklerden biri “style” niteliğidir. Style niteliği ile htmk etiketlerimizi renk , büyüklük , pozisyon gibi onlarca farklı şekilde stillendirebiliriz. Style niteliği de diğer nitelikler gibi açılış tag içerisine eklenmektedir.Örnek:<h1 style=””>Kendimi Seviyorum</h1>Style niteliğini girdikten sonra öğreneceğimiz bir çok biçilendirme tipini kullanabiliriz. Öncelikle renk değiştirmek ile başlayabiliriz.Bunun için “color” yapısını kullanıyoruz. daha sonra iki nokta ve değerden sonra noktalı virgül kullanmalıyız. style = “ color : red ; “ style = “ font-size : 24px ; “ Ö...
HTML Ek Nitelikler (Attributes)
HTML tagleri içerisine aldıkları yapılara kendi özelliklerini verirler. Bu yüzden html taglerine genellikle açılış ve kapanış tagleri bulunmaktadır. Açılış Tagi İçerik Kapanış Tagi < h1 > HTML Eğitimi < / h1> < center > Kodlama Eğitim Serisi < / center > Yukarıda “HTML Eğitimi” kelimesi başlık halini alırken “Kodlama Eğitim Serisi” bulunduğu satırı yatay düzlemde ortaladı. HTML’deki tagler nitelik verirler ancak zaman zaman daha da özelleştirilmeleri gerekir. Bu gibi durumlarda ek niteliklere sahip olurlar. Bunlardan en sık kullanılanlar src ve href gibi yapılardır. Bunun diğer bir ismi orjinal hali olan attributes < a > yapısı bağlantılar için kullandığımız taglerden oluşmaktadır. < a > Buraya Tıklayın < /a> ş...
HTML Nasıl Yazılır ? Editörler
HTML kodlarının yazılacağı platform açısından oldukça geniş bir yelpazeye sahiptir. HTML kodları not defteri , notepad gibi uygulamalar ile bile kolay bir şekilde yazılmaktadır. HTML kodları da bir çok kod sisteminde olduğu gibi kendine ait bir uzantıya sahiptir. Önemli olan bu uzantı ile kaydedilmesidir. Buna rağmen kodları yazmak için genellikle belli başlı yazılımlar kullanırız. Bu yazılımları kullanmamızın belli sebepleri vardır. Başlıca sebepler şöyledir; Kod yazarken yazdığım dosyaların düzenini sağlamak önemlidir. Zaman zaman yüzlerce sayfa kod yazarız ve bunları iyi arşivlememiz gerekir. Bir çok editör yazdığımız hatalı kodlar için bize uyarılar verir bu uyarılar işimizi kolaylaştırır ve hatalarımızı engeller Editörlerin çoğunda otomatik tamamlama özelliği vardır. Otomatik t...
HTML Giriş
HTML dünya’nın en çok kullanılan betik dillerinden biridir. Açılımı Hyper Text Markup Language HTML arayüz tasarımları için vazgeçilmez bir dildir. HTML’in en son versiyonu olan HTML5 dijital sektörde büyük bir etki yarattı ve web sitelerinin dışında bir çok alanda kullanılabilir oldu. Sadece HTML dili bilerek dinamik olmayan web siteleri tasarlamak mümkünken PHP , ASP , Python gibi bir çok dil ile de birlikte kullanılabilir bir yapıya sahiptir. HTML’in Temel Kodları Aşağıdaki Gibidir. <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
HTML < strong > ile Önemli Kalın Yazı Oluşturma
HTML’de paragraf içerisinde sık kullandığımız yapılardan biri < strong > tagidir. Bu tag bir yazının kalın görünmesini yani bold olmasını sağlamaktadır. Kullanımı ise < strong > ve < /strong > tagleri arasına yapılmaktadır. Strongun bir diğer özelliği ise içerisindeki kelimeyi sementik olarak önemli haline getirmesidir. Önemli bir kelime olduğunu arama motorlarına ve diğer yazılımlara iletebilir. Örnek: <strong> Burası Önemli </strong> Önizleme: Burası Önemli Strong taglerini paragraf başta olmak üzere bir çok yapı içerisinde de kullanabiliriz. Kullanıldığında sadece arasında olan kelimeyi önemli yani kalın yapacaktır. Örnek: <p> HTML ile web sitesi tasarımlarında <strong>UX ve UI </strong> kavramları çok önemlidir. </p> Önizleme:...
HTML’DE < h > ile Başlık Oluşturma h1,h2,h3,h4,h5,h6
HTML’de metinlerimiz içinde başlıklarımızı font’un boyunu ve görünüşü değiştirek değilde belirli başlık tagleri ile yaparız. Bu hem yazı içerisinde bir bütünlük sağlarken diğer yazılımlarında metinlerimizi analiz etmesi konusunda büyük fayda sağlamaktadır. HTML’de Önem sıralamalarına göre 6 farklı başlık tipi bulunmaktadır .HTML Başlıklarda < Hx > yapısını Kullanırız. Bunlar; < h1 > < h2 > < h3 > < h4 > < h5 > < h6 > Bunlar’dan en önemlisi ve manşet olarak söyleyebilceğimiz başlık h1 başlığıdır ve default olarak en büyük görünende odur. < h1 > Başlığının kod yapısını örneklendirirsek; Örnek: <h1> Kendimi Seviyorum </h1> Heading başlıkların SEO yani arama motoru optimizasyonu açısından önemi büyüktür. Her s...
