Tevzi Biriminden İlk Açılış
Teknolojinin hızla gelişmesiyle birlikte internetin yaygınlaşması, birçok sektörde büyük değişimlere neden olmuştur. E-ticaret, haberleşme, eğitim gibi birçok alanda internetin etkisi giderek artmaktadır. Bu gelişmelerin etkisiyle birlikte web sitesi oluşturma ve web içerikleri oluşturma konusu da büyük önem kazanmıştır. Bu noktada HTML, web sayfalarının temel taşı olarak karşımıza çıkmaktadır.
HTML (HyperText Markup Language), web sayfalarının yapısını tanımlayan bir işaretleme dilidir. HTML etiketleri kullanılarak sayfaların nasıl görüneceği belirlenir. Bu etiketler, tarayıcıların sayfayı nasıl işleyeceğini ve göstereceğini belirler. Bu nedenle, HTML etiketlerinin doğru kullanımı ve sayfaların doğru bir şekilde oluşturulması, kullanıcı deneyimi açısından son derece önemlidir.
Web sayfaları, başlık, alt başlık, paragraf, resim, tablo gibi birçok farklı bileşenden oluşur. Bu bileşenlerin düzenli ve anlaşılır bir şekilde yerleştirilmesi, sayfanın kullanıcılar tarafından kolayca okunmasını sağlar. Bu düzenlemeleri yaparken, HTML etiketleri kullanılır ve bu etiketler sayesinde sayfaların yapısı belirlenir.
HTML Etiketleri
HTML etiketleri, sayfaların yapısını tanımlamak için kullanılır. Her etiket, açılış ve kapanış etiketi olarak iki bölümden oluşur. Açılış etiketi, “<" işareti ile başlar ve ">” işareti ile biter. Kapanış etiketi ise açılış etiketinin başına “/” işareti eklenerek oluşturulur. Örneğin, bir başlık etiketi “
” açılış etiketi ile başlar ve “
” kapanış etiketi ile biter.
HTML etiketleri, sayfaların yapısını belirlemek için kullanıldığı gibi, içeriği biçimlendirmek için de kullanılır. Örneğin, “” etiketi kullanılarak bir metin kalınlaştırılabilir, “” etiketi kullanılarak bir metin italikleştirilebilir.
HTML Sayfa Yapısı
Bir HTML sayfası, başlık, gövde ve alt bilgi bölümlerinden oluşur. Başlık bölümü, sayfanın başlığını ve meta bilgilerini içerir. Gövde bölümü, sayfanın asıl içeriğini ve bileşenlerini içerir. Alt bilgi bölümü ise sayfa hakkında ek bilgileri içerir.
Aşağıda, basit bir HTML sayfasının yapısını gösteren örnek bir kod bulunmaktadır:
“`html
Web Sayfası Başlığı
Web Sayfası Başlığı
Web sayfasının içeriği burada yer alır.
“`
Yukarıdaki örnekte, “” etiketi ile başlayıp “
” etiketi ile biten bir HTML belgesi bulunmaktadır. Başlık bölümü “
” etiketi arasında yer alır ve “
” etiketi ile belirlenir. Gövde bölümü ise “<body data-rsssl=1>” etiketi arasında yer alır ve sayfanın içeriği burada tanımlanır.</p>
<p>HTML etiketlerinin doğru ve</p>
<h1><span class="ez-toc-section" id="HTML_Etiketleri_ve_Ornekleri"></span>HTML Etiketleri ve Örnekleri<span class="ez-toc-section-end"></span></h1>
<p>HTML etiketleri, web sayfalarının yapısını oluşturmak için kullanılır. Bu etiketler, sayfanın içeriğini düzenlemek, metinleri biçimlendirmek, resimleri eklemek, bağlantılar oluşturmak ve daha birçok işlemi gerçekleştirmek için kullanılır. İşte bazı temel HTML etiketleri ve örnekleri:</p>
<h2><span class="ez-toc-section" id="1_Baslik_Etiketleri"></span>1. Başlık Etiketleri<span class="ez-toc-section-end"></span></h2>
<p>Başlık etiketleri, sayfanın başlığını belirlemek için kullanılır. HTML başlık etiketleri h1’den h6’ya kadar sıralanır, h1 en büyük başlık etiketi iken h6 en küçük başlık etiketidir. Örneğin:</p>
<p>“`html</p>
<h1><span class="ez-toc-section" id="Bu_bir_h1_baslik_etiketidir"></span>Bu bir h1 başlık etiketidir<span class="ez-toc-section-end"></span></h1>
<h2><span class="ez-toc-section" id="Bu_bir_h2_baslik_etiketidir"></span>Bu bir h2 başlık etiketidir<span class="ez-toc-section-end"></span></h2>
<h3><span class="ez-toc-section" id="Bu_bir_h3_baslik_etiketidir"></span>Bu bir h3 başlık etiketidir<span class="ez-toc-section-end"></span></h3>
<p>“`</p>
<h2><span class="ez-toc-section" id="2_Paragraf_Etiketi"></span>2. Paragraf Etiketi<span class="ez-toc-section-end"></span></h2>
<p>Paragraf etiketi “</p>
<p>” kullanılarak oluşturulur ve metinleri paragraf olarak biçimlendirir. Örneğin:</p>
<p>“`html</p>
<p>Bu bir paragraf etiketidir. Bu şekilde uzun metinleri paragraf halinde gösterebilirsiniz.</p>
<p>“`</p>
<h2><span class="ez-toc-section" id="3_Resim_Etiketi"></span>3. Resim Etiketi<span class="ez-toc-section-end"></span></h2>
<p>Resim etiketi, sayfaya bir resim eklemek için kullanılır. “<img>” etiketi kullanılarak resim etiketi oluşturulur. Örneğin:</p>
<p>“`html<br />
<img decoding="async" src="resim.jpg" alt="Resim açıklaması"><br />
“`</p>
<p>Yukarıdaki örnekte “src” özelliği, resmin dosya yolunu belirtirken “alt” özelliği, resim açıklamasını belirtir.</p>
<h2><span class="ez-toc-section" id="4_Baglanti_Etiketi"></span>4. Bağlantı Etiketi<span class="ez-toc-section-end"></span></h2>
<p>Bağlantı etiketi, bir bağlantı oluşturmak için kullanılır. “<a>” etiketi kullanılarak bağlantı etiketi oluşturulur. Örneğin:</p>
<p>“`html<br />
<a href="https://www.example.com">Bu bir bağlantıdır</a><br />
“`</p>
<p>Yukarıdaki örnekte “href” özelliği, bağlantının hedef URL’sini belirtir.</p>
<h2><span class="ez-toc-section" id="5_Liste_Etiketleri"></span>5. Liste Etiketleri<span class="ez-toc-section-end"></span></h2>
<p>Liste etiketleri, sıralı (numaralı) veya sırasız (noktalı) listeler oluşturmak için kullanılır. Sıralı liste oluşturmak için “</p>
<ol>” etiketi, sırasız liste oluşturmak için ise “</p>
<ul>” etiketi kullanılır. Her liste öğesi “</p>
<li>” etiketi ile belirtilir. Örneğin:
<p>“`html</p>
<h3><span class="ez-toc-section" id="Sirali_Liste"></span>Sıralı Liste<span class="ez-toc-section-end"></span></h3>
<ol>
<li>Liste öğesi 1</li>
<li>Liste öğesi 2</li>
<li>Liste öğesi 3</li>
</ol>
<h3><span class="ez-toc-section" id="Sirasiz_Liste"></span>Sırasız Liste<span class="ez-toc-section-end"></span></h3>
<ul>
<li>Liste öğesi 1</li>
<li>Liste öğesi 2</li>
<li>Liste öğesi 3</li>
</ul>
<p>“`</p>
<p>Yukarıdaki örneklerde, sıralı liste ve sırasız liste oluşturulmuştur ve her liste öğesi “</p>
<li>” etiketi ile belirtilmiştir.
<p>Bu örnekler, temel HTML etiketlerini ve kullanımlarını göstermektedir. HTML’de daha birçok etiket bulunmaktadır ve her biri farklı amaçlar için kullanılır. HTML etiketlerini doğru bir şekilde kullanmak, web sayfalarının düzenli ve anlaşılır olmasını sağlar.</p>
<div class="post-tags">
<span class="tag-links">Etiketlendi <a href="https://www.tekno50.com/tag/etiketiyle-sunulan-onerilen-etiketleri-ve-etiketiyle-sunulan-iki-genel-etiketi-bulabilirsiniz/" rel="tag">" etiketiyle sunulan önerilen etiketleri ve "" etiketiyle sunulan iki genel etiketi bulabilirsiniz:</a>, <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/14-ekim-listesi/" rel="tag">14 Ekim listesi</a>, <a href="https://www.tekno50.com/tag/adsense-baglanti-reklamlari/" rel="tag">Adsense bağlantı reklamları</a>, <a href="https://www.tekno50.com/tag/alt-basliklar/" rel="tag">alt başlıklar</a>, <a href="https://www.tekno50.com/tag/arka-plan-resimleri/" rel="tag">arka plan resimleri</a>, <a href="https://www.tekno50.com/tag/dinamik-web-sayfalari/" rel="tag">dinamik web sayfaları</a>, <a href="https://www.tekno50.com/tag/isletme-web-tasarimi/" rel="tag">işletme web tasarımı</a>, <a href="https://www.tekno50.com/tag/paragraf-etiketi/" rel="tag">paragraf etiketi</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="/tevzi-biriminden-i%c2%b7lk-acilis/#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='38739' 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="e0e5a8d94b" /></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="223"/><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>
<!-- tekno50.com/siteniekle - sayac kodu -->
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.1" 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.1-1732383386" 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>
</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 -->