HTML ile Neler Yapılabilir ?

html ile neler yapılabilir

Merhaba HTML severler!

HTML ile Neler Yapılabilir; HTML, dijital dünyada kendi hikayenizi anlatmanın, görsel şölenler oluşturmanın ve kullanıcılarınızla etkileşimde bulunmanın kapılarını aralar.

Bu büyülü dünyanın temel taşı olan HTML (HyperText Markup Language), web sayfalarını oluşturmanın ve ziyaretçilerinizi etkilemenin anahtarıdır. HTML sayesinde yaratıcı düşüncelerinizi gerçeğe dönüştürmek için ihtiyacınız olan araçlara sahip olursunuz.

Bu yazı dizisi boyunca, HTML’nin sınırsız potansiyelini keşfedecek ve web sayfalarınızı sadece metin ve görsellerle değil, aynı zamanda ses, video, interaktif formlar ve daha fazlasıyla canlandırmanın yollarını öğreneceksiniz. Daha önce okumadıysanız HTML Tarihçesini okumanızı da öneririm. Hazır mısınız?

O halde, web tasarımın büyülü dünyasına adım atın ve HTML ile neler yapabileceğinizi keşfedin!

Hadi Başlayalım : HTML ile Neler Yapılabilir ?

HTML, bir metin düzenleyicisi gibi başlar, ancak hikayenizi anlatmanın daha renkli ve ilgi çekici bir yolu olabilir mi? Tabii ki! HTML, başlıklar, paragraflar, listeler ve hatta görseller ile hikayenizi zenginleştirmenizi sağlar. Hayal gücünüzü kullanarak, okuyucularınızı büyüleyen bir hikaye sunabilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <title>Benim Harika Hikayem</title>
</head>
<body>
    <h1>Macera Dolu Bir Gün</h1>
    <p>Bir gün <strong>cesur kahramanımız</strong> güneşli bir günde maceradan maceraya atıldı...</p>
    <img src="kahraman.png" alt="Cesur Kahraman" width="300">
</body>
</html>

Görsel Galeri Oluşturun

Eğlenceli anılarınızı paylaşmak için HTML’den daha iyi bir yol var mı? Fotoğraf galerisi oluşturarak anılarınızı renklendirin. Resimleri sıralayın, başlıklar ekleyin ve her bir anının altını açıklamalarla doldurun. Sonuç? Mükemmel bir görsel yolculuk!

<!DOCTYPE html>
<html>
<head>
    <title>Anılarımız</title>
</head>
<body>
    <h1>Unutulmaz Anılar</h1>
    <div class="galeri">
        <img src="tatil1.jpg" alt="Tatil Anısı 1">
        <p>Denizin tadını çıkarırken...</p>
    </div>
    <div class="galeri">
        <img src="dogumgunu.jpg" alt="Doğum Günü Partisi">
        <p>Harika bir doğum günü partisi!</p>
    </div>
</body>
</html>

Bağlantılar ve Sayfalar Arası Gezinme

Web’in güzelliği, farklı sayfalar arasında dolaşma yeteneğinde yatar. HTML sayesinde, bağlantılar ekleyerek ve sayfalarınızı birbirine bağlayarak ziyaretçilerinizi farklı maceralara yönlendirebilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <title>Gezinti Zamanı</title>
</head>
<body>
    <h1>Keşfedilmeyi Bekleyen Yerler</h1>
    <a href="plaj.html">En Güzel Plajlar</a>
    <a href="daglar.html">Dağlar Arasında Yolculuk</a>
</body>
</html>

Formlarla Etkileşime Geçin

HTML aynı zamanda kullanıcılarınızla etkileşimde bulunmanızı sağlar. Formlar sayesinde kullanıcıları yorum yapmaya, kaydolmaya veya anketlerinizi doldurmaya davet edebilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <title>İletişime Geçelim</title>
</head>
<body>
    <h1>Bize Ulaşın</h1>
    <form>
        <label for="ad">Adınız:</label>
        <input type="text" id="ad" name="ad" required><br><br>
        <label for="email">E-posta Adresiniz:</label>
        <input type="email" id="email" name="email" required><br><br>
        <textarea id="mesaj" name="mesaj" rows="4" cols="50" placeholder="Mesajınızı buraya yazın..." required></textarea><br><br>
        <input type="submit" value="Gönder">
    </form>
