105 2
Giriş
HTML (Hypertext Markup Language), web sayfalarının oluşturulmasında kullanılan bir işaretleme dilidir. Web tarayıcıları tarafından anlaşılır bir biçimde işlenen HTML kodları, metinleri, bağlantıları, resimleri ve diğer içerikleri organize etmek için kullanılır. Bu makalede, HTML’nin temel yapılarına ve kullanımına odaklanarak, web sayfalarının nasıl oluşturulduğunu ve düzenlendiğini açıklayacağız.
HTML Nedir?
HTML, web sayfalarını tasarlamak ve düzenlemek için kullanılan bir işaretleme dilidir. İnternetin temel yapı taşlarından biri olan HTML, web tarayıcıları tarafından yorumlanarak kullanıcılara görsel bir arayüz sunulmasını sağlar. HTML, metinlerin, bağlantıların, resimlerin, tabloların ve diğer içeriklerin nasıl görüntüleneceğini ve düzenleneceğini tanımlar.
HTML’nin Temel Yapısı
HTML, etiketler (tags) denilen işaretler aracılığıyla içeriği belirtir. Her etiket, açılış etiketi ve kapanış etiketi olmak üzere iki kısımdan oluşur. Açılış etiketi, içeriğin başladığını belirtirken, kapanış etiketi ise içeriğin bittiğini belirtir. Örneğin, `
` etiketi bir paragrafın başladığını gösterirken, `
` etiketi paragrafın bittiğini belirtir.
HTML’de etiketler, açılış etiketi ile kapanış etiketi arasına yerleştirilen içerikleri içerebilir. Örneğin, `
` ile `
` etiketleri arasına yazılan metinler, başlık düzeyine göre farklı boyutlarda görüntülenir. `` etiketi ise bir bağlantı oluşturmak için kullanılır ve `href` özelliği ile hedef sayfanın URL’sini belirtir.
HTML Örnek Kod
Aşağıda, basit bir HTML sayfasının örnek kodunu bulabilirsiniz:
“`
Web Sayfası Başlığı
Merhaba, Dünya!
Bu bir paragraf örneğidir.
Yukarıdaki örnek kod, bir HTML sayfasının temel yapısını göstermektedir. `` ifadesi, dokümanın HTML5 standardına uygun olduğunu belirtir. `` etiketi, HTML içeriğinin başladığını ve `
` ile `` etiketleri arasında yer aldığını gösterir. `` içerisinde, sayfa başlığı `` etiketi ile belirtilirken, `<body data-rsssl=1>` içerisinde görüntülenen içerik yer alır.</p>
<h2><span class="ez-toc-section" id="Sonuc"></span>Sonuç<span class="ez-toc-section-end"></span></h2>
<p>Bu makalede, HTML’nin temel yapılarına ve kullanımına odaklandık. HTML, web sayfalarının oluşturulması ve düzenlenmesi için kullanılan bir işaretleme dilidir. Etiketler aracılığıyla içeriği belirtir ve web tarayıcıları tarafından yorumlanarak kullanıcılara görsel bir arayüz sunulmasını sağlar. HTML’nin temel yapısı, açılış ve kapanış etiketlerinden oluşur ve içerikleri bu etiketler arasında yer alır. İkinci parçada, daha fazla HTML öğes</p>
<figure class="wp-block-image size-full"><img decoding="async" src="https://www.tekno50.com/wp-content/uploads/2023/07/wygaiaacui_2.jpg" alt="105 2_"/></figure>
<h1><span class="ez-toc-section" id="105_2-2"></span>105 2<span class="ez-toc-section-end"></span></h1>
<h2><span class="ez-toc-section" id="HTML_Ogeleri_ve_Ozellikleri"></span>HTML Öğeleri ve Özellikleri<span class="ez-toc-section-end"></span></h2>
<p>HTML, çeşitli öğeleri kullanarak web sayfalarının içeriğini ve yapısını oluşturur. Bu bölümde, bazı temel HTML öğelerini ve özelliklerini açıklayacağız.</p>
<h3><span class="ez-toc-section" id="Metin_Ogeleri"></span>Metin Öğeleri<span class="ez-toc-section-end"></span></h3>
<p>HTML’de metin öğeleri, web sayfalarında metinleri biçimlendirmek ve düzenlemek için kullanılır. Aşağıda bazı temel metin öğelerini bulabilirsiniz:</p>
<p>– `</p>
<h1>` – `</p>
<h6>`: Başlık düzeylerini belirtir. `</p>
<h1>` en yüksek düzeyi temsil ederken, `</p>
<h6>` en düşük düzeyi temsil eder.<br />
– `</p>
<p>`: Paragraf oluşturmak için kullanılır.<br />
– `<strong>`: Metni kalın olarak vurgulamak için kullanılır.<br />
– `<em>`: Metni italik olarak vurgulamak için kullanılır.<br />
– `<u>`: Metni altı çizili olarak göstermek için kullanılır.<br />
– `<br />`: Satır sonu geçişi yapar.<br />
– `</p>
<hr>
<p>`: Yatay bir çizgi ekler.</p>
<h3><span class="ez-toc-section" id="Baglanti_Ogeleri"></span>Bağlantı Öğeleri<span class="ez-toc-section-end"></span></h3>
<p>HTML, bağlantı oluşturmak için `<a>` öğesini kullanır. Bu öğe, `href` özelliği ile hedef sayfanın URL’sini belirtir. Aşağıda bir bağlantı örneği bulabilirsiniz:</p>
<p>“`html<br />
<a href="https://www.example.com">Örnek Bir Bağlantı</a><br />
“`</p>
<h3><span class="ez-toc-section" id="Gorsel_Ogeler"></span>Görsel Öğeler<span class="ez-toc-section-end"></span></h3>
<p>HTML, web sayfalarında resimleri görüntülemek için `<img>` öğesini kullanır. Bu öğe, `src` özelliği ile resmin URL’sini belirtir. Aşağıda bir resim örneği bulabilirsiniz:</p>
<p>“`html<br />
<img decoding="async" src="image.jpg" alt="Resim Açıklaması"><br />
“`</p>
<h3><span class="ez-toc-section" id="Form_Ogeleri"></span>Form Öğeleri<span class="ez-toc-section-end"></span></h3>
<p>HTML, kullanıcıların web sayfalarında veri girişi yapmasını sağlamak için form öğelerini kullanır. Form öğeleri, kullanıcıdan veri almak veya kullanıcıya seçenek sunmak için kullanılır. Aşağıda bazı form öğelerini bulabilirsiniz:</p>
<p>– `<input>`: Kullanıcıdan veri almak için kullanılır. `type` özelliği ile farklı giriş türlerini belirtebilir (text, password, checkbox vb.).<br />
– `<textarea>`: Çok satırlı metin girişi için kullanılır.<br />
– `<select>` ve `<option>`: Kullanıcıya bir seçenek sunmak için kullanılır.</p>
<h3><span class="ez-toc-section" id="Liste_Ogeleri"></span>Liste Öğeleri<span class="ez-toc-section-end"></span></h3>
<p>HTML’de liste oluşturmak için `</p>
<ul>`, `</p>
<ol>` ve `</p>
<li>` öğeleri kullanılır. `
<ul>` (unordered list) etiketi, sırasız bir liste oluştururken, `</p>
<ol>` (ordered list) etiketi sıralı bir liste oluşturur. `</p>
<li>` (list item) etiketi ise listedeki her bir öğeyi tanımlar.<br />
<h3><span class="ez-toc-section" id="Tablo_Ogeleri"></span>Tablo Öğeleri<span class="ez-toc-section-end"></span></h3>
<p>HTML, tabloları oluşturmak ve düzenlemek için `</p>
<table>`, `</p>
<tr>`, `</p>
<th>` ve `</p>
<td>` öğelerini kullanır. `</p>
<table>` etiketi, bir tabloyu tanımlarken, `</p>
<tr>` (table row) etiketi tablodaki her bir satırı tanımlar. `</p>
<th>` (table header) etiketi tablodaki başlıkları belirtirken, `</p>
<td>` (table data) etiketi tablodaki hücreleri tanımlar.</p>
<h2><span class="ez-toc-section" id="Sonuc-2"></span>Sonuç<span class="ez-toc-section-end"></span></h2>
<p>Bu makalenin ikinci bölümünde, HTML’nin temel öğelerini ve özelliklerini açıklad</p>
<figure class="wp-block-image size-full"><img decoding="async" src="https://www.tekno50.com/wp-content/uploads/2023/07/wygaiaacui_3.jpg" alt="105 2_"/></figure>
<div class="post-tags">
<span class="tag-links">Etiketlendi <a href="https://www.tekno50.com/tag/etiket-1-2/" rel="tag">`etiket 1</a>, <a href="https://www.tekno50.com/tag/etiket-2/" rel="tag">etiket 2</a>, <a href="https://www.tekno50.com/tag/etiket-3-2/" rel="tag">etiket 3`</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="/105-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='31055' 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="198790b224" /></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="91"/><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>
<!-- tekno50.com/siteniekle - sayac kodu -->
<script type="javascript/blocked" data-cfasync="false" data-wpmeteor-after="REORDER" data-src="https://tekno50.com/siteniekle/counter.php"></script>
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.71" 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.71-1734308664" 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.7.1" 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=1732383380" id="akismet-frontend-js"></script>
<script type="javascript/blocked" data-cfasync="false" data-wpmeteor-after="REORDER" data-src='https://stats.wp.com/e-202451.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.1',blog:'170823383',post:'31055',tz:'3',srv:'www.tekno50.com'} ]);
_stq.push([ 'clickTrackerInit', '170823383', '31055' ]);
</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 -->
HTML Örnek Kod
Aşağıda, basit bir HTML sayfasının örnek kodunu bulabilirsiniz:
“`
Merhaba, Dünya!
Bu bir paragraf örneğidir.
Yukarıdaki örnek kod, bir HTML sayfasının temel yapısını göstermektedir. `` ifadesi, dokümanın HTML5 standardına uygun olduğunu belirtir. `` etiketi, HTML içeriğinin başladığını ve `
` ile `` etiketleri arasında yer aldığını gösterir. `` içerisinde, sayfa başlığı `