BTA Deneme Tahtası (şimdilik html tutorial)

Basit HTML bilgileri

Taglar

Bütün HTML belgeleri <!DOCTYPE html> ile başlar. Sebebi sanırım browser'a hangi HTML versiyonunu kullandığını veya XML kullanıp kullanmadığını belirtmek.

<html> tagı ise bütün sayfayı kapsar. içinde hem <head> hem de <body> vardır. Ayrıca "lang" attribute'u da html tagı içine girer. <html lang="tr"> Türkçe siteler için idealdir. lang=tr-TR yapılırsa da Türkiye'deki Türkçe anlaşılır. (İkinci kısım ülke kodu)

<html> tagından sonra gelen iki ana tag vardır. bunlar <head> ve <body> taglarıdır. head, sayfada direkt olarak gözükmeyen kısım iken body sayfada gözüken ana kısımdır. head tagı içinde genelde meta tagları ve diğer sayfa ile ilişkili taglar vardır <title> gibi.

<head> tagı içine giren diğer taglar ise şunlardır:

  • <title>: Website adını belirler. Yukarıdaki browser tab'ında çıkan addır. (Bu site için "Beyaz Tahta" geçerli.) <title>Beyaz Tahta</title>
  • <style>: Website içindeki CSS stillerini belirler. Stiller 3 şekilde websitede bulunur: external - internal - inline. buradaki style tagı ise internal CSS olarak geçer. <style> tagı kendi içine ayrıca 2 tane özel attribute alabilir. Bunlar media ve type'dır. media, websitesinin hangi cihazda nasıl davranacağını gösterirken type ise bu style'ın hangi tipte bir yazı dili kullanarak yazıldığını belirtir. Şu andaki tek tip type="text/css" idir. Diğer kodlar: IAMA Media Types
  • <link>: Şu andaki dosya ile başka bir dosya arasına link kurar. Genelde "external CSS style sheet"ler için ve favicon için kullanılır. <link rel="stylesheet" href="style.css"> veya <link rel="icon" type="image/x-icon" href="/images/favicon.ico">. Link tagı başka attribute'lar da alır, bunlardan başka sitelerde sık kullanılanı sizes ancak ne işe yarar bilmiyorum. 32x32 veya 24x24 yazıyorlar genelde. rel ise bağlantı relation'unun ne olduğunu söyler. genelde stylesheet veya icon kullanılıyor. Diğer bütün link attributeları için Buraya tıkla.
  • <script> ise HTML içinde javascript kullanmak için. <head> içine veya <body> içine yazılabilir. Ayrıca <head> içinde <script src="myscripts.js"></script> şeklinde kullanılarak ayrı bir javascript dosyasından da script alınabilir, aynı CSS stylesheet'lerinde olduğu gibi.
  • <noscript> ise kullanılan web browser javascript desteklemiyorsa, veya kullanıcı JS'i güvenlik paranoyasıyla kapattıysa kullanıcıya verilecek mesajı yazmak için veya başka bir şey yapmak için kullanılabilir. Genelde bu mesaj kullanıcıya <body> tagı içerisinde bir yerde verilir, ancak <head> içinde kullanılırsa bu sefer de noscript içerisinde sadece <link>, <style> ve <meta> tagları kullanılabilir.
  • <meta> tagı ise derya deniz bir tagdır ve site ile ilgili metadata'ları gösterir.
    • <meta charset="UTF-8">, <head> tagının içerisindeki ilk element olmalıdır ki HTML belgesi doğru düzgün okunsun. UTF-8 charset belirler. Diğer charset'ler için buraya tıkla.
    • <meta name="" content=""> name attribute'u içerisine author, description, keywords ve viewport değerleri gelebilir. Gelebilecek başka değerler ise application-name ve generator. Bu ikisi şimdilik gereksiz istersen ne olduklarına buradan bak. Bu değerler, bu <meta> tag'ının ne bilgi sunacağını belirler ve bu bilgiyi yine aynı <meta> tagı içerisindeki content attribute'u içerisine istenilen değerler yazılır. Örnek olarak:
      • <meta name="author" content="Kont"> Bu meta değeri, sayfanın yazarının kim olduğunu gösterir.
      • <meta name="description" content="BTA Websitesinin deneme tahtasıdır."> Bu meta değeri, sayfanın açıklamasıdır. Discord linklerindeki o embed'in içinde yazan yazıdır.
      • <meta name="keywords" content="BTA, Anime, Beyaz tahta, Deneme, HTML, CSS, JS"> Bu meta değeri, search engine'ler için keyword'lerdir.
      • <meta name="viewport" content="width=device-width, initial-scale=1.0"> Bu meta değeri, web sayfasının bütün cihazlarda düzgün gözükmesini sağlar.
    • <meta http-equiv="refresh" content="30"> Buradaki 30'un birimi saniye. Siteye refresh atıyor onun dışında diğer http-equiv attribute işlevlerini ve değerlerinin ne işe yaradığını tam anlayamadım sanırım fonksiyonel meta işi görüyor. linkleyelim sizi.
  • <base> tagı ise bulunduğunuz sitedeki bütün linklerin (href ve src) neyi temel alacağını gösterir. Örneğin <base href="https://www.bta.neocities.org/" target="_blank"> dediğimiz zaman o anda bulunduğumuz sayfadaki bütün rölatif linkler temel olarak root'u gösterir. Örneğin bta.neocities.org/html/tut/def.html adresinde iseniz ve src olarak ornek.png kullandıysanız browser bu resmi bta.neocities.org/html/tut/ornek.png konumunda aramak yerine bta.neocities.org/ornek.png konumunda arar. Bunun dışında yine bulunan sayfadaki linklerde eğer target belirtilmemişse yeni bir sayfada açar (_blank)

Sitenin görünen bütün yüzü ise <body> tagı içerisinde yer alır. <body> tagı default olarak 8px margin'e sahiptir. Site içeriğinin tamamı buraya yazılır.

<h1>, <h2>, <h3>, <h4>, <h5> ve <h6> tagları başlık belirtir ve 1'den 6'ya doğru yazılmaları lazım. <h1> tagı sayfanın ana başlığı, <h2> tagı içerik başlığı şeklinde... Şu anda içinde bulunduğumuz "Taglar" alt başlığı <h3> başlığıdır.

<p> ise paragraf belirtir. yazılacak herhangi bir şey buraya yazılır.

Unutulmaması gerekir ki <h1> ve <p> blok elementlerdir ve sayfanın sağından soluna 100% genişlikte yer tutarlar.

Bir başka blok element ise <div>'dir ve sayfada bir "division" belirtir. Genelde CSS ile şekillenirmek amaçlı ve sayfayı bölmek için kullanılır.

<div>'in blok olmayan, inline olan kuzeni ise <span> tagıdır. Kullanıldığında sayfada bölünme yaratmaz. <span> daha çok yazı şekillendirmek için kullanılır.

<br> bir alt satıra geçmek için kullanılır (aynı <p> içinde olsanız bile)

<hr> ise ekran width'i boyunca 100% genişliğine bir çizgi çeker. Genelde bölümleri ayırmak için kullanılır.

HTML kodunuza yorum koymak için <!-- tagı ile --> tagı arasına yorumunuzu koyun.

Dosya Uzantıları

href attribute'unun value'su olarak dosya uzantıları kullanılır. bunlar "https://" içeren websiteler olabilir (statik url), veya rölatif URL'ler olabilir. Relative URL'ler dört farklı şekilde olabilir:

  • "ornek.png": aynı klasör içindeki resim (örneğin bta.neocities.org/html/tut/def.html'de verildiyse root/html/tut/ornek.png alır.)
  • "images/ornek.png": aynı klasör içindeki bir klasördeki resim (örneğin bta.neocities.org/html/tut/def.html'de verildiyse root/html/tut/images/ornek.png alır.)
  • "/images/ornek.png": site root klasörü içindeki bir klasördeki resim (örneğin bta.neocities.org/html/tut/def.html'de verildiyse root/images/ornek.png alır.)
  • "/ornek.png": site root klasörü içindeki bir resim (örneğin bta.neocities.org/html/tut/def.html'de verildiyse root/ornek.png alır.)
  • "../ornek.png": bulunan klasörün bir üst klasöründeki dosyayı alır (örneğin bta.neocities.org/html/tut/def.html'de verildiyse root/html/ornek.png alır.)

Global Attribute'lar

Bu attribute'lar bütün HTML tag'ları için geçerlidir:

  • class: Birden fazla tagda kullanılabilir ve CSS/JS için göstergeçtir. CSS'deki kullanım şekli: "test.classname {}"
  • id: Tek bir tagda kullanılabilir ve CSS/JS için göstergeçtir. Aynı zamanda linkler ile bookmarking yapmak için de kullanılır. Örnek: <a href="index.html#nav">
  • style: CSS tipi style belirler. Genelde "inline CSS" diye geçer. Örnek: <p style="color:blue; background-color:pink;">
  • title: Farenizi elementin üzerine getirince çıkan tooltip'teki yazıdır. Örnek: <p title="Bir Tutam Anime">BTA</p>
  • lang: Tag'ın içindeki yazıların dili. lang="tr"
  • hidden: Tag'ı göstermez. JS ile etkileşerek kullanılması daha faydalıdır. Örnek: <p hidden>yazı yazı yazı</p>
  • translate: Tag içerisindeki yazıların auto-translate ile çevirilip çevirilmemesi gerektiğini söyler "yes" veya "no" değerleri alır. Örnek: <p translate="no">yazı yazı yazı</p>
  • dir: Tag içerisindeki yazının yönünü belirler. <bdo>'dan farklı olarak sadece yazının yazılış yönünü değiştirir, zorlamaz, dolayısıyla arapça gibi yazılar için idealdir. Örnek: <p dir="rtl">yazı yazı yazı!!!</p> burada "yazı yazı yazı" düzgün yazılırken (çünkü latince) ünlem işaretleri sağa yazılır (arapçadaki gibi). yazı yazı yazı!!!
  • contenteditable: Tag içerisindeki yazının kullanıcı tarafından editlenip editlenemeyeceğini belirtir. true veya false değerlerini alır. Örnek: <p contenteditable="true">yazı yazı yazı</p> yazı yazı yazı
  • spellcheck: Tag içerisindeki yazı için spellcheck aktifleştirir. true veya false değerlerini alır. Örnek: <p spellcheck="true">yazı yazı yazı</p> Deneyiniz: Buraya yazı yazın asdasfasf
  • draggable: Tag içerisindeki içeriğin fare ile sürüklenip sürüklenemeyeceğini gösterir. Resimler ve linkler gibi aynen. true, false veya auto değerlerini alır. Örnek: <p draggable="true">yazı yazı yazı</p> Bu metni sürükleyin.
  • tabindex: Tab'a basılınca hangi tag'ın öncelikli olarak highlight edileceğini gösterir. Normalde tab'a basınca sitedeki linkleri yukarıdan aşağı giderek gösterir. Örnek: <a tabindex="1" href="...">link1</a> linki <a tabindex="2" href="...">link2</a> linkinden daha önce tab'lanacaktır, tabindex'i 1 olan element sayfada diğerinden aşağıda olsa bile.
  • data-*: Tag'ın hangi data içereceği. JS için ideal. data-'dan sonra gelen data belirteçi büyük harf içeremez (data-Bird olamaz.) Örnek: <p data-animal-type="kuş">Baykuş</p> Burada baykuş kelimesine "kuş" datası yükledik.
  • accesskey: alt + key tuş kombinasyonu ile hangi element aktive edilip veya elemente focus atılacağını gösterir. Bazı browser'larda shift + alt veya başka kombinasyonlar da kullanılabilir. Örnek: <a accesskey="g" href="...">g ile basılarak gidilen link</a> Denemek için klavyenizde "alt + i" tuşuna basarak ana sayfaya dönebilirsiniz. Ancak bu yöntemin kullanılması pek tavsiye edilmez.

Formatlama

Semantik Bölümler

  • <header> Footer ve Address dışındaki çoğu semantik elementin içine konup "Başlık" anlamı ifade eden, veya direkt sayfanın en tepesine konulup "Site başlığı" anlamı veren bir bölüm.
  • <main> Sitenin asıl içeriği. Her sitede max 1 adet bulunur ve header ile footer gibi tekrar etmemesi gereken şeyler konulmalıdır içine. Anlamlı ve meta olmayan site içeriğinin bölümüdür.
  • <footer> Sitenin altındaki kısım. Address, copyright info, authorship, sitemap, navigasyon linkleri vs buraya konulabilir.
  • <section> Site içerisindeki bir bölümü temsil eder. <div>'in geliştirilmiş hali.
  • <article> Site içerisinde içinde bilgi aktarımı olan konu bütünlüğü olan bölümler. Her bir blog postu gibi düşünebilirsiniz.
  • <aside> Genelde sidebar olarak kullanılıyor.
  • <div> Blok şeklinde bir bölüm.
  • <span> İnline şeklinde bir bölüm.
  • <details> Bu tag, drop down menü tarzında bir şey açar ve içeriği kapalı tutar.
  • <summary> Bu tag ise <details> tagının başlığı olur.
  • <dialog> Modal bir diyalog kutusu oluşturur. open attribute'u alırsa görülebilir hale gelir.
  • <data> İçindeki tag ve element içeriğine bir data tagı yapıştırır. Makineler için ideal.

Düz yazı formatlama

Direkt format çeşitleri:

  • <b> Kalın yazı.
  • <strong> Önemli yazı. (Semantik anlamı var)
  • <i> İtalik yazı.
  • <em> Emfazise italik yazı. (Semantik anlamı var
  • <small> Küçük yazı.
  • <mark> Fosforlanmış yazı.
  • <del> Üstü çizili yazı, belgeden silinen, redakte edilen yazı. "cite (URL)" ve "datetime (YYYY-MM-DDThh:mm:ssTZD)" attribute'ları alabilir.
  • <ins> Altı çizgili yazı, belgeye yeni eklenen yazı. "cite (URL)" ve "datetime (YYYY-MM-DDThh:mm:ssTZD)" attribute'ları alabilir.
  • <s> Artık doğru olmayan yazılar için. 1 Euro 20 Lira. Artık 30 Lira. Ayrıca sadece ortası çizgili yazı için <del> kullan.
  • <u> Underline'a sahip yazı. Genelde yazım hatası olan yazılar için kullanılıyor..? Bnuun gibi. CSS stili ile düzelebilir kırmızı falan.
  • <sup> yazının üstündeki yazı. 23 = 8
  • <sub> yazının altındaki yazı. H2O

Bilgisayar kodu şekillemeleri (genelde monospace font):

  • <pre> 
            Preformatlanmış text
  • <code> Bu yazı code değil, ancak bu yazı bir code.
  • <samp> Bilgisayar veya terminal çıktısı yazı. monospace.
  • <var> Matematikteki i ve x değerleri değişkendir...
  • <kbd> Keyboard input almak için. ctrl + c ile kopyala.

Quote olayları ve Semantikler:

  • <q cite="URL"> inline şeklindedir ve bununla Quote ekleyebilirsiniz.
  • <blockquote cite="URL"> Block display şeklindedir ve bununla
    Blok şeklinde bütün bir paragrafı veya parçayı quote edebilirsiniz.
  • <cite> Kullanıldığı durumda gösterdiği sanat eserinin veya başka bir eserin adıdır. Yıldızlı gece
  • <abbr title="name"> tagı kısaltmaların uzun versiyonlarını fare ile üstüne getirdiğinizde gösterir. UK gibi.
  • <dfn> Bir kelimeyi "define" eder context içinde: "HTML bu sayfanın konusudur."
  • <address> Genelde sayfanın sonuna veya "about" kısmına veya "contact" kısmına italik şekilde address kısmı koyulur. Semantik biraz.
  • <time> Zamanı belirtir. Kullanımı için...

Diğer formatlama şekilleri:

  • <wbr> Yazıdaki kelime eğer çoooooooooooook uzunsa ve kelime içinde bölünürse anlamını kaybetmeyecek yerler varsa oraya kullanırsın. Uzun kimyasallardaki gibi. Penta<wbr>hekza<wbr>metazon gibi.
  • <bdi> Genelde user-input'tan gelecek yazının dili bilinmediğinde gelen yazının yönünü izole etmek için kullanılır.
  • <bdo dir="rtl"> Yazının yazılış yönünü değiştirir.
  • <meter> Sınırlı bir alan hacmi kapasitesini gösterir. Daha fazla bilgi
  • <progress> Süregelmekte olan bir progress gösterir. Daha fazla bilgi
  • <template> Sayfa ilk yüklendiğinde gösterilmeyen bir kısım. Javascript ile aktive edilebilir.
  • <ruby> Japonca Kanji yazılarının üstüneki o küçük Hiragana yazıları için. Bu tag içine düz yazı olarak karmaşık kanji yazılır, ardından <rt> tagı konulur.
  • <rt>, <ruby> içine konulan terim ve üstte yazılmak istenen Hiragana'nın konulacağı kısım.
  • <rd> Eğer browser ruby-text desteklemiyorsa <rt> içindeki Hiragana'nın başka nasıl şekilde kullanılacağını gösterir. Örnek: <ruby>漢 <rt>(</rt>ㄏㄢˋ<rt>)</rt></ruby> Bu düzenek yazıyı şöyle gösterir: 漢 (ㄏㄢˋ)

HTML İçi Eklemeler

Resimler

<img> tagı içerisinde gelir. Kullanımı: <img src="index.png" alt="Yorigami Shion" width="500" height="600"> width ve height attribute'ları yerine style="width:500px; height:600px;" attribute'u ile birlikte kullanılması tavsiye edilir. src attribute'una dosya uzantısı eklenir (aynı href'deki gibi). alt attribute'u ise resim eğer yüklenemezse yerine çıkacak yazı için ve screenreader'lar için var. CSS'in width height stilleri öncelik sıralamasında img içerisindeki width height attribute'larından önce gelir. Bütün <img> tagı özellikleri için bu linke tıklayın.

  • style="vertical-align:top"
  • style="vertical-align:middle"
  • style="vertical-align:bottom"
  • style="vertical-float:right"
  • style="vertical-float:left"
  • style="border:5px solid black"
  • style="vertical-align:middle;margin:0px 50px" margin'de eğer tek sayı kullanılırsa 4 yönü, 2 sayı kullanılırsa ilk sayı vertikal ikinci sayı horizontal, 4 sayı kullanılırsa yukarıdan başlayarak saat yönünde 4 yönü belirtir.
  • <a href="..."><img src="index.png" alt="Yorigami Shion" width="500" height="600"></a> kullanılırsa eğer, resim link niyetine kullanılmış olur.

image map kullanmak için <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> ve <map name="planetmap"> kullanınız. <map> tagı içerisine <area> tagları gelecektir ve bu taglar resim içerisindeki tıklanabilir alanları belirleyecektir. Derya deniz bir tag, dolayısıyla...

  • <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> Koordinatlar 0,0 ilk nokta ve 82,126 ikinci nokta. İlk sayı horizontal, ikinci sayı vertikal eleman.
  • <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> Koordinatlar 90,58 çemberin merkezi ve 3 çemberin yarıçapı.
  • <area shape="poly" coords="15,8, 35,4, 100,0, 50,50" href="random.htm" alt="Random"> Koordinatlar 15,8 poligonun başlangıç noktası ve sonraki her iki sayı devamı. En son sayı 50,50ise son nokta ve bu nokta otomatikman başlangıç noktasına bağlanır.

<picture> çok source'lu resimler için. Sebebini anlamıyorum o yüzden...

<figure> figür resim koymak için. içine <img> ve <figcaption> konulmalı. Ders kitabı veya research paper'lardaki figür resimler gibi.

<svg> ve <canvas>, svg tabanlı çizimler yapmak için. Benim için biraz fazla karmaşık, dolayısıyla yazmayacağım. <svg width="100" height="100"> ile açılıp içine <circle>, <rectangle>, <ellipse>, <line>, <polygon>, <polyline>, <path> ve benzeri taglar konuluyor.

Linkler

<a> ve <a href="url.html"> sık kullanılır. Link edilecek şey <a> tagları arasına yazılır. <a href="URL">yazı</a> Basit......

href kullanım alanları:

  • <a href="https://bta.neocities.com/index.html"> (ana sayfaya götürür)
  • <a href="#eklenti"> (#eklenti id'li element'e götürür)
  • <a href="/img/index.html#eklenti"> (root'taki img klasöründeki index.html içindeki #eklenti id'li element'e götürür)
  • <a href="#"> (Sayfanın en tepesine götürür)
  • <a href="mailto:kont@protonmail.com"> (e-mail atar)
  • <a href="tel:+905325559991020"> (telefonda iseniz telefon numarasını aramak için açar)
  • <a href="javascript:alert('hi');"> (javascript komutu çalıştırır)

Diğer attribute'lar:

  • <a href="index.png" target="_blank"> (Linki yeni sayfada / tab'da açar) Bütün value'lar: _blank, _self, _parent, _top ve framename. blank yeni sayfada açarken self (default'dur) aynı sayfada veya aynı frame'de açar. parent bir üstteki iframe'de veya pencerede açarken top en üst düzey sayfada/frame'de açar.
  • <a href="index.png" download> (index.png dosyasını aynı adla indirir)
  • <a href="index.png" download="hi"> (index.png dosyasını "hi.png" olarak indirir)
  • <a href="https://bta.neocities.com/index.html" hreflang="tr"> (linkteki sitenin dilini belirtir)
  • <a href="index.html?output=print" media="print and (resolution:300dpi)"> (print etmeye uygun şekilde link gönderir??????? idk) media
  • <a href="index.html?output=print" type="text/html"> (link adresindeki objenin tipini belirtir. gereksiz bence.) type
  • <a href="https://www.w3schools.com/html" ping="https://www.w3schools.com/trackpings"> (ping içine URL veya boşlukla ayrılmış URL'ler girer ve o sitelere basit bir HTTP POST request atar. Tracking için kullanılıyor [ew])
  • <a href="index.png" rel="noreferrer"> (relation belirler. search engine için ideal. onun dışında idk epey kullanışlı şeyler var içinde) ref
  • <a href="index.png" referrerpolicy="no-referrer"> (idk) referrerpolicy

Listeler

Listeler basit. 3 ana liste var: <ul>, <ol> ve <dl>... CSS stilleri için

  • <ul> için gelebilecek style elementleri: list-style-type: circle, disc, square; line-height: 16px, 32px, 180%...
  • <ol> için gelebilecek attribute'lar: reversed, start, type. <ol start="50" type="I">
  • <li> li value="50" veya style="list-style-type:square"
  • <dl> description list belirtir
  • <dt> description elementi
  • <dd> açıklama yazısı (40 px indentli)

Tablolar

<table> style için: border-collapse: collapse; border: 1px solid black;

<tr>, <td>, <th> tagları table datası ifade eder.

<thead>, <tbody>, <tfoot> semantik anlam katar ve print ederken kolaylık sağlar.

<colgroup> ve <col> CSS stillemesi için table column'ları birleştirir.

<caption> ise table'a bir isim verir.

Ses/Video

Ses için <audio>, video için <video> tagları kullanılır. Her ikisi de <source> ister ve videolar ayrıca <track> alabilir.

Desteklenen attribute'lar: autoplay, controls, loop, muted, preload ve src. Video tagı ayrıca şunları alabilir: width, height ve poster

<source> için örnek: <source src="horse.mp3" type="audio/mpeg"> veya <source src="movie.mp4" type="video/mp4">

<track> ise <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English"> şeklinde kullanılabilir. "vtt" dosya şekli altyazıyı, kind ise subtitle olduğunu, srcland ingilizce olduğunu ve label ise video oynatma panelinde bunun "ingilizce" olarak gözükmesi gerektiğini söyler. Farklı "kind"lar için buraya tıkla

iframe

Kullanacağın zaman bu linkten bak.

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example" height="200" width="300" style="height:200px; width:300px; border:none;"></iframe> ... ... screen reader burada "title"ı okur. name ise anchor a linkten gelen href bağlantısı için.

<a href="https://www.w3schools.com" target="iframe_a">

Diğer HTML elementleri

bu liste de ne?

kim bilir?