HTML (HyperText Markup Language), web sayfalarının yapılandırılması için kullanılan bir standart metin işaretleme dilidir. HTML, web tarayıcıları tarafından okunarak ve yorumlanarak sayfa içeriğinin nasıl görüntüleneceğini belirler. Bu makalede, HTML etiketlerinin ve kullanımlarının detaylı bir şekilde incelenecektir.
HTML Nedir?
HTML, web sayfalarının oluşturulması için kullanılan bir işaretleme dilidir. Sayfa içeriğini yapılandırmak ve biçimlendirmek için kullanılır. HTML, metin, resim, bağlantılar, tablolar, formlar ve diğer medya öğeleri gibi çeşitli içerikleri bir araya getirerek web sayfalarının oluşturulmasını sağlar.
Temel HTML Etiketleri
HTML etiketleri, içeriklerin nasıl görüntüleneceğini belirleyen işaretlerdir. Temel bir HTML etiketi şu şekilde görünür:
“`html İçerik
“`
Burada, `` etiketi açılış etiketi olarak adlandırılırken, `` etiketi kapanış etiketi olarak adlandırılır. İçerik, bu etiketler arasına yerleştirilir ve tarayıcı bu etiketleri okuyarak içeriği nasıl göstereceğini belirler.
HTML’de en temel etiketler arasında ``, `
`, ``, `<body data-rsssl=1>` gibi yapısal etiketler bulunur. Ayrıca metin biçimlendirme için `</p>
<p>`, başlık etiketleri `</p>
<h1>` – `</p>
<h6>`, bağlantılar için `<a>`, resimler için `<img>` gibi etiketler de bulunmaktadır.</p>
<p>Bu temel etiketlerin yanı sıra, HTML5 ile birlikte gelen daha gelişmiş etiketler de bulunmaktadır. Örneğin, video oynatıcıları için `<video>`, ses çalarlar için `<audio>`, çizimler için `<canvas>` gibi etiketler HTML5 ile birlikte kullanılmaya başlanmıştır.</p>
<p>Bu temel etiketlerin yanı sıra, HTML5 ile birlikte gelen daha gelişmiş etiketler de bulunmaktadır. Örneğin, video oynatıcıları için `<video>`, ses çalarlar için `<audio>`, çizimler için `<canvas>` gibi etiketler HTML5 ile birlikte kullanılmaya başlanmıştır.</p>
<h4>HTML Etiketlerinin Kullanımı</h4>
<p>HTML etiketlerinin kullanımı, bir web sayfasının nasıl yapılandırıldığını belirler. Örneğin, bir metin paragrafını `</p>
<p>` etiketi içine alarak bu paragrafın ayrı bir blok olarak gösterilmesini sağlayabilirsiniz. Benzer şekilde, bir bağlantı oluşturmak için `<a>` etiketini kullanarak hedef sayfanın URL’sini belirtebilirsiniz.</p>
<p>“`html</p>
<p>Bu bir paragraf örneğidir. Lorem ipsum dolor sit amet.</p>
<p><a href="https://www.ornek.com">Örnek Bağlantı</a><br />
“`</p>
<p>Yukarıdaki örnekte, `</p>
<p>` etiketi ile bir paragraf oluşturulmuş ve `<a>` etiketi ile bir bağlantı tanımlanmıştır. Bu şekilde, içeriğin yapısı belirlenmiş ve tarayıcı bu yapıya göre içeriği görselleştirecektir.</p>
<p>HTML etiketlerinin doğru ve uygun şekilde kullanılması, web sayfalarının düzgün bir şekilde gösterilmesini sağlar. Ayrıca, erişilebilirlik ve SEO (Arama Motoru Optimizasyonu) açısından da önemli bir rol oynar. Bu nedenle, HTML etiketlerinin kullanımı konusunda dikkatli olmak ve standartlara uygun bir şekilde kullanmak önemlidir.</p>
<p>Bu temel etiketlerin yanı sıra, HTML5 ile birlikte gelen daha gelişmiş etiketler de bulunmaktadır. Örneğin, video oynatıcıları için `<video>`, ses çalarlar için `<audio>`, çizimler için `<canvas>` gibi etiketler HTML5 ile birlikte kullanılmaya başlanmıştır.</p>
<h1>HTML’nin Yapısal ve Biçimsel Özellikleri</h1>
<h2><span class="ez-toc-section" id="HTMLnin_Yapisal_Ozellikleri"></span>HTML’nin Yapısal Özellikleri<span class="ez-toc-section-end"></span></h2>
<p>HTML, belirli bir yapı içerisinde kullanılır. Bu yapı, bir web sayfasının nasıl organize edileceğini belirtir. HTML’nin temel yapısı şu şekilde görünmektedir:<br />
“`html<br />
<!DOCTYPE html><br />
<html><br />
<head><script>var _wpmnl=!0;</script><br />
<title>Web Sayfa Başlığı
Ana Başlık
Bu bir paragraf örneğidir.
“`
– ``: Bu ifade, tarayıcıya hangi HTML sürümünün kullanıldığını belirtir.
– ``: Web sayfasının başlangıcını ve sonunu tanımlar.
– `
`: Başlık etiketleri, meta bilgileri, stil tanımları gibi sayfa başlığıyla ilgili bilgileri içerir.
– ``: Web sayfasının başlığını belirtir.<br />
– `<body data-rsssl=1>`: Web sayfasının görünen içeriğini tanımlar.</p>
<p>Bu yapısal öğeler, web sayfalarının düzgün bir şekilde oluşturulmasını sağlar. Sayfa başlığı, içerik alanı, stil tanımları gibi unsurların belirli bir düzene göre oluşturulması, web sayfalarının anlaşılabilir ve düzenli olmasını sağlar.</p>
<h3><span class="ez-toc-section" id="HTMLnin_Bicimsel_Ozellikleri"></span>HTML’nin Biçimsel Özellikleri<span class="ez-toc-section-end"></span></h3>
<p>HTML, içeriğin biçimlendirilmesi için kullanılır. Başlık, paragraf, liste, tablo gibi unsurların belirli bir şekilde gösterilmesini sağlar. Bu biçimsel özellikler, kullanıcıların web sayfalarını daha iyi anlamasını ve içeriğiyle etkileşime girmesini sağlar.</p>
<p>Örneğin, bir başlık etiketi olan `</p>
<h1>` ile ana başlık belirtilebilir. Benzer şekilde, metin paragrafını göstermek için `</p>
<p>` etiketi kullanılır. Listeler için ise `</p>
<ul>` (unordered list) veya `</p>
<ol>` (ordered list) etiketleri kullanılır.</p>
<p>“`html</p>
<h1>Başlık 1</h1>
<p>Bu bir paragraf örneğidir.</p>
<ul>
<li>Liste öğesi 1</li>
<li>Liste öğesi 2</li>
</ul>
<p>“`</p>
<p>Bu biçimsel özellikler, web sayfalarının okunabilirliğini artırır ve içeriğin anlaşılmasını kolaylaştırır. Ayrıca, CSS (Cascading Style Sheets) ile birlikte kullanılarak sayfa tasarımının görsel olarak da zenginleştirilmesini sağlar.</p>
<p>HTML’nin bu yapısal ve biçimsel özellikleri, web geliştiricilerin içeriği düzenlemesini, biçimlendirmesini ve görselleştirmesini sağlar. Bu sayede, kullanıcılar daha etkili, anlaşılır ve görsel olarak çekici web deneyimleri yaşayabilirler.</p>
<div class="post-tags">
<span class="tag-links">Etiketlendi <a href="https://www.tekno50.com/tag/is-not-standard-html-i-have-used-the-and-tags-instead/" rel="tag">") is not standard HTML. I have used the "" and "" tags instead.</a>, <a href="https://www.tekno50.com/tag/dinamik-web-sayfalari/" rel="tag">dinamik web sayfaları</a>, <a href="https://www.tekno50.com/tag/temel-etiketler/" rel="tag">temel etiketler</a></span> </div>
</div>
<section id="comments" class="comments-area">
<div id="respond" class="comment-respond">
<h2 id="reply-title" class="comment-reply-title">Bir yanıt yazın <small><a rel="nofollow" id="cancel-comment-reply-link" href="/201-2/#respond" style="display:none;">Yanıtı iptal et</a></small></h2><form action="https://www.tekno50.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">E-posta adresiniz yayınlanmayacak.</span> <span class="required-field-message">Gerekli alanlar <span class="required">*</span> ile işaretlenmişlerdir</span></p><p class="comment-form-comment"><label for="comment">Yorum <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Ad <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p>
<p class="comment-form-email"><label for="email">E-posta <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p>
<p class="comment-form-url"><label for="url">İnternet sitesi</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p>
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Daha sonraki yorumlarımda kullanılması için adım, e-posta adresim ve site adresim bu tarayıcıya kaydedilsin.</label></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Yorum gönder" /> <input type='hidden' name='comment_post_ID' value='54858' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="0ca0c15f1b" /></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="87"/><script data-cfasync="false" data-wpmeteor-after="REORDER" type="javascript/blocked">document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div><!-- #respond -->
</section>
</main>
<footer id="site-footer" class="site-footer">
<a href="https://www.tekno50.com/kisisel-veriler/">Kişisel Veriler</a>
<a href="https://www.tekno50.com/gizlilik-politikasi/">Gizlilik Politikası</a>
<a href="https://www.tekno50.com/kullanici-sozlesmesi/">Kullanıcı Sözleşmesi</a>
mail: admin@tekno50.com
</footer>
<script data-cfasync="false" data-wpmeteor-after="REORDER" type="javascript/blocked" id="ez-toc-scroll-scriptjs-js-extra">
var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":""};
</script>
<script type="javascript/blocked" data-cfasync="false" data-wpmeteor-after="REORDER" data-src="https://www.tekno50.com/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.69" id="ez-toc-scroll-scriptjs-js"></script>
<script type="javascript/blocked" data-cfasync="false" data-wpmeteor-after="REORDER" data-src="https://www.tekno50.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script>
<script type="javascript/blocked" data-cfasync="false" data-wpmeteor-after="REORDER" data-src="https://www.tekno50.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script>
<script data-cfasync="false" data-wpmeteor-after="REORDER" type="javascript/blocked" id="ez-toc-js-js-extra">
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>","chamomile_theme_is_on":""};
</script>
<script type="javascript/blocked" data-cfasync="false" data-wpmeteor-after="REORDER" data-src="https://www.tekno50.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.69-1725532681" id="ez-toc-js-js"></script>
<script type="javascript/blocked" data-cfasync="false" data-wpmeteor-after="REORDER" data-src="https://www.tekno50.com/wp-includes/js/comment-reply.min.js?ver=6.6.2" id="comment-reply-js" async data-wp-strategy="async"></script>
<script type="javascript/blocked" defer data-cfasync="false" data-wpmeteor-after="REORDER" data-src="https://www.tekno50.com/wp-content/plugins/akismet/_inc/akismet-frontend.js?ver=1721597116" id="akismet-frontend-js"></script>
<script type="javascript/blocked" data-cfasync="false" data-wpmeteor-after="REORDER" data-src='https://stats.wp.com/e-202447.js' defer></script>
<script data-cfasync="false" data-wpmeteor-after="REORDER" type="javascript/blocked">
_stq = window._stq || [];
_stq.push([ 'view', {v:'ext',j:'1:11.3.4',blog:'170823383',post:'54858',tz:'3',srv:'www.tekno50.com'} ]);
_stq.push([ 'clickTrackerInit', '170823383', '54858' ]);
</script>
</body>
</html>
<!-- Optimized with Image Optimizer https://pagespeedoptimizer.io -->
<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me -->