HTML
HTML ve CSS ile Tablo Yapımı
<!DOCTYPE html> <html> <head> <title></title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"> <style type="text/css"> .arabatablo { border-collapse: collapse; font-family: 'PT Sans', sans-serif; width:100%; } .arabatablo td, .arabatablo th { border: 1px solid lavenderblush; padding: 8px 12px; } .arabatablo th { text-align: left; background-color:tomato; color:white; } .arabatablo tr:hover{ background-color: lavenderblush; } .arabatablo tr:nth-child(even){ background-color:floralwhite; } </style> </head> <body> <table class="arabatablo"> <tr> <th>Otomobil Markası</th> <th>Menşei</th> &l...
HTML Bağlantıları Yeni Sekmede Açma
Web sayfamızda herhangi bir bağlantıya tıklayan kişinin gideceği sekmeyi farklı sekmede açarak web sitemizden uzaklaşmamasını sağlamak için link içerisine target="_blank" attribiton ını eklemem yeterlidir. <a href="https://www.cagrigungor.com" target="_blank">Çağrı Güngör</a>
HTML 5 Eğitimi 2020
HTML Nedir ? HTML bir işaretleme dilidir ve front end tasarımın en önemli unsuru hatta iskeletini oluşturmaktadır. HTML 5 temelde elementlerden oluşmaktadır. HTML içerisinde bir çok element bulunmakta olup ihtiyaçlarımıza göre bu elementleri sayfamıza yerleştiririz. Daha sonra ise oluşturduğumuz bu elementleri css gibi yapılarla stillendirebiliriz. HTML 5 Nedir ? HTML 5 html kodlarının son versiyonu olup bir çok yenilik getirilmiştir. HTML 5 ile web sayfalarının hızları ve performansları oldukça etiklenmiştir. Ayrıca web sayfalarının uyumlulukları artmış mobil yapılara sunulan destek artmıştır. Ancak html5 ile html arasındaki farklar çok azdır. HTML 5 ile yeni özellikle gelse bile eski yapılar kullanımdan kaldırılmamıştır. HTML 5 Nasıl Yazılır ? HTML 5 b...
HTML5 Section Nedir ?
HTML 5 ile beraber gelen özelleşmiş div yapılarından biri olan <section > sayfamızın asıl içeriğinde bölümleri oluşturmak için kullanılmaktadır. Ne demek istedim ? Sayfa içerisinde o sayfa’nın asıl konusu olmayan bölümler vardır. Örnek: nav , aside , header , footer gibi bunlar her sayfada olur ve ux açısından oldukça değerlidir. Ancak o sayfanın içeriği < section > içerisinde olur bu amaçlada kullanılır. Örnek Kullanım <section> <article> <h1>Hasan Çağrı Güngör ile HTML5</h1> <p>Hasan Çağrı Güngör ile Keyifli Bir şekilde HTML5 ve Web Tasarım Öğrenin </p> </article> </section> Yine sayfa içeriğinin önemli elemanlarından biri olan < article > yapısıda genellikle < section > içerisinde kullanılır
CSS Arkaplan Görseli Ekleme
Css le html elementleriniz arkasına görseller ekleyebilir. Eklediğiniz görselleri manipüle edebilirsiniz. Bunun için seçeceğiniz elementin arkaplan görseli kullanmaya uygun olması gerekmektedir. Kısaca background-image: url("resim adresi"); HTML <div class="cagri"> <h1>Hasan Çağrı Güngör></h1> </div> CSS .cagri { background-image: url("https://image.freepik.com/free-vector/futuristic-digital-cyber-technology-background_115579-430.jpg"); /* Kullanılacak Görsel */ background-color: tomato; /* Görsel Çalışmassa Arkaplan Rengi */ background-position: center; /* Görseli Ortala */ background-repeat: no-repeat; /* Resmi tekrarlama */ background-size: cover; /* resmi ekranı kaplayacak hale getir. */ }
30 dk’ da HTML Eğitimi
HTML’i hızlı ama detaylı bir şekilde anlatmaya çalıştım tabiki anlatırken CSS kullanmadık. Bu eğitim kısa ve belli başlı yapıları öğrenmek isteyenler için hazırlanmış ancak aynı zamanda ufak da olsa bir şeyler ortaya koymak için güzel bir eğitim niteliğindedir.
HTML Türkçe Karakter Sorunu
HTML ile yaptığımız bir tasarımı google Chrome ile açarken herhangi bir problem yaşamamıza rağmen diğer tarayıcılar veya localhost server gibi yerlerde açtığımızda bir Türkçe karakter problemi ile karşı karşıya kalırız. Bunun çözümü <head>. </head> arasına yazabileceğimiz kısa bir utf-8 tanımlama kodudur. <meta charset="utf-8"> Örnek <head> <meta charset="utf-8"> <title>Süper Lig'in yıldızı Beşiktaş'a</title> </head>
< h1 > Etiketi Örnekleri
Arama motoru optimizasyonu ( Seo) açısından kritik öneme sahip olduğu ve bir çok puanlama aracının ilk baktığı özelliklerden biri olan h1 etiketi için kapsamlı bir örnek hazırladım. Bu yazıda hem dijital pazarlama hem de teknik açıdan h1 başlığını inceleyeceğiz. H1 Etiketi Nasıl Oluşturulur ? Sayfanın en önemli içeriği olan h1 < h1 > ve < / h1 > etiketleri arasına yazılan kelimeler ile oluşturulur. Örnek: <h1> Çağrı Güngör ile Seo Eğitimi </h1> H1 etiketi sayfanın en üst kısmında bulunmalıdır. Bu teknik olarak bir zorunluluk değildir.Ancak h1 yapısının mantığına bakarsak kullanıcıyı ilk karşılayacak başlık olarak görünmelidir. H1 Nereye Eklenir ? Çok sorulan sorulardan biri olan h1’in konumu kesinlikle < body > ve </body > eti...
HTML Buton Ekleme ve Düzenleme , Link Verme , Renk Verme
Web sayfalarında butonları sık kullanırız. Butonlar “Call to Action” yapıların olmazsa olmazları arasındadır. Buttonlar < button > yapıları ile oluştururuz. Örnekle açıklamak daha kolay olacaktır. Örnek: <button> Hemen Al <button> Önizleme: Hemen Al HTML Butonları Biçimlendirme HTML’de style etiketi ile veya css üzerinden butonlara renk , font , boyut , border gibi özellikler verebiliriz. Modern tarzda butonları kolay bir şekilde oluşturabiliriz. Örnek: <button style="background-color:tomato;color:white;width:100%;"> Hemen Al <button> Önizleme: Hemen Al HTML’de Butonlara link Verme Butonların amacı tıklandığında bir işlem gerçekleştirmesidir. Bu işlemlerden en sık olanı başka bir url e yönlendirmesidir. Bu amaçla < a hr...
HTML Tablo Birleştirme
HTML’de tablolar eskisi kadar önemli olmasa da tablo amaçlı olarak kullanırız. Ancak layout olarak kullandığımız zamanlarda tablo birleştirme oldukça önemli rol oynamaktaydı. Şimdi ise email tasarımlarında layout olarak kullanmak zorunda olduğumuz için bu alanda proje yapacak arkadaşlar için tablo birleştirme hakkında bir kaç detay yazıyorum. Tablo hücrelerini birleştirirken yatay elemanlar için colspan dikey elemanlar için rowspan kullanıyoruz. HTML COLSPAN Kullanımı HTML hücreleri yatay olarak genişletmek istediğimiz zaman colspan kullanırız. colspan ek niteliği içerisine kaç hücrelik birleştirme yapmak istediğimizi yazarız. Tablo Normal Görünüm <table> <tbody > <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <t...
HTML ‘de Alt Satıra İnme Satır Atlama
HTML’de metinler içerisinde alt satıra inme işlemi için < br > yapısını kullanmamız gerekiyor. Ancak metinler dışında bu yapıyı çok nadiren kullanırız. Genel şablonumuzda bir çok hatayla karşılaşmamak için diğer elementlerde daha çok block yapıları ve margin padding yapılarını kullanmalıyız. Örnek <html> <p> Dün Gece Sevgilim Aradı Birden, <br> Ayrılalım Dedi Hayır Yok Senden.</p> <html> Önizleme Dün Gece Sevgilim Aradı Birden, Ayrılalım Dedi Hayır Yok Senden.
HTML’de < br > ve < br / > Arasındaki Fark Nedir ?
Html’de bir alt satıra geçmek için < br > yapısını kullanırız. Konuyla alakasız olacak ama hatırlatmama gerek var bu kodu en verimli şekilde metinler içerisinde alt satır yaparken kullanırız. Diğer elementleri alt satıra indirmek için genellikle inline ve block yapılarını kullanırız. Konumuza dönersek teknik olarak bu ikisi arasında bir fark yoktur istediğinizi kullanabilirsiniz. Ancak genellikle HTML ‘de < br > xHTML ‘de < br / > Yapısı tercih edilir.
