• Hizmetler
    • Growth Hacking Danışmanlığı
    • SEO Danışmanlığı
    • Sosyal Medya Danışmanlığı
    • Dijital Pazarlama Danışmanlığı
    • Google Ads Danışmanlığı
    • İçerik Pazarlaması Danışmanlığı
    • Kurumsal Web Sitesi Tasarımı
    • E-Ticaret Sitesi Tasarımı
    • Mentörlük
  • Blog
    • Tümü
    • Adwords
    • Analytics
    • Dijital Pazarlama
    • Growth Hacking
    • İş Dünyası
    • Marka Yönetimi
    • Pazarlama
    • Reklam
    • SEO
    • Sosyal Medya Pazarlaması
    • Teknoloji
    • Web Site Tasarımı
    • Yeni Medya
    Scrum Metodolojisi Nedir? Scrum Proje Yönetimi

    Scrum Metodolojisi Nedir? Scrum Proje Yönetimi

    Fiyat Konumlandırma Stratejisi Nasıl Yapılır?

    Fiyat Konumlandırma Stratejisi Nasıl Yapılır?

    E-Ticaret’te Fraud Tespiti ve Önleme Yöntemleri

    E-Ticaret’te Fraud Tespiti ve Önleme Yöntemleri

    İyi İletişim Formu Nasıl Tasarlanır?

    İyi İletişim Formu Nasıl Tasarlanır?

    DesignOps Nedir? Tasarım Akışınızı Nasıl Değiştirebilir?

    DesignOps Nedir? Tasarım Akışınızı Nasıl Değiştirebilir?

    Web Site Tasarımı için Kullanılabilecek 10 Front-End Framework

    Web Site Tasarımı için Kullanılabilecek 10 Front-End Framework

    Kapsayıcı Tasarım (Inclusive Design) Nedir?

    Kapsayıcı Tasarım (Inclusive Design) Nedir?

    HTML ile HTML5 Arasındaki Farklar Nelerdir?

    HTML ile HTML5 Arasındaki Farklar Nelerdir?

    İçerik Yönetim Sistemi (CMS) Nedir?

    İçerik Yönetim Sistemi (CMS) Nedir?

    Trending Tags

      • Adwords
      • Analytics
      • Dijital Pazarlama
      • Growth Hacking
      • İş Dünyası
      • Marka Yönetimi
      • Pazarlama
      • Reklam
      • SEO
      • Sosyal Medya Pazarlaması
      • Teknoloji
      • Web Site Tasarımı
      • Yeni Medya
    • Eğitim
      • Growth Hacking Eğitimi
      • Dijital Pazarlama Eğitimi
      • SEO Eğitimi
      • Google Ads Eğitimi
      • Sosyal Medya Eğitimi
      • Sosyal Medya Reklamcılığı Eğitimi
      • E-Ticaret Eğitimi
      • Analytics ve Tag Manager Eğitimi
      • Yeni Medya Eğitimi
    • Hakkımda
      • Ben Kimim?
      • Basın
      • Referanslar
    • İletişim
      • Mesaj Gönder
      • Konuşmacı Daveti
    Sonuç yok
    Tüm Sonucu Görüntüle
    Teklif Al
    Haydar Özkömürcü
    • Hizmetler
      • Growth Hacking Danışmanlığı
      • SEO Danışmanlığı
      • Sosyal Medya Danışmanlığı
      • Dijital Pazarlama Danışmanlığı
      • Google Ads Danışmanlığı
      • İçerik Pazarlaması Danışmanlığı
      • Kurumsal Web Sitesi Tasarımı
      • E-Ticaret Sitesi Tasarımı
      • Mentörlük
    • Blog
      • Tümü
      • Adwords
      • Analytics
      • Dijital Pazarlama
      • Growth Hacking
      • İş Dünyası
      • Marka Yönetimi
      • Pazarlama
      • Reklam
      • SEO
      • Sosyal Medya Pazarlaması
      • Teknoloji
      • Web Site Tasarımı
      • Yeni Medya
      Scrum Metodolojisi Nedir? Scrum Proje Yönetimi

      Scrum Metodolojisi Nedir? Scrum Proje Yönetimi

      Fiyat Konumlandırma Stratejisi Nasıl Yapılır?

      Fiyat Konumlandırma Stratejisi Nasıl Yapılır?

      E-Ticaret’te Fraud Tespiti ve Önleme Yöntemleri

      E-Ticaret’te Fraud Tespiti ve Önleme Yöntemleri

      İyi İletişim Formu Nasıl Tasarlanır?

      İyi İletişim Formu Nasıl Tasarlanır?

      DesignOps Nedir? Tasarım Akışınızı Nasıl Değiştirebilir?

      DesignOps Nedir? Tasarım Akışınızı Nasıl Değiştirebilir?

      Web Site Tasarımı için Kullanılabilecek 10 Front-End Framework

      Web Site Tasarımı için Kullanılabilecek 10 Front-End Framework

      Kapsayıcı Tasarım (Inclusive Design) Nedir?

      Kapsayıcı Tasarım (Inclusive Design) Nedir?

      HTML ile HTML5 Arasındaki Farklar Nelerdir?

      HTML ile HTML5 Arasındaki Farklar Nelerdir?

      İçerik Yönetim Sistemi (CMS) Nedir?

      İçerik Yönetim Sistemi (CMS) Nedir?

      Trending Tags

        • Adwords
        • Analytics
        • Dijital Pazarlama
        • Growth Hacking
        • İş Dünyası
        • Marka Yönetimi
        • Pazarlama
        • Reklam
        • SEO
        • Sosyal Medya Pazarlaması
        • Teknoloji
        • Web Site Tasarımı
        • Yeni Medya
      • Eğitim
        • Growth Hacking Eğitimi
        • Dijital Pazarlama Eğitimi
        • SEO Eğitimi
        • Google Ads Eğitimi
        • Sosyal Medya Eğitimi
        • Sosyal Medya Reklamcılığı Eğitimi
        • E-Ticaret Eğitimi
        • Analytics ve Tag Manager Eğitimi
        • Yeni Medya Eğitimi
      • Hakkımda
        • Ben Kimim?
        • Basın
        • Referanslar
      • İletişim
        • Mesaj Gönder
        • Konuşmacı Daveti
      Teklif Al
      Haydar Özkömürcü
      Teklif Al
      Anasayfa Blog Web Site Tasarımı

      HTML ile HTML5 Arasındaki Farklar Nelerdir?

      Haydar Özkömürcü Yazan Haydar Özkömürcü
      02 Haziran 2022
      Web Site Tasarımı
      Okuma zamanı: 16 dakika
      HTML ile HTML5 Arasındaki Farklar Nelerdir?
      Facebook'ta PaylaşTwitter'da PaylaşLinkedin'de PaylaşTelegram'da PaylaşWhatsApp'ta Paylaş

      Bir web sayfasının arkasında birçok dil, araç ve teknoloji vardır. Ancak hepsinde ortak olan tek şey Hyper Text Markup Language’dır. HTML, web sitesi tasarımı da dahil tüm web sitelerinin temel yapısını sağlar. HTML5 ise bu günlerde kullanılan en son sürümdür.

      HTML Nedir?

      • HTML Nedir?
      • HTML Ne İçin Kullanılır?
      • HTML5 Nedir?
      • HTML ile HTML5 Arasındaki Farklar
      • HTML Etiketleri Nelerdir?
      • HTML Öznitelikleri Nelerdir?
      • En Yaygın Kullanılan HTML Kodları
        • Kapsayıcı Tasarım (Inclusive Design) Nedir?
        • İçerik Yönetim Sistemi (CMS) Nedir?
      • HTML’in Artıları ve Eksileri
      • HTML5’in Artıları ve Eksileri
      • HTML5 Nasıl Öğrenilir?
      • HTML5 ile PHP İlişkisi
      • HTML5 Dosyası Nasıl Oluşturulur?
        • Adım #1 <!DOCTYPE> elementini ekleyin
        • Adım #2 <html> elementini ekleyin
        • Adım #3 Dil özelliği ekleyin
        • Adım #4 Bölümleri (section) ekleyin
        • Adım #5 Head bölümüne <title> elementini ekleyin
        • Adım #6 CSS dosyalarını ekleyin
        • Adım #7 Body alanına HTML öğelerini ekleyin

      Hyper Text Markup Language, World Wide Web’in (WWW) birincil dilidir. Geliştiriciler bunu metin, köprüler ve multimedya dosyaları gibi web sayfası öğelerini tasarlamak için kullanır. Bu dil, metin yapılarını tanımlamak için başlıklar, tablolar ve paragraflar dahil olmak üzere çeşitli etiketler kullanarak çalışır. Her etiket, <A> ve </A> formülü kullanılarak tanımlanır. Bunlara sırasıyla ‘açma’ ve ‘kapatma’ etiketi denir. Örneğin metin stilini italik olarak değiştirmek için <i>metninizi buraya yazın</i> kullanabiliriz. Tarayıcı, içeriği bu etiketler aracılığıyla işleyecek ve ardından ekranda görüntüler.

      Ancak bu dilin yalnızca statik olarak çalıştığını, dolayısıyla bunu kullanarak dinamik veya etkileşimli bir web sayfası özelliği oluşturulamayacağını unutmamalısınız. Yalnızca içerik üstbilgisi, altbilgi ve görüntü konumu gibi bir web sayfasının statik öğelerini değiştirir.

      HTML Ne İçin Kullanılır?

      Hyper Text Markup Language, web sitelerinin ve web tabanlı belgelerin varsayılan dilidir. Bu dil, bir tarayıcının internet üzerinden görüntülemek için belgelerin yapısını ve stilini anlamasını sağlar. Aynı zamanda bu dil, web sayfalarınızın ses, video ve tablo gibi uygulamaları barındırmasına olanak tanır. Ayrıca hiper metin aracılığıyla web sayfaları içinde veya web siteleri arasında gezinmeyi kolaylaştırır.

      Bunun yanı sıra web sitesi oluşturucuları, ürün sipariş etmek, rezervasyon yapmak veya bilgi aramak için formlar tasarlamak için bu dili kullanabilir. Bu nedenle bu dil, markanızı oluşturmak ve bir e-ticaret sitesi veya çevrimiçi abonelik tabanlı bir işletme yürütmek için temel yapı taşıdır.

      HTML5 Nedir?

      HTML5, HTML’nin en yeni sürümüdür. Terim iki şeyi ifade eder. İlki, yeni öğeler ve nitelikler içeren güncellenmiş HTML dilinin kendisidir. İkincisi, yeni bir video formatı gibi HTML’nin bu yeni sürümüyle çalışan ve daha karmaşık ve güçlü web siteleri ve uygulamalar oluşturmanıza olanak tanıyan daha geniş teknolojiler grubudur.

      Bu yeni sürüm, tüm web siteleri tarafından okunabilen bir dil olarak bilinir. Web sitesinin işlevsel ilkesi bu biçimlendirme diline dayanmaktadır. Bu nedenle bu biçimlendirme dili yeni nesil web sitelerinde yaygın olarak kullanılmaktadır. Günümüzde kullanılan birçok arama motoru, bu biçimlendirme dilini filtreleyerek sayfa hakkında ayrıntılı bilgi sağlar. Bu sürüm sayesinde makaleler, sayfalar ve hatta görseller SEO uyumlu olabilir. Kullanıcılar, web sayfasını oluştururken koda girdikleri anahtar kelimeler sayesinde web sayfalarının okunabilirliğini ve indekslenme hızını artırır. Bu nedenle HTML5 biçimlendirme dili o kadar önemlidir ki dinamik web sayfaları oluşturmak için yaygın olarak kullanılır.

      HTML ile HTML5 Arasındaki Farklar

      Bu iki dil arasında birçok açıdan fark vardır. Kısaca bu farklar şu şekildedir:

      HTMLHTML5
      Yerel ses ve video desteği sağlamaz.Yerel ses ve video desteği sağlar.
      Yalnızca Flash, VML veya Silverlight gibi farklı teknolojilerle birlikte kullanıldığında vektör grafiklerini destekler.SVG (Ölçeklenebilir Vektör Grafikleri) ve diğer sanal vektör grafiklerini destekler.
      Kısıtlı kullanımla metin içinde satır içi mathml ve SVG’ye izin verir.Metin içinde satır içi mathml ve SVG’ye izin verir.
      Kullanıcıların daire, üçgen ve dikdörtgen gibi şekiller çizmesine izin vermez.Kullanıcıların daire, üçgen ve dikdörtgen gibi şekiller çizmesine olanak tanır.
      Verileri geçici olarak depolamak için yalnızca tarayıcı önbelleğini ve çerezleri kullanır.Verileri geçici olarak depolamak için web sql veritabanlarını, yerel depolamayı ve uygulama önbelleğini kullanır.
      Javascript ve tarayıcı arayüzü aynı iş parçacığında çalışır.Javascript ve tarayıcı arayüzü ayrı başlıklarda çalışır.
      Daha uzun karakter kodlama bildirimi.Daha kısa karakter kodlama bildirimi.
      ASCII karakter setini kullanır.UTF-8 karakter setini kullanır.
      Hemen hemen tüm tarayıcılarla uyumludur.Bazı tarayıcıların desteklediği birçok yeni etiket ve öğe olduğu düşünüldüğünde, yalnızca daha yeni tarayıcılarla uyumludur.
      Standart Genelleştirilmiş İşaretleme Dili (SGML) temel alınarak oluşturulmuştur.Gelişmiş uyumluluk sağlayan gelişmiş ayrıştırma kurallarına sahiptir.

      HTML Etiketleri Nelerdir?

      HTML etiketleri, web tarayıcısının içeriği nasıl görüntüleyeceğini tanımlar. Bunların yardımıyla bir web tarayıcısı bir HTML içeriği ile basit bir içerik arasındaki farkı anlar. HTML kodları üç ana bölümden oluşur: açılış etiketi, içerik ve kapanış etiketi. Ancak bazı HTML kodları kapatılmamış etiketlerdir.

      Bir web tarayıcısı, bir belge okuduğunda, tarayıcı onu yukarıdan aşağıya ve soldan sağa okur. Bu etiketler, belgeleri oluşturmak ve özelliklerini oluşturmak için kullanılır. Her etiketin farklı özellikleri bulunur. Bir Hyper Text Markup Language dosyası, web tarayıcısının basit bir metin ile Hyper Text Markup Language metni arasında ayrım yapabilmesi için bazı temel etiketlere sahip olmalıdır.

      Bu etiketler genellikle küçük harflerle görünür, bir başlangıç etiketi, bitiş etiketi ve ortada bir miktar içerik bulunur. Ancak içeriği veya bitiş etiketi olmayan <br> gibi öğeler vardır. Bunlara boş elemanlar denir. Kısaca bu etiketler aşağıdaki gibidir:

      • Paragraph (<p>): Paragraph etiketi bir paragrafı temsil eder. Metnin etrafına <p></p> etiketleri yerleştirerek, o metnin yeni bir satırda başlamasını sağlayabilirsiniz.
      • Image (<img>): Image etiketi, belgeye bir görüntü gömer. Düzgün bir şekilde işlemek için bir src (kaynak) özniteliği gerektirir. Görselin düzgün yüklenmemesi veya okuyucunun görme bozukluğu olması durumunda alt özelliği de eklenmelidir.
      • Headings (<h1>-<h6>): Headings etiketi, bölüm başlıklarının farklı düzeylerini temsil eder. <h1> en yüksek bölüm düzeyidir ve en belirgindir. Buna karşılık <h6> en düşük ve dolayısıyla en az belirgin olan başlık türüdür.
      • Division (<div>): Division etiketi, ‘akış içeriği’ için genel bir blok düzeyinde kapsayıcıdır. Akış içeriği, metin veya gömülü içerik içeren öğeler kategorisidir. Bağlantı, blok alıntı ve başlık öğeleri akış içeriği olarak kabul edilir. Arka uçta, div öğeleri, kodu açıkça işaretlenmiş bölümler halinde düzenlemeye yardımcı olur. Ön uçta, içeriklerinden önce ve sonra satır sonları eklerler. Aksi takdirde CSS ile stillendirilmedikçe sayfanın içeriğini veya düzenini etkilemezler.
      • Span (<span>): Span etiketi ‘ifade içeriği’ için genel bir satır içi kapsayıcıdır. Ancak iki nedenden dolayı ifade içeriğini gruplamak için kullanılırlar. Birincisi, belirli bir metin parçasına stil bilgisi uygulamaktır. Örneğin büyük ilk harf oluşturuyorsanız her birinin açılış paragraflarının ilk harfini kaydırabilirsiniz. Span etiketlerini kullanmanın ikinci nedeni, öznitelik değerlerini zaten paylaşan öğeleri gruplamaktır. Örneğin Fransızca öğrenen İngilizce konuşanlar için bir web siteniz olabilir. Varsayılan dil İngilizce’ye ayarlanmıştır, ancak birkaç sayfada, ilk sütunda Fransızca terimler ve ikinci sütunda İngilizce çevirileri olan bir tablonuz olabilir. Bu durumda Fransızca terimleri, dil özniteliği ‘fr’ olarak ayarlanmış olarak span etiketleri içine yerleştirebilirsiniz.
      • Anchor (<a>): Anchor etiketi bir köprü oluşturur. Bu etiket, bağlantının hedefini belirleyen bir href niteliği gerektirir. Hedef, aynı web sayfasındaki başka bir bölüm veya aynı sitedeki başka bir web sayfası veya harici web siteleri, dosyalar ve e-posta adresleri olabilir.
      • Unordered List (<ul>): Sıra önemli olmadığında öğeleri gruplamak için unordered list etiketi kullanılır. Örneğin alışveriş listelerinin belirli bir sırayı takip etmesi gerekmez. Bu etiket, <li> etiketiyle tanımlanmalı ve ardından <ul> öğesi ile bitirilmelidir.
      • Ordered List (<ol>): Sıra önemli olduğunda öğeleri gruplamak için ordered list etiketi kullanılır. Örneğin tarifler belirli bir sıra izlemelidir. Adımlar, <li> etiketiyle tanımlanmalı ve ardından <ol> öğesi ile bitirilmelidir. Sıralı bir liste varsayılan olarak 1 numaradan başlar. Başka bir numaradan başlamak istiyorsanız sadece bir başlangıç özelliği eklemeli ve değeri istediğiniz sayıya ayarlamalısınız.
      • Emphasis (<em>): Emphasis etiketi, içerdiği metni vurgular. Tarayıcılar genellikle metni italik olarak işler.
      • Strong (<strong>): Strong etiketi, içerdiği metnin çok önemli olduğunu belirtir. Tarayıcılar genellikle metni kalın olarak işler.
      • Unarticulated Annotation (<u>): Unarticulated annotation etiketi, metni bir tür metinsel olmayan açıklama biçimine sahip olarak işaretler. Örneğin yazım hatalarına açıklama eklemek için bu öğeyi kullanabilirsiniz. Metnin altını, metinsel olmayan bir ek açıklamayı temsil etmekten başka bir amaçla vurgulamak istiyorsanız başka bir Hyper Text Markup Language öğesi veya CSS özelliği kullanabilirsiniz. Örneğin dekorasyon için metnin altını çizmek isterseniz CSS metin süsleme özelliğini kullanır ve bunun yerine ‘altı çizili’ olarak ayarlarsınız.
      • Table (<table>): Table etiketi, içeriğin bir bakışta okunması kolay bir şekilde düzenlenmesi için bir tablo oluşturur.
      • Horizontal Rule (<hr>): Horizontal rule etiketi, bir web sayfası boyunca yatay bir çizgi tanımlar. Bir oyundaki bir sonraki sahne, bir makalenin yeni bir bölümü veya bir makalenin sonucu gibi herhangi bir tematik değişikliği işaretlemek için kullanılabilir.
      • Line Break (<br>): Line break etiketi, yerleştirildiği yerde bir satır sonu oluşturur. Bu, metnin geçerli satırda bitmesini ve bir sonraki satırda devam etmesini istediğiniz yere ekleyebileceğiniz anlamına gelir. Bu öğe, şiirleri, şarkı sözlerini veya satır bölünmesinin önemli olduğu diğer içerik biçimlerini görüntülemek için kullanılabilir.

      HTML Öznitelikleri Nelerdir?

      Öznitelikler, etiketleri farklı şekillerde değiştirir. Öğenin görünümünü değiştirebilir, öğelerin CSS tarafından hedeflenebilmesi için benzersiz tanımlayıcılar uygulayabilir veya okuyuculara veya ekran okuyuculara gerekli bilgileri sağlayabilirler. Öznitelikler genellikle küçük harflerle ve değerleri tırnak içinde olacak şekilde ad/değer çiftleri olarak görünür.

      • Style Özniteliği: Style özniteliği satır içi CSS içerir. Bu CSS, belgenin baş bölümünde veya harici bir stil sayfasında ayarlanan tüm stilleri geçersiz kılar. Yalnızca açılış etiketinde style özniteliğine sahip öğeye uygulanacaktır.
      • ID Özniteliği: ID özniteliği, bir dosyadaki tek bir öğeyi tanımlamak için kullanılır. Bu, bir ID özniteliğinin değerinin aynı dosya içinde tekrarlanmaması gerektiği anlamına gelir. Bu benzersiz değeri kullanarak, iç veya dış CSS ile tek bir öğeyi hedefleyebilirsiniz.
      • Class Özniteliği: Class özniteliği, aynı ad altında bir grup öğeyi tanımlamak ve bu grubu özelleştirmek, etkin bir şekilde yeni bir öğe grubu oluşturmak için kullanılır.
      • Language Özniteliği: Language özniteliği, ekran okuyucularına web sayfasının ana dilinin ne olduğunu ve ne zaman başka bir dile geçmeleri gerektiğini bildirir. Bu, hangi bölgeden veya hangi dilden olursa olsun içeriğinizi tüm okuyucular için daha erişilebilir hale getirebilecek küçük bir ayrıntıdır. Bu öznitelik en yaygın olarak öğeye gömülü olsa da paragraf, div ve diğer etiketlerle de kullanılabilir.
      • Href Özniteliği: Bir href özniteliği, bir bağlantının hedefini içerir. Bu öznitelik her zaman bir bağlantı elemanına dahil edilmelidir.
      • Source Özniteliği: Bir bağlantı öğesinin bir href özniteliğine ihtiyacı olduğu gibi bir görüntünün de bir source özniteliğine ihtiyacı vardır. Bu, resim dosyasının veya URL’sinin yolunu içerir.
      • Alt Özniteliği: Alt özniteliği, etiket hakkında açıklayıcı bilgiler sağlar. Bu, görme bozukluğu olan okuyucular ve öğenin yüklenmemesi durumunda tüm okuyucular için önemlidir. Bu durumda okuyucular, öğenin iletmek istediği şeyi yine de anlayabileceklerdir. Source özniteliği gibi genellikle alt özniteliği de görüntü öğesiyle birlikte bulunur.
      • Data-* Özniteliği: Data-* özniteliği, sayfaya veya uygulamaya özel özel verileri depolamak için kullanılır. Kullanıcı için daha dinamik bir deneyim oluşturmak için belgenin JavaScript’inde saklanan bu verileri kullanabilirsiniz. Data-* özelliğindeki yıldız işareti herhangi bir değer olabilir.

      En Yaygın Kullanılan HTML Kodları

      En çok kullanılan HTML kodları, tüm etiketlerin neredeyse %25’ini temsil eder. Bu kodlar aşağıdaki gibidir:

      • <a> bağlantı için
      • <b> kalın metin yapmak için
      • <strong> vurgulu kalın metin için
      • <body> ana bölüm
      • <br> ara için
      • <div> bir belgenin bir bölümü veya parçası için
      • <h1> başlıklar için
      • <i> italik bir metin yapmak için
      • <img> belgedeki görseller için
      • <ol> sıralı bir liste için
      • <ul> sırasız bir liste için
      • <li> madde işaretli bir liste için
      • <p> paragraf için
      • <span> metnin bir kısmını biçimlendirmek için

      Her ne kadar yukarıdaki etiketler sıklıkla kullanılsa da HTML5 ile yeni etiketler de gelmiştir. Bu yeni sürüm ile gelen yeni etiketler, arama motoru botlarının web sitelerinde daha verimli gezinmesine yardımcı olmak ve arama motorları daha popüler hale geldikçe tarayıcıların web sitelerine erişmesini daha kolay hale getirmek için tasarlanmıştır. Bu etiketler aşağıdaki gibidir:

      <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>

      Öne Çıkan Makaleler

      DesignOps Nedir? Tasarım Akışınızı Nasıl Değiştirebilir?

      DesignOps Nedir? Tasarım Akışınızı Nasıl Değiştirebilir?

      12 Haziran 2022
      Web Site Tasarımı için Kullanılabilecek 10 Front-End Framework

      Web Site Tasarımı için Kullanılabilecek 10 Front-End Framework

      09 Haziran 2022

      HTML’in Artıları ve Eksileri

      Bu dilin artıları şu şekildedir:

      • Web sayfaları geliştirme için kullanımı kolaydır.
      • Zahmetsizce bir web belgesi oluşturulabilir.
      • Web sayfaları içinde ve farklı sunucularda bulunan web siteleri arasında gezinmenize yardımcı olur.
      • Responsive olan görüntüleri kullanmak için sorgular ayarlayabilirsiniz.
      • Kullanıcı, oturumlar arasında kalıcı olan tarayıcı verilerini kaydedemez.
      • Veriler tarayıcıda depolandıktan sonra geliştirici, uygulamanın çalışması için daha fazla düşünebilir.

      Bu dilin eksileri ise şunlardır:

      • Dinamik sayfalar oluşturmaya yardımcı olmaz. Yalnızca düz sayfalar oluşturabilir.
      • Basit bir web sayfası yapmak için uzun bir kod yazmanız gerekebilir.
      • Güvenlik özellikleri iyi değildir.
      • Bir web sayfasına benzeyen herhangi bir şeyi geliştirmek bile zaman alır.
      • Dreamweaver gibi diğer web sayfası geliştirme yazılımları gibi esnek değildir.
      • Merkezi bir yaklaşım izlemez. Bu yüzden web sayfalarını ayrı ayrı düzenlemeniz gerekir.

      HTML5’in Artıları ve Eksileri

      Bu sürümün artıları şu şekildedir:

      • Dosya sistemi, istemci tarafı depolama, olay işleme ve daha fazlasıyla ilgili çok sayıda yeni API gibi yeteneklere sahiptir.
      • Yeni bir etkileşimli web sitesi oluşturmak kolaydır.
      • Pragmatik bir yaklaşım benimsediği için sorunları zahmetsizce çözebilirsiniz.
      • Basitleştirilmiş Doctype ve karakter setine sahiptir.
      • <details>, <dialog>, <mark> gibi öğeler sunar.
      • <input> etiketi için yeni bir öznitelikle web formlarını geliştirmiştir.
      • Herhangi bir üçüncü taraf eklentiye başvurmadan elde etmek için kalıcı yerel depolama sağlar.
      • Yeni nesil bir iletişim teknolojisi olan WebSocket’e sahiptir.
      • Sunucu Tarafından Gönderilen Olaylar (SSE) olarak adlandırılan olayları tanıtır.
      • Basitleştirilmiş işaretlemeye sahiptir.
      • JavaScript ile programlayabileceğiniz iki boyutlu çizim yüzeyi desteği sunar.
      • Kendi kelime dağarcığınızı oluşturmanıza olanak tanır.
      • Kendi özel semantiğinizi oluşturabilirsiniz.
      • Öğeleri aynı web sayfasında bir yerden başka bir yere sürükleyip bırakabilirsiniz.
      • Çok sayıda videoyu destekler.
      • Görünürlük, medya yakalama, tam ekran vb. gibi API’lerle gelişmiş web uygulaması deneyimine sahiptir.

      Bu sürümün eksileri ise şunlardır:

      • Erişmek için modern tarayıcılar gerektirir.
      • Medya lisansıyla ilgili sorunları vardır.
      • Bu dil hala devam eden bir çalışmadır.
      • Bu dilde kullanılabilen iyi IDE’ler yoktur.

      HTML5 Nasıl Öğrenilir?

      HTML5 yaygın olarak kullanılan bir dildir. Bu açıdan dünya çapında önemli bir konuma sahiptir ve öğrenmesi kolay biçimlendirme dillerinden biridir. Günümüzde birçok kurs, öğrenmek isteyen herkesi desteklemek için HTML5 eğitimi sunmaktadır. İnternet üzerinden video kurslar sunarak HTML öğreten belirli kanallar vardır. Kısa sürede öğrenmek zordur. Bu yüzden düzenli olarak çalışmanız gerekir.

      HTML5 ile PHP İlişkisi

      PHP, JavaScript ve Python gibi betik dillerinin bir alt kümesidir. Ancak bunların arasındaki fark, PHP’nin öncelikle sunucu tarafı iletişimi için kullanılmasıdır. Öte yandan JavaScript hem ön uçta hem de arka uçta kullanılabilir ve Python yalnızca sunucu tarafında kullanılabilir.

      728 728 300 x 300

      HTML5, tarayıcınızda çalışan ön uçtur. Bu bir programlama dili değil, tarayıcınıza gönderilen verilerin nasıl görüntüleneceğini söyleyen bir biçimlendirme dilidir. PHP ise sunucu ile etkileşim için kullanılan bir sunucu tarafı programlama dilidir. Bu ikisinin tamamen farklı kullanımları vardır. Tek yapmak istediğiniz kullanıcının verdiğine göre bir hesaplama veya işlem yapmaksa HTML sizin için yeterlidir. Ancak bir dosyaya, bir veritabanına veya ana makineyle ilgili herhangi bir şeye erişmek istiyorsanız PHP’yi de kullanmanız gerekir. Ancak PHP kullanıyorsanız xampp veya apache gibi bir web sunucusuna ihtiyacınız olacaktır.

      HTML5 Dosyası Nasıl Oluşturulur?

      HTML5 ile bir web sitesi oluşturmak için önce bir dosya oluşturmanız gerekir. Bu dosya, web sayfanız için tüm HTML5’i içerecek ve web sunucunuza yüklenecektir. Bu şekilde bir ziyaretçi web sitenizi aradığında, sunucu dosyasını ziyaretçinin tarayıcısına gönderir ve tarayıcı sayfayı buna göre oluşturur. Aşağıda bir dosya oluşturabilmeniz için uygulamanız gereken adımlar bulunur:

      Adım #1 <!DOCTYPE> elementini ekleyin

      İlk olarak belgenin türünü HTML5 olarak tanımlayın. Bunu yapmak için ilk satıra <!DOCTYPE html> özel kodunu eklemelisiniz. Bu sürüm, önceki HTML standartlarının yalnızca bir evrimi olduğundan bu bildirime ‘5’ eklemeye gerek yoktur.

      Adım #2 <html> elementini ekleyin

      Ardından kök öğeyi tanımlayın. Bu öğe hangi dilde yazacağınızı işaret ettiğinden bir belgede her zaman <html> olacaktır.

      Adım #3 Dil özelliği ekleyin

      Bir dil özelliği ekleyin ve bunu HTML öğesinin açılış etiketinde tanımlayın. Bir dil özniteliği olmadan ekran okuyucular varsayılan olarak işletim sisteminin dilini kullanır ve bu da sayfadaki başlığın ve diğer içeriğin yanlış telaffuz edilmesine neden olabilir. Özelliğin belirtilmesi, ekran okuyucuların belgenin hangi dilde olduğunu belirlemesini ve web sitenizi daha erişilebilir hale getirmesini sağlar. Bu gönderi Türkçe yazıldığı için dosyanın lang niteliği ‘tr’ olarak ayarlanır.

      Adım #4 Bölümleri (section) ekleyin

      Bir belge iki bölümden oluşur: baş bölümü ve gövde bölümü. Baş bölümü, sayfanın yanı sıra herhangi bir dahili CSS ile ilgili meta bilgileri içerir. Tarayıcı bu bilgiyi okuyuculara göstermez. Gövde bölümü, paragraflarınız, resimleriniz ve bağlantılarınız gibi ön uçta görünecek tüm bilgileri içerir. Bu bölümleri oluşturmak için belgenize bir <head></head> etiketi ve ardından <html> ile </html> arasına bir <body></body> etiketi ekleyin.

      Adım #5 Head bölümüne <title> elementini ekleyin

      Bir <head> açılış ve kapanış </head> etiketi yazarak dokümanın head bölümünü oluşturun. Bu bölümde ön uçta görünmeyecek olan sayfa hakkında meta bilgiler koymalısınız. Head bölümünde belgenizi adlandırın. Adı <title></title> etiketleri arasına yazın.

      Adım #6 CSS dosyalarını ekleyin

      Bir sonraki adımda CSS dosyaları ekleyin. Örneğin projenize Bootstrap CSS yüklüyorsanız şöyle görünecektir: <link rel=”stylesheet” rel=”noopener” target=”_blank” href=”bootstrap/css/bootstrap.min.css “>.

      Adım #7 Body alanına HTML öğelerini ekleyin

      Son olarak body alanına öğeleri ekleyin. Örneğin bir başlık ve paragraf ekleyebilirsiniz. Başlık adını <h1></h1> etiketleri arasına ve paragrafı <p></p> etiketleri arasında yazmalısınız.

      Önceki Makale

      İçerik Yönetim Sistemi (CMS) Nedir?

      Sonraki Makale

      Kapsayıcı Tasarım (Inclusive Design) Nedir?

      Haydar Özkömürcü

      Haydar Özkömürcü

      Pazarlama Danışmanı, Growth Hacker Profesyonel kariyeri süresince dünya genelinde, General Electric, J&J, T. İş Bankası gibi 300’den fazla marka ile çalışmıştır. Sektörde aktif olarak çalışan 3000’den fazla öğrencisi bulunmakta. SEMrush Blog, Brandmap gibi sektörün öncü yayınlarında makaleler yazmakta olup, İnternet ve Teknoloji alanında Türkiye’nin en etkin kişisi seçilmiştir. Google Partneri Cremicro'nun kurucusudur. Google Ads, Semrush, Facebook Ads sertifikaları bulunmaktadır.

      Diğer Makaleler

      Web Sitenizin Trafiğini Artıracak SEO Teknikleri
      Web Site Tasarımı

      Web Sitenizin Trafiğini Artıracak SEO Teknikleri

      30 Eylül 2021
      2021 Site Kurma Rehberi: Site Nasıl Kurulur?
      Web Site Tasarımı

      2022 Site Kurma Rehberi: Site Nasıl Kurulur?

      12 Temmuz 2021
      en cok kullanilan  wordpress eklentisi
      Web Site Tasarımı

      En Çok Kullanılan 10 WordPress Eklentisi

      28 Ocak 2015
      mobil uygulama gelistirme
      Web Site Tasarımı

      En Kaliteli Mobil Uygulamalar Nasıl Geliştirilir?

      30 Nisan 2014
      Sonraki Makale
      Kapsayıcı Tasarım (Inclusive Design) Nedir?

      Kapsayıcı Tasarım (Inclusive Design) Nedir?

      Web Site Tasarımı için Kullanılabilecek 10 Front-End Framework

      Web Site Tasarımı için Kullanılabilecek 10 Front-End Framework

      Son Makaleler

      Pazarlama

      Scrum Metodolojisi Nedir? Scrum Proje Yönetimi

      02 Temmuz 2022
      Pazarlama

      Fiyat Konumlandırma Stratejisi Nasıl Yapılır?

      23 Haziran 2022
      Dijital Pazarlama

      E-Ticaret’te Fraud Tespiti ve Önleme Yöntemleri

      20 Haziran 2022
      Growth Hacking

      İyi İletişim Formu Nasıl Tasarlanır?

      20 Haziran 2022
      Web Site Tasarımı

      HTML ile HTML5 Arasındaki Farklar Nelerdir?

      02 Haziran 2022
      SEO

      Site İçi SEO Nedir, Nasıl Yapılır?

      20 Mayıs 2022
      Danışmanlık ya da Eğitim Teklifi Alın

        Haydar Özkömürcü

        "Pazarlama Danışmanı - Growth Hacker"

        Hizmetler

        • Growth Hacking Danışmanlığı
        • SEO Danışmanlığı
        • Sosyal Medya Danışmanlığı
        • Dijital Pazarlama Danışmanlığı
        • Google Ads Danışmanlığı
        • İçerik Pazarlaması Danışmanlığı
        • Kurumsal Web Sitesi Tasarımı
        • E-Ticaret Sitesi Tasarımı

        Eğitim

        • Growth Hacking
        • Dijital Pazarlama
        • SEO
        • Google Ads
        • Sosyal Medya
        • Sosyal Medya Reklamcılığı
        • E-Ticaret
        • Yeni Medya
        • İletişim
        • Hakkımızda
        • Referanslar
        • Basın
        • Gizlilik politikası

        © 2003 - 2022 Tüm Hakları Saklıdır.

        Sonuç yok
        Tüm Sonucu Görüntüle
        • Hizmetler
          • Growth Hacking Danışmanlığı
          • SEO Danışmanlığı
          • Sosyal Medya Danışmanlığı
          • Dijital Pazarlama Danışmanlığı
          • Google Ads Danışmanlığı
          • İçerik Pazarlaması Danışmanlığı
          • Kurumsal Web Sitesi Tasarımı
          • E-Ticaret Sitesi Tasarımı
          • Mentörlük
        • Blog
          • Adwords
          • Analytics
          • Dijital Pazarlama
          • Growth Hacking
          • İş Dünyası
          • Marka Yönetimi
          • Pazarlama
          • Reklam
          • SEO
          • Sosyal Medya Pazarlaması
          • Teknoloji
          • Web Site Tasarımı
          • Yeni Medya
        • Eğitim
          • Growth Hacking Eğitimi
          • Dijital Pazarlama Eğitimi
          • SEO Eğitimi
          • Google Ads Eğitimi
          • Sosyal Medya Eğitimi
          • Sosyal Medya Reklamcılığı Eğitimi
          • E-Ticaret Eğitimi
          • Analytics ve Tag Manager Eğitimi
          • Yeni Medya Eğitimi
        • Hakkımda
          • Ben Kimim?
          • Basın
          • Referanslar
        • İletişim
          • Mesaj Gönder
          • Konuşmacı Daveti