Warning: Cannot modify header information - headers already sent by (output started at /home/phpsitesi/public_html/wp-config.php:1) in /home/phpsitesi/public_html/wp-includes/feed-rss2.php on line 8
Php Sitesi https://phpsitesi.com Php Hakkında Herşey Wed, 26 Jan 2022 11:09:34 +0000 tr hourly 1 https://wordpress.org/?v=5.9 https://phpsitesi.com/wp-content/uploads/2020/10/cropped-518324-32x32.png Php Sitesi https://phpsitesi.com 32 32 JQuery Seçiciler (Selectors) https://phpsitesi.com/jquery-seciciler-selectors/ https://phpsitesi.com/jquery-seciciler-selectors/#respond Wed, 26 Jan 2022 11:09:34 +0000 https://phpsitesi.com/jquery-seciciler-selectors/ JQuery Seçiciler (Selectors) jQuery Seçiciler, HTML öğelerini seçmek ve işlemek için kullanılır. Seçiciler jQuery kitaplığının çok önemli bir parçasıdır. jQuery seçicilerle, bir DOM’den kimliklerine, sınıflarına, özelliklerine, türlerine ve çok daha fazlasına göre HTML öğelerini bulabilir veya seçebilirsiniz. Basit bir deyişle, jQuery kullanarak bir veya daha fazla HTML öğesini seçmek için seçicilerin kullanıldığını ve öğe seçildikten …

JQuery Seçiciler (Selectors) yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>

JQuery Seçiciler (Selectors)


jQuery Seçiciler, HTML öğelerini seçmek ve işlemek için kullanılır. Seçiciler jQuery kitaplığının çok önemli bir parçasıdır.

jQuery seçicilerle, bir DOM’den kimliklerine, sınıflarına, özelliklerine, türlerine ve çok daha fazlasına göre HTML öğelerini bulabilir veya seçebilirsiniz.

Basit bir deyişle, jQuery kullanarak bir veya daha fazla HTML öğesini seçmek için seçicilerin kullanıldığını ve öğe seçildikten sonra bunun üzerinde çeşitli işlemler gerçekleştirebileceğinizi söyleyebilirsiniz.

Tüm jQuery seçicileri, bir $ işareti ve parantez ile başlar; $().

Her jQuery seçicisi $() ile başlar. Bu işaret fabrika işlevi olarak bilinir. Belirli bir belgede bir öğe seçerken üç temel yapı taşını kullanır.

No. Selector Açıklama
1) Tag Name: DOM’da bulunan bir etiket adını temsil eder.
Örneğin: $(‘p’) belgedeki tüm paragrafları ‘p’ seçer.
2) Tag ID: DOM’da belirli bir kimliğe sahip mevcut bir etiketi temsil eder. Örneğin: $(‘#real-id’) belgede gerçek kimliği olan belirli bir öğeyi seçer.
3) Tag Class: DOM’da belirli bir sınıfla kullanılabilen bir etiketi temsil eder.
Örneğin: $(‘gerçek-sınıf’), belgedeki gerçek sınıf sınıfına sahip tüm öğeleri seçer.

Etiket seçicinin kullanımını görmek için basit bir örnek alalım. Bu, bir etiket adına sahip (p etiketi) tüm öğeleri seçer ve arka plan rengi ‘pembe’ olarak ayarlanmıştır.

<!DOCTYPE html>  
<html>  
<head>  
 <title>First jQuery Example</title>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(document).ready(function() {  
 $("p").css("background-color", "pink");  
 });  
 </script>  
 </head>  
<body>  
<p>Bu birinci paragraftır.</p>  
<p>Bu ikinci paragraftır.</p>  
<p>Bu üçüncü paragraftır.</p>   
</body>  
</html>

Ekran Çıktısı:

Seçiciler Nasıl Kullanılır?

jQuery seçicileri, tek veya diğer seçicilerin kombinasyonu ile kullanılabilir. jQuery kullanırken her adımda gereklidirler. HTML belgenizden tam olarak istediğiniz öğeyi seçmek için kullanılırlar.

No. Selector Açıklama
1) Name: Verilen eleman adıyla eşleşen tüm elemanları seçer.
2) #ID: Verilen id (kimlikle) eşleşen tek bir öğe seçer.
3) .Class: Verilen sınıfla eşleşen tüm öğeleri seçer.
4) Universal(*) Bir DOM’de bulunan tüm öğeleri seçer.
5) Birden Çok Öğe A,B,C Belirtilen tüm seçiciler A, B ve C’nin birleşik sonuçlarını seçer.

Farklı jQuery Seçiciler

