Eşim için doğum günü hediyesi olarak sayfa yazmak

msd0 dedi:

Hocam temelim yok denecek kadar az. ChatGPT ile bir HTML sayfası oluşturdum. Kullanmak istediğim görseller ve video ile aynı klasör içinde olunca bilgisayardan açılıyor. Ancak telefondan açılmıyor görseller vs. ben bunu bir link haline nasıl getirebilirim ki tıklandığında görsellerde dahil açılsın.

Genişletmek için tıkla...

1. 000webhost veya ınfinityfree gibi ücretsiz hosting sağlayıcılarından birine kaydol.
2. Hesabını oluşturduktan sonra, kontrol paneline git ve "file Manager" (dosya yöneticisi) bölümüne gir.
3. Web tasarım dosyalarını, yani HTML dosyan, görseller ve videoların bulunduğu klasörü burada aç ve tüm dosyaları "public_html" klasörüne yükle.
4. Yükleme tamamlandığında sana verilen site adresine giderek tasarımını kontrol edebilirsin.

• Infinityfree gibi ücretsiz hosting sağlayıcıları, ücretsiz subdomain (alt alan adı) seçeneği sunar. esinizinadi.rf.gd gibi bir adres alarak siteni yayınlayabilirsin. Bu yöntemde tam bir alan adı alamasan da web siten internet üzerinde erişilebilir olur.
• Home Bunun benzeri bir web sitesi oluşturmak istiyorsan Infinityfree ile hesap oluşturduktan sonra Panele giriş yaparak "Site Builder" sekmesinden istediğin bir temayı seçerek hızlı bir şekilde oluşturabilirsin. Tonlarca yöntem var birini seçmen gerekli sadece
• Bunlar beni kesmez çok daha iyi bir site yapmak istiyorum dersen Softaculous Apps Installer sekmesinden Wordpress kurulumu yaparak iyi bir tema seçip çok daha iyi işler çıkarabilirsin. (Biraz uzmanlık gerektirebilr)

BigDesigner dedi:

Merhaba,

ÖRNEK SİTE (http://bigdesigner.rf.gd) bunu tamamen ücretsiz oluşturdum. Nasıl yapabileceğini açıkladım.

Bunu bir web adresi, örneğin www.esinizinadi.com, olarak açmak istiyorsanız; öncelikle domain (alan adı) almanız ve ardından web sitenizi bir sunucuya yüklemeniz gerekir. domain, sitenizin internet üzerindeki adresidir. Bu adrese herkesin ulaşabilmesi için dosyalarınızı bir hosting (web barındırma) hizmetine yüklemeniz gerekiyor.

ücretsiz bir hosting hesabı açıp HTML dosyanı yüklemek için şu adımları izleyebilirsin:

1. 000webhost veya ınfinityfree gibi ücretsiz hosting sağlayıcılarından birine kaydol.
2. Hesabını oluşturduktan sonra, kontrol paneline git ve "file Manager" (dosya yöneticisi) bölümüne gir.
3. Web tasarım dosyalarını, yani HTML dosyan, görseller ve videoların bulunduğu klasörü burada aç ve tüm dosyaları "public_html" klasörüne yükle.
4. Yükleme tamamlandığında sana verilen site adresine giderek tasarımını kontrol edebilirsin.

eğer ücretsiz bir alan adı da istiyorsan,

ınfinityfree - ücretsiz alt alan adı (subdomain)

• Infinityfree gibi ücretsiz hosting sağlayıcıları, ücretsiz subdomain (alt alan adı) seçeneği sunar. esinizinadi.rf.gd gibi bir adres alarak siteni yayınlayabilirsin. Bu yöntemde tam bir alan adı alamasan da web siten internet üzerinde erişilebilir olur.
• Home Bunun benzeri bir web sitesi oluşturmak istiyorsan Infinityfree ile hesap oluşturduktan sonra Panele giriş yaparak "Site Builder" sekmesinden istediğin bir temayı seçerek hızlı bir şekilde oluşturabilirsin. Tonlarca yöntem var birini seçmen gerekli sadece
• Bunlar beni kesmez çok daha iyi bir site yapmak istiyorum dersen Softaculous Apps Installer sekmesinden Wordpress kurulumu yaparak iyi bir tema seçip çok daha iyi işler çıkarabilirsin. (Biraz uzmanlık gerektirebilr)

Ekstra: Awardspace ve biz.nf gibi siteler ınfinityfree için alternatif olabilir. Infinityfree'nin avantajı hosting + domain tek bir üyelik ile çözebilirsin.
Hosting paketi (HTML site için fazlasıyla yeterli)


Alabileceğin ücretsiz domain (alan adı) listesi.


Artık telefon veya bilgisayar üzerinden herkes sitene ulaşabilir.

Kolay gelsin!

Genişletmek için tıkla...

msd0 dedi:

Merhabalar herkese. Arkadaşlar yakın zamanda eşimin doğum günü ve ben basit düzeyde olsa onun için birşeyler yazdığım ve görseller eklediğim bir sayfa hazırlamak istiyorum. Ve bunun linkini bir QR kod haline getirmek istiyorum. Ancak nasıl yapabilirim bir fikrim yok. Biraz farklı bir konu olabilir ancak değerli vaktini ayırıp yardımcı olabilecek olan olursa sevinirim.

Genişletmek için tıkla...

msd0 dedi:

Hocam çok teşekkür ederim. Şimdi benim yaptığım html dosyasında ki resim ve videoların görünmesi için aynı klasörde olup öyle tıklarsam açılıyor. Ben o klasörü içindeki resim video vs ile mi yüklemem gerekiyor direk

Genişletmek için tıkla...

1. web dizininde yer alan dosya klasör isimlerinde "Boşluk" "Türkçe Karakter" "Özel Simge" kullanılmamalı. Örn: fotoğraf.jpg yerine fotograf.jpg olarak kaydetmelisiniz. Eğer birden çok dosya ekliyorsanız bunların isimlerini yazarkende fotograf 1.jpg yerine fotograf01.jpg veya fotograf-01.jpg fotograf-02.jpg fotograf-03.jpg gibi düşünebilirsiniz.
2. images klasörü içerisine içinde hiçbir kod yazmayan boş bir index.html dosyası oluşturursanız web dizininde siteadi.com/images adresine gidildiğinde yüklediğiniz medyalari kimse göremez. index.html images klasörünün açılış sayfası olarak görev yapacağı için boş bir sayfa görüntüler ziyaretçiler. Bazı güvenlik açıklarının da önüne geçmiş olursunuz.

1. Dosya ve Klasör Yapısı​

proje_adi/
├── index.html
├── gallery.html
├── style.css (css kodları buraya yazabilirsiniz)
└── images/
    └── (Resim dosyalarınızı buraya yükleyebilirsiniz)

2. index.html Dosyası​

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Hoş Geldiniz</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Hoş Geldiniz!</h1>
        <nav>
            <a href="index.html">Ana Sayfa</a>
            <a href="gallery.html">Galeri</a>
        </nav>
    </header>
    <main>
        <h2>Bu, basit bir giriş seviyesi HTML web sitesidir.</h2>
        <p>Buraya site ile ilgili kısa bir açıklama ekleyebilirsiniz.</p>
    </main>
    <footer>
        <p>&copy; 2024. Tüm hakları saklıdır.</p>
    </footer>
</body>
</html>

3. gallery.html Dosyası​

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Galeri</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Galeri</h1>
        <nav>
            <a href="index.html">Ana Sayfa</a>
            <a href="gallery.html">Galeri</a>
        </nav>
    </header>
    <main>
        <h2>Resimlerimiz</h2>
        <div class="gallery">
            <img src="images/resim1.jpg" alt="Resim 1">
            <img src="images/resim2.jpg" alt="Resim 2">
            <img src="images/resim3.jpg" alt="Resim 3">
            <img src="images/resim4.jpg" alt="Resim 4">
            <img src="images/resim5.jpg" alt="Resim 5">
            <img src="images/resim6.jpg" alt="Resim 6">
            <img src="images/resim7.jpg" alt="Resim 7">
            <img src="images/resim8.jpg" alt="Resim 8">
            <!-- İstediğiniz kadar resim ekleyebilirsiniz -->
        </div>
    </main>
    <footer>
        <p>&copy; 2024. Tüm hakları saklıdır.</p>
    </footer>
</body>
</html>

4. CSS (styles.css - İsteğe Bağlı)​

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
}

