Merhabalar, mobilhanem.com için hazırladığım HTML5, CSS3 eğitim setine hoşgeldiniz. Bu derste Temel Html Etiketleri’ni tanımaya çalışacağız. Bir html sayfası oluştururken kullanmamız gereken temel html etiketleri (<meta><body>) vardır. Bu <strong>html etiketleri</strong> sayesinde sayfamızı temel parçalara bölerek işlemlerimizi daha düzenli yaparız. Örnek olarak, <head> etiketleri arasında sayfa başlığı, sayfa hakkında temel bilgileri barındıran meta etiketleri veya css, javascript dosyalarımızı sayfaya dahil ettiğimiz alandır. Tarayıcı tarafında gözükmesini istediğimiz diğer tüm etiketleri de <body> etiketleri arasına yazarız.</span></p>
<p>Temel html etiketlerini kullanarak hemen <span style="font-weight: 400;">bir sayfa tanımlayalım. </span></p>
<p><span style="font-weight: 400;">Önceki derste bahsettiğimiz üzere .<strong>html</strong> uzantılı bir sayfa tanımlayarak işe başlıyoruz. </span></p>
<p><span style="font-weight: 400;">Örnek olarak <strong>index.html</strong> adında bir dosya açabiliriz.</span></p>
<p><span style="font-weight: 400;">Ardından </span></p>
<p>
<html><br />
<head><br />
<meta charset="UTF-8" /><br />
<title>İlk HTML Sayfam
İlk html paragrafım.
|
<html>
<head>
<meta charset=“UTF-8” />
<title>İlk HTML Sayfam</title>
<meta name=“description” content=“Bu yazıda html ve css hakkında detaylı bilgiler paylaşacağız.” />
<meta name=“keywords” content=“html nedir?, css nedir?” />
<meta name=“author” content=“@mobilhanem” />
<meta name=“robots” content=“index, follow”>
</head>
<body>
<p>İlk html paragrafım.</p>
</body>
</html>
|
etiketlerini yazıyoruz. Yine önceki dersimizde bahsettiğimiz üzere etiketlerin açılıp kapanma özelliğini kullanarak etiket içinde başka etiketler tanımladık.
İlk olarak etiketini açarak, sırasıyla , etiketlerini açtık ve kapattık. Şimdi de kullandığımız tüm etiketlerin ne işe yaradıklarına tek tek bakalım.
Etiketi Ne İşe Yarar?
html etiketi içerisine yazılacak tüm etiketleri kapsar. Html etiketi kullanmadan diğer etiketlerin bir anlamı olmaz.
Etiketi Ne İşe Yarar?
Bu etiket sayfanın tarayıcıya ve arama motorlarına tanıtıldığı (Meta etiketleriyle), CSS ve Javascript dosyalarının dahil edildiği alanı temsil etmektedir. Sayfa görünümde herhangi bir değişikliğe sebep olmaz. Görünmez özellikleri temsil edecektir.
Etiketi Ne İşe Yarar?</strong></h2>
<p><span style="font-weight: 400;">Bu etiket sayfa isminin belirtilmesini sağlar. Yani tarayıcı sekmesini temsil eden adı kapsar.</span></p>
<h2><strong><meta /> Etiketi Ne İşe Yarar?</strong></h2>
<p>Meta etiketleri sayfaya ait temel bilgileri (Sayfa açıklaması, anahtar kelimeler, başlık vs) gibi bilgileri tarayıcılara ve arama motorlarına iletir. Böylelikle sayfanın hangi konu ile alakalı olduğunu arama motorları öğrenir ve sonuçları o bilgilere göre listeler. Meta etiketleri her html sayfasında muhakkak olması gereken etiketlerdir.</p>
<p>Kullanılan en temel metalar :</p>
<p>
<meta name="description" content="Bu yazıda html ve css hakkında detaylı bilgiler paylaşacağız." /> //Sayfa hakkında genel bilgi (maksimum 255 karakter)<br />
<meta name="keywords" content="html nedir?, css nedir?" /> //Sayfayı temsil eden anahtar kelimeler (maksimum 255 karakter)<br />
<meta name="author" content="@mobilhanem" /> //Yazar bilgisi<br />
<meta name="robots" content="index, follow"> //Sayfanın indexlenip (follow) indexlenmemesini (nofollow) belirten etikettir.</p>
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="show"/>
<td class="crayon-code">
<p><span class="crayon-o"><</span><span class="crayon-e">meta </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">“description”</span><span class="crayon-h"> </span><span class="crayon-v">content</span><span class="crayon-o">=</span><span class="crayon-s">“Bu yazıda html ve css hakkında detaylı bilgiler paylaşacağız.”</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">></span><span class="crayon-h"> </span><span class="crayon-c">//Sayfa hakkında genel bilgi (maksimum 255 karakter)</span></p>
<p><span class="crayon-o"><</span><span class="crayon-e">meta </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">“keywords”</span><span class="crayon-h"> </span><span class="crayon-v">content</span><span class="crayon-o">=</span><span class="crayon-s">“html nedir?, css nedir?”</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">></span><span class="crayon-h"> </span><span class="crayon-c">//Sayfayı temsil eden anahtar kelimeler (maksimum 255 karakter)</span></p>
<p><span class="crayon-o"><</span><span class="crayon-e">meta </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">“author”</span><span class="crayon-h"> </span><span class="crayon-v">content</span><span class="crayon-o">=</span><span class="crayon-s">“@mobilhanem”</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">></span><span class="crayon-h"> </span><span class="crayon-c">//Yazar bilgisi</span></p>
<p><span class="crayon-o"><</span><span class="crayon-e">meta </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">“robots”</span><span class="crayon-h"> </span><span class="crayon-v">content</span><span class="crayon-o">=</span><span class="crayon-s">“index, follow”</span><span class="crayon-o">></span><span class="crayon-h"> </span><span class="crayon-c">//Sayfanın indexlenip (follow) indexlenmemesini (nofollow) belirten etikettir.</span></p>
</td>
</tr>
</table>
<p>
<strong>Not</strong>: HTML etiketlerinin açılıp kapanma özelliğinde bahsetmiştik önce derste hatırlarsanız. Fakat meta etiketlerinde görüldüğü üzere kapanma etiketi ayrı bir etiket olarak tanımlanmıyor, tek etiket içerisinde / ifadesiyle hem açılıp hemde kapatıldığını görüyoruz. İstisnai etiketler olduğunu meta etiketleriyle görmüş olduk.</p>
<h2><strong><body> Etiketi Ne İşe Yarar?</strong></h2>
<p><span style="font-weight: 400;">Bu etiket arasında yazacağımız tüm etiketler ekrana yansır. Genel olarak tasarım yaparken <body> etiketleri arasında çalışacağız. Yani <body> etiketi bir html dosyanın en önemli kısmı.</span></p>
<h2><strong></p>
<p> Etiketi Ne İşe Yarar?</strong></h2>
<p>En sık kullanacağımız etiketlerden birisi olan </p>
<p> etiketi, paragraflar oluşturmamızı sağlar.</p>
<p>Bu dersimizde her html sayfasında olması gereken temel html etiketlerini (<span style="font-weight: 400;"><html><head><title><meta><body></span>) öğrendik. Gelecekte tanımlayacağımız tüm html sayfalarımızda bu etiketleri defalarca kullanacağız.</p>
<p>Bir sonraki HTML dersinde görüşmek üzere hoşça kalın!</p>
<p><span class="wp-applaud-count">130</span></p>
</div>
<div class="w-100 px-4 tags">
</div>
<div class="row px-4 py-4 share">
<div class="col-12 col-sm-7 d-flex d-sm-block">
<a title="Bu içeriği Facebook'ta paylaş" rel="nofollow" class="icon-facebook mx-1 text-dec-none" target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/&src=sdkpreparse"></a>
<a title="Bu içeriği Twitter'da paylaş" rel="nofollow" class="icon-twitter mx-1 text-dec-none" target="_blank"
href="https://twitter.com/intent/tweet?status=https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/"></a>
<a title="Bu içeriği Whatsapp'ta paylaş" rel="nofollow" class="icon-whatsapp mx-1 text-dec-none" target="_blank"
href="https://wa.me/?text=https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/"></a>
<a title="Bu içeriği Pinterest'te paylaş" rel="nofollow" class="icon-pinterest mx-1 text-dec-none" target="_blank"
href="https://pinterest.com/pin/create/button/?url=https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/"></a>
<a title="Bu içeriği linkedin'da paylaş" rel="nofollow" class="icon-linkedin mx-1 text-dec-none" target="_blank"
href="https://www.linkedin.com/shareArticle?url=https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/"></a>
<a title="Bu içeriği Reddit'te paylaş" rel="nofollow" class="icon-reddit mx-1 text-dec-none" target="_blank"
href="https://reddit.com/submit?url=https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/"></a>
<a title="Bu içeriği Tumblr'da paylaş" rel="nofollow" class="icon-tumblr mx-1 text-dec-none" target="_blank"
href="https://www.tumblr.com/share/link?url=https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/"></a>
<a title="Bu içeriği Mail olarak gönder" rel="nofollow" class="icon-email mx-1 text-dec-none" target="_blank"
href="mailto:?subject=Temel HTML etiketleri (html, head, body, title, meta)&body=https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/"></a>
</div>
<!-- <div class="col-4 col-sm-2">
<a class="icon-twitter" target="_blank"
href="https://twitter.com/share?ref_src=https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/"></a></div>
<div class="col-4 col-sm-2">
<a class="icon-whatsapp" target="_blank"
href="https://wa.me/?text=https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/"></a>
</div>-->
<div class="col-12 col-sm-5">
<span
class="point "
value="6642">
<i
class="sm lgh "
title="lgh" data="0"><span>0</span></i>
<i
class="sm shy "
title="shy" data="0"><span>0</span></i>
<i
class="sm amz "
title="amz" data="0"><span>0</span></i>
<i
class="sm sad "
title="sad" data="0"><span>0</span></i>
<i
class="sm ang "
title="ang" data="0"><span>0</span></i>
</span>
</div>
</div>
<div id="comments" class="bg-gray2 py-2">
<form action="https://insta.gen.tr/wp-comments-post.php" method="post"
class="col-12 no-gutters bg-gray px-4 py-2">
<span class="w-100 font-weight-bolder py-1">
Yorum Yap </span>
<label class="col-12 py-2" for="comment">
<textarea class="w-100" name="comment"
placeholder="Mesajınız*"
aria-required="true"></textarea>
</label>
<div class="row">
<label class="col-sm-6 py-2" for="author">
<input id="author" name="author" class="w-100" type="text" value=""
placeholder="Adınız*" required=""
size="40"/></label>
<label class="col-sm-6 py-2" for="email">
<input id="email" name="email" class="w-100" type="text" value=""
placeholder="Email*" required="" size="100"/></label>
</div>
<div class="col-12 py-2">
<button name="submit" class="btn btn2 btn3"
type="submit">Gönder</button>
<input name="comment_post_ID" value="6642" id="comment_post_ID" type="hidden">
<input name="comment_parent" id="comment_parent" value="0" type="hidden">
</div>
</form>
<span class="w-100 font-weight-bolder py-1 px-4"><span >0</span> Yorum yapan</span>
</div> </article>
</div>
<div class="col-lg-4 side">
<div class="row align-items-start align-content-start">
<aside class="col-lg-12 col-md-6 col-12 my-3">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"></div></div>
</aside> </div>
<div class="row align-items-start align-content-start">
</div>
</div>
</div>
</div>
</section>
<footer class="bg-dark tc-w">
<div class="container justify-content-center">
<div class="row">
<div class="col-md-5 py-4">
<a href="https://insta.gen.tr" class="py-1" title="Türkiye'nin Teknoloji Destek Platformu">
<img src="https://insta.gen.tr/wp-content/uploads/2022/04/logo-1.png" class="contain py-1" width="40%" height="auto" alt="Logo"/>
</a>
<div>
<span><br>Yeni Nesil Web Blog Sitesi!<br>
İhtiyacınız olan bilgilere ulaşabileceğiniz, yeni edindiğiniz bu bilgileri nerede ve nasıl kullanacağınız hakkında bilgi veren yeni nesil web blog sitesidir.</span>
</div>
</div>
<div class="col-md-4 py-4">
<a title="Facebook" href="https://facebook.com/#" class="icon-facebook" rel="nofollow" target="_blank"></a>
<a title="Twitter" href="https://twitter.com/#" class="icon-twitter" rel="nofollow" target="_blank"></a>
<a title="Instagram" href="https://instagram.com/#" class="icon-instagram" rel="nofollow" target="_blank"></a>
</div>
<div class="col-md-3 py-4 iconaltmenu">
<ul id="menu-alt-menu-1" class="def-list c12"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-6887"><a href="https://insta.gen.tr/">Anasayfa</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-6888"><a href="https://insta.gen.tr/blog/">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="https://insta.gen.tr/hakkimizda/">Hakkımızda</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-34"><a rel="privacy-policy" href="https://insta.gen.tr/gizlilik-politikasi/">Gizlilik Politikası</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="https://insta.gen.tr/iletisim/">İletişim</a></li>
</ul> </div>
</div>
<div itemid="#webpage" itemscope itemtype="http://schema.org/WebPage">
<link itemprop="url" href="https://insta.gen.tr/temel-html-etiketleri-html-head-body-title-meta/">
<link itemprop="breadcrumb" href="#breadcrumb"/>
<link itemprop="publisher" href="#publisher" />
<link itemprop="copyrightHolder" href="#publisher"/>
<meta itemprop="copyrightYear" content="2022"/>
</div>
<div itemid="#publisher" class="d-none" itemscope itemtype="http://schema.org/Organization">
<link itemprop="logo" href="#logo"/>
<meta itemprop="name" content="Türkiye'nin Teknoloji Destek Platformu"/>
<meta itemprop="email" content="info[at]gen.tr"/>
</div>
</div>
<div class="container-fluid bg-primary text-white np">
<div class="container">
<div class="row">
<div class="col-12 justify-content-between py-1">
<span>Web Blog © Copyright 2022 </span>
</div>
</div>
<hr>
<div class="row p-2 bg-footer2 align-items-center">
<div class="col justify-content-between">
<p>
<a href="https://mekait.com/web-tasarim/izmir/" title="Mekait izmir web tasarım"><img width="180px" alt="Mekait izmir web tasarım" src="https://mekait.com/wp-content/themes/mekait-tema/images/logo.svg"></a>
</p>
</div>
<div class="col-12 justify-content-between py-2">
<p>
Ülkemizde son zamanlarda İzmirde, web sitesi tasarlama bilgisi olmayan kurum ya da kişiler müşterinin kurumsallığını hiçe sayarak hazır çalıntı tasarım ve sistemler ile kısa sürede web sitesi oluşturmakta ve haksız kazanç elde etmektedir. Bu yapılar müşterilerin ileride yüklü miktarda maddi kayıplar vermesine yol açmaktadır. Özgün tasarımlar ve en güncel standartlarla yapılandırdığımız web sitenizi kurumsal kimliğinizle bir bütün olarak düşünüyoruz. <a title="Mekait izmir web tasarım" href="https://mekait.com/web-tasarim/izmir/"><b>Web Tasarım İzmir</b></a> Ajansı olarak, Müşteri beklentilerini analiz ediyor, kurumsal algısına örtüşen, firma hedefleri doğrultusunda bir web site hazırlıyoruz. Tasarım aşamasında soru işaretleri kalmayana dek müşteri isteklerinin sağlanması gerektiğine inanıyoruz.<br>
Sizde kurumsal bir web tasarım hizmeti almak istiyorsanız <a title="izmir web tasarım" href="https://mekait.com/web-tasarim/izmir/"><b>İzmir Web Tasarım</b></a> ile tanışma zamanınız gelmiş demektir.
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
<style>
.bg-primary,
.btn2, .btn:hover,
aside table #today,
aside form #searchsubmit,
#archive nav li .current,
.mkt-message.primary,
span.contact[class*="icon-"]:before {
background: #dd3535;
}
.text-primary, .text-primary a,
.btn3:hover,
aside table th,
aside form #searchsubmit:hover,
aside .comment-author-link,
aside .comment-author-link a,
.mkt-list.primary li:before,
.mkt-social:hover {
color: #dd3535;
}
a:hover {
color: #dd3535;
}
header,
input, select, textarea,
.btn2, .btn:hover,
.content blockquote,
.content pre,
.mkt-message.primary {
border-color: #dd3535;
}
.btn3:hover {
border-color: #dd3535 !important;
}
</style>
<script type="text/javascript" src="https://insta.gen.tr/wp-content/themes/Mekait-Seo/assets/js/jquery.magnific-popup.min.js?ver=6.5.2" id="ekko-lightbox-js-js"></script>
<script type="text/javascript" src="https://insta.gen.tr/wp-content/themes/Mekait-Seo/assets/js/main.js?ver=6.5.2" id="meka-mainjs-js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-225454556-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-225454556-1');
</script>