</body>
</html>

İframe ile Gömme İşlemi

Web sayfanızı daha da çekici hale getirmek için başka içerikleri gömmek ister misiniz? YouTube videoları, haritalar veya başka web sayfalarını sayfanıza eklemek artık çok kolay!

<!DOCTYPE html>
<html>
<head>
    <title>Harika İçerikler</title>
</head>
<body>
    <h1>En Sevdiğim Videolar</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Ses ve Video

Sadece metin ve görsel değil, ses ve video içeriklerini de sayfanıza ekleyebilirsiniz. Eğitici videolar veya rahatlatıcı müzikler ekleyerek ziyaretçilerinizi daha fazla etkileyebilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <title>Ses ve Video</title>
</head>
<body>
    <h1>Müzik Ziyafeti</h1>
    <audio controls>
        <source src="muzik.mp3" type="audio/mpeg">
        Tarayıcınız ses elementini desteklemiyor.
    </audio>
    <br><br>
    <h1>Görsel Keyfi</h1>
    <video width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">
        Tarayıcınız video elementini desteklemiyor.
    </video>
</body>
</html>

SVG ile Vektörel Grafikler

HTML sadece metin ve resimlerle sınırlı değil! SVG (Scalable Vector Graphics) ile vektörel grafikler oluşturabilirsiniz. Bu, grafiklerinizi boyut ne olursa olsun net ve keskin tutmanızı sağlar.

<!DOCTYPE html>
<html>
<head>
    <title>Vektörel Sanat</title>
</head>
<body>
    <h1>Benzersiz Grafikler</h1>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</body>
</html>

Çerezler ve Depolama

HTML, kullanıcıların tarayıcılarına çerezler (cookies) aracılığıyla veri kaydetmelerine ve depolamalarına olanak tanır. Bu, oturum açma durumunu, tercihleri ve daha fazlasını saklamak için kullanışlıdır.

<!DOCTYPE html>
<html>
<head>
    <title>Çerezler ve Depolama</title>
</head>
<body>
    <h1>Ziyaretçi Defteri</h1>
    <textarea id="ziyaretci-mesaj" rows="4" cols="50"></textarea><br><br>
    <button onclick="kaydet()">Mesajı Kaydet</button>
    <script>
        function kaydet() {
            var mesaj = document.getElementById("ziyaretci-mesaj").value;
            localStorage.setItem("ziyaretciMesaj", mesaj);
        }
    </script>
</body>
</html>

Mobil Dostu Tasarım

HTML ile sadece masaüstü değil, mobil cihazlara uyumlu web siteleri de tasarlayabilirsiniz. Media sorguları kullanarak ekran boyutlarına göre düzenlemeler yapabilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <title>Mobil Uyumlu Tasarım</title>
    <style>
        @media (max-width: 600px) {
            body {
                background-color: lightblue;
            }
        }
    </style>
</head>
<body>
    <h1>Responsive Tasarım</h1>
    <p>Bu metin masaüstü ve mobil cihazlarda farklı renklerde görünecek.</p>
</body>
</html>

HTML’nin sınırsız yaratıcılık dünyası, sayfalarınızı daha da özelleştirip ziyaretçilerinizi etkileyebilmeniz için elinizde. Yeni özellikler keşfetmek ve denemek için cesur olun!

Son Söz

HTML’nin sınırsız potansiyeli ile web sayfalarınızı gerçek bir sanat eserine dönüştürebilirsiniz. Hikayeler anlatabilir, görsel şölenler oluşturabilir, kullanıcılarınızla etkileşime geçebilir ve daha fazlasını yapabilirsiniz. Şimdi, klavyenizin sihirli dokunuşlarıyla kendi HTML maceranıza başlayın!

Click to rate this post!
[Total: 1 Average: 5]

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir