Serinin ilk bölümü: HTML Öğrenelim - 1
Serinin ikinci bölümü: HTML Öğrenelim - 2
Serinin üçüncü bölümü: HTML Öğrenelim - 3
Serinin dördüncü bölümü: HTML Öğrenelim - 4
Serinin beşinci bölümü: HTM Öğrenelim - 5
Serinin altıncı bölümü: HTML Öğrenelim - 6
Serinin yedinci bölümü: HTML Öğrenelim - 7
Serinin sekizinci bölümü: HTML Öğrenelim - 8
Serinin dokuzuncu bölümü: HTML Öğrenelim - 9
Github - Repository
Kaynak: W3schools
HTML'de Blok ve Satır İçi Elementler
Her bir HTML elementi varsayılan(default) bir çıktı verir. Bu çıktı elementin hangi türde olduğuna göre değişiklik gösterir.
İki tür çıktı değeri vardır: Blok ve Satır içi
Blok Seviyesinde Elementler
Blok seviyesinde bir element her zaman yeni bir satırla başlar ve tarayıcı otomatik olarak elementin önüne ve arkasına biraz boşluk ekler.
Blok seviyesinde bir element her zaman mevcut tüm genişliği kapsar.(olabildiğince sağa ve sola doğru yayılır)
Sıklıkla iki blok seviyesinde element kullanılır. Bunlar <p> ve <div> elementleridir.
<p> elementi HTML dökümanlarında bir paragraf tanımlarken kullanılır.
<div> elementi HTML dökümanlarında bir bölümü tanımlar.
HTML'de blok seviyesindeki elementler:
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1> - <h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Serinin ikinci bölümü: HTML Öğrenelim - 2
Serinin üçüncü bölümü: HTML Öğrenelim - 3
Serinin dördüncü bölümü: HTML Öğrenelim - 4
Serinin beşinci bölümü: HTM Öğrenelim - 5
Serinin altıncı bölümü: HTML Öğrenelim - 6
Serinin yedinci bölümü: HTML Öğrenelim - 7
Serinin sekizinci bölümü: HTML Öğrenelim - 8
Serinin dokuzuncu bölümü: HTML Öğrenelim - 9
Github - Repository
Kaynak: W3schools
HTML'de Blok ve Satır İçi Elementler
Her bir HTML elementi varsayılan(default) bir çıktı verir. Bu çıktı elementin hangi türde olduğuna göre değişiklik gösterir.
İki tür çıktı değeri vardır: Blok ve Satır içi
Blok Seviyesinde Elementler
Blok seviyesinde bir element her zaman yeni bir satırla başlar ve tarayıcı otomatik olarak elementin önüne ve arkasına biraz boşluk ekler.
Blok seviyesinde bir element her zaman mevcut tüm genişliği kapsar.(olabildiğince sağa ve sola doğru yayılır)
Sıklıkla iki blok seviyesinde element kullanılır. Bunlar <p> ve <div> elementleridir.
<p> elementi HTML dökümanlarında bir paragraf tanımlarken kullanılır.
<div> elementi HTML dökümanlarında bir bölümü tanımlar.
HTML'de blok seviyesindeki elementler:
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1> - <h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Satır İçi Elementler
Satır içi bir element yeni bir satırla başlamaz.
Satır içi elementler sadece gerektiği kadar boşluğu doldururlar.
HTML'de satır içi elementler:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
Not: Bir satır içi element blok seviyesinde bir elementi bünyesinde barındıramaz.
<div> Elementi
<div> elementi sıklıkla diğer HTML elementlerini kapsayacağı şekilde kullanılır.
<div> elementi özniteliğe ihtiyaç duymaz. Fakat style, class ve id ortaktır.
CSS ile birlikte kullanıldığında içeriğin bloklarını şekillendirebilirsiniz.
Satır içi bir element yeni bir satırla başlamaz.
Satır içi elementler sadece gerektiği kadar boşluğu doldururlar.
HTML'de satır içi elementler:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
Not: Bir satır içi element blok seviyesinde bir elementi bünyesinde barındıramaz.
<div> Elementi
<div> elementi sıklıkla diğer HTML elementlerini kapsayacağı şekilde kullanılır.
<div> elementi özniteliğe ihtiyaç duymaz. Fakat style, class ve id ortaktır.
CSS ile birlikte kullanıldığında içeriğin bloklarını şekillendirebilirsiniz.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>THT</h2>
<p>Türk Hack Team 2002 yılında Arsenik tarafından kurulmuş olan siber güvenlik platformudur.</p>
<p>Türk Hack Team bünyesinde çeşitli ekipleri barındıran Türkiye'nin en büyük siber güvenlik platformudur.</p>
</div>
</body>
</html>
<span> Elementi
<span> elementi bir dökümanın bir parçasını veya bir metnin bir parçasını işaretlemek için kullanılan satır içi bir kapsayıcıdır.
<span> elementi özniteliğe ihtiyaç duymaz. Fakat style, class ve id ortaktır.
CSS ile birlikte kullanıldığında metnin stilini değiştirebilirsiniz.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h1>span Elementi</h1>
<p>THT'nin en iyi içerik üreten ekibi <span style="color:green;font-weight:bold">Green Team</span> forum üyeleri için detaylı içerikler hazırlarlar. <span style="color:blue;font-weight:bold">Basın Medya</span> ekibi ise bu içeriklerin tanıtmını yapmaktadır.</p>
</body>
</html>
HTML'de class Özelliği
class özelliği bir HTML elementinin sınıfını belirtmek için kullanılır.
Birden fazla HTML elementi aynı sınıfta olabilir.
class özelliği genellikle bir style sayfasında bir sınıf adını işaret etmek için kullanılır. Belirli sınıf adına sahip öğelere erişmek ve bunları değiştirmek için bir JavaScript tarafından da kullanılabilir.
Aşağıdaki örnekte, "city" değerine sahip bir sınıf özelliğinde üç <div> elemanımız var. Üç <div> elementinin tümü, başlık bölümündeki .city style tanımına göre eşit şekilde stillendirilecektir:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>Londra</h2>
<p>Londra İngiltere'nin başkentidir.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris Fransa'nın başkentidir.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo Japonya'nın başkentidir..</p>
</div>
</body>
</html>
İpucu: class özelliği her HTML elementinde kullanılabilir.
Not: class name(sınıf özelliği) büyük harf-küçük harf duyarlılığına sahiptir.(case sensitive)
class Özelliği için Sözdizimi(syntax)
Bir sınıf oluşturabilmek için bir nokta (.) karakteri ve ardından bir sınıf adı(class name) yazın. Ardından, küme parantezleri {} içinde CSS özelliklerini tanımlayın.
Not: class name(sınıf özelliği) büyük harf-küçük harf duyarlılığına sahiptir.(case sensitive)
class Özelliği için Sözdizimi(syntax)
Bir sınıf oluşturabilmek için bir nokta (.) karakteri ve ardından bir sınıf adı(class name) yazın. Ardından, küme parantezleri {} içinde CSS özelliklerini tanımlayın.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>class Özelliği</h2>
<p>"city" sınıf adı ile elementleri şekillendirmek için CSS kullanın:</p>
<h2 class="city">Londra</h2>
<p>Londa İngiltere'nin başkentidir.</p>
<h2 class="city">Paris</h2>
<p>Paris Fransa'nın başkentidir.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo Japonya'nın başkentidir.</p>
</body>
</html>
Çoklu Sınıflar(Multiple Classes)
HTML elementleri birden fazla sınıfa ait olabilirler.
Çoklu sınıflar tanımlamak için sınıf adlarını bir boşlukla ayırın, örneğin <div class="city main">. Öğe, belirtilen tüm sınıflara göre şekillendirilecektir.
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Çoklu Sınıflar(Multiple Classes)
</h2>
<p>HTML elementleri birden fazla sınıfa ait olabilirler.
</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
Farklı Elementler Aynı Sınıfı Paylaşabilir
Farklı HTML elementleri aynı sınıf adını işaret edebilirler.
Aşağıdaki örnekte <h2> ve <p> elementleri "city" sınıfını işaret etmektedir. Ayrıca aynı stili paylaşacaklardır:Farklı HTML elementleri aynı sınıf adını işaret edebilirler.
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Farklı Elementler Aynı Sınıfı Paylaşabilir
</h2>
<p>İki HTML elementi aynı etiket ismine sahip olmasa bile aynı sınıfı işaret edebilirler ve CSS ile birlikte aynı görünümü elde edebilirler.</p>
<h2 class="city">Paris</h2>
<p class="city">Paris Fransa'nın başkentidir.</p>
</body>
</html>
class Özelliğini JavaScript'te Kullanmak
Sınıf adı(class name), belirli elementler için belirli görevleri gerçekleştirmek amacıyla JavaScriptte kullanılabilir.
JavaScript, getElementsByClassName() yöntemiyle belirli bir sınıf adına sahip öğelere erişebilir.
Sınıf adı(class name), belirli elementler için belirli görevleri gerçekleştirmek amacıyla JavaScriptte kullanılabilir.
JavaScript, getElementsByClassName() yöntemiyle belirli bir sınıf adına sahip öğelere erişebilir.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>class Özelliğini JavaScript'te Kullanmak</h2>
<p>"city" sınıf adıyla tüm özellikleri saklamak için butona basınız</p>
<button onclick="myFunction()">Elementleri sakla</button>
<h2 class="city">London</h2>
<p>Londra İngiltere'nin başkentidir.</p>
<h2 class="city">Paris</h2>
<p>Paris Fransa'nın başkentidir.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo Japonya'nın başkentidir.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
"Elementleri sakla" butonuna bastığımızda ekrandaki çıktı:
id Özelliği
id özelliği HTML elementleri için eşsiz bir id tanımlamak için kullanılır.
Bir HTML dökümanında aynı id'ye sahip birden fazla element bulunamaz.
id özelliği, bir style sayfasında belirli bir stil bildirimine işaret etmek için kullanılır. Ayrıca JavaScript tarafından belirli bir kimliğe sahip öğeye erişmek ve bunları işlemek için kullanılır.
id özelliği için sözdizimi: # işaretinden sonra id ismini yazarız. Sonrasında CSS özelliklerinden {} işaretlerini kullanırız.
Aşağıdaki örnekte, "myHeader" id'sine işaret eden bir <h1> elemanımız var. Bu <h1> öğesi, head bölümündeki #myHeader style tanımına göre biçimlendirilecektir:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>id Özelliği</h2>
<p>
"myHeader" kimliğine sahip bir öğeye stil vermek için CSS kullanın:</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Not: id ismi küçük harf-büyük harf duyarlılığına sahiptir.(case sensitive)
Not: id isimleri en az bir karakter içermek zorundadır. id isimleri numara ile başlayamaz ve boşluk içeremez.
Not: id isimleri en az bir karakter içermek zorundadır. id isimleri numara ile başlayamaz ve boşluk içeremez.
id Özelliğini JavaScript'te Kullanmak
id özelliği, JavaScript tarafından belirli öğe için bazı görevleri gerçekleştirmek için kullanılabilir.
JavaScript, getElementById() yöntemiyle belirli bir kimliğe sahip bir öğeye erişebilir.
id özelliği, JavaScript tarafından belirli öğe için bazı görevleri gerçekleştirmek için kullanılabilir.
JavaScript, getElementById() yöntemiyle belirli bir kimliğe sahip bir öğeye erişebilir.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>id Özelliğini JavaScript'te Kullanmak</h2>
<p>id özelliği, JavaScript tarafından belirli öğe için bazı görevleri gerçekleştirmek için kullanılabilir.
JavaScript, getElementById() yöntemiyle belirli bir kimliğe sahip bir öğeye erişebilir</p>
<h1 id="myHeader">Merhaba THT</h1>
<button onclick="displayResult()">Metni Değiştir.</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
HTML'de Iframe
Bir web sayfasını bir web sayfasının içinde görüntülemek için Iframe kullanılır.
Örnek kullanım:Bir web sayfasını bir web sayfasının içinde görüntülemek için Iframe kullanılır.
Iframe ifadesinin sözdizimi(Syntax)
<iframe> etiketi satır içi bir çerçeve oluşturmak için kullanılır.
Satır içi bir çerçeve bir dökümanı mevcut HTML dökümanına gömmek için kullanılır.
Kullanım biçimi:
<iframe> etiketi satır içi bir çerçeve oluşturmak için kullanılır.
Satır içi bir çerçeve bir dökümanı mevcut HTML dökümanına gömmek için kullanılır.
HTML:
<iframe src="url" title="description"></iframe>İpucu: <iframe> için her zaman bir <title> özelliği eklemek iyi bir uygulamadır. Bu, ekran okuyucular tarafından iframe içeriğinin ne olduğunu okumak için kullanılır.
Iframe - Yüksekliği ve genişliği ayarlamak
Iframe'in genişliğini ve yüksekliğini ayarlamak için height ve width özelliklerini kullanırız.
Kullanım biçimi:
Iframe - Yüksekliği ve genişliği ayarlamak
Iframe'in genişliğini ve yüksekliğini ayarlamak için height ve width özelliklerini kullanırız.
HTML:
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>Kullanım biçimi:
HTML:
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>Iframe - Sınırları Kaldırmak
Varsayılan olarak iframe çevresinde bir sınırla birlikte oluşur. Bu sınırı kaldırmak için style özelliğini CSS'in border özelliğiyle kullanabiliriz.
Kullanım biçimi:
Varsayılan olarak iframe çevresinde bir sınırla birlikte oluşur. Bu sınırı kaldırmak için style özelliğini CSS'in border özelliğiyle kullanabiliriz.
HTML:
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>Ayrıca CSS ile birlikte iframe'in sınırının boyutunu ve rengini değiştirebilirsiniz.
Kullanım biçimi:
HTML:
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>Iframe - Bağlantı Hedefi
Bir iframe, bir bağlantı için hedef çerçeve olarak kullanılabilir.
Bağlantının target özelliği iframe'in name özelliğini anmalıdır.
Örnek:Bir iframe, bir bağlantı için hedef çerçeve olarak kullanılabilir.
Bağlantının target özelliği iframe'in name özelliğini anmalıdır.
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Bağlantı Hedefi
</h2>
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
<p>Bir bağlantının hedef niteliği, bir iframe'in adıyla eşleştiğinde, bağlantı iframe'de açılır..</p>
</body>
</html>
HTML ve JavaScript
JavaScript HTML sayfalarını daha dinamik ve etkileşimli kılar.
HTML'de <script> Etiketi
<script> etiketi kullanıcı tarafında bir script tanımlamak için kullanılır.(JavaScript)
<script> öğesi ya script deyimleri içerir ya da src özelliği aracılığıyla harici bir komut dosyasına işaret eder.
JavaScript'in yaygın kullanımları, görüntü işleme, form doğrulama ve dinamik içerik değişiklikleridir.
JavaScript, bir HTML elementi seçmek için çoğunlukla document.getElementById() yöntemini kullanır.
JavaScript ne yapabilir?
* Javascript içeriği değiştirmek için kullanılabilir. - Örnek
* Javascript stil değiştirmek için kullanılabilir. - Örnek
* Javascript özellik değiştirmek için kullanılabilir. - Örnek
<noscript> Etiketi
<noscript> etiketi tarayıcılarında komut dosyalarını devre dışı bırakmış veya komut dosyalarını desteklemeyen bir tarayıcıya sahip kullanıcılara gösterilecek alternatif bir içeriği tanımlar.
Örnek:JavaScript HTML sayfalarını daha dinamik ve etkileşimli kılar.
HTML'de <script> Etiketi
<script> etiketi kullanıcı tarafında bir script tanımlamak için kullanılır.(JavaScript)
<script> öğesi ya script deyimleri içerir ya da src özelliği aracılığıyla harici bir komut dosyasına işaret eder.
JavaScript'in yaygın kullanımları, görüntü işleme, form doğrulama ve dinamik içerik değişiklikleridir.
JavaScript, bir HTML elementi seçmek için çoğunlukla document.getElementById() yöntemini kullanır.
JavaScript ne yapabilir?
* Javascript içeriği değiştirmek için kullanılabilir. - Örnek
* Javascript stil değiştirmek için kullanılabilir. - Örnek
* Javascript özellik değiştirmek için kullanılabilir. - Örnek
<noscript> Etiketi
<noscript> etiketi tarayıcılarında komut dosyalarını devre dışı bırakmış veya komut dosyalarını desteklemeyen bir tarayıcıya sahip kullanıcılara gösterilecek alternatif bir içeriği tanımlar.
HTML:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Merhaba JavaScript!";
</script>
<noscript>Üzgünüm, tarayıcınız JavaScript'i desteklemiyor.</noscript>
<p>JavaScript desteği olmayan bir tarayıcı, noscript öğesinin içine yazılan metni gösterecektir.</p>
</body>
</html>
Eğer tarayıcımız JavaScript'i desteklemiyor olsaydı "Üzgünüm, tarayıcınız JavaScript'i desteklemiyor." çıktısını verecekti.
HTML'de Dosya Yolları
Dosya yolu, bir web sitesinin klasör yapısındaki bir dosyanın konumunu tanımlar.
Dosya yolları, aşağıdakiler gibi harici dosyalara bağlanırken kullanılır:
-Web sayfaları
-Görseller
-Style sheets
-JavaScripts
Örnek Dosya Yolları
Dosya yolu, bir web sitesinin klasör yapısındaki bir dosyanın konumunu tanımlar.
Dosya yolları, aşağıdakiler gibi harici dosyalara bağlanırken kullanılır:
-Web sayfaları
-Görseller
-Style sheets
-JavaScripts
Örnek Dosya Yolları
Yol | Açıklama |
<img src="picture.jpg"> | "picture.jpg" dosyası, geçerli sayfayla aynı klasörde bulunur |
<img src="images/pictures.jpg"> | "picture.jpg" dosyası, geçerli klasördeki resimler klasöründe bulunur. |
<img src="/images/picture.jpg"> | "picture.jpg" dosyası, geçerli web'in kökündeki resimler klasöründe bulunur. |
<img src="../picture.jpg"> | "picture.jpg" dosyası, geçerli klasörden bir seviye yukarı olan klasörde bulunur. |
Mutlak Dosya Yolları
Mutlak dosya yolu, bir dosyanın tam URL'sidir:
HTML:
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">Relative Dosya Yolları
Göreli bir dosya yolu, geçerli sayfaya göre bir dosyaya işaret eder.
Aşağıdaki örnekte, dosya yolu, geçerli web'in kökünde bulunan resimler klasöründeki bir dosyaya işaret eder:
Göreli bir dosya yolu, geçerli sayfaya göre bir dosyaya işaret eder.
Aşağıdaki örnekte, dosya yolu, geçerli web'in kökünde bulunan resimler klasöründeki bir dosyaya işaret eder:
HTML:
<img src="/images/picture.jpg" alt="Mountain">