Selector Örnek Açıklama
* $(“*”) Tüm elemanları seçmek için kullanılır.
#id $(“#firstname”) id=’firstname’ olan öğeyi seçecektir.
.class $(“.primary”) class=’primary’ olan tüm öğeleri seçecektir.
class,.class $(“.primary,.secondary”) ‘primary’ veya ‘secondary’ sınıfına sahip tüm öğeleri seçecektir.
element $(“p”) Tüm p öğelerini seçecektir.
el1,el2,el3 $(“h1,div,p”) Tüm h1, div ve p öğelerini seçecektir.
:first $(“p:first”) Bu, ilk p öğesini seçecektir
:last $(“p:last”) Bu, son p öğesini seçecektir
:even $(“tr:even”) Bu, tüm çift tr öğelerini seçecektir
:odd $(“tr:odd”) Bu, tüm tek tr öğelerini seçecektir
:first-child $(“p:first-child”) Ebeveynlerinin ilk çocuğu olan tüm p öğelerini seçecektir.
:first-of-type $(“p:first-of-type”) Ebeveynlerinin ilk p öğesi olan tüm p öğelerini seçecektir.
:last-child $(“p:last-child”) Ebeveynlerinin son çocuğu olan tüm p öğelerini seçecektir.
:last-of-type $(“p:last-of-type”) Ebeveynlerinin son p öğesi olan tüm p öğelerini seçecektir.
:nth-child(n) $(“p:nth-child(2)”) Bu, ebeveynlerinin 2. çocuğu olan tüm p öğelerini seçecektir.
:nth-last-child(n) $(“p:nth-last-child(2)”) Bu, son çocuktan başlayarak ebeveyninin 2. çocuğu olan tüm p öğelerini seçecektir.
:nth-of-type(n) $(“p:nth-of-type(2)”) Ebeveynlerinin 2. p öğesi olan tüm p öğelerini seçecektir.
:nth-last-of-type(n) $(“p:nth-last-of-type(2)”) Bu, son alt öğeden başlayarak ebeveynlerinin 2. p öğesi olan tüm p öğelerini seçecektir.
:only-child $(“p:only-child”) Ebeveynlerinin tek çocuğu olan tüm p öğelerini seçecektir.
:only-of-type $(“p:only-of-type”) Kendi türünde ebeveyninin tek çocuğu olan tüm p öğelerini seçecektir.
parent > child $(“div > p”) Bir div öğesinin doğrudan çocuğu olan tüm p öğelerini seçecektir.
parent torun $(“div p”) Bir div öğesinin soyundan gelen tüm p öğelerini seçecektir.
element + sonraki $(“div + p”) Her div öğesinin yanındaki p öğesini seçer.
element ~ kardeş $(“div ~ p”) Bir div öğesinin kardeşleri olan tüm p öğelerini seçer
:eq(index) $(“ul li:eq(3)”) Listedeki dördüncü öğeyi seçecektir (dizin 0’dan başlar)
:gt(no) $(“ul li:gt(3)”) grea3’ten bir dizine sahip liste öğelerini seçin, 3’ten daha büyük bir dizine sahip öğelerini seçin
:lt(no) $(“ul li:lt(3)”) 3’ten küçük bir dizine sahip liste öğelerini seçin
:not(selector) $(“input:not(:empty)”) Boş olmayan tüm giriş öğelerini seçin
:header $(“:header”) Tüm başlık öğelerini seçin h1, h2 …
:animated $(“:animated”) Tüm animasyonlu öğeleri seçin
:focus $(“:focus”) Şu anda odaklanmış olan öğeyi seçin
:contains(text) $(“:contains(‘Hello’)”) ‘Hello’ metnini içeren tüm öğeleri seçin
:has(selector) $(“div:has(p)”) p öğesi olan tüm div öğelerini seçin
:empty $(“:empty”) Boş olan tüm öğeleri seçin
:parent $(“:parent”) Başka bir öğenin ebeveyni olan tüm öğeleri seçin
:hidden $(“p:hidden”) Tüm gizli p öğelerini seç
:visible $(“table:visible”) Tüm görünür tabloları seçin
:root $(“:root”) Belgenin kök öğesini seçecektir
:lang(language) $(“p:lang(de)”) ‘de’ ile başlayan bir lang öznitelik değerine sahip tüm p öğelerini seçin
[attribute] $(“[href]”) Bir href özniteliği olan tüm öğeleri seçin
[attribute=value] $(“[href=’default.htm’]”) ‘default.htm’ değerine eşit bir href öznitelik değerine sahip tüm öğeleri seçin
[attribute!=value] $(“[href!=’default.htm’]”) ‘default.htm’ değerine eşit olmayan bir href öznitelik değerine sahip tüm öğeleri seçecektir.
[attribute$=value] $(“[href$=’.jpg’]”) ‘.jpg’ ile biten bir href öznitelik değerine sahip tüm öğeleri seçecektir.
[attribute|=value] $(“[title|=’Yarın’]”) Başlık öznitelik değeri ‘Yarın’a eşit olan veya ‘Yarın’ ile başlayan ve ardından bir tire gelen tüm öğeleri seçin
[attribute^=value] $(“[title^=’Tom’]”) ‘Tom’ ile başlayan bir başlık özelliği değerine sahip tüm öğeleri seçin
[attribute~=value] $(“[title~=’merhaba’]”) Belirli ‘merhaba’ kelimesini içeren bir başlık öznitelik değerine sahip tüm öğeleri seçin
[attribute*=value] $(“[title*=’hello’]”) ‘hello’ kelimesini içeren bir başlık özelliği değerine sahip tüm öğeleri seçin
:input $(“:input”) Tüm giriş öğelerini seçecek
:text $(“:text”) type=’text’ ile tüm giriş öğelerini seçecektir.
:password $(“:password”) type=’password’ ile tüm giriş öğelerini seçecektir.
:radio $(“:radio”) type=’radio’ ile tüm giriş öğelerini seçecektir.
:checkbox $(“:checkbox”) type=’checkbox’ ile tüm giriş öğelerini seçecektir
:submit $(“:submit”) type=’submit’ ile tüm giriş öğelerini seçecektir.
:reset $(“:reset”) type=’reset’ ile tüm giriş öğelerini seçecektir.
:button $(“:button”) type=’button’ ile tüm giriş öğelerini seçecektir.
:image $(“:image”) type=’image’ ile tüm giriş öğelerini seçecektir.
:file $(“:file”) type=’file’ ile tüm girdi öğelerini seçecektir.
:enabled $(“:enabled”) Tüm etkin giriş öğelerini seçin
:disabled $(“:disabled”) Tüm devre dışı giriş öğelerini seçecektir
:selected $(“:selected”) Seçilen tüm giriş öğelerini seçecektir
:checked $(“:checked”) Tüm kontrol edilen giriş öğelerini seçecektir
Yazı Hakkında Ne Düşünüyorsunuz?
0

0

0

0

0

0

0

0 Shares

×

Share this post!


JQuery Seçiciler (Selectors)

Daha Fazla Web Tasarım Eğitim Dersleri İçin Web Tasarım Eğitim Kategorisini İnceleyiniz…
#JQuery #Seçiciler #Selectors

Van Web Tasarım

Sektörel Firma Rehberi

Sektörel Nakliyat Firmaları Rehberi

Van Son Dakika Haberleri

JQuery Seçiciler (Selectors) yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>
https://phpsitesi.com/jquery-seciciler-selectors/feed/ 0
JQuery Merhaba Dünya Örneği https://phpsitesi.com/jquery-merhaba-dunya-ornegi/ https://phpsitesi.com/jquery-merhaba-dunya-ornegi/#respond Tue, 25 Jan 2022 22:07:51 +0000 https://phpsitesi.com/jquery-merhaba-dunya-ornegi/ JQuery Merhaba Dünya Örneği jQuery bir JavaScript Kitaplığıdır. jQuery, JavaScript programlamayı büyük ölçüde basitleştirir. jQuery’i öğrenmesi kolaydır. Bu yazıda JQuery ile ilk uygulamamızı gerçekleştireceğiz. Bu örneğimizi ve diğer JQuery Örneklerimizi VSCode programında gerçekleştireceğiz. <html> <head> <title>jQuery Merhaba Dünya Örneğie</title> <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.10.2.js”></script> </head> <body> <input type=”button” id=”btnClick” value=”Tıkla” /><br/><br/> <div id=”divhello”> </div> <script type=”text/javascript”> $(function(){ …

JQuery Merhaba Dünya Örneği yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>

JQuery Merhaba Dünya Örneği


jQuery bir JavaScript Kitaplığıdır. jQuery, JavaScript programlamayı büyük ölçüde basitleştirir. jQuery’i öğrenmesi kolaydır.

Bu yazıda JQuery ile ilk uygulamamızı gerçekleştireceğiz. Bu örneğimizi ve diğer JQuery Örneklerimizi VSCode programında gerçekleştireceğiz.

Yukarıdaki kodları oluşturup çalıştırdığımızda tarayıcıda bir button görünecektir ve Bu butona tıklandığında mesaj verilecektir.

Ekran Çıktısı:

Yazı Hakkında Ne Düşünüyorsunuz?


JQuery Merhaba Dünya Örneği

Daha Fazla Web Tasarım Eğitim Dersleri İçin Web Tasarım Eğitim Kategorisini İnceleyiniz…
#JQuery #Merhaba #Dünya #Örneği

Van Web Tasarım

Sektörel Firma Rehberi

Sektörel Nakliyat Firmaları Rehberi

Van Son Dakika Haberleri

JQuery Merhaba Dünya Örneği yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>
https://phpsitesi.com/jquery-merhaba-dunya-ornegi/feed/ 0
Sql Injection Nedir? Nasıl Engellenir? https://phpsitesi.com/sql-injection-nedir-nasil-engellenir/ https://phpsitesi.com/sql-injection-nedir-nasil-engellenir/#respond Mon, 24 Jan 2022 02:41:45 +0000 https://phpsitesi.com/sql-injection-nedir-nasil-engellenir/ Sql Injection Nedir? Nasıl Engellenir? Veri, her bilgi sisteminin en önemli parçaları arasındadır. Dolayısıyla, organizasyonlar müşterilerin bilgi almak için web üzerinde uygulamalar tarafından veritabanlarını kullanırız. Giderek yaygınlaşan ve medyanın haber potansiyelini oluşturan; çalınan kredi kartı numaraları, underground sitelerde dağıtılan müşteri bilgileri, şirket projeleri-yazışmaları yaklaşan tehlikenin habercisi olmakla beraber halen şirketinin maddi değerini kavrayamayan ve hala …

Sql Injection Nedir? Nasıl Engellenir? yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>

Sql Injection Nedir? Nasıl Engellenir?


Veri, her bilgi sisteminin en önemli parçaları arasındadır. Dolayısıyla, organizasyonlar müşterilerin bilgi almak için web üzerinde uygulamalar tarafından veritabanlarını kullanırız.

