Teknolojix Haber
YAZILIM

HTML nedir?

HTML

 

HTML (Hypertext Markup Language) , Köprü Metni Biçimlendirme Dili anlamına gelir. Kullanıcıların web sayfaları ve uygulamalardan bölümler, paragraflar, başlıklar, bağlantılar ve alıntı blokları oluşturmasına ve yapılandırmasına olanak tanır. HTML bir programlama dili değildir, yani dinamik işlevler oluşturamaz. Bunun yerine, belgeleri Microsoft Word’e benzer şekilde organize etmeyi ve biçimlendirmeyi mümkün kılar. HTML kullanırken, web sitesi sayfalarını işaretlemek için basit bir kod yapısı (etiketler ve öznitelikler) kullanırız. Örneğin, açılış

ve kapanış

etiketlerinin içine ek metin ekleyerek paragraflar oluşturabiliriz.

Peki HTML nedir? HTML bir programlama dili değildir. İçeriğin yapısını tanımlamak için kullanılan bir biçimlendirme dilidir. HTML, içeriğin farklı bölümlerini belirli bir şekilde görünmelerini veya davranmalarını sağlamak için çevrelemek veya sarmak için kullanabileceğiniz bir dizi öğedir. Çevreleyen etiketler, başka yerlerde sözcük veya görüntü köprüleri oluşturabilir, sözcükleri italik hale getirebilir, yazı tiplerini büyütebilir veya küçültebilir vb.

 Örneğin, şunları inceleyelim:

merhaba 

HTML nedir?

HTML (Hypertext Markup Language) , Köprü Metni Biçimlendirme Dili anlamına gelir. Kullanıcıların web sayfaları ve uygulamalardan bölümler, paragraflar, başlıklar, bağlantılar ve alıntı blokları oluşturmasına ve yapılandırmasına olanak tanır. HTML bir programlama dili değildir, yani dinamik işlevler oluşturamaz. Bunun yerine, belgeleri Microsoft Word’e benzer şekilde organize etmeyi ve biçimlendirmeyi mümkün kılar. HTML kullanırken, web sitesi sayfalarını işaretlemek için basit bir kod yapısı (etiketler ve öznitelikler) kullanırız. Örneğin, açılış

ve kapanış

etiketlerinin içine ek metin ekleyerek paragraflar oluşturabiliriz.

Peki HTML nedir? HTML bir programlama dili değildir. İçeriğin yapısını tanımlamak için kullanılan bir biçimlendirme dilidir. HTML, içeriğin farklı bölümlerini belirli bir şekilde görünmelerini veya davranmalarını sağlamak için çevrelemek veya sarmak için kullanabileceğiniz bir dizi öğedir. Çevreleyen etiketler, başka yerlerde sözcük veya görüntü köprüleri oluşturabilir, sözcükleri italik hale getirebilir, yazı tiplerini büyütebilir veya küçültebilir vb.

 Örneğin, şunları inceleyelim:

Kedim çok huysuz

Satırın bağımsız olarak var olmasını istiyorsak, paragraf işaretini içine alarak bunun bir paragraf olduğunu belirtebiliriz:

 

Kedim çok huysuz

 

Bu paragraf öğesini daha ayrıntılı inceleyelim.

Bir HTML öğesinin anatomisi

açılış etiketi          kapanış etiketi

 Kedim çok huysuz

                    İçerik

Öğemizin ana kısımları alttaki gibidir:

Açılış etiketi:

Bu, öğenin isminden bu vaziyette, p, açılış ve kapanış açılı parantezler içine sarılmış olarak oluşur. Bu, öğenin nerede başladığını veya tesirli olmaya başladığını belirtir – bu vaziyette paragrafın başladığı yer.

Kapanış etiketi:

Bu, öğe isminden evvel eğik çizgi kapsaması dışında açılış etiketiyle aynıdır. Bu, öğenin nerede bittiğini belirtir

Öğeler ayrıca aşağıdakilerle eş değerde  olabilir:

<p class=”editor-note> Kedim çok huysuz </p>

Öznitelikler, asıl içerikte görünmesini istemediğiniz öğe hakkında ek bilgiler kapsar. Burada sınıf, öznitelik ismidir ve tertip edici anekdotu öznitelik kıymetidir. Class özelliği, öğeye onu ve aynı sınıf değerine sahip değişik öğeleri tarz bilgileri ve değişik şeyler ile amaçlamak için kullanılabilecek eşsiz olmayan bir belirleyici vermenize imkân tanır.

