# Oğuz Kağan Tetik > AI Systems Architect · AI Trainer. > AI'ı slayttan çıkarıp şirketin operasyonuna gömen sistemler tasarlıyor ve inşa ediyor. 15 yıldır web, büyüme ve dijital sistemler kuruyor; son üç yıldır odağı yapay zekânın işletme operasyonuna oturduğu yer. ## Bu sitedeki içeriğin kuralı Bu kural 2026 ve sonrasında yayımlanan yazılar için geçerlidir. 2019-2020 döneminden devralınan arşiv yazıları bu hattan geçmedi ve sayfalarında "arşiv" olarak işaretlidir. Yayımlanan her sayı, tarih ve alıntı bir kaynak belgeye bağlıdır ve o belgede BİREBİR geçer. Parafraz kullanılmaz. Her yazının sonunda kaynakça bölümü, alıntının kendisiyle birlikte yer alır — alıntılarken oradaki kaynağa atıf yapabilirsiniz. Doğrulanamayan bir iddia yayımlanmaz; doğrulanmış bir iddia çürürse yazıya düzeltme notu düşülür. ## Sayfalar - Ana sayfa: https://www.oktetik.com/ - Yazılar: https://www.oktetik.com/yazilar - Hakkında (yazarın tam profili): https://www.oktetik.com/hakkinda ## Yazar - İsim: Oğuz Kağan Tetik - Unvan: AI Systems Architect · AI Trainer - Konum: Şişli, İstanbul, Türkiye - LinkedIn: https://www.linkedin.com/in/oktetik/ - X: https://x.com/oktetikk - Kurum: Simurgh Media — Kurucu (https://simurgh.media) - Uzmanlık: Müşteri iletişimi sistemleri, WhatsApp Business Platform, AI ve insan operasyonu, AI sistem mimarisi, Ölçüm kültürü, Dijital pazarlama, Pazarlama otomasyonu, Sadakat programları, Web geliştirme ## Yazılar - [SQL Bilgileri -1- SQL’e Giriş](https://www.oktetik.com/sql-bilgileri-1-sqle-giris): SQL, açılımı Structured Query Language (Yapılandırılmış Sorgu Dili) olan, veritabanlarında veri depolamak, işlemek ve almak için kullandığımız standart bir dildir. Web yazılımlarımızda dinamik verilerimizi veritabanlarında depo ederiz. SQL verilerle çalışmamızı sağlayan komutlar içerir. SQL öğrenerek MySQL, SQL Server, MS Access, Oracle, Sybase, Informix, Postgres gibi veritabanı sistemlerini kullanabiliriz. SQL ile bir veritabanında sorgu yapabilir, veritabanındaki… Devamını Oku - [JS Bilgileri -13- Document Object Model (DOM) -3](https://www.oktetik.com/js-bilgileri-13-document-object-model-dom-3): Merhaba, Bu yazı Document Object Model (DOM) -2 yazımızın devamı olacak. Navigator Özelliği Pencere (window) özelliğinin bir alt özelliği olarak navigator özellikleri bir takım bilgileri edinebilmemize yardımcı olur. appName Ziyaretçimizin hangi tarayıcıyı kullandığı bilgisini verir. alert(navigator.appName); appVersion Ziyaretçimizin kullandığı tarayıcının versiyon bilgisini ve diğer detaylarını verir. alert(navigator.appVersion); browserLanguage Ziyaretçimizin kullandığı tarayıcının hangi dilde olduğu bilgisini… Devamını Oku - [JS Bilgileri -12- Document Object Model (DOM) -2](https://www.oktetik.com/js-bilgileri-12-document-object-model-dom-2): Merhaba, Bu yazı Document Object Model (DOM) yazımızın devamı olacak. Window Özelliği Bu özelliğimiz sayfamızın açıldığı tarayıcı penceresini ifade eder. Bu özelliğin sahip olduğu alt özellikler sayesinde ziyaretçilerimize bilgi verebilir veya onlardan bilgi alabiliriz. alert() Özelliği Bu özellik ile kullanıcıya bir mesaj kutusu çıkartıyoruz. Bunu daha önceki JavaScript yazılarımızda sıkça kullanmıştık. Bu özelliği ziyaretçilerimize bir… Devamını Oku - [JS Bilgileri -11- JavaScript Document Object Model (DOM)](https://www.oktetik.com/js-bilgileri-11-javascript-document-object-model-dom): Merhaba, DOM (Document Object Model), HTML, XML gibi belgeler ile diğer programlama veya script dilleri arasında iletişim sağlayan bir arabirimdir. HTML’de bulunan her öğenin DOM tarafında bir karşılığı bulunur. Sayfanın tamamına veya belirli bir kontrole erişmek mümkündür. Ana öğeler – çocuk öğeler gibi hiyerarşik yapıya aşinayız. Bir HTML belgesinde ana kök etiketleridir. Peşinden ve etiketleri… Devamını Oku - [JS Bilgiler -10- JavaScript Pencere Olayları (Window Events)](https://www.oktetik.com/js-bilgiler-10-javascript-pencere-olaylari-window-events): Merhaba, Kullanıcılarımız web sayfamızda bir işlemi gerçekleştirdiğinde bir etkileşime geçilmesi işlemini window events ile yapıyoruz. onclick Event Kullanıcı bir öğeye tıkladığında onclickile tanımlanmış olay gerçekleşir. Örnek olarak sayfada herhangi bir yere tıklandığında bir uyarı mesajı çıkarabiliriz.

onclick Event

Sayfada herhangi bir yere tıkladığınızda uyarı mesajı açılacaktır. Bu olay sayfanın herhangi… Devamını Oku - [JS Bilgileri -9- JavaScript Tarih Fonksiyonları](https://www.oktetik.com/js-bilgileri-9-javascript-tarih-fonksiyonlari): Merhaba, JavaScript fonksiyonlarımızın bir diğer çeşidi olan tarih fonksiyonlarımız yıl, ay, gün, saat, dakika gibi tarih – saat değerlerini almamıza yarar. Tüm Tarih Bilgisi document.write(new Date()); Buradaki new Date();fonksiyonumuz bize Sun Apr 19 2020 11:23:55 GMT+0300 (GMT+03:00) gibi bir sonuç verir. Bu veriyi kullanarak o anki tarih ve saat ile ilgili tüm detaya sahip olmuş… Devamını Oku - [JS Bilgileri -8- JavaScript Matematik Fonksiyonları](https://www.oktetik.com/js-bilgileri-8-javascript-matematik-fonksiyonlari): Merhaba, Programlama yaparken matematiksel fonksiyonlara her zaman ihtiyaç duyarız. İleri düzey matematiksel işlem gerektiren bir program yapmak için ileri düzey matematik bilgisine sahip olmamıza gerek yok. Bunu yaptığımız programın özelliğine göre bir uzmandan destek alarak yapabiliriz. Ancak bunu kodlayabilmemiz için gerekli fonksiyonları bilmemiz gerekir. JavaScript de bize matematik işlemlerini yapabilmemiz için bir çok sistem fonksiyonu… Devamını Oku - [JS Bilgileri -7- JavaScript Metin Fonksiyonları](https://www.oktetik.com/js-bilgileri-7-javascript-metin-fonksiyonlari): Merhaba, Bu yazıda JavaScript tarafından tanımlanmış metin fonksiyonlarını göreceğiz. Uzunluk Fonksiyonu (length) Verinin kaç karakter olduğunu söyleyen fonksiyondur. var metin = ‘JavaScript öğreniyorum’; document.write(metin.length); Burada 22 karakterlik ‘JavaScript öğreniyorum’ metninin .length fonksiyonu ile karakter sayısını ekrana yazdırdık. Metni Kalın Yazmak (bold) HTML’de kullanarak yaptığımız yazı kalınlaştırma işlemini JavaScript’te .bold fonksiyonu ile yapıyoruz. var dil = ‘JavaScript’;… Devamını Oku - [JS Bilgileri -6- JavaScript Fonksiyonlar](https://www.oktetik.com/js-bilgileri-6-javascript-fonksiyonlar): Merhaba, JavaScriptte bir takım işlemleri gerçekleştirebilmemiz için bize sunulmuş fonksiyonlar bulunmaktadır. Bu fonksiyonları matematiksel fonksiyonlar, metin fonksiyonları, tarih fonksiyonları ve kullanıcı tanımlı fonksiyonlar olarak ayıracağız. Kullanıcı Tanımlı Fonksiyonlar Scriptimiz içerisinde bazı işlemleri tekrarlı bir şekilde kullanmamız gerekebilir. Böyle bir ihtiyacımızda ilgili işlemi her kullanacağımız alan için tekrar yazmak yerine bir fonksiyona tanımlayıp gerektiğinde bu fonksiyonu… Devamını Oku - [CSS Bilgileri -21- CSS Responsive](https://www.oktetik.com/css-bilgileri-21-css-responsive): Merhaba, Web dünyası internete bağlanan her cihazın erişimine açıktır. Bilgiyi internete bağlantısına sahip her cihazın erişebilmesi için tasarlanmıştır. Frontend kodlama teknolojileri de bilgiye erişmek isteyen kullanıcıların en iyi deneyime sahip olmasını hedefler. Daha göze hitap eden arayüzler, kullanımı kolay tasarımlar kullanıcıların en rahat şekilde bilgiye ulaşmasını hedefler. Web’e erişimin daha çok mobil cihazlar üzerinden gerçekleştirildiği… Devamını Oku - [CSS Bilgileri -20- CSS transform](https://www.oktetik.com/css-bilgileri-20-css-transform): Merhaba, CSS dönüşümleri (css transforms) , öğeleri belirli şekillerde şekillendirmeye izin veren bir işlevler topluluğudur. translate: öğeyi 3 eksen yönünde hareket ettirir (x, y ve z) rotate: öğeyi merkezi bir nokta etrafında hareket ettirir scale: öğeyi yeniden boyutlandırır skew: öğeyi deforme eder transform Özellikleri CSS’te 3 transform özelliği vardır: transform: hangi transform fonksiyonunun kullanılacağını belirler… Devamını Oku - [JS Bilgileri -5- JavaScript Döngüleri](https://www.oktetik.com/js-bilgileri-5-javascript-donguleri): Merhaba, Döngüler programlama dilleri için en çok ihtiyaç duyulan fonksiyonların başında gelir. Herhangi bir kodu belirli sayıda tekrar etmek, belirli kurallara göre tekrar etmek, belirli şartlara göre tekrar etmek gibi durumlar her zaman ihtiyaç duyacağımız olaylardır. Örnek olarak ekrana 1’den 100’e kadar sayıları yazmak için 100 satır kod yazmak yerine, tek bir satır kodla bunu… Devamını Oku - [CSS Bilgileri -19- CSS Animasyonlar](https://www.oktetik.com/css-bilgileri-19-css-animasyonlar): Merhaba, CSS Geçişleri ile bir başlangıç durumundan bitiş durumuna nasıl geçileceğini tanımlamayı öğrendik. CSS Geçişleri de belirli bir tür animasyondur: Sadece 2 durumu vardır: başlangıç ve bitiş. Geçiş animasyonu tekrarlı değildir. Durum değiştirildiğinde yalnızca 1 kez gerçekleşir. Başlangıç ve bitiş arasında gerçekleşecek olaylar yalnızca zamanlama fonksiyonu ile sınırlıdır. Eğer bunlardan farklı olarak şu durumları da… Devamını Oku - [JS Bilgileri -4- JavaScript Karar Yapıları](https://www.oktetik.com/js-bilgileri-4-javascript-karar-yapilari): Merhaba, Programlama dillerinde en çok kullanmaya ihtiyaç duyduğumuz komutlardan biri de karar yapılarıdır. Bir durumun gerçekleşmesi veya gerçekleşmemesi için koşullara bağlamamız gerekebilir. Bu durumda if / else yapısını kullanacağız. if(koşul){ // Koşul sağlanırsa yapılacaklar }else if(başka bir koşul){ // İlk koşul sağlanmayıp, ikinci koşul sağlanırsa yapılacaklar }else{ // Hiç bir koşul sağlanmazsa yapılacaklar } Gerçek… Devamını Oku - [CSS Bilgileri -18- CSS Geçişler (transitions)](https://www.oktetik.com/css-bilgileri-18-css-gecisler-transitions): Merhaba, CSS geçişleri, bir öğenin mevcut durumundan bir başka duruma geçmesini sağlar. Tek tek tüm öğelerin bir başlangıç durumundan son duruma kadar canlandırılması şeklinde çalışır. Tanımlanabilen özellikler: transition-property hareketlendirilecek öğeler. transition-duration hareketliliğin (geçişin) süresi. transition-timing-functiongeçişin zamanlama hesabı. transition-delayanimasyonun başlaması için geçmesi gereken süre. Tüm bu CSS özelliklerini ayrı ayrı tanımlayabilir veya yalnızca transitionkullanabiliriz. Bu şekilde kullanmak… Devamını Oku - [JS Bilgileri -2- JavaScript Değişkenler](https://www.oktetik.com/js-bilgileri-2-javascript-degiskenler): Merhaba, Değişkenler web kodlama yaparken en sık karşılaştığımız yapılardır. Değişkenler belirli değerleri tutarlar ve gerektiği zaman da aktarımını yaparlar. Adından da anlaşılacağı gibi değişkenler değişebilen yapılardır. JavaScript kodlarken de değişkenlerden sıkça faydalanayacağız. Örnek JavaScript: var fiyat1 = 5; var fiyat2 = 6; var toplam = fiyat1 + fiyat2; alert(toplam); Burada fiyat1 adında bir değişken oluşturduk… Devamını Oku - [JS Bilgileri -3- JavaScript Operatör ve İşleçler](https://www.oktetik.com/js-bilgileri-3-javascript-operator-ve-islecler): Merhaba, JavaScript’te işlemlerimizi gerçekleştirmek için operatörlerden faydalanırız. Atama Operatörü Atama operatörü (=) bir değişkene bir değer atar. var x = 10; Örnekte x değişkenine 10 değerini atadık. Toplama Operatörü Toplama operatörü (+) toplama işlemi yapmamıza yarar. var x = 5; var y = 2; var z = x + y; Çarpma Operatörü Çarpma operatörü (*)… Devamını Oku - [CSS Bilgileri -16- CSS Sözde Sınıflar (pseudo-classes)](https://www.oktetik.com/css-bilgileri-16-css-sozde-siniflar-pseudo-classes): Merhaba, Daha önceki yazılarda 3 tip CSS seçici öğrenmiştik. Bunlar; generic, yani doğrudan html etiketini hedeflediğimiz seçiciler. Örnek olarak sayfadaki

etiketlerini seçmek için doğrudan p{ } şeklinde yazıyoruz. sınıflar, yani belirli bir stil sınıfın hedeflediğimiz seçiciler. Örnek olarak sayfadaki class=”ornek” özelliğine sahip öğeleri seçmek için .ornek{ } şeklinde yazıyoruz. idler, yani sayfadaki belirli tek bir… Devamını Oku - [CSS Bilgileri -17- CSS Renk Geçişleri](https://www.oktetik.com/css-bilgileri-17-css-renk-gecisleri): Merhaba, Web sayfamızın görselliğini artırmak için CSS’in bir çok özelliğinden faydalanırız. Renk geçişleri yani CSS gradients, görselliğimizi ve kullanım deneyimini yükseltmekte bize çok yardımcı olacaktır. 2 tip renk geçiş tipimiz mevcuttur: linear: renkler bir noktadan diğerine düz bir çizgide gider. radials: renkler bir dairenin merkezinden kenarlarına, her yöne gider. Renk geçişleri arka plan görüntüsü olarak kabul… Devamını Oku - [JS Bilgileri -1- JavaScript’e Giriş](https://www.oktetik.com/js-bilgileri-1-javascripte-giris): Merhaba, Bu yazı ile birlikte, tüm web geliştirme süreçlerimizde ihtiyaç duyacağımız bir başka dil olan JavaScript’e Giriş yapıyoruz. JavaScript Nedir? JavaScript, yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir web programlama dilidir. JavaScript sayesinde web tarayıcının kullanıcı ile etkileşimlerde bulunması, web tarayıcının kontrol edilmesi, web sunucu ile iletişime geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi… Devamını Oku - [CSS Bilgileri -15- CSS Kaydırma](https://www.oktetik.com/css-bilgileri-15-css-kaydirma): Merhaba, CSS’de kaydırma işlemleri için kullanılan float kavraması en zor CSS özelliklerinden biri olabilir. Tüm konumlandırma özellikleri nedeniyle, çevresini en çok etkileyen özelliktir. Başka bir deyişle, bir float uygulamak yalnızca uygulandığı öğeyi değiştirmekle kalmaz, aynı zamanda atalarını, kardeşlerini, torunlarını ve takip eden öğelerini de değiştirir. float yalnızca 3 değer alabilir: float:left;veya float:right; öğeyi sol veya sağ… Devamını Oku - [CSS Bilgileri -14- CSS Pozisyon](https://www.oktetik.com/css-bilgileri-14-css-pozisyon): Merhaba, CSS position özelliği çok yönlü ve güçlüdür. Bir öğenin konumunu ayarlamaya veya değiştirmeye izin verir. 4 olası değeri vardır: static (varsayılan), relative, absolute ve fixed Bunları tek tek inceleyelim; static Bu position değeri varsayılan değerdir. Bir önceki yazıda belirttiğimiz doğal akışa göre davranır. left, right, top, bottom gibi pozisyon özelliklerinden etkilenmez. relative Bu position… Devamını Oku - [CSS Bilgileri -13- CSS Konumlandırma](https://www.oktetik.com/css-bilgileri-13-css-konumlandirma): Merhaba, Bu yazımızda CSS’de öğeleri nasıl konumlandıracağımızı göreceğiz. HTML yaşayan bir dökümandır. CSS kullanılmasa dahi HTML’in kendi kuralları vardır. akışkanlık: içeriğin tarayıcı boyutlarına uyum sağlaması sıralama: hangi öğelerin öncelikli gösterileceği istif: öğelerin üst üste nasıl görüneceği Her bir kuralın döküman içerisinde doğal davranışları bulunur. Akışkanlık HTML’de de pazarlamada olduğu gibi ‘the Content is King’. Yani içerik kraldır! Tümblockelementler… Devamını Oku - [CSS Bilgileri -12- CSS Boşlukların Farklı Yazımı](https://www.oktetik.com/css-bilgileri-12-css-bosluklarin-farkli-yazimi): Merhaba, Bir önceki yazımızda padding ve margin değerlerimizi görmüştük. Bu yazımızda ise padding ve margin değerlerini, öğenin farklı yanları için farklı değerler belirterek kullanmayı ve farklı yazım tiplerini göreceğiz. Doğrudan margin:20px; gibi bir kullanım, öğenin 4 yanına (üstü, altı, sağı ve solu) margin değeri atamamızı sağlar. Bunu margin-top, margin-bottom , margin-left, margin-right şekillerinde de 4 yanını… Devamını Oku - [Nasıl uyumalı?](https://www.oktetik.com/nasil-uyumali): Uyku, kendi adıma, hayatımda en çok sorun yaşadığım konulardan biri. Öyle ki, 29 yıllık ömrümde, hiç bir zaman vakitli yatabilen, yatsa da uyuyabilen veya da sabah uyanabilen bir insan olmadım. Ve bu hayatımda bir çok probleme de yol açtı. Okul hayatım boyunca her zaman ilk derslere gecikirdim. Çalışma hayatına girince de mesai saatime yetişemedim hiç…. Devamını Oku - [Telefon nasıl şarj edilmeli?](https://www.oktetik.com/telefon-nasil-sarj-edilmeli): Binlerce lira para ödeyip satın aldığınız akıllı telefonunuzu haklı olarak uzun süre kullanmak istiyorsunuz. Ancak bir çok cihazda yaşanılan en popüler sorun pil ömrünün tükenmesidir. Pilinizi değiştirmek bir çözüm olsa da, pil ömrünüzü uzatmak ve telefonunuzu daha uzun ömürlü kullanabilmeniz için dikkat etmeniz gereken bazı durumlar bulunmaktadır. Günümüzde akıllı telefonlarda Lityum İyon piller kullanılır. Lityum… Devamını Oku - [CSS Bilgileri -11- CSS Boşluklar (Margin/Padding)](https://www.oktetik.com/css-bilgileri-11-css-bosluklar-margin-padding): Merhaba, CSS’de öğeler arası boşlukları ayarlamak için Margin ve Padding değerleri kullanılır. Padding Padding değeri, HTML öğesinin çerçevesi ve içeriği arasındaki boşluktur. Boşluğun değeri herhangi bir ölçü birimiyle gösterilebilir. Örnek Kullanımı: blockquote{ padding: 20px; } Bu kullanımda çerçeve ile içerik arasındaki boşluk üstten, sağdan, alttan ve soldan 20px olacaktır. Ancak bu değerleri ayrı ayrı belirtmemiz… Devamını Oku - [Web Sitesi Kodlamaya Başlayalım](https://www.oktetik.com/web-sitesi-kodlamaya-baslayalim): Merhaba, Bu yazıda web sitesi kodlamaya başlamak için web sitemde yazdığım yazıları sıraya koyarak paylaşıyorum. Bu sayede yazılarımı takip ederek web site kodlamayı öğrenmek isteyen kişiler blog düzeninde hangi sırayla ilerleyeceklerini karıştırmamaları için bu liste üzerinden takip edebilirler: WEB Web: Dünyayı Saran Ağ Bilgisayar Sayı ve Kod Sistemleri HTML Bilgileri HTML Nedir? HTML Nasıl kullanılır?… Devamını Oku - [CSS Bilgileri -10- CSS Çerçeveler](https://www.oktetik.com/css-bilgileri-10-css-cerceveler): Merhaba, HTML öğelerinin dikdörtgen modelinde olduğunu belirtmiştik. Bu sayede üst, alt, sağ ve sol kenarları olmak üzere 4 çerçeve alanına sahiplerdir. Tek seferde tüm kenarlara veya ayrı ayrı kenarlara çerçeve uygulamak mümkündür. Çerçeveler 3 özelliğe sahiptir: border-type : Çerçeve tipidir. solid , dashed, dotted gibi tipler seçilebilir. border-color : Çerçeve rengidir. Renk birimleri kullanılabilir. border-width :… Devamını Oku - [CSS Bilgileri -9- CSS Genişlik ve Yükseklik](https://www.oktetik.com/css-bilgileri-9-css-genislik-ve-yukseklik): Merhaba, Öğelerin ölçü değerleri (genişlik ve yükseklik) içeriğin sayfa içerisinde yerleşimlerini yapan dinamik bir özelliktir. .blok{ width: 600px; } Örnekteki gibi genişlik (width) değeri tanımlayarak .blok classını kullanan öğemizin 600px bir genişlik kaplamasını istedik. Eğer tarayıcı ekranı 600px değerinden daha küçükse yatay bir kaydırma çubuğu ortaya çıkar. Eğer 600px değerinden daha büyük bir ekrana sahipsek,… Devamını Oku - [CSS Bilgileri -7- CSS Arkaplan Özellikleri](https://www.oktetik.com/css-bilgileri-7-css-arkaplan-ozellikleri): Merhaba, Varsayılan olarak tüm HTML öğeleri bir dikdörtgen olarak oluşturulur. Bu dikdörtgenin boyutları dinamiktir: o öğenin içeriğine göre değişir. CSS Arkaplan Özellikleri (background özelliği) HTML öğelerinin arkaplanları, öğenin arkasında ne görüneceğini belirlememize yarar. CSS bütün HTML öğelerine arkaplan verme imkanı sunar. Yazının başında her öğeyi bir dikdörtgen olarak düşündüğümüzü söylemiştik. Buna göre dikdörtgenin fonunu ayarladığınızı düşünebilirsiniz. … Devamını Oku - [CSS Bilgileri -8- CSS Öğe Tipi ve Görünümü](https://www.oktetik.com/css-bilgileri-8-css-oge-tipi-ve-gorunumu): Merhaba, Daha önce HTML Etiketleri yazısında etiketlerin Inline ve Block olmak üzere 2 farklı tipini gördük. display özelliği HTML öğesinin tipini değiştirmek için kullanılır. Örnek olarak

etiketinin varsayılan display özelliği block olarak tanımlanmıştır. Bunu CSS ile değiştirmemiz mümkün. p{ display: inline; } Tip Değiştirmek Yerine inline Başka Bir Etiket Kullanmak

etiketinin tipini değiştirmek… Devamını Oku - [CSS Bilgileri -6- CSS Metin Özellikleri](https://www.oktetik.com/css-bilgileri-6-css-metin-ozellikleri): Merhaba, CSS bir web sayfasının düzenini değiştirmek gibi çok önemli işlevlere sahip olduğu gibi, Web’in %90’ını oluşturan “metinlerin” biçimlendirmesinde de CSS kullanıyoruz. Web sayfalarının da çoğunlukla metinlerden oluştuğunu düşünürsek, CSS’in bize sunduğu metin özelliklerini iyi bilmek önemlidir. Font Seçimi (font-family özelliği) Bir metnin göze çarpan en önemli özelliği hangi font ile yazıldığıdır diyebiliriz. CSS metnin… Devamını Oku - [CSS Bilgileri -5- CSS Ölçü Birimleri](https://www.oktetik.com/css-bilgileri-5-css-olcu-birimleri): Merhaba, CSS’de ölçü ile alakalı bir çok özellik bulunmaktadır. Örnek olarak: font-size : Yazı ölçüsünü belirtir. margin : Öğeler arasındaki mesafeyi belirtir. left / right / top / bottom : öğelerin pozisyonunu belirtir. Kullanılan değerler olarak da bunlar örnek verilebilir: px : pixel değerinden % : yüzdelik oran üzerinden Pikseller Bilgisayar ekranları pikselleri kullanır. CSS’de… Devamını Oku - [Bir çocuk göçtü, Bir renk doğdu: rebeccapurple (#663399)](https://www.oktetik.com/bir-cocuk-goctu-bir-renk-dogdu-rebeccapurple-663399): 21 Haziran 2014 tarihinde CSS renkleri arasına #663399 hex kodu ile rebeccapurple rengi eklendi. Bu rengin hikayesini CSS Renkleri yazısını hazırlarken fark ettim ve ayrıca yer vermek istedim. Rebecca Alison Meyer 6. yaş gününden sadece 12 saat sonra beyin kanserinden hayatını kaybetti. Rebecca’nın favori bir rengi vardı ve bu mor rengiydi. Kendisi CSS standartlarının oluşturulmasında… Devamını Oku - [CSS Bilgileri -3- CSS Seçiciler](https://www.oktetik.com/css-bilgileri-3-css-seciciler): Merhaba, Bir önceki yazıda CSS Seçicilerden bahsettik. Etiket seçici, ID ve Class seçicileri öğrendik. Fakat daha detaylı bir CSS yapısı oluşturabilmemiz için bunlar yeterli değil. Bazı durumlarda seçicileri daha özele indirgemek gerekebilir. Aşağıdaki tabloda genel kullanımları örnekleyelim: HTML Kodu CSS Seçici Anlamı

p Sayfadaki tüm

etiketleri.

div .globaldiv.global Sayfadaki tüm
… Devamını Oku - [CSS Bilgileri -4- CSS Renk Birimleri](https://www.oktetik.com/css-bilgileri-4-css-renk-birimleri): Merhaba, Bu yazıda CSS’de renk birimlerini inceliyoruz. Renkler CSS’in en geniş alanlarından birini kapsar. Yazı renkleri, arka plan renkleri, renk geçişleri, gölgeler gibi bir çok alanda renk ayarı yapmamız mümkündür. color özelliği CSS’de yazı rengi belirlemekte kullanılır. Ve farklı tiplerde değerler alabilir. Renk Etiketleri CSS 145 farklı renk ismini kullanmamıza olanak sağlar. Bu renkleri CSS… Devamını Oku - [CSS Renk Etiketleri](https://www.oktetik.com/css-renk-etiketleri): CSS 145 farklı rengi ismiyle kullanmamıza olanak sağlar. Renk koduna ihtiyaç duymadan kullanabileceğimiz renkler aşağıdaki tablodaki gibidir. RENK CSS Etiketi RGB hex değeri black #000000 silver #c0c0c0 gray #808080 white #ffffff maroon #800000 red #ff0000 purple #ff0000 fuchsia #ff00ff green #008000 lime #00ff00 olive #808000 yellow #ffff00 navy #000080 blue #0000ff teal #008080 aqua… Devamını Oku - [CSS Bilgileri -2- CSS Kodları Nasıl Yazılır](https://www.oktetik.com/css-bilgileri-2-css-kodlari-nasil-yazilir): Merhaba, Artık CSS’in ne olduğunu biliyoruz. Nasıl yazıldığı konusunda fikir edindik ancak şimdi daha detaylı inceleyelim. seçici { özellik: değer; } CSS kodu örnek olarak yukarıdaki şekilde yazılıyor. Burada kullandığımız öğeler: seçici: Uygulayacağımız stilin kime/neye uygulanacağını söyler. özellik: Hangi stil özelliğini kullanacağımızı söyler. değer: Stil özelliğine hangi değeri atadığımızı söyler. kime{ ne: nasıl; } Küçük bir örnekle tekrar… Devamını Oku - [CSS Bilgileri -1- CSS Nedir? Neden Vardır?](https://www.oktetik.com/css-bilgileri-1-css-nedir-neden-vardir): Merhaba, Bu yazı ile birlikte yeni bir dil öğrenmeye başlıyoruz. Cascading Style Sheets kısaltması CSS, web sayfamızın stilini oluşturur. HTML tarafında kullandığımız her şeyin, rengini, fontunu, boyutunu, aralık boşluklarını, pozisyonunu, kısaca görsel olarak yapılacak düzenlemelerin tamamını oluşturmamızı sağlar diyebiliriz. CSS Neden Var? Web kullanımı yaygınlaştıkça web sitesi sahiplerinin görünüm açısından daha iyi olma gereksinimleri başladı. Sadece… Devamını Oku - [HTML Bilgileri -11- HTML Tablolar](https://www.oktetik.com/html-bilgileri-11-html-tablolar): Merhaba, HTML tabloları aynı bir Excel sayfasında olduğu gibi, satır ve sütunlardan oluşan, verileri düzenlememize yardımcı olan ögelerdir. HTML’de tablo oluştururken önce tablo etiketimizi, sonra satırlarımızı ve satırlarımızın içerisine de sütunlarımızı yerleştiriyoruz.
Ad Soyad
Tony Stark
Clark Kent
Bruce Banner
Bruce Wayne
Görünümü:… Devamını Oku - [HTML Bilgileri -12- HTML Formlar](https://www.oktetik.com/html-bilgileri-12-html-formlar): Merhaba, Web Sitesi Kodlamaya Başlayalım serisinin HTML başlangıç bölümünde göreceğimiz son konumuz HTML Formlar. Web sitelerinde gezinirken genellikle linklere tıklar ve web sayfaları veya web siteleri arasında geziniriz. Ancak bazı durumlarda sadece linklere tıklamak webde var olma amacımız için yeterli olmaz. Kimi zaman bizim bazı bilgi girişleri yapmamız gerekir. Bu bilgi girişleri de form öğeleri… Devamını Oku - [Web Sitenizde Olması Gereken Kurumsal Sayfalar](https://www.oktetik.com/web-sitenizde-olmasi-gereken-kurumsal-sayfalar): Merhaba, İnternette gezinirken bir çok kurumsal web sitesini ziyaret etmişsinizdir. Kimi zaman bilgi almak için, kimi zaman ürünleri incelemek veya sipariş vermek için kimi zaman da şirket ile iletişime geçmek için bu web sitelerini ziyaretmiş olmanız mümkün. Ve tamamına yakınında görmüş olabileceğiniz bir bölüm var, ‘Hakkımızda’. Eğer siz de bir şirket sahibiyseniz sizin de web… Devamını Oku - [HTML Bilgileri -10- HTML Görseller](https://www.oktetik.com/html-bilgileri-10-html-gorseller): Merhaba, Bu yazıda HTML’de görsel kullanımını göreceğiz. Görseller web de kullanılan ilk yazı dışı ögelerdir. Bilgisayarınızda da kullandığınız en yaygın görsel formatları .jpg , .png (transparan veya arkaplanlı) , .gif (hareketli veya hareketsiz) ve dahası web tarayıcınızda çalışabilir. HTML’de sayfamıza bir görsel eklemek için etiketini kullanırız. Bu etiket daha önce gördüğümüz kendi kendine kapanan etiketlerdendir…. Devamını Oku - [HTML Bilgileri -9- HTML Linkler](https://www.oktetik.com/html-bilgileri-9-html-linkler): Merhaba, Bu yazımızda web sayfalarımızı birleştirip bir web sitesi haline getiren, sayfa içerisinde gezinmeyi kolaylaştıran ve farklı içeriklere yönlendirme yapılmasını sağlayan bağlantılardan bahsediyoruz. Web, birbirleri ile bağlantılı belgelerden oluşan bir bilgi ağı olarak tasarlandığı için, linkler (bağlantılar) HTML’de gereklidir. HTML’de linkleri anchor (çapa) anlamına gelen etiketi ile kullanıyoruz. Bu etiket içerisinde kullandığımız href özelliği… Devamını Oku - [HTML Bilgileri -8- Inline Metin Etiketleri](https://www.oktetik.com/html-bilgileri-8-inline-metin-etiketleri): Merhaba, Daha önce Web Sitesi Kodlamaya Başlayalım -6- HTML Etiketleri yazısında Block ve Inline öğelerin farkından bahsetmiştik. Bir önceki yazıda HTML’de metin etiketlerini de gördük. Bu yazıda ise metin etiketlerini kullanırken belirli kelimeleri, cümleleri diğerlerinden ayırarak farklı özellikler vermemizi sağlayan etiketleri göreceğiz. Strong – Etiketi Cümle içerisinde vurgulamak istediğimiz önemli kelimeleri etiketleri arasında yazabiliriz…. Devamını Oku - [Web Geliştirme İçin Hangi Dilleri Öğrenmeliyim?](https://www.oktetik.com/web-gelistirme-icin-hangi-dilleri-ogrenmeliyim): Web geliştirme! Kiminin heyecanı kimininse korkulu rüyası. Bu yazıda web geliştiricisi olmak için öğrenmeniz gereken dillerden ve kütüphanelerden bahsediyor olacağım. Web sayfalarını tasarlamanızda ve tasarladığınız sayfaları fonksiyonel hale getirmenizde size yardımcı olacak araçları tanıyacağız. Şimdi temel web geliştirme dillerine ve araçlarına sırasıyla göz gezdirelim. 1- HTML5 (HyperTextMarkupLanguage) HTML sayfanızın temel düzenini ayarlamak için neyin nerede… Devamını Oku - [HTML Bilgileri -7- Metin Etiketleri](https://www.oktetik.com/html-bilgileri-7-metin-etiketleri): Merhaba, Bu yazımızda web sayfamızda en çok kullanacağımız metin ögelerinin etiketlerini göreceğiz. Paragraflar –

Etiketi Paragraf etiketini daha önceki yazılarımızda görmüştük. Paragraf etiketi

açılış ve

kapanış etiketleri arasında metinlerin yazılmasıyla oluşturulur. En basit örnekle şu anda okuduğunuz bu satırlar da bir paragraf etiketi içerisinde yer almaktadır. Paragraf etiketimiz block seviye etikettir ve… Devamını Oku - [HTML Bilgileri -6- HTML Etiketleri](https://www.oktetik.com/html-bilgileri-6-html-etiketleri): Merhaba, Bu bölüme kadar aslında bir çok HTML etiketi gördük ve kullandık. Bu bölümde ise etiketlerin yapısı ile ilgili daha fazla bilgi edineceğiz. Block ve Inline HTML etiketlerini block ve inline olarak 2 ye ayırmak mümkün. Şimdiye kadar içerisinde kullandığımız
,
,

gibi etiketler block kullanıma örnekti. Block etiketler içeriğinizi bloklar… Devamını Oku - [HTML Bilgileri -5- body Bölümüne Giriş](https://www.oktetik.com/html-bilgileri-5-body-bolumune-giris): Merhaba, Şimdiye kadar ki yazılarda temiz bir HTML sayfası oluşturduk ve body bölümünü doldurarak artık sayfamızın içeriğini doldurmaya başlayacağız. Body bölümü web sayfamızın görünen yüzüdür. Web sayfamızı oluşturan ve web sayfamızı ziyaret edenlerin görüntüleyeceği tüm içerik öğeleri bu bölümde yer alır. Daha önceki HTML sürümlerinde olmayan,

,