Giderek yaygınlaşan ve medyanın haber potansiyelini oluşturan; çalınan kredi kartı numaraları, underground sitelerde dağıtılan müşteri bilgileri, şirket projeleri-yazışmaları yaklaşan tehlikenin habercisi olmakla beraber halen şirketinin maddi değerini kavrayamayan ve hala “az maliyetle kurtarılan güvenlik politikaları” ’yla övünen yöneticilere uyarı niteliği taşımaktadır. Öyleki -herzaman bir adım önde olan- hackerlar güvenliğin en üst seviyede olması beklenen devlet siteleri de dahil olmak üzere saldırılarına ara vermeksizin devam etmektedirler.

Maddi ve manevi değere sahip şirketinizin bir anlamda iş ortaklarınız olan uygulama geliştiricilerin ürünlerine emanet edildiğini düşünürsek, “İş ortaklarınıza ne kadar güvenirsiniz?” gibi bir soruya verilecek cevap büyük önem taşımaktadır.

e-Güvenlik Evriminde Kritik Dönem :

  • SQL Enjeksiyon Saldırıları & Korunma Yolları
  • Kısa Giriş
  • Örnek Saldırılar
    • Kötü Amaçlı (‘) imleçleri Yardımıyla izinsiz Giriş Sağlama
    • Uzaktan Çalıştırılması Mümkün Olan Prosedürler
    • SQL Server Hedef Alınarak Yapılan Saldırılar
    • ODBC Hatalarından Faydalanarak Yapılan Saldırılar
    • Veritabanına Ekleme Yapma veya Veri Düzenleme
  • Nasıl Korunmalı?
    • Kullanıcı Haklarının Sınırlandırılması
    • Girdilerde Tırnak ımleçlerinin (‘) Kötü Amaçlı Kullanımının Engellenmesi
    • Form Girdilerinden Gereksiz Karakterlerin Elenmesi
    • Girdi Uzunluğunun Sınırlandırılması
    • Girdi Cinsinin Kontrol Edilmesi
    • Kullanılan Veri Gönderme Metodu
  • Son Söz

Kısa Giriş

“İş Ortaklarınıza Ne Kadar Güvenirsiniz?”

Dünya genelinde, kullanıcılarına; kredi kartı numaraları, kullanıcı bilgileri gibi gizli kalması gereken bilgilerin, ürünlere ve siparişlere ait verilerin saklandığı uç-arka veri depolarıyla hizmet veren web siteleri bulunmaktadır. Ve genel olarak, web sitelerindeki form aracılığı ile alınan girdi ile veritabanındaki bilgiler filtrelendikten sonra sonucu kullanıcıya gönderen bu tür sistemlerde Yapısal Sorgulama Dili (Structured Query Language, SQL) kullanılmaktadır. Örnek vermek gerekirse;

şeklindeki SQL Deyimi “Users” adlı tablodan “2081” ürün ID si ile veritabanına kayıtlı olan kişiye ait olan isim ve adres bilgilerini dönecektir. Bu noktada muhtemel zayıflık, uygulamada kullanılacak parametre değerleri alınırken kullanılan formun SQL Deyimini yeniden yapılandırabilecek bazı özel karakterlere izin vermesiyle ortaya çıkmaktadır. Çözümü ise girdilerden bu özel karakterlerin filtrelenmesini sağlayan fonksiyonlardır.

Hızla gelişen internet teknolojileri karşısında yeni pazarda geç olmadan yerini almak isteyen müşterilerine daha kısa sürede daha kullanışlı ve ucuz çözümler sunmak zorunda olan uygulama geliştiriciler bu süreçte güvenlik gibi önemli bir faktörü ikinci plana atmaktadırlar.

Giderek yaygınlaşan ve medyanın haber potansiyelini oluşturan; çalınan kredi kartı numaraları, underground sitelerde dağıtılan müşteri bilgileri, şirket projeleri-yazışmaları yaklaşan tehlikenin habercisi olmakla beraber halen şirketinin maddi değerini kavrayamayan ve hala “az maliyetle kurtarılan güvenlik politikaları” ’yla övünen yöneticilere uyarı niteliği taşımaktadır. Öyleki -herzaman bir adım önde olan- hackerlar güvenliğin en üst seviyede olması beklenen devlet siteleri de dahil olmak üzere saldırılarına ara vermeksizin devam etmektedirler.

Maddi ve manevi değere sahip şirketinizin bir anlamda iş ortaklarınız olan uygulama geliştiricilerin ürünlerine emanet edildiğini düşünürsek, “ış ortaklarınıza ne kadar güvenirsiniz?” gibi bir soruya verilecek cevap büyük önem taşımaktadır.

Böyle bir ortamda uygun güvenlik çözümü için ayrılmış bütçe bir lüks değil her an yapılabilecek bir saldırıda şirketin uğrayacağı zararı ortadan kaldırmak için alınması gereken önlem niteliği taşımaktadır.

 Örnek Saldırılar

“Yapılacak Hamleleri Önceden Tahmin Edebilmek…”

Güvenlikte sıkça kullanılan bir deyim; “Saldırganlardan korunabilmek için onlar gibi düşünmelisiniz!..”. Saldırganın sisteminize girmek için kullanabileceği yöntemleri bilmek bu saldırılardan korunabilmek için alınan önlemleri daha sağlıklı kılacaktır.

Örneklerde kullanacağımız hedef ; Microsoft® Internet Information Server™’ dan Microsoft® SQL Server™’a varsayılan sistem hesabı’ndan (sa) bağlanan ASP tabanlı bir kullanıcı hesabı yöneticisi olacak.
Form.asp : Username ve Password girdisini alan form.
Login.asp : Veritabanı ile bağlantıya geçen ve girdinin doğruluğunu kontrol eden ASP kodu.

Kötü Amaçlı (‘) İmleçleri Yardımıyla İzinsiz Giriş Sağlama:

Kullanıcı “Username” & “Password” verisini Login.asp ye yolladıktan sonra .asp kodunun yapacağı iş verilen yoldaki veritabanı ile bağlantı kurup ilgili tabloda Username ve Password sütünlarında gönderilen verinin doğruluğunu kontrol etmek olacaktır. Bu işlem sonucunda eğer sonuç olumluysa kullanıcıya; “Giriş Yapıldı” olumsuzsa; “Geçersiz Kullanıcıadı & şifre” mesajı verilecektir.

Örnekleyecek olursak;

şeklindeki kullanıcı girdisi aşağıdaki SQL Deyimini oluşturacaktır;

İlk bakışta sorun olmayan bir SQL Deyimi… Fakat saldırganın;

şeklindeki girdilerle oluşturacağı SQL Deyimi ise;

Olacaktır ki, bu durumda girişin sağlanması için şart “ilkay” kullanıcı adına ait şifrenin hiçbirşey* olması veya ikinci bir opsiyon olarak 1=1 eşitliğinin sağlanmasıdır.

* Hiçbişey = Boşluk

Sonuç : 1=1 eşitliği sağlandığına göre saldırı başarıyla sonuçlanacak ve “Giriş Yapıldı” mesajı verilecektir.

Not : Microsoft® SQL Server™ “–” imlecinden sonra gelen yersiz kullanılmış tırnak işaretlerini göz ardı edecektir. İlk bakışta basit gibi görünen ve sadece SQL Server’a ait olan bu özellik ilerde örneklerden de anlaşılacağı üzere saldırgana büyük kolaylık sağlayacaktır.

Uzaktan Çalıştırılması Mümkün Olan Prosedürler:

MS SQL Server’a varsayılan sistem hesabından yaptığımız bağlantı SQL Enjeksiyon saldırısında muhtemel saldırgana sunucuda saklanan prosedürleri çalıştırabilmesi için gerekli hakları tanıyacaktır. Saldırganın kullanabileceği prosedürlerden bir tanesi; “master..xp_cmdshell” olabilir.

Girdileriyle oluşacak SQL Deyimi;

Sonuç : SQL Server Kullanıcıadı ve şifreyi bulunduran sütunları arayacaktır bulamadığı için “Yanlış Kullanıcıadı & şifre” mesajını verecektir fakat bu arada arka planda “dir c:” komutunu çalıştıracak ve saldırgan C sürücüsünün içeriğine ulaşacaktır.

SQL Server Hedef Alınarak Yapılan Saldırılar:

Yönetici haklarına sahip saldırgan silme,ekleme,değiştirme…vb gibi komutları rahatlıkla çalıştırabilecektir.

”SHUTDOWN WITH NOWAIT” SQL Server’ın kritik komutlarından bir tanesidir. Komutla beraber SQL Server görevine son verir.

Bu girdilerle oluşturulan SQL Deyimi;

Sonuç : SQL Server kullanıcıadının bulunamadığı mesajını verecektir. Fakat bununla beraber arka planda diğer komutu çalıştırdığı için SQL Server kapanacaktır.

ODBC Hatalarından Faydalanarak Yapılan Saldırılar:

SQL Server’ın verdiği hatalardan faydalanarak veritabanındaki neredeyse tüm bilgilere ulaşmak mümkündür.

Hedef; http://Victim/Default.asp?id=10 şeklinde ürün ID leri ile çalışan ASP tabanlı bir websitesi.

Saldırı SQL Server’ın integer ve string cinsinden verileri birlikte gönderememesinden faydalınarak yapılabilir;

Gönderilen ’10’ sayısına veritabanından herhangi bir string eklenir.

Not: “INFORMATION_SCHEMA.TABLES” sistem tablosu, sistemde bulunan diğer tüm tablolar hakkında bilgi içerir. Deyimde kullanılan “TABLE_NAME” de yine tüm tablo isimlerini içerir.

Oluşacak SQL Deyimi;

String -> Integer dönüşümünü yapamayan SQL Server aşağıdaki hatayı verecektir.

Hata, saldırgana “Table1” olarak bulduğu cevabı integer a çeviremediğini (dolayısıyla veritabanındaki ilk tablo adının “Table1” olduğunu) belirtmektedir. Saldırgan diğer tabloların adını aşağıdaki şekilde öğrenebilir.

Veya doğrudan LIKE komutunu kullanarak aradığı şeye daha kolay yoldan ulaşabilir;

SQL Server’ın vereceği hata;

Admin_Login adında bir tablo olduğunu öğrenen saldırgan muhtemelen tablodaki ilk kullanıcıadı ve şifreye ulaşmak isteyecektir. izleyebileceği yol ise;

Hata;

Bu şekilde “admin” kullanıcıadının varlığını doğrulayan saldırganın şifreyi ele geçirmek için kullanacağı girdi;

Hata;

Sonuç :

Veritabanına Ekleme Yapma veya Veri Düzenleme:

Kullanıcıadı ve şifre bilgisine ulaşan muhtemel saldırgan benzer yöntemleri ve UPDATE,INSERT komutlarını kullanarak şifreyi değiştirebilir veya daha temizi başka bir kullanıcı hesabı açabilir…

Yeni bir kullanıcı hesabı için;

Nasıl Korunmalı? – “Aksi Doğrulanıncaya Kadar Tüm Kullanıcı Girdileri Kötüdür…”

Gelebilecek SQL Enjeksiyon saldırılarından korunabilmek için alınan önlemlerde temel alınması geren nokta… “Aksi doğrulanıncaya kadar tüm kullanıcı girdileri kötüdür!”.

Kullanıcı Haklarının Sınırlandırılması

Yaygın olarak yapılan hata; Web Server dan SQL Server a yapılan bağlantılarda varsayılan sistem hesabı kullanılması… Bu şekilde yönetici haklarına sahip olan saldırgan örneklerde de görülebileceği üzere isteği komutu çalıştırıp istediği ekleme,silme,düzeltme eylemini gerçekleştirebilecektir. Bunu yerine yapılması gereken yeni bir kullanıcı hesabı oluşturup kullanıcının çalıştırabileceği komutları sınırlandırmak olacaktır.

Mesela sitenizden ürünlerinizin incelenmesine ve bunlar arasından sipariş verilmesine izin verecekseniz, “web_user” gibi bir kullanıcı adı oluşturup ürünleri incelemek için; ürünler sütununda sadece “SELECT” kullanımına ve siparişleri için; siparişler sütununda sadece “INSERT” kullanımına izin vermeniz uygun olacaktır.

Girdilerde Tırnak İmleçlerinin (‘) Kötü Amaçlı Kullanımının Engellenmesi

Yaygın SQL Enjeksiyon saldırıları SQL deyimlerinin girdilerdeki gereksiz (‘) tırnak işaretleri yardımıyla yeniden oluşturulması sayesinde yapılır.

Küçük bir filtreleme fonksiyonu veya tek tırnağı çift tırnağa çeviren bir fonksiyon muhtemel bir saldırıyı engellmek için yeterli olabilir.

ASP Kullanarak girdileri kontrol ederek değiştiren bir fonksiyon kolaylıkla yazılabilir;

Bu fonksiyonu baştaki örnekte kullanırsak;

şeklinde olan deyim:

‘e dönüşecektir.

Form Girdilerinden Gereksiz Karakterlerin Elenmesi

SQL Enjeksiyon saldırıları genelde “;, –,SELECT, INSERT ve xp_” gibi karakterlerin-kelimelerin kullanılmasıyla yapıldığı için gönderilecek girdinin önce bir filtreleme fonksiyonundan geçirilmesi muhtemel zayıflığı engelleyebilir.Örneğin kullanıcıdan E – Mail adresini girmesi isteniyorsa harfler ve sayıların yanında sadece ” @,-,_,.” karakterlerinin kullanılmasına izin verilmelidir.

Ve sunucuda saklanan xp_cmdshell ve xp_grantlogin gibi genel prosedürler,C/C++ tabanlı DLL ler, kullanıcı taraflı fonksiyonlar…vb, izole edilmiş bir sunucuya taşınmalıdır. Bazı zararlı kelime-harfleri filteleyen ASP fonksiyonu aşağıda örneklenmiştir;

Tırnak değiştirme fonksiyonu ve filtreleme fonksiyonu beraber kullanılırsa;

şeklindeki SQL Deyimi…

e dönüşecektir ki bu da herhangi bir kayıt bulumadığı hatasını vermekten öteye gitmeyecektir.

Bu fonksiyonu kullanıcıdan gelen bütün girdilere, adres satırı ifadelerine ve çerezlerden gelen tüm veriye uygulamamız gelebilecek saldırının önüne geçecektir.

Girdi Uzunluğunun Sınırlandırılması

Veritabanındaki ayrılan alanın uzunluğu 10 karakterlikse, formunuzda bu alan için 50 karakter sığan bir text kutusuna sahip olmanız sakıncalı olabilir. Ve mümkün olduğu kadar girdi uzunluklarını kısa tutmak muhtemel saldırıyı engellemek için önlem sayılabilir.

3.5. Girdi Cinsinin Kontrol Edilmesi

Formunuzdan girilen verinin istediğiniz türden bir veri olup olmadığını kontrol eden bir fonksiyon kötü amaçlı kullanımlarda saldırganın kullanabileceği harf/sayı seçeneğini kısıtlayacaktır. Mesela, eğer Ürün ID si için formunuzdan girdi alıyorsanız girdinin sayısal bir ifade olup olmadığını kontrol eden bir fonksiyon fayda sağlayacaktır.

 Kullanılan Veri Gönderme Metodu

Formunuz aracılığı ile topladığınız verileri yollarken mutlaka “POST” metodunu kullanın ki kullanıcılarınız adres çubuğunda girdikleri verilerle beraber form değerlerini gördüklerinde akıllarına farklı fikirler gelmesin.

Son Söz – “Herzaman bir adım öndeler”

Güvenliğin bir süreç olduğu bilinci içerisinde düzenli olarak yapılan denetimler olmaksızın oluşturduğunuz fakat kullanmayı birtürlü alışkanlık haline getirmeyi başaramadığınız güvenlik politikaları sizi daha ne kadar koruyabilir?