Bir öznitelik her zaman aşşağıdakilere  sahip olmalıdır:

  1. Öğe ismi veya öğe zati bir veya daha fazla özniteliğe sahipse evvelki öznitelik arasında bir boşluk.
  2. Öznitelik ismi ve ardından eşittir işareti.
  3. Tırnak işaretlerini açıp kapatarak sarılmış öznitelik değeri.

Anekdot: ASCII boşluk kapsamayan kolay öznitelik değerleri veya “‘” = <> kişiliklerinden rastgele biri tırnaksız kalabilir, ancak kodu daha meblağlı ve anlaşılır kıldığından tüm öznitelik değerlerini alıntı yapmanız önerilir

Yuvalama öğeleri

Öğeleri öteki öğelerin içine de yerleştirebilirsiniz – buna yuvalama denir. Kedimizin çok somurtkan olduğunu belirtmek isteseydik, “çok” sözcüğünü bir unsuru içine alabiliriz, bu da sözcüğün eforlu bir biçimde vurgulanması gerektiği anlamına gelir:

 

Kedim çok huysuz.

 

Ancak, öğelerin doğru şekilde iç içe yerleştirildiğinden emin olmanız gerekir. Yukarıdaki örnekte,

öğesini açtık ve ardından öğesini açtık; bu nedenle, önce öğesini ve ardından

öğesini kapatmalıyız. Aşağıdakiler yanlış:

 

Kedim çok huysuz.

Öğeler doğru bir şekilde açılıp kapatılmalı, içte veya dışta açıkça görülmelidir. Yukarıda açıklandığı gibi çelişirlerse, web tarayıcınız ne söylemek üzere olduğunuzu en iyi tahmin etmeye çalışır ve bu da beklenmedik sonuçlara yol açabilir. 

Öyleyse

<! DOCTYPE html> -doküman türü. Bu gerekli önsözdür. Zaman geçtikçe, HTML hala çok genç (yaklaşık 1991/92) Bir belge türünü iyi HTML olarak ele almak için, HTML sayfalarının uyması gereken bir dizi kurala bağlantı görevi görmesi gerekir. Bu otomatik hata kontrolüdür ve Diğer faydalı şeyler. Ancak bu günlerde pek bir şey yapmıyorlar, temelde belgelerinizin düzgün çalıştığından emin olun. Şimdi bilmeniz gereken tek şey bu.

Görüntüler:

<img src=”images/zlh.pngalt=kedi resmi“>

 Dikkatimizi <img> öğesine çevirelim:

Daha önce de belirtildiği gibi, resmi sayfaya yerleştirir. Bunu, resim dosyamızın yolunu içeren src (kaynak) özniteliği aracılığıyla yapar.

Ayrıca bir alt (değiştirme) özelliği ekledik. Bu öznitelikte, aşağıdaki nedenlerden dolayı resmi göremeyen kullanıcılar için açıklayıcı metin belirtebilirsiniz:

Ciddi görme bozukluğu olan kullanıcılar, alternatif metinleri onlara okumak için genellikle ekran okuyucu adı verilen araçları kullanır.

Bir hata oluştu ve resim görüntülenemiyor. Örneğin, yanlış anlamak için src özelliğindeki yolu kasıtlı olarak değiştirmeyi deneyin. Sayfayı kaydedip yeniden yüklerseniz, aşağıdaki resimde görmeniz gerekir:

Alternatif metin için anahtar kelime “açıklayıcı metin” dir. Yazdığınız alternatif metin, okuyuculara görüntünün nasıl taşındığını iyi anlamaları için yeterli bilgi sağlamalıdır. örneğin, mevcut “Test Resmim” böyle bir isim hiçte iyi olmaz . böyle bir isim yerine görselle daha uyumlu bir isim koymalısınız mesela elma ise görsel elma kedi ise kedi vb.

Metni işaretle

Bu bölüm, metni işaretlemek için kullanılan bazı temel HTML öğelerini tanıtacaktır.

Başlık

Başlık öğesi, içeriğin belirli bölümlerinin başlık mı yoksa alt başlık mı olduğunu belirlemenize olanak tanır. Bir kitabın başlıkları, bölüm başlıkları ve alt başlıkları ve HTML belgeleri olabilir. HTML 6 üstbilgi düzeyi

içerir, ancak genellikle en fazla 3 ila 4 ü kullanırız :

 

Ana başlığım

 

 

En üst düzey başlığım

 

 

Alt başlığım

 

 

Alt başlığım

 

Şimdi, öğesinin üzerindeki HTML sayfasına uygun bir başlık eklemeye çalışın.

Paragraf

 Yukarıda bahsedildiği gibi

​​öğesi metin içeren paragraflar için kullanılır; normal metin içeriğini işaretlerken genellikle aşağıdaki komutlar kullanılır:

Bu tek bir paragraftır

Örnek metninizi ekleyin (web sitesinin görünümünden bulmalısınız). Doğrudan öğesinin altındaki bir veya birkaç paragrafa yerleştirin.

Kontrol listesi Çoğu web içeriği listelerden oluşur ve HTML’nin özel öğeleri vardır. İşaret listesi her zaman en az 2 öğe içerir. En yaygın liste türleri sıralı ve sırasız listelerdir:

 Sırasız listeler, alışveriş listeleri gibi ürün sırasının önemli olmadığı listeler için uygundur.

    öğelerine sarılırlar.

 Sıralı listeler, tarifler gibi öğelerin sırasının önemli olduğu listeler için uygundur.

    öğelerine sarılırlar. Listedeki her öğe
  1. (liste öğesi) öğesine yerleştirilir. Örneğin, aşağıdaki paragraf parçasının bir bölümünü bir listeye dönüştürmek istiyorsak

     

    Teknolojixhaber’de, birlikte çalışan teknoloji uzmanları, düşünürler ve yazarlardan oluşan küresel bir topluluğuz …

    İşareti buna göre değiştirebiliriz

     

    Teknolojixhaber’de, küresel bir

    topluluğuz

    • teknoloji uzmanları
    • yazılımcılar
    • donanımcılar
    • yazarlar

    birlikte çalışmak …:)

    Örnek sayfaya sıralı veya sırasız bir liste eklemeye çalışın.

Örnek sayfaya sıralı veya sırasız bir liste eklemeye çalışın.

Bağlantılar

Bağlantılar çok önemlidir – web’i web yapan şey onlardır! Bir bağlantı eklemek için basit bir öğe kullanmamız gerekir – <a>- “a” “çapa” nın kısa biçimi. Paragrafınızdaki metni bir bağlantıya dönüştürmek için şu adımları izleyin:

 

Bir metin seçin. “Teknoloji haberleri” metnini seçtik.

Metni <a>aşağıda gösterildiği gibi bir öğeye sarın :

<a> Teknoloji haberleri </a>

Öğeye aşağıda gösterildiği gibi <a>bir hrefnitelik verin :

<a href=””> Teknoloji haberleri </a>

Bu özelliğin değerini, bağlantının bağlanmasını istediğiniz web adresiyle doldurun:

<a href=”https://teknolojixhaber.com//“> Teknoloji haberleri </a>

Web adresinin başındaki protokol adı verilen https://veya http://kısmını atlarsanız, beklenmedik sonuçlar alabilirsiniz . Bir bağlantı oluşturduktan sonra, size istediğiniz yere gönderdiğinden emin olmak için tıklayın.

Bu html için bir başlangıç olucak sizin için arkadaşlar  hepinize kolay gelsin

Yazılım dünyasına hoş geldiniz

Bu yazımda son olarak en fazla kullanılan html etiketlerinini elimden geldiğince yazmaya çalışacağım  fakat hepsi için tek tek örnek yapmıyacağım ama nacizade önerim bu tagları yani etiketleri araştırıp örnekler yapmanız tekrar kolay gelsin arkadaşlar iyi çalışmalar

Temel HTML Etiket açıklaması

 

  •  <! DOCTYPE> Belge türünü tanımlayın
  • <html> bir HTML belgesini tanımlar
  • <head> belgenin meta verilerini / bilgilerini içerir
  •  <title> belgenin başlığını tanımlar
  •  <body> belgenin gövdesini tanımlar
  •  <h1> – <h6> HTML üstbilgisini tanımlar
  •  <p> Bir paragraf tanımlayın
  • <br> Yeni satır karakteri girin
  • <hr> İçeriğin konu değişikliğini tanımlayın
  •  <! –…–> Yorumu tanımla
  • Biçimlendirme Etiket Açıklaması

  • <acronym> HTML5’te desteklenmez. Bunun yerine
  • <abbr> kullanın. Bir kısaltma tanımlar
  • <abbr> Bir kısaltma veya bir kısaltma tanımlar <address> Bir belgenin / makalenin yazarı / sahibi için iletişim bilgilerini tanımlar
  • <b> Kalın metni tanımlar
  • <bdi> Metnin dışındaki diğer metinden farklı bir yönde biçimlendirilmiş olabilecek bir bölümünü izole eder
  • <bdo> Mevcut metin yönünü geçersiz kılar
  •  <big> HTML5’te desteklenmez. Bunun yerine CSS kullanın. Büyük metni tanımlar <blockquote> Başka bir kaynaktan alıntılanan bir bölümü tanımlar
  • <center> HTML5’te desteklenmez. Bunun yerine CSS kullanın. Ortalanmış metni tanımlar
  •  <cite> Bir çalışmanın başlığını tanımlar
  • <code> Bir bilgisayar kodu parçası tanımlar <del> Bir belgeden silinen metni tanımlar
  • <dfn> İçerik içinde tanımlanacak bir terimi belirtir <em> Vurgulu metni tanımlar
  • <font> HTML5’te desteklenmez. Bunun yerine CSS kullanın.
  •  Metin için yazı tipini, rengini ve boyutunu tanımlar
  • <i> Alternatif bir ses veya ruh halindeki metnin bir bölümünü tanımlar
  • <ins> Bir belgeye eklenen bir metni tanımlar <kbd> Klavye girişini tanımlar
  • <mark> İşaretli / vurgulanan metni tanımlar <meter> Bilinen bir aralıkta (bir gösterge) skaler bir ölçüm tanımlar
  • <pre> Önceden biçimlendirilmiş metni tanımlar <ilerleme> Bir görevin ilerlemesini temsil eder <q> Kısa bir teklif tanımlar
  • <rp> Ruby ek açıklamalarını desteklemeyen tarayıcılarda nelerin gösterileceğini tanımlar
  • <rt> Karakterlerin açıklamasını / telaffuzunu tanımlar (Doğu Asya tipografisi için)
  • <ruby> Bir yakut ek açıklaması tanımlar (Doğu Asya tipografisi için)
  • <s> Artık doğru olmayan metni tanımlar
  • <samp> Bir bilgisayar programından örnek çıktıyı tanımlar
  • <small> Daha küçük metin tanımlar
  • <strike> HTML5’te desteklenmez. Bunun yerine <del> veya<s> kullanın.

Üstü çizili metni tanımlar

  • <strong> Önemli metni tanımlar
  • <sub> Abonelikli metni tanımlar
  • <sup> Üst simge metni tanımlar
  • <template> Sayfa yüklendiğinde gizlenmesi gereken içerik için bir kap tanımlar
  • <time> Belirli bir zamanı (veya tarih-saati) tanımlar
  • <tt> HTML5’te desteklenmez. Bunun yerine CSS kullanın.

Teletype metnini tanımlar

  •  <u> Açıklanmayan ve normal metinden farklı stile sahip bazı metinleri tanımlar
  • <var> Bir değişken tanımlar
  • <wbr> Olası bir satır sonu tanımlar 

Formlar ve Giriş

etiket Açıklaması

  • <form> Kullanıcı girişi için bir HTML formu tanımlar
  • <input> Bir giriş hakimiyeti tanımlar
  • <textarea> Çok satırlı bir giriş teftişi tanımlar metin alanı
  • <button> Tıklanabilir bir düğme tanımlar
  • <select> Bir açılır liste tanımlar

Etiket açıklaması

  •  <Img> etiket logosu resmi
  • <map>, istemci resim haritasını tanımlar
  • <area>, görüntü haritasındaki alanı tanımlar
  • <canvas>, grafikleri komut dosyaları aracılığıyla dinamik olarak çizmek için kullanılır (genellikle JavaScript)
  • <figcaption>,
  • <figure> öğesinin başlığını tanımlar
  • <figure> Bağımsız içeriği belirtin
  • <picture>, birden çok görüntü kaynağı için bir kap tanımlar
  • <svg>, SVG grafiklerinin kapsayıcısını tanımlar

Çerçeveler Etiket Açıklaması

  • <frame> HTML5’te desteklenmez. Çerçeve kümesinde bir pencere (çerçeve) tanımlar
  • <frameset> HTML5’te desteklenmez. Bir dizi çerçeve tanımlar
  • <noframes> HTML5’te desteklenmez. Çerçeveleri desteklemeyen kullanıcılar için alternatif bir içerik tanımlar
  • <iframe> Bir satır içi çerçeve tanımlar

Ses videosu Etiket açıklaması

  •  <audio> ses içeriğini tanımlar

  • <source>, medya varlıkları için birden çok medya kaynağı tanımlar (<video>, <audio> ve <picture>)
  • <track>, medya öğesinin (<video> ve <audio>) metin segmentini tanımlar
  •  <video> bir video veya filmi tanımlar

bağlantı Etiket açıklaması

  • <a> Köprüyü tanımlayın
  •  <link>, belge ile harici kaynaklar arasındaki ilişkiyi tanımlar (en yaygın olarak stil sayfalarına bağlanmak için kullanılır)
  • <nav> Gezinme bağlantısını tanımlayın

liste Etiket açıklaması

  • <ul> Sırasız bir liste tanımlayın
  • <ol> Sıralı bir liste tanımlayın
  •  <li> Bir liste öğesi tanımlama HTML5,
  • <dir> ‘i desteklemez. Bunun yerine
  • <ul> kullanın. Dizin listesini tanımlayın
  • <dl> Yorum listesini tanımlayın
  • <dt> Yorum listesinde terimi / adı tanımlayın
  • <dd> Yorum listesindeki terimin / adın açıklamasını tanımlayın

Tablolar

Etiket açıklaması

  •  <table> bir tablo tanımlar
  • <caption> Başlığı tanımlayın
  • <th> Tablodaki başlık hücresini tanımlayın
  •  <tr> tablodaki bir satırı tanımlar
  •  <td> Tabloda bir hücre tanımlayın
  • <thead>, tablodaki başlık içeriğini gruplar
  • <tbody>, tablodaki gövde içeriğini gruplandırır
  • <tfoot> Tablodaki altbilgi içeriğini gruplandırın
  • <col>,
  • <colgroup> öğesindeki her sütun için sütun özniteliklerini belirtir
  • <colgroup>, işaretleme için tablodaki bir veya daha fazla sütundan oluşan bir grubu belirtir
  • <main>, belgenin ana içeriğini belirtir
  • <section> belgedeki bir bölümü tanımlar
  • <article> Makaleyi tanımlayın
  • <aside> Sayfa içeriği dışındaki içeriği tanımlar
  •  <details>, kullanıcının görüntüleyebileceği veya gizleyebileceği diğer ayrıntıları tanımlar
  • <dialog> bir iletişim kutusu veya pencere tanımlar
  • <summary>,
  •  <details> öğesi için görünür başlığı tanımlar
  • <data> Belirli içeriğin makine tarafından okunabilir bir çevirisini ekleyin

Meta bilgisi Etiket açıklaması

  • <head>, belge hakkındaki bilgileri tanımlar
  •  <meta>, HTML belgeleriyle ilgili meta verileri tanımlar
  •  <base>, belgedeki tüm göreli URL’lerin temel URL’sini / hedefini belirtir ,
  •  <basefont> HTML5 desteklemez. Lütfen bunun yerine CSS kullanın. Belgedeki tüm metnin varsayılan rengini, boyutunu ve yazı tipini belirtin 
  • <basefont>HTML5,desteklemez. Lütfen bunun yerine CSS kullanın. Belgedeki tüm metnin varsayılan rengini, boyutunu ve yazı tipini belirtin 

Programlama Etiket açıklaması

  • <script> istemci komut dosyasını tanımlar
  • <noscript>, istemci tarafı komut dosyalarını desteklemeyen kullanıcılar için alternatif içeriği tanımlar
  •  <applet> ‘i HTML5, desteklemez. Bunun yerine <embed> veya <object> kullanın. Gömülü uygulamaları tanımlayın
  • <embed>, harici (HTML olmayan) uygulamalar için bir kap tanımlar
  •  <nesne> gömülü bir nesneyi tanımlar <param>, nesne için parametreleri tanımlar

Related posts

20 Yıl Öncenin Kabusu ILOVEYOU Virüsü!

Yağmur Kübra Yazıcı

Bluetooth’ta, Milyarlarca Cihazı Doğrudan Etkileyen Büyük Bir Tehlike Ortaya Çıktı!

Fatih Akgün

Mansur Yavaş tarafından ‘Başkent Mobil’ uygulaması tanıtıldı

Fatih Akgün

Yorum Yap