Sayfanızın tek tek bölümlerini (“paragraf” veya “görsel” gibi) tanımlamaya ek olarak, HTML, web sitenizin alanlarını (“başlık”, “menü” gibi) tanımlamak için kullanılan bir dizi blok düzeyinde öğeye de sahiptir. Bu makalede, temel bir web sitesi yapısının nasıl planlanacağını ve bu yapıyı temsil edecek HTML’nin nasıl yazılacağını inceleyeceğiz.
Bir sayfanın temel bölümleri
Web sayfaları birbirinden oldukça farklı görünebilir ve görünecektir de, ancak sayfa tam ekran bir video veya oyun görüntülemiyorsa, bir tür sanat projesinin parçası değilse veya yalnızca kötü yapılandırılmışsa, hepsi benzer standart bileşenleri paylaşma eğilimindedir:
üst alan – header:
Genellikle üstte büyük bir başlık, logo ve belki de bir slogan bulunan büyük bir alandır. Bu alan genellikle web sitesinin tüm sayfalarında hep aynı kalır.
gezinti çubuğu:
Sitenin ana bölümlerine bağlantılar içerir; genellikle menü butonları, bağlantılar veya sekmelerle temsil edilir. Üst alan gibi, bu içerik de genellikle bir web sayfasından diğerine aynı kalır – web sitenizde tutarsız gezinmeye sahip olmak, yalnızca kafası karışmış, sinirli ziyaretçilere yol açacaktır. Birçok web tasarımcısı, gezinme çubuğunu, ayrı bir bileşenden ziyade, üst alanın bir parçası olarak görür. Ancak bu bir gereklilik değildir; hatta bazı tasarımcılar, bu iki özelliğin ayrı olmasının erişilebilirlik açısından daha iyi olduğunu da iddia eder.
ana içerik:
Merkezde, belirli bir web sayfasının içeriğinin çoğunu içeren büyük bir alandır. Örneğin izlemek istediğiniz video veya okuduğunuz ana hikaye veya görüntülemek istediğiniz harita veya haber başlıkları, vb bu alanda yer alır. Bu, web sitesinin kesinlikle sayfadan sayfaya değişecek olan bir parçasıdır!
kenar çubuğu:
Bazı bilgiler, bağlantılar, alıntılar, reklamlar vb. genellikle bu alanda gösterilir. Ana içerikte bulunanlarla ilişkilidir (örneğin bir haber makalesi sayfasında kenar çubuğu yazarın biyografisini veya ilgili makalelere bağlantılar içerebilir).
alt alan:
Genellikle telif hakkı bildirimleri veya iletişim bilgilerini içeren sayfanın alt kısmındaki alandır. Ortak bilgileri (başlık gibi) koymak için iyi bir yer olabilir, ancak genellikle bu bilgiler kritik veya web sitesinin kendisi için ikincil değildir. Altbilgi, popüler içeriğe hızlı erişim için bağlantılar sağlayarak bazen SEO amaçları için de kullanılır .
“Tipik bir web sitesi” şu şekilde yapılandırılabilir:
İçeriği yapılandırmak için HTML
Yukarıda gösterilen basit örnek aslında çok hoş değil, ancak tipik bir web sitesi düzeni örneğini göstermek için yeterli. Bazı web siteleri daha fazla sütun içerir, bazıları çok daha karmaşıktır. Ancak burada vurgulamak isteneni anladığınızı düşünüyorum. Doğru CSS ile farklı bölümleri stillendirmek ve istediğiniz gibi görünmesini sağlamak için hemen hemen her öğeyi kullanabilirsiniz, ancak daha önce tartışıldığı gibi, anlambilime saygı göstermemiz ve doğru iş için doğru öğeyi kullanmamız gerekiyor.
Bunun nedeni, görsellerin tüm hikayeyi anlatmamasıdır. Gezinme menüsü ve ilgili bağlantılar gibi, içeriğin en kullanışlı bölümlerine kullanıcıların dikkatini çekmek için renk ve yazı tipi boyutunu kullanıyoruz. Ancak örneğin “pembe” ve “büyük” gibi kavramların yardımcı olmadığı görme engelliler ne olacak?
Not :Erkeklerin yaklaşık %8’i ve kadınların %0.5’i renk körüdür; ya da başka bir deyişle, yaklaşık her 12 erkekten 1’i ve her 200 kadından 1’i. Görme engelliler dünya nüfusunun kabaca %4-5’ini temsil etmektedir (2012’de dünyada 285 milyon böyle insan toplam nüfus ise yaklaşık 7 milyar).
HTML kodunuzda içeriğin bölümlerini işlevlerine göre işaretleyebilirsiniz – yukarıda açıklanan içeriğin bölümlerini temsil eden öğeleri kullanabilirsiniz. Ekran okuyucu gibi yardımcı teknolojiler bu öğeleri tanıyabilir ve “ana gezinmeyi bul” veya “ana içeriği bul” gibi işleri yapabilir. Daha önce bahsettiğimiz gibi, doğru iş için doğru eleman yapısını ve semantiğini kullanmamanın bir takım sonuçları vardır .
Bu tür anlamsal işaretlemeleri uygulamak için HTML özel etiketler sağlar, örneğin:
- üst alan:
<header>. - gezinme çubuğu – menu:
<nav>. - ana içerik:
<main>ve çeşitli içerik elemanları;<article>,<section>,<div>. - kenar çubuğu :
<aside>; genellikle<main>içine yerleştirilir. - alt alan:
<footer>.
Aktif öğrenme: kodu keşfet
Yukarıda görülen örneğimiz aşağıdaki kodla oluşturuldu. Yukarıdaki örneğe bakmanızı ve ardından görselin hangi bölümünü hangi parçaların oluşturduğunu görmek için aşağıdaki koda bakmanızı istiyoruz.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page title</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<!-- aşağıdaki üç satır html5 anlam bilgisini Internet Explorer'ın eski versiyonları için de çalıştırır hale getirir -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Üst alan (header) kısmını tüm sayfalarda kullanacağız -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Bir arama formu sitede gezinmenin bir yöntemi olabilir. -->
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
<!-- Sayfamızın ana içeriği -->
<main>
<!-- Bir article - yazı içeriği-->
<article>
<h2>Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<h3>Subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
<h3>Another subsection</h3>
<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
</article>
<!-- aside içeriği ana içerikle birlikte verilebilir. -->
<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</aside>
</main>
<!-- Alt alanı (footer) da tüm sayfalarda kullanacağız.-->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</body>
</html>Kodu gözden geçirmek ve anlamak için biraz zaman ayırın – kodun içindeki yorumlar da onu anlamanıza yardımcı olacaktır. Bu makalede sizden başka bir şey yapmanızı istemiyoruz çünkü belge düzenini anlamanın anahtarı sağlam bir HTML yapısı yazmak ve ardından bunu CSS ile düzenlemektir. CSS konusuna gelene kadar sadece HTML ile ilgileneceğiz.
HTML öğelerine ayrıntılı bakalım
HTML öğelerinin anlamını ayrıntılı olarak anlamak iyidir – bu, web geliştirme konusunda daha fazla deneyim kazanmaya başladığınızda kademeli olarak üzerinde çalışacağınız bir şeydir. HTML element referanslarını okuyarak birçok detay bulabilirsiniz. Şimdilik, anlamaya çalışmanız gereken ana tanımlar şunlardır:
<main>bu sayfaya özel içerik içindir.<main>öğesini her sayfada yalnızca bir kez kullanın ve doğrudan<body>içine koyun. İdeal olarak diğer öğelerin içine yerleştirilmemelidir.<article>sayfanın geri kalanı olmadan (örneğin, tek bir blog yazısı) kendi başına anlamlı olan ilgili içerik bloğunu içine alır.<section><article>ile benzerdir. Ancak daha çok, tek bir işlevsellik (örneğin, bir mini harita veya bir dizi makale başlığı ve özeti) veya bir tema oluşturan sayfanın bir bölümünü gruplamak için kullanılır. Her bölüme bir başlıkla başlamak en iyi uygulama olarak kabul edilir; ayrıca bağlama bağlı olarak farklı<article>bölümlerini farklı<section>‘lara veya farklı<section>bölümlerini farklı<article>‘lara ayırabileceğinizi unutmayın.<aside>doğrudan ana içerikle ilgili olmayan ancak bununla dolaylı olarak ilgili ek bilgiler sağlayabilecek içerik içerir (sözlük referansları, yazar biyografisi, ilgili bağlantılar vb.).<header>bir üst alan grubunu temsil eder. Eğer<body>‘nin bir alt öğesiyse, bir web sayfasının genel başlığını tanımlar, ancak bir<article>veya<section>öğesinin altındaysa, o bölüm için belirli bir başlık tanımlar (bunu başlık öğeleri olan<h1>..<h6>ile karıştırmamaya çalışın ).<nav>sayfa için ana gezinme araçlarını içerir. İkincil bağlantılar vb., navigasyona girmez.<footer>sayfa için bir alt alan içeriğini temsil eder.
Anlamsal olmayan etiketler
Bazen bazı öğeleri gruplamak veya bazı içerikleri etiketlemek için ideal bir anlamsal öğe bulamayabiliriz. Bazen, bir grup öğeyi CSS veya JavaScript ile gruplamak isteyebilirsiniz. Bu gibi durumlar için HTML’de <div> ve <span> öğeleri bulunur. Bu öğeleri tanımlayıp onlara kolayca erişebilmek için class gibi niteliklerle birlikte kullanabiliriz.
<span>, içeriğinizi sarmak için daha iyi bir anlamsal metin öğesi bulamıyorsanız veya belirli bir anlam eklemek istemiyorsanız kullanmanız gereken satır içi anlamsal olmayan bir öğedir. Örneğin:
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
play, the lights should be down low]</span>.</p>Bu durumda, editörün notunun oyunun yönetmeni için ekstra bir bilgi olması beklenir; metnin ekstra semantik anlamı olması gerekmiyor. Bun gören kullanıcılar için notu ana metinden biraz uzaklaştırmak CSS ile gerçekleştirilebilir.
<div>, blok düzeyinde semantik olmayan bir öğedir ve yalnızca daha iyi bir semantik blok öğesi bulamıyorsanız veya belirli bir anlam eklemek istemiyorsanız kullanmanız gerekir. Örneğin, bir e-ticaret sitesinde geçirdiğiniz süre boyunca herhangi bir noktada açmayı seçebileceğiniz bir alışveriş sepeti widget’ı hayal edin:
<div class="shopping-cart">
<h2>Shopping cart</h2>
<ul>
<li>
<p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
<img src="../products/3333-0985/thumb.png" alt="Silver earrings">
</li>
<li>
...
</li>
</ul>
<p>Total cost: $237.89</p>
</div>Bu gerçekten <aside> değil, çünkü mutlaka sayfanın ana içeriğinde olması gerekmiyor (her yerden görüntülenebilir olmasını istersiniz – mesela üst alandan alışveriş sepetinizi açabilirsiniz). Yani <div> bu durumda iyi bir seçenektir.
Uyarı : Div’ler o kadar kullanışlıdır ki onları kullanmak çok kolaydır. Anlamsal bir değer taşımadıkları için HTML kodunuzu karıştırırlar. Bunları yalnızca daha iyi bir anlamsal çözüm olmadığında kullanmaya özen gösterin ve kullanımlarını en aza indirmeye çalışın, aksi takdirde belgelerinizi güncellemek ve bakımını yapmakta zorlanacaksınız.
Satır sonları ve yatay çizgiler
Ara sıra kullanacağınız ve hakkında bilgi edinmek isteyeceğiniz iki öğe <br> ve <hr>‘dir:
<br> paragrafta satır sonu oluşturur; posta adresi veya şiir gibi kısa satırlı metinler istediğiniz durumlarda tek yol budur. Örneğin:
<p>There once was a man named O'Dell<br>
Who loved to write HTML<br>
But his structure was bad, his semantics were sad<br>
and his markup didn't read very well.</p>Panoya kopyala
<br> öğeler olmadan, paragraf yalnızca uzun bir satırda oluşturulacaktı (daha önce söylediğimiz gibi, HTML boşlukların çoğunu yok sayar); <br> ile yukarıdaki kodda biçimlendirme aşağıdaki sonucu verir:
<hr> öğesi, metindeki tematik bir değişikliği (konu veya sahnedeki bir değişiklik gibi) belirten belgede yatay bir kural oluşturur. Görsel olarak sadece yatay bir çizgi gibi görünüyor:
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.</p>Yukarıdaki örnek aşağıdaki sonucu verir:
Basit bir web sitesi planlama
Basit bir web sayfasının yapısını planladıktan sonra, bir sonraki mantıklı adım, tüm web sitesine hangi içeriği koymak istediğinizi, hangi sayfalara ihtiyacınız olduğunu ve bunların nasıl düzenlenmesi ve birbirine bağlanması gerektiğini bulmaya çalışmaktır. Mümkün olan en iyi kullanıcı deneyimi için bu kısma özen göstermek önemlidir. Buna Bilgi mimarisi denir. Büyük, karmaşık bir web sitesinde, bu süreç için çok fazla planlama yapılabilir, ancak birkaç sayfadan oluşan basit bir web sitesi için bu oldukça basit ve eğlenceli olabilir!
- Gezinme menüsü ve alt alan içeriği gibi çoğu sayfada ortak olan birkaç öğeye sahip olacağınızı unutmayın. Örneğin, siteniz bir şirket içinse, her sayfanın alt alanında iletişim bilgilerinizin bulunması iyi bir fikirdir. Her sayfada ortak olmasını istediğiniz şeyleri not edin.
- Ardından, her sayfanın yapısının nasıl görünmesini isteyebileceğinizin kaba bir taslak çizin (yukarıdaki basit web sitemize benzeyebilir). Her bloğun ne olacağını not edin.
- Şimdi, web sitenizde olmasını istediğiniz tüm diğer (her sayfada ortak olmayan) içerik için beyin fırtınası yapın – büyük bir liste yazın.
- Ardından, farklı sayfalarda hangi bölümlerin birlikte yaşayabileceği hakkında bir fikir vermek için tüm bu içerik öğelerini gruplara ayırmaya çalışın. Bu, kart sıralama denen bir tekniğe çok benzer .
- Şimdi kaba bir site haritası çizmeye çalışın – sitenizdeki her sayfa için bir baloncuk oluşturun ve sayfalar arasındaki tipik iş akışını göstermek için çizgiler çizin. Ana sayfa muhtemelen merkezde olacak ve diğerlerinin hepsi olmasa da çoğuna bağlantılı olacak; İstisnalar olsa da, küçük bir sitedeki sayfaların çoğu ana navigasyondan erişilebilir olmalıdır. Ayrıca, içeriklerin nasıl sunulabileceği hakkında notlar eklemek de isteyebilirsiniz.
Aktif öğrenme: kendi site haritanızı oluşturun
Kendi oluşturduğunuz bir web sitesi için yukarıdaki alıştırmayı yapmayı deneyin. Ne hakkında bir site yapmak istersiniz?
Not: Çalışmanızı bir yere kaydedin; daha sonra ihtiyacınız olabilir.
Becerilerinizi test edin!
Bu makalenin sonuna geldiniz, ancak en önemli bilgiyi hatırlayabiliyor musunuz?
Özet
Bu noktada bir web sayfasının/sitenin nasıl yapılandırılacağı konusunda daha iyi bir fikre sahip olmalısınız. Bu kılavuzun son makalesinde, HTML hatalarının nasıl ayıklanacağını inceleyeceğiz.