e-Güvenlik evriminin kritik çağı olarak tanımladığımız Web Uygulama Güvenliği, özellikle kullanılan yöntemlerde büyük pay sahibi olan uygulama saldırılarının yaygınlaştığı bir dönemde dikkat edilmesi gereken bir süreci oluşturmaktadır.

Gelişen her teknolojiyi en ince ayrıntısına kadar inceleyen ve eline geçireceği küçük bir detayı kötüye kullanmaktan çekinmeyecek binlerce süper zekanın bulunduğu bir evrende ihmalkâr tavırlarınızla ne kadar şansınız olabilir ki?


Sql Injection Nedir? Nasıl Engellenir?

Daha Fazla Web Tasarım Eğitim Dersleri İçin Web Tasarım Eğitim Kategorisini İnceleyiniz…
#Sql #Injection #Nedir #Nasıl #Engellenir

Van Web Tasarım

Sql Injection Nedir? Nasıl Engellenir? yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>
https://phpsitesi.com/sql-injection-nedir-nasil-engellenir/feed/ 0
HTML CSS Div Gölge Efekti Verme https://phpsitesi.com/html-css-div-golge-efekti-verme/ https://phpsitesi.com/html-css-div-golge-efekti-verme/#respond Fri, 14 Jan 2022 22:20:00 +0000 https://phpsitesi.com/html-css-div-golge-efekti-verme/ HTML CSS Div Gölge Efekti Verme   <!– CSS KODU –> <style>     body {         background: #ccc;         width: 800px;     }       .box h3 {         text-align: center;         position: relative;         top: 80px;     }       .box {         width: 70%;         height: 200px;         background: #FFF;         margin: 40px auto;     }       /*gölge efekti*/     .effect2 {         position: relative;     }       .effect2:before,     .effect2:after { …

HTML CSS Div Gölge Efekti Verme yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>

HTML CSS Div Gölge Efekti Verme


 

<!– CSS KODU –>

<style>

    body {

        background: #ccc;

        width: 800px;

    }

 

    .box h3 {

        text-align: center;

        position: relative;

        top: 80px;

    }

 

    .box {

        width: 70%;

        height: 200px;

        background: #FFF;

        margin: 40px auto;

    }

 

    /*gölge efekti*/

    .effect2 {

        position: relative;

    }

 

    .effect2:before,

    .effect2:after {

        z-index: -1;

        position: absolute;

        content: “”;

        bottom: 15px;

        left: 10px;

        width: 50%;

        top: 80%;

        max-width: 300px;

        background: #777;

        -webkit-box-shadow: 0 15px 10px #777;

        -moz-box-shadow: 0 15px 10px #777;

        box-shadow: 0 15px 10px #777;

        -webkit-transform: rotate(-3deg);

        -moz-transform: rotate(-3deg);

        -o-transform: rotate(-3deg);

        -ms-transform: rotate(-3deg);

        transform: rotate(-3deg);

    }

 

    .effect2:after {

        -webkit-transform: rotate(3deg);

        -moz-transform: rotate(3deg);

        -o-transform: rotate(3deg);

        -ms-transform: rotate(3deg);

        transform: rotate(3deg);

        right: 10px;

        left: auto;

    }

</style>

 

<!– HTML KODU –>

<div class=“box effect2”>

    <h3>YazılımKodlama</h3>

</div>

 


HTML CSS Div Gölge Efekti Verme

Daha Fazla Css Eğitim Dersleri İçin Css Eğitim Kategorisini İnceleyiniz…
#HTML #CSS #Div #Gölge #Efekti #Verme

Van Web Tasarım

HTML CSS Div Gölge Efekti Verme yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>
https://phpsitesi.com/html-css-div-golge-efekti-verme/feed/ 0
Veritabanı Nedir? MySql Nedir? https://phpsitesi.com/veritabani-nedir-mysql-nedir/ https://phpsitesi.com/veritabani-nedir-mysql-nedir/#respond Fri, 14 Jan 2022 12:54:25 +0000 https://phpsitesi.com/veritabani-nedir-mysql-nedir/ Veritabanı Nedir? MySql Nedir? Bu eğitim, şu soruyu yanıtlamanıza yardımcı olur: MySQL nedir? MySQL neden dünyanın en popüler açık kaynaklı veritabanıdır? MySQL’i anlamak için önce veritabanını ve SQL’i anlamanız gerekir. Veritabanı (database) Nedir? Her gün verilerle uğraşıyorsunuz… Favori şarkılarınızı dinlemek istediğinizde akıllı telefonunuzdan çalma listenizi açıyorsunuz. Bu durumda, oynatma listesi bir veritabanıdır. Bir fotoğraf çekip …

Veritabanı Nedir? MySql Nedir? yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>

Veritabanı Nedir? MySql Nedir?


Bu eğitim, şu soruyu yanıtlamanıza yardımcı olur: MySQL nedir? MySQL neden dünyanın en popüler açık kaynaklı veritabanıdır?

MySQL’i anlamak için önce veritabanını ve SQL’i anlamanız gerekir.

Veritabanı (database) Nedir?

Her gün verilerle uğraşıyorsunuz…

Favori şarkılarınızı dinlemek istediğinizde akıllı telefonunuzdan çalma listenizi açıyorsunuz. Bu durumda, oynatma listesi bir veritabanıdır.

Bir fotoğraf çekip Facebook gibi bir sosyal ağda hesabınıza yüklediğinizde, fotoğraf galeriniz bir veri tabanıdır.

Ayakkabı, giysi vb. satın almak için bir e-ticaret sitesine göz attığınızda, alışveriş sepeti veritabanını kullanırsınız.

Veritabanları her yerdedir. Peki veritabanı nedir? Tanım olarak, bir veritabanı yalnızca yapılandırılmış bir veri topluluğudur.

Doğası gereği birbiriyle ilişkili veriler, örneğin bir ürün, bir ürün kategorisine aitti ve birden çok etiketle ilişkilendirildi. Bu nedenle ilişkisel veritabanı terimini kullanıyoruz.

İlişkisel veritabanında, tablolar kullanarak ürünler, kategoriler, etiketler vb. verileri modelleriz. Bir tablo sütunlar ve satırlar içerir. Bir elektronik tablo gibidir.

Bir tablo, örneğin bire bir ve bire çok ilişkiler gibi bir ilişki kullanarak başka bir tabloyla ilişkilendirilebilir.

Önemli miktarda veriyle uğraştığımız için veritabanlarını, tabloları vb. tanımlamanın ve verileri daha verimli bir şekilde işlemenin bir yoluna ihtiyacımız var. Ayrıca veriyi bilgiye dönüştürmek istiyoruz.

İşte burada SQL devreye giriyor.

SQL – ilişkisel veritabanı dili

SQL, yapılandırılmış sorgu dili anlamına gelir.

SQL, veritabanına erişmek için kullanılan standartlaştırılmış dildir.

SQL üç bölümden oluşur:

  1. Veri tanımlama dili, veritabanını ve nesnelerini, örneğin tablolar, görünümler, tetikleyiciler, saklı yordamlar vb. tanımlamanıza yardımcı olan ifadeleri içerir.
  2. Veri işleme dili (DML), verileri güncellemenize ve sorgulamanıza olanak tanıyan ifadeler içerir.
  3. Veri kontrol dili, bir kullanıcıya veritabanındaki belirli verilere erişmesi için izinler vermenize olanak tanır.

Artık veritabanı ve SQL’i anlıyorsunuz ve sıradaki soruyu yanıtlama zamanı…

MySQL Nedir?

My, MySQL’in kurucu ortağı Monty Widenius’un kızının adıdır.

MySQL’in adı My ve SQL, MySQL’in birleşimidir.

MySQL, ilişkisel veritabanlarını yönetmenize izin veren bir veritabanı yönetim sistemidir. Oracle tarafından desteklenen açık kaynaklı bir yazılımdır. Bu, MySQL’i bir kuruş ödemeden kullanabileceğiniz anlamına gelir. Ayrıca isterseniz kaynak kodunu ihtiyaçlarınıza göre değiştirebilirsiniz.

MySQL açık kaynaklı bir yazılım olmasına rağmen, premium destek hizmetleri almak için Oracle’dan ticari bir lisans sürümü satın alabilirsiniz.

MySQL, Oracle Database veya Microsoft SQL Server gibi diğer veritabanı yazılımlarıyla karşılaştırıldığında oldukça kolaydır.

MySQL, UNIX, Linux, Windows vb. çeşitli platformlarda çalışabilir. Bir sunucuya veya hatta bir masaüstüne kurabilirsiniz. Ayrıca MySQL güvenilir, ölçeklenebilir ve hızlıdır.

Web siteleri veya web uygulamaları geliştiriyorsanız MySQL iyi bir seçimdir. MySQL, Linux, Apache, MySQL ve PHP’yi içeren LAMP yığınının önemli bir bileşenidir.


Veritabanı Nedir? MySql Nedir?

Daha Fazla MySql Eğitim Dersleri İçin İleri Seviye Php Eğitimleri Seviye MySql Eğitim Kategorisini İnceleyiniz…
#Veritabanı #Nedir #MySql #Nedir

Van Web Tasarım

Veritabanı Nedir? MySql Nedir? yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>
https://phpsitesi.com/veritabani-nedir-mysql-nedir/feed/ 0
HTML ve CSS’de Kutu Gölgeleri Nasıl Oluşturulur https://phpsitesi.com/html-ve-cssde-kutu-golgeleri-nasil-olusturulur/ https://phpsitesi.com/html-ve-cssde-kutu-golgeleri-nasil-olusturulur/#respond Fri, 14 Jan 2022 12:29:57 +0000 https://phpsitesi.com/html-ve-cssde-kutu-golgeleri-nasil-olusturulur/ HTML ve CSS’de Kutu Gölgeleri Nasıl Oluşturulur HTML’de bir kart tasarladığınızda, kutu gölgeleri kartların öne çıkmasında hayati bir rol oynar. İster bir fiyatlandırma sayfası kartı, ister bir e-ticaret ürün listeleme kartı olsun, kutu gölgeleri, bu kartların iletmesi gereken görünümü ve mesajın tamamını oluşturabilir veya bozabilir. Bugün, güzel kutu gölgelerinin nasıl yapıldığını ve onları nasıl öne …

HTML ve CSS’de Kutu Gölgeleri Nasıl Oluşturulur yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>

HTML ve CSS’de Kutu Gölgeleri Nasıl Oluşturulur


HTML’de bir kart tasarladığınızda, kutu gölgeleri kartların öne çıkmasında hayati bir rol oynar.

İster bir fiyatlandırma sayfası kartı, ister bir e-ticaret ürün listeleme kartı olsun, kutu gölgeleri, bu kartların iletmesi gereken görünümü ve mesajın tamamını oluşturabilir veya bozabilir.

Bugün, güzel kutu gölgelerinin nasıl yapıldığını ve onları nasıl öne çıkaracağımızı anlayalım.

box-shadow sözdizimi:

Örnek:

Yukarıdaki kod parçasında 5 önemli kısım bulunmaktadır. Ne demek istediklerini anlayalım:

  • x-konum : Yukarıdaki örnekte 1 piksel. Bu, gölgenin yatay olarak karttan ne kadar uzakta olacağını gösterir. Olumlu, sağda, olumsuz solda demektir.
  • y-konum : Yukarıdaki örnekte 2 piksel. Bu, gölgenin karttan dikey olarak ne kadar uzakta olacağını gösterir. Olumlu, aşağı, olumsuz, yukarı anlamına gelir.
  • blur : Yukarıdaki örnekte 3 piksel. Bu, gölgenin ne kadar bulanık görüneceğini gösterir. Daha yüksek yarıçap, daha fazla bulanıklık anlamına gelir.
  • dağılma : Yukarıdaki örnekte 4 piksel. Bu, gölgenin her yöne ne kadar yayılacağını gösterir.
  • renk : yukarıdaki örnekte rgba(20,20,20,0.4). Bu, gölgenin rengini belirler. Sağlanmazsa, varsayılan metin rengi kullanılacaktır. Renk değerleri Hex, RGB veya HSL olabilir.

Yukarıdaki kodu çalışırken görelim:

CSS'de Kutu Gölgeleri Örnekleri
CSS’de Kutu Gölgeleri Örnekleri

Kutu Gölgeleri Kartları Nasıl Etkiler?

Buradaki iki örneği göz önünde bulundurun:

CSS’de Kutu Gölgeleri Örnekleri

İlk örnekte kutu gölgesi yokken ikinci örnekte kutu gölgesi var. İkincisi ekrandan fırlıyor gibi görünüyor (bu, birincisine kıyasla biraz öne çıkmasını sağlıyor.)

Bu nedenle, kartlarınızın öne çıkmasına ihtiyacınız varsa, kutu gölgeleri onları gerçekten öne çıkarmanıza yardımcı olabilir.

Diyelim ki bir e-ticaret uygulaması geliştiriyorsunuz ve ürün kartlarınızın öne çıkmasını istiyorsunuz. Kutu gölgeleri bunu başarmanıza ve müşterilerinizin ürünlerinizi fark etmelerine yardımcı olabilir.

Web uygulamanız kartlarınızın ince olmasını gerektirse bile, kartlara daha hoş bir estetik his vermek için her zaman ince kutu gölgeleriyle gidebilirsiniz.

Kutu Gölgelerinin Çoklu Katmanları Nasıl Kullanılır
Kartlarınızda birden fazla kutu gölgesi katmanı kullanabilirsiniz – ve muhtemelen bunu çok yapacaksınız.

Birden çok kutu gölgesi katmanı oluşturmaya yönelik sözdizimi şöyle görünür:

CSS'de Kutu Gölgeleri Örnekleri
CSS’de Kutu Gölgeleri Örnekleri

Renkli Kutu Gölgeleri Nasıl Kullanılır

Renkler, kartlarınızı görsel olarak öne çıkararak size yardımcı olsa da, her zaman en iyi seçenek değildir. Bazen düz gri bir gölge, beyaz bir arka plan üzerinde harikalar yaratır. Ancak bu tamamen web sitenizin temasına bağlıdır.

Çok sayıda boşluk ve genel metin içeriği olan basit bir blog uygulaması düşünün. Web sitesinde blogları görüntüleyen bir kartınız varsa, en iyi yol, kartlara iyi bir pop vermek için basit ama incelikli bir kutu gölgesi eklemek olacaktır.

Yazı Hakkında Ne Düşünüyorsunuz?


HTML ve CSS’de Kutu Gölgeleri Nasıl Oluşturulur

Daha Fazla Web Tasarım Eğitim Dersleri İçin Web Tasarım Eğitim Kategorisini İnceleyiniz…
#HTML #CSSde #Kutu #Gölgeleri #Nasıl #Oluşturulur

Van Web Tasarım

Sektörel Firma Rehberi

Sektörel Nakliyat Firmaları Rehberi

Van Son Dakika Haberleri

HTML ve CSS’de Kutu Gölgeleri Nasıl Oluşturulur yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>
https://phpsitesi.com/html-ve-cssde-kutu-golgeleri-nasil-olusturulur/feed/ 0
CSS ile Listeleme İşaretlerini Kaldırma https://phpsitesi.com/css-ile-listeleme-isaretlerini-kaldirma/ https://phpsitesi.com/css-ile-listeleme-isaretlerini-kaldirma/#respond Fri, 14 Jan 2022 12:03:28 +0000 https://phpsitesi.com/css-ile-listeleme-isaretlerini-kaldirma/ CSS ile Listeleme İşaretlerini Kaldırma Bu yazımızda <ul> ve <ol> listelerinin başındaki madde işaretlerini nasıl kaldıracağınızı göstereceğiz. Bir listenin başındaki madde işaretlerini kaldırmak için list-style-type:none; özelliği ve değeri kullanılır. Aşağıdaki gibi bir HTML dosyasına sahip olduğumuzu varsayarak kodlamaya başlayalım. HTML: <ul> <li>Elma</li> <li>Armut</li> <li>Kiraz</li> <li>Çilek</li> <li>Portakal</li> </ul> CSS: ul{ list-style-type:none; } Not: Aynı zamanda <ul> …

CSS ile Listeleme İşaretlerini Kaldırma yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>

CSS ile Listeleme İşaretlerini Kaldırma


Bu yazımızda <ul> ve <ol> listelerinin başındaki madde işaretlerini nasıl kaldıracağınızı göstereceğiz.

Bir listenin başındaki madde işaretlerini kaldırmak için list-style-type:none; özelliği ve değeri kullanılır.

Aşağıdaki gibi bir HTML dosyasına sahip olduğumuzu varsayarak kodlamaya başlayalım.

HTML:

<ul>
        <li>Elma</li>
        <li>Armut</li>
        <li>Kiraz</li>
        <li>Çilek</li>
        <li>Portakal</li>
    </ul>

CSS:

ul{
            list-style-type:none;
        }

Not: Aynı zamanda <ul> etiketi yerine <ol> etiketi içinde list-style-type:none; kullanılabilir.

Listede bulunan boşluk ve işaretleri kaldırmak içinse aşağıdaki CSS kodlarını kullanabilirsiniz.

ul{
        list-style-type:none;
        margin:0;
        padding:0;
    }
Ne Düşünüyorsunuz?
0

1

0

0

0

0

0

0 Shares

×

Share this post!


CSS ile Listeleme İşaretlerini Kaldırma

Daha Fazla Css Eğitim Dersleri İçin Css Eğitim Kategorisini İnceleyiniz…
#CSS #ile #Listeleme #İşaretlerini #Kaldırma

Van Web Tasarım

CSS ile Listeleme İşaretlerini Kaldırma yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>
https://phpsitesi.com/css-ile-listeleme-isaretlerini-kaldirma/feed/ 0
Web Site Örnekleri – Web Tasarım & Programlama https://phpsitesi.com/web-site-ornekleri-web-tasarim-programlama/ https://phpsitesi.com/web-site-ornekleri-web-tasarim-programlama/#respond Sun, 02 Jan 2022 23:05:42 +0000 https://phpsitesi.com/web-site-ornekleri-web-tasarim-programlama/ Web Site Örnekleri – Web Tasarım & Programlama Web site tasarımlarınıza fikir vermek yada sitelerinizde doğrudan(tabi az da olsa HTML biliyor olmasınınız) kullanabileceğiniz ücretsiz HTML site tasarımları. Tasarımın görselinin hemen altında indirme butonuna basarak HTML tasarımını indirebilirsiniz. Örnek 1: Web Site Örnekleri 1 Tasarımı İndir Örnek 2: Web Site Örnekleri 2 Tasarımı İndir Örnek 3: …

Web Site Örnekleri – Web Tasarım & Programlama yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>

Web Site Örnekleri – Web Tasarım & Programlama


Web site tasarımlarınıza fikir vermek yada sitelerinizde doğrudan(tabi az da olsa HTML biliyor olmasınınız) kullanabileceğiniz ücretsiz HTML site tasarımları.

Tasarımın görselinin hemen altında indirme butonuna basarak HTML tasarımını indirebilirsiniz.

Örnek 1:

Web Site Örnekleri 1
Web Site Örnekleri 1
Tasarımı İndir

Örnek 2:

Web Site Örnekleri 2
Web Site Örnekleri 2
Tasarımı İndir

Örnek 3:

Web Site Örnekleri 3
Web Site Örnekleri 3
Tasarımı İndir

Örnek 4:

Web Site Örnekleri 4
Web Site Örnekleri 4
Tasarımı İndir

Örnek 5:

Web Site Örnekleri 5
Web Site Örnekleri 5
Tasarımı İndir

Örnek 6:

Web Site Örnekleri 6
Web Site Örnekleri 6
Tasarımı İndir

Örnek 7:

Web Site Örnekleri 6
Web Site Örnekleri 6
Tasarımı İndir

Örnek 8:

Web Site Örnekleri 8
Web Site Örnekleri 8
Tasarımı İndir

Örnek 9: Free Bootstrap 5 HTML5 Admin Dashboard Template

Web Site Örnekleri 9
Web Site Örnekleri 9
Tasarımı İndir

Örnek 10:

Web Site Örnekleri Bedava Site Tasarımları
Web Site Örnekleri Bedava Site Tasarımları
Tasarımı İndir

Kaynak:

http://www.artisteer.com/?p=website_templates&order=popular

https://themewagon.com/theme-framework/bootstrap-5/


Web Site Örnekleri – Web Tasarım & Programlama

Daha Fazla HTML Eğitim Dersleri İçin Html Eğitim Kategorisini İnceleyiniz…
#Web #Site #Örnekleri #Web #Tasarım #Programlama

Van Web Tasarım

Web Site Örnekleri – Web Tasarım & Programlama yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>
https://phpsitesi.com/web-site-ornekleri-web-tasarim-programlama/feed/ 0
HTML CSS Flex Sayfa Tasarımı https://phpsitesi.com/html-css-flex-sayfa-tasarimi/ https://phpsitesi.com/html-css-flex-sayfa-tasarimi/#respond Thu, 23 Dec 2021 05:26:22 +0000 https://phpsitesi.com/html-css-flex-sayfa-tasarimi/ HTML CSS Flex Sayfa Tasarımı   <!DOCTYPE html> <html lang=“tr”> <head>     <meta charset=“UTF-8”>     <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>     <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>     <title>php sitesi</title>     <style>         @import url(“https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css”);           *{             box-sizing: border-box;         }         html{             font-size:62.5%;         }         body{             min-height: 100vh;             margin:0;             padding:0;             background: url(cimen.png) bottom repeat-x,                         url(bulut.png) fixed,                         #1DABB8;         }         .kapsayici{             width: 1080px;             margin:auto;             /* min-height: 100px;             background-color: red; …

HTML CSS Flex Sayfa Tasarımı yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>

HTML CSS Flex Sayfa Tasarımı


 

<!DOCTYPE html>

<html lang=“tr”>

<head>

    <meta charset=“UTF-8”>

    <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

    <title>php sitesi</title>

    <style>

        @import url(“https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css”);

 

        *{

            box-sizing: border-box;

        }

        html{

            font-size:62.5%;

        }

        body{

            min-height: 100vh;

            margin:0;

            padding:0;

            background: url(cimen.png) bottom repeat-x,

                        url(bulut.png) fixed,

                        #1DABB8;

        }

        .kapsayici{

            width: 1080px;

            margin:auto;

            /* min-height: 100px;

            background-color: red; */

        }

 

        header{

            margin-top:300px;

            display: flex;

            align-items: flex-end;

            justify-content: space-between;

        }

 

        header .menu li,

        header .sosyal li{

            display: inline-block;

        }

 

        header ul{

            margin:0;

            padding:0;

            list-style: none;

        }

 

        .menu a{

            display: block;

            background-color: #25373D;

            color:#fff;

            padding:15px 30px;

            font-size:2rem;

            text-decoration: none;

        }

 

        .menu a:hover{

            background-color: #D2D7D3;

            color:#25373D;

        }

 

        .sosyal a{

            display: block;

            background-color: #FEC606;

            color:#25373D;

            width: 64px;

            height: 64px;

            line-height: 64px;

            text-align: center;

            font-size:2rem;

            text-decoration: none;

            border-radius: 50%;

        }

 

        .sosyal a:hover{

            background-color: #D8335B;

            color:#fff;

        }

 

        .bolum1{

            background-color: #D2D7D3;

            margin-bottom:30px;

        }

        .bolum1 img{

            width: 100%;

            display: block;

        }

 

        .bolum2{

            display: flex;

            flex-wrap: wrap;

            gap:20px;

            background-color: #D2D7D3;

            min-height: 50px;

            padding:25px;

            margin-bottom:30px;

        }

 

        .bolum2 .kutu{

            font-size:5rem;

            color:#fff;

            width: 330px;

            height: 330px;

            background-color: #D8335B;

        }

 

        .bolum3{

            display: flex;

            background-color: #D2D7D3;

            justify-content: space-between;

            padding:10px;

        }

 

        .bolum3 .kutu{

            width: 200px;

            height: 200px;

            background-color: #D8335B;

            font-size:5rem;

            color:#fff;

        }

 

    </style>

</head>

<body>

 

<div class=“kapsayici”>

    <header>

        <ul class=“menu”>

            <li><a href=“#”>sayfa</a></li>

            <li><a href=“#”>sayfa</a></li>

            <li><a href=“#”>sayfa</a></li>

            <li><a href=“#”>sayfa</a></li>

            <li><a href=“#”>sayfa</a></li>

        </ul>

        <ul class=“sosyal”>

            <li><a href=“#”><i class=“bi bi-tiktok”></i></a></li>

            <li><a href=“#”><i class=“bi bi-twitter”></i></a></li>

            <li><a href=“#”><i class=“bi bi-twitch”></i></a></li>

        </ul>

    </header>

    <section class=“bolum1”>

        <img src=“iki-dusun-bir-kodla.jpg” alt=“Arkaplan”>

    </section>

    <section class=“bolum2”>

        <div class=“kutu”>1</div>

        <div class=“kutu”>2</div>

        <div class=“kutu”>3</div>

        <div class=“kutu”>4</div>

        <div class=“kutu”>5</div>

        <div class=“kutu”>6</div>

    </section>

    <section class=“bolum3”>

        <div class=“kutu”>1</div>

        <div class=“kutu”>2</div>

        <div class=“kutu”>3</div>

        <div class=“kutu”>4</div>

        <div class=“kutu”>5</div>

    </section>

</div>

    

</body>

</html>

 


HTML CSS Flex Sayfa Tasarımı

Daha Fazla Css Eğitim Dersleri İçin Css Eğitim Kategorisini İnceleyiniz…
#HTML #CSS #Flex #Sayfa #Tasarımı

Van Web Tasarım

HTML CSS Flex Sayfa Tasarımı yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>
https://phpsitesi.com/html-css-flex-sayfa-tasarimi/feed/ 0
HTML CSS Örnek Sayfa Tasarımı https://phpsitesi.com/html-css-ornek-sayfa-tasarimi/ https://phpsitesi.com/html-css-ornek-sayfa-tasarimi/#respond Wed, 22 Dec 2021 19:24:51 +0000 https://phpsitesi.com/html-css-ornek-sayfa-tasarimi/ HTML CSS Örnek Sayfa Tasarımı   <!DOCTYPE html> <html lang=“en”>   <head>     <meta charset=“UTF-8”>     <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>     <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>     <link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css”>     <title>Site</title>     <style>         html{             font-size:62.5%;         }         body {             min-height: 100vh;             background: url(cimen.png) bottom center repeat-x,                 url(bulut.png) top center fixed,                 #1DABB8;             margin: 0;         }           .kapsayici {             width: 1080px;             margin: 200px auto 0 …

HTML CSS Örnek Sayfa Tasarımı yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>

HTML CSS Örnek Sayfa Tasarımı


 

<!DOCTYPE html>

<html lang=“en”>

 

<head>

    <meta charset=“UTF-8”>

    <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

    <link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css”>

    <title>Site</title>

    <style>

        html{

            font-size:62.5%;

        }

        body {

            min-height: 100vh;

            background: url(cimen.png) bottom center repeat-x,

                url(bulut.png) top center fixed,

                #1DABB8;

            margin: 0;

        }

 

        .kapsayici {

            width: 1080px;

            margin: 200px auto 0 auto;

        }

 

        nav {

            /* min-height: 100px; */

            /* background-color: #25373D; */

            display: flex;

            justify-content: space-between;

            align-items: flex-end;

        }

        nav ul{

            list-style: none;

            margin:0;

            padding:0;

        }

        nav ul li{

            display: inline-block;

        }

 

        nav .menu a{

            color:#fff;

            font-size:2rem;

            background-color: #25373D;

            padding:15px 30px;

            display: block;

            border:#D2D7D3 solid 5px;

            border-bottom:none;

            border-radius: 30px 30px 0 0;

            font-weight: 600;

            text-decoration: none;

        }

        nav .menu a:hover{

            background-color:#D2D7D3;

            color:#25373D;

        }

 

        nav .sosyal a{

            color:#25373D;

            font-size:2rem;

            background-color: #FEC606;

            width: 32px;

            height: 32px;

            line-height: 32px;

            text-align: center;

            padding:8px;

            display: block;

            border-radius: 50%;

            margin-bottom:5px;

        }

 

        .bolum1 {

            min-height: 300px;

            background-color: #D2D7D3;

            margin-bottom: 40px;

        }

 

        .bolum2 {

            display: flex;

            flex-wrap: wrap;

            justify-content: space-between;

            gap:20px;

            padding:20px;

            background-color: #6C8784;

            margin-bottom: 40px;

        }

 

        .bolum2 .kutu{

            width: 330px;

            height: 330px;

            line-height: 330px;

            text-align: center;

            font-size:4rem;

            background-color: #D33257;

            color:#fff;

        }

 

        .bolum3 {

            display: flex;

            justify-content: space-between;

            padding:10px;

            min-height: 200px;

            background-color: #E7E7E7;

            margin-bottom: 40px;

        }

        .bolum3 .kutu{

            width: 200px;

            height: 200px;

            line-height: 200px;

            font-size:5rem;

            text-align: center;

            background-color: #D33257;

            color:#fff;

            

        }

    </style>

</head>

 

<body>

 

    <div class=“kapsayici”>

        <header>

            <nav>

                <ul class=“menu”>

                    <li><a href=“#”>sayfa</a></li>

                    <li><a href=“#”>sayfa</a></li>

                    <li><a href=“#”>sayfa</a></li>

                    <li><a href=“#”>sayfa</a></li>

                    <li><a href=“#”>sayfa</a></li>

                </ul>

                <ul class=“sosyal”>

                    <li><a href=“#”><i class=“bi bi-facebook”></i></a></li>

                    <li><a href=“#”><i class=“bi bi-facebook”></i></a></li>

                    <li><a href=“#”><i class=“bi bi-youtube”></i></a></li>

                    <li><a href=“#”><i class=“bi bi-tiktok”></i></a></li>

                </ul>

            </nav>

        </header>

        <div class=“bolum1”></div>

        <div class=“bolum2”>

            <div class=“kutu”>1</div>

            <div class=“kutu”>2</div>

            <div class=“kutu”>3</div>

            <div class=“kutu”>4</div>

            <div class=“kutu”>5</div>

            <div class=“kutu”>6</div>

        </div>

        <div class=“bolum3”>

            <div class=“kutu”>1</div>

            <div class=“kutu”>2</div>

            <div class=“kutu”>3</div>

            <div class=“kutu”>4</div>

            <div class=“kutu”>5</div>

        </div>

    </div>

 

</body>

 

</html>

 


HTML CSS Örnek Sayfa Tasarımı

Daha Fazla Css Eğitim Dersleri İçin Css Eğitim Kategorisini İnceleyiniz…
#HTML #CSS #Örnek #Sayfa #Tasarımı

Van Web Tasarım

HTML CSS Örnek Sayfa Tasarımı yazısı ilk önce Php Sitesi üzerinde ortaya çıktı.]]>
https://phpsitesi.com/html-css-ornek-sayfa-tasarimi/feed/ 0