İlk dersimizde HTML5’in temellerini öğrendik.
Bir web sayfasının nasıl başladığını, <head> ve <body> bölümlerinin görevlerini,
ayrıca <h1> ve <p> gibi temel etiketleri tanıdık.
Artık modern web sayfalarının iskeletini oluşturabilecek seviyeye geldik!
İlk dersimizde HTML5’in temel yapısını ve en önemli etiketlerini öğrendik.
Artık web sayfasının nasıl oluşturulduğunu biliyoruz.
Bu son dersimizde, web sayfamızı hareketlendirecek ve görsel olarak zenginleştirecek yeni etiketlerle tanışacağız.
Bu derste öğreneceklerimiz:
- Bağlantılar <a>
- Görseller <img>
- Listeler <ul>, <ol>, <li>
Bir web sayfasının nasıl başladığını, <head> ve <body> bölümlerinin görevlerini,
ayrıca <h1> ve <p> gibi temel etiketleri tanıdık.
Artık modern web sayfalarının iskeletini oluşturabilecek seviyeye geldik!
İlk dersimizde HTML5’in temel yapısını ve en önemli etiketlerini öğrendik.
Artık web sayfasının nasıl oluşturulduğunu biliyoruz.
Bu son dersimizde, web sayfamızı hareketlendirecek ve görsel olarak zenginleştirecek yeni etiketlerle tanışacağız.
Bu derste öğreneceklerimiz:
- Bağlantılar <a>
- Görseller <img>
- Listeler <ul>, <ol>, <li>
1. Bağlantılar (<a>)
HTML’in en güçlü özelliklerinden biri, bir sayfadan diğerine bağlantı verebilmesidir.
Yani bir metni tıklanabilir hale getirip başka bir sayfaya yönlendirebiliriz.
Kullanım Şekli:
Açıklama:
- href → Bağlantının adresini belirtir.
- <a> ve </a> arasındaki metin tıklanabilir hale gelir.
Yeni sekmede açmak istersen:
target="_blank" etiketi, bağlantının yeni bir sekmede açılmasını sağlar.
Yani bir metni tıklanabilir hale getirip başka bir sayfaya yönlendirebiliriz.
Kullanım Şekli:
<a href="https://www.turkhackteam.org">THT Forumuna Git</a>Açıklama:
- href → Bağlantının adresini belirtir.
- <a> ve </a> arasındaki metin tıklanabilir hale gelir.
Yeni sekmede açmak istersen:
<a href="https://www.turkhackteam.org" target="_blank">THT'yi Yeni Sekmede Aç</a>target="_blank" etiketi, bağlantının yeni bir sekmede açılmasını sağlar.
2. Görseller (<img>)
Artık web sayfamıza görseller ekleme zamanı!
Görseller <img> etiketiyle eklenir. Bu etiketin kapanışı yoktur (tek satırda çalışır).
Kullanım Şekli:
Açıklama:
- src → Görselin dosya yolunu veya URL’sini belirtir.
- alt → Görsel yüklenmezse gösterilecek alternatif metin.
- width ve height → Boyut ayarları.
Örnek:
Görseller <img> etiketiyle eklenir. Bu etiketin kapanışı yoktur (tek satırda çalışır).
Kullanım Şekli:
<img src="resim.jpg" alt="THT Logosu" width="300">Açıklama:
- src → Görselin dosya yolunu veya URL’sini belirtir.
- alt → Görsel yüklenmezse gösterilecek alternatif metin.
- width ve height → Boyut ayarları.
Örnek:
<img src="https://i.imgur.com/q4vzMbr.png" alt="THT Logosu" width="250">
3. Listeler (<ul>, <ol>, <li>)
Bilgileri düzenli göstermek istiyorsak listeler kullanırız.
HTML’de iki tür liste vardır:
Sırasız Liste (<ul>)
Madde başlarında nokta (•) işareti bulunur.
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li></ul>Sıralı Liste (<ol>)
Madde başlarında rakamlar (1, 2, 3) vardır.
<ol> <li>Tarayıcıyı Aç</li> <li>Sayfayı Görüntüle</li> <li>Kodu İncele</li></ol>Pratik Uygulama
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THT Ders 2 | Bağlantılar ve Görseller</title>
</head>
<body>
<h1>THT HTML5 Ders 2</h1>
<p>Bugün bağlantılar, görseller ve listeleri öğrendik.</p>
<a href="https://www.turkhackteam.org" target="_blank">THT Forumuna Git</a>
<br><br>
<img src="https://i.imgur.com/q4vzMbr.png" alt="THT Görsel" width="250">
<h2>Öğrendiğimiz Etiketler:</h2>
<ul>
<li><a> → Bağlantı Etiketi</li>
<li><img> → Görsel Etiketi</li>
<li><ul>, <ol>, <li> → Liste Etiketleri</li>
</ul>
</body>
</html>
nasıl açarız?????
ardından ismini
index.txt
yapıyoruz içine kodları yapıştırıyoruz ve kaydediyoruz
sonra ismini
index.html
yapıyoruz ve çift tıklıyoruz
ve sonuç
HERKESE İYİ DERSLER...