nav a {
    margin: 0 10px;
    color: white;
    text-decoration: none;
}

footer {
    background-color: #f1f1f1;
    padding: 10px;
    margin-top: 20px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
    max-width: 800px;
    margin: auto;
}

.gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

Açıklamalar:​

• grid-template-columns: repeat(4, 1fr); ifadesi, dört sütun oluşturur. 1fr her sütun için eşit bir oran sağlar.
• gap: 10px; ifadesi, her bir resim arasına 10 piksel boşluk bırakır.
• max-width: 800px; margin: auto; sayfanın ortasında konumlanması ve toplam genişliğin 800px'i geçmemesi için ayarlanmıştır.
• object-fit: cover; özelliği, resimlerin kırpılmasını sağlar ve kare olarak sabitlenmesini sağlar.

msd0 dedi:

@BigDesigner hocam ricam etsem acaba yardımcı olabilir misiniz. Size özelden yazmak istedim ancak direk mesaj yok galiba. Dediğiniz yerlerde bir türlü sonuç alamadım(beceremedim)

Genişletmek için tıkla...

Virüs Taraması Bilgileri​

Örnek Dosyaları indirmek isterseniz;​

index.html Kodu​

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Slider Örneği</title>
</head>
<body>

<div class="container mt-4">
    <!-- Menü Başlangıcı -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Site Adı</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">Ana Sayfa</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="gallery.html">Galeriye Git</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- Menü Bitişi -->

    <!-- Slider Başlangıcı -->
    <div id="carouselExample" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/slider-image1.png" class="d-block w-100" style="height: 400px;" alt="Slider Resmi 1">
            </div>
            <div class="carousel-item">
                <img src="images/slider-image2.png" class="d-block w-100" style="height: 400px;" alt="Slider Resmi 2">
            </div>
            <div class="carousel-item">
                <img src="images/slider-image3.png" class="d-block w-100" style="height: 400px;" alt="Slider Resmi 3">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Önceki</span>
        </a>
        <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Sonraki</span>
        </a>
    </div>
    <!-- Slider Bitişi -->
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

gallery.html Kodu​

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
    <title>Galeri</title>
</head>
<body>
    <div class="container" style="max-width: 1080px;">
        <!-- Menü Başlangıcı -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Site Adı</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Ana Sayfa</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="gallery.html">Galeriye Git</a>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- Menü Bitişi -->

        <h1 class="text-center">Galeri</h1>
        <div class="row">
            <div class="col-3">
                <a href="images/image1.png" data-lightbox="gallery" data-title="Image 1">
                    <img src="images/image1.png" class="img-fluid" alt="Image 1">
                </a>
            </div>
            <div class="col-3">
                <a href="images/image2.png" data-lightbox="gallery" data-title="Image 2">
                    <img src="images/image2.png" class="img-fluid" alt="Image 2">
                </a>
            </div>
            <div class="col-3">
                <a href="images/image3.png" data-lightbox="gallery" data-title="Image 3">
                    <img src="images/image3.png" class="img-fluid" alt="Image 3">
                </a>
            </div>
            <div class="col-3">
                <a href="images/image4.png" data-lightbox="gallery" data-title="Image 4">
                    <img src="images/image4.png" class="img-fluid" alt="Image 4">
                </a>
            </div>
            <div class="col-6">
                <iframe width="100%" height="238" src="https://www.youtube.com/embed/FjBGNPsEdLo" title="ASUS TUF Gaming VG259Q3A Oyuncu Monitörü İncelemesi" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>
            <div class="col-6">
                <iframe width="100%" height="238" src="https://www.youtube.com/embed/FjBGNPsEdLo" title="ASUS TUF Gaming VG259Q3A Oyuncu Monitörü İncelemesi" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>
            <!-- Diğer görselleri buraya ekleyebilirsiniz -->
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>

1. Menü Eklentisi:Bootstrap ile oluşturulmuş, "Ana Sayfa" ve "Galeri" bağlantılarını içeren bir navigasyon çubuğu.
2. Konteyner:Sayfanın içeriğini sınırlandırmak için container sınıfı kullanılarak maksimum genişliği 1080 piksel olan bir alan oluşturulmuştur.
3. Başlık:Galeri sayfasının başlığı olarak "Galeri" metnini ortalayarak görüntülemek için h1 etiketi kullanılmıştır.
4. Görsel Galerisiört adet resimden oluşan bir galeri düzeni oluşturulmuştur. Her resim, kullanıcı tarafından tıklanıldığında tam boyutlu olarak görüntülenebilen bir lightbox efektine sahiptir. Yan yana 2 tane görünecek şekilde de youtube video ekleyebilirsiniz.
5. Bootstrap Grid Sistemi:Her bir resim, col-3 sınıfı kullanılarak dört eşit sütun halinde yerleştirilmiştir. Bu, her satırda dört resmin görünmesini sağlar.
6. Lightbox Entegrasyonu:data-lightbox ve data-title attributeleri ile her resme lightbox entegrasyonu eklenmiştir. Bu, tıkladığınızda resmi tam boyutlu görmenizi ve başlık göstermesini sağlar.
7. JavaScript Kütüphaneleri:jQuery, Popper.js ve Bootstrap JavaScript kütüphaneleri ile birlikte lightbox kütüphanesi, sayfanın dinamik işlevselliğini sağlamak için dahil edilmiştir.
8. Responsive Görseller:Her resim için img-fluid sınıfı kullanılarak görsellerin boyutlarının esnek ve her ekran boyutuna uyum sağlaması hedeflenmiştir.

<body>
    <div class="container" style="max-width: 1080px;">

<body>
    <div class="container mt-4">

BigDesigner dedi:

@msd0


Tabiki yardımcı olayım. Öncelikle web sitesinin yapısı şu şekilde olmalı;

index.html (Bu sizin açılış sayfanız.)
images (Bu isimde bir klasör oluşturup içerisine web sitesinde kullanacağınız jpg, png gibi resim ve fotoğrafları ekleyebilirsiniz.)

Videolar için web sitenizin içerisine bunu yüklemek ve html e gömmek bir player kullanmak vs sizin için başlangıçta zor olabilir ve bunu host etmek ve yayınlamakta ayrıca zahmetli olabilir. Videoları Youtube, Vimeo gibi bir siteye yükleyerek "Liste Dışı" ayarlaması yaparsanız sadece bağlantısını baylaştığınız kişiler görüntüler ve sizin için özel bir video ve kimsenin görmesini istemiyorsanız bu şekilde kullanabilirsiniz.

Videoları Vimeo veya Youtube a yükledikten sonra "Embed" "Göm" "Siteye Ekle" gibi seçenekler ile bir HTML kod elde edersiniz ve index.html'de görünmesini istedğiniz yere ekleyebilirsiniz. Bu şekilde videoları eklemiş olursunuz.

images klasörü için önemli hatırlatmalar dikkat edilmesi gerekenleri şöyle sıralayabiliriz;

1. web dizininde yer alan dosya klasör isimlerinde "Boşluk" "Türkçe Karakter" "Özel Simge" kullanılmamalı. Örn: fotoğraf.jpg yerine fotograf.jpg olarak kaydetmelisiniz. Eğer birden çok dosya ekliyorsanız bunların isimlerini yazarkende fotograf 1.jpg yerine fotograf01.jpg veya fotograf-01.jpg fotograf-02.jpg fotograf-03.jpg gibi düşünebilirsiniz.
2. images klasörü içerisine içinde hiçbir kod yazmayan boş bir index.html dosyası oluşturursanız web dizininde siteadi.com/images adresine gidildiğinde yüklediğiniz medyalari kimse göremez. index.html images klasörünün açılış sayfası olarak görev yapacağı için boş bir sayfa görüntüler ziyaretçiler. Bazı güvenlik açıklarının da önüne geçmiş olursunuz.

Bu 2 konuya dikkat ederseniz web siteniz LOCAL de nasıl çalışıyor ise uzak sunucuya yüklediğiniz de de öyle çalışır.

Bunların dışında sizin için basit örnek niteliğinde bir yapı oluşturup sizinle paylaşıyorum belki anlamanız için yardımcı olur.

1. Dosya ve Klasör Yapısı​

SCSS:Panoya kopyala

proje_adi/
├── index.html
├── gallery.html
├── style.css (css kodları buraya yazabilirsiniz)
└── images/
    └── (Resim dosyalarınızı buraya yükleyebilirsiniz)

2. index.html Dosyası​

Ana sayfanız olacak olan index.html dosyasının içeriği:

HTML:Panoya kopyala

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Hoş Geldiniz</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Hoş Geldiniz!</h1>
        <nav>
            <a href="index.html">Ana Sayfa</a>
            <a href="gallery.html">Galeri</a>
        </nav>
    </header>
    <main>
        <h2>Bu, basit bir giriş seviyesi HTML web sitesidir.</h2>
        <p>Buraya site ile ilgili kısa bir açıklama ekleyebilirsiniz.</p>
    </main>
    <footer>
        <p>&copy; 2024. Tüm hakları saklıdır.</p>
    </footer>
</body>
</html>

3. gallery.html Dosyası​

Galeri sayfası için basit bir yapı oluşturalım. Resimlerinizi yüklemek için images klasörünü kullanabilirsiniz.

HTML:Panoya kopyala

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Galeri</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Galeri</h1>
        <nav>
            <a href="index.html">Ana Sayfa</a>
            <a href="gallery.html">Galeri</a>
        </nav>
    </header>
    <main>
        <h2>Resimlerimiz</h2>
        <div class="gallery">
            <img src="images/resim1.jpg" alt="Resim 1">
            <img src="images/resim2.jpg" alt="Resim 2">
            <img src="images/resim3.jpg" alt="Resim 3">
            <img src="images/resim4.jpg" alt="Resim 4">
            <img src="images/resim5.jpg" alt="Resim 5">
            <img src="images/resim6.jpg" alt="Resim 6">
            <img src="images/resim7.jpg" alt="Resim 7">
            <img src="images/resim8.jpg" alt="Resim 8">
            <!-- İstediğiniz kadar resim ekleyebilirsiniz -->
        </div>
    </main>
    <footer>
        <p>&copy; 2024. Tüm hakları saklıdır.</p>
    </footer>
</body>
</html>

4. CSS (styles.css - İsteğe Bağlı)​

İsterseniz bir styles.css dosyası oluşturarak temel bir stil ekleyebilirsiniz. Örneğin:

CSS:Panoya kopyala

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
}

nav a {
    margin: 0 10px;
    color: white;
    text-decoration: none;
}

footer {
    background-color: #f1f1f1;
    padding: 10px;
    margin-top: 20px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
    max-width: 800px;
    margin: auto;
}

.gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

Açıklamalar:​

• grid-template-columns: repeat(4, 1fr); ifadesi, dört sütun oluşturur. 1fr her sütun için eşit bir oran sağlar.
• gap: 10px; ifadesi, her bir resim arasına 10 piksel boşluk bırakır.
• max-width: 800px; margin: auto; sayfanın ortasında konumlanması ve toplam genişliğin 800px'i geçmemesi için ayarlanmıştır.
• object-fit: cover; özelliği, resimlerin kırpılmasını sağlar ve kare olarak sabitlenmesini sağlar.

Bu düzenle dört sütunlu, 200px x 200px boyutlarında fotoğrafları içeren hoş bir galeri görünümünüz olacak.

Artık bu yapıyı kullanarak çok basit bir HTML web sitesi oluşturabilirsiniz. Resimlerinizi images klasörüne ekleyebilir ve gallery.html dosyasında bunları görüntüleyebilirsiniz.

Yukarıdaki verdiğim örnekleri tamamen olayı anlamanız için hazırladım. Bu dosyalar bir işinize yaramaz yani. Sadece yapıyı anlamanız için.



Sizin için index.html gallery.html ve images klasörünü oluşturdum. Bu biraz daha faydalı olacaktır. Hatta bu dosyaları düzenleyerek ilerleyebilirsiniz.

Demo: Slider Örneği Bu siteyi aşağıdaki kodlar ile oluşturdum.

Virüs Taraması Bilgileri​

İndirdiğiniz dosyanın HASH bilgisini alarak Virus Total'de arama yaparak virüs olmadığını görebilirsiniz. Bu konularda ben biraz fazla hassas davranıyorum. Yanlış anlamayın lütfen. Yardımcı olmaya çalışıyorum insanlara ama bazen gönderdiğin dosyada virüs vardı şöyle oldu böyle oldu derken anlaşmazlıklar olabiliyor. Bu sebeple lütfen aşağıdaki bağlantıları kullanmadan önce virüs taramalarını gözden geçirin.

HASH Kontrol için: https://hash-file.online
HASH Kontrol Sonuç: "msd0.zip", with size of 77,793 kb (kilobytes), and file hash using the hashing algorithm SHA-256 has the value : 717abb24fb6056edffb1032e977cd370be1360effcdaaae7aba2f333074a24f9.
Virus Total Sonuç: https://www.virustotal.com/gui/file...370be1360effcdaaae7aba2f333074a24f9?nocache=1

Örnek Dosyaları indirmek isterseniz;​

Örnek Dosya: msd0.zip

index.html Kodu​

HTML:Panoya kopyala

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Slider Örneği</title>
</head>
<body>

<div class="container mt-4">
    <!-- Menü Başlangıcı -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Site Adı</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">Ana Sayfa</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="gallery.html">Galeriye Git</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- Menü Bitişi -->

    <!-- Slider Başlangıcı -->
    <div id="carouselExample" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/slider-image1.png" class="d-block w-100" style="height: 400px;" alt="Slider Resmi 1">
            </div>
            <div class="carousel-item">
                <img src="images/slider-image2.png" class="d-block w-100" style="height: 400px;" alt="Slider Resmi 2">
            </div>
            <div class="carousel-item">
                <img src="images/slider-image3.png" class="d-block w-100" style="height: 400px;" alt="Slider Resmi 3">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Önceki</span>
        </a>
        <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Sonraki</span>
        </a>
    </div>
    <!-- Slider Bitişi -->
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

gallery.html Kodu​

Kod:Panoya kopyala

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
    <title>Galeri</title>
</head>
<body>
    <div class="container" style="max-width: 1080px;">
        <!-- Menü Başlangıcı -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Site Adı</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Ana Sayfa</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="gallery.html">Galeriye Git</a>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- Menü Bitişi -->

        <h1 class="text-center">Galeri</h1>
        <div class="row">
            <div class="col-3">
                <a href="images/image1.png" data-lightbox="gallery" data-title="Image 1">
                    <img src="images/image1.png" class="img-fluid" alt="Image 1">
                </a>
            </div>
            <div class="col-3">
                <a href="images/image2.png" data-lightbox="gallery" data-title="Image 2">
                    <img src="images/image2.png" class="img-fluid" alt="Image 2">
                </a>
            </div>
            <div class="col-3">
                <a href="images/image3.png" data-lightbox="gallery" data-title="Image 3">
                    <img src="images/image3.png" class="img-fluid" alt="Image 3">
                </a>
            </div>
            <div class="col-3">
                <a href="images/image4.png" data-lightbox="gallery" data-title="Image 4">
                    <img src="images/image4.png" class="img-fluid" alt="Image 4">
                </a>
            </div>
            <div class="col-6">
                <iframe width="100%" height="238" src="https://www.youtube.com/embed/FjBGNPsEdLo" title="ASUS TUF Gaming VG259Q3A Oyuncu Monitörü İncelemesi" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>
            <div class="col-6">
                <iframe width="100%" height="238" src="https://www.youtube.com/embed/FjBGNPsEdLo" title="ASUS TUF Gaming VG259Q3A Oyuncu Monitörü İncelemesi" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>
            <!-- Diğer görselleri buraya ekleyebilirsiniz -->
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>

HTML kodunun bölümlerini açıklayan bir liste:

Açıklamalar

1. Menü Eklentisi:Bootstrap ile oluşturulmuş, "Ana Sayfa" ve "Galeri" bağlantılarını içeren bir navigasyon çubuğu.
2. Konteyner:Sayfanın içeriğini sınırlandırmak için container sınıfı kullanılarak maksimum genişliği 1080 piksel olan bir alan oluşturulmuştur.
3. Başlık:Galeri sayfasının başlığı olarak "Galeri" metnini ortalayarak görüntülemek için h1 etiketi kullanılmıştır.
4. Görsel Galerisiört adet resimden oluşan bir galeri düzeni oluşturulmuştur. Her resim, kullanıcı tarafından tıklanıldığında tam boyutlu olarak görüntülenebilen bir lightbox efektine sahiptir. Yan yana 2 tane görünecek şekilde de youtube video ekleyebilirsiniz.
5. Bootstrap Grid Sistemi:Her bir resim, col-3 sınıfı kullanılarak dört eşit sütun halinde yerleştirilmiştir. Bu, her satırda dört resmin görünmesini sağlar.
6. Lightbox Entegrasyonu:data-lightbox ve data-title attributeleri ile her resme lightbox entegrasyonu eklenmiştir. Bu, tıkladığınızda resmi tam boyutlu görmenizi ve başlık göstermesini sağlar.
7. JavaScript Kütüphaneleri:jQuery, Popper.js ve Bootstrap JavaScript kütüphaneleri ile birlikte lightbox kütüphanesi, sayfanın dinamik işlevselliğini sağlamak için dahil edilmiştir.
8. Responsive Görseller:Her resim için img-fluid sınıfı kullanılarak görsellerin boyutlarının esnek ve her ekran boyutuna uyum sağlaması hedeflenmiştir.

Bu açıklamalar, kodun yapısını ve işlevselliğini anlamak için yararlı bir kaynak sağlar. Her bölüm, sitenizin görünümü için kritik öneme sahiptir.

Yardımcı olmuşumdur umarım.

gallery.html'de ufak bir hata var

Bu kodu

HTML:Panoya kopyala

<body>
    <div class="container" style="max-width: 1080px;">

Bu kodla değiştirirsen gallery.html deki ufak hatayı giderebilirsin.

HTML:Panoya kopyala

<body>
    <div class="container mt-4">

Genişletmek için tıkla...

msd0 dedi:

Hocam çok teşekkür ederim sonunda yapabildim

Genişletmek için tıkla...