طراحی وب سایت قدرتمند، امن و با کیفیت را با شرکت سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

طرح بندی و واکنش گرایی صفحات وب و HTML Entities

طرح بندی و واکنش گرایی صفحات وب و HTML Entities

دوستان عزیز سلام. مطالبی که در این جلسه در مورد آنها صحبت می کنیم عبارتند از: طرح بندی و واکنش گرایی صفحات وب و HTML Entities و نکاتی که باید هنگام طراحی سایت به آن ها تجه داشته باشید را بیان می کنیم:

  • طرح بندی صفحات وب: برای طراحی یک صفحه وب باید بخش های مختلف را از هم جدا کنیم و این بخش ها را به موتورهای جستجو معرفی کنیم. برای این کار از تگ های معنایی استفاده می کنیم که در این بخش این تگ ها را معرفی خواهیم کرد.
  • واکنشگرایی صفحات وب: همچنین در این بخش با واکنشگرایی صفحات وب آشنا می شویم.
  • HTML Entities: در HTML کاراکتر های رزرو شده ای برای مقاصد خاص داریم که در این بخش با این کاراکترها آشنا خواهیم شد.
  • URL: در آخرین مبحث این بخش نیز، با بخش های مختلف یک URL کامل آشنا خواهیم شد.

طرح بندی صفحات وب در HTML

اگر یک روزنامه را ورق بزنید خواهید دید که هر صفحه از ستون های مختلفی تشکیل شده که محتوای خبر در این ستون ها قرار می گیرد. همانند صفحه روزنامه یک صفحه وب به قسمت های مختلفی تقسیم می شود و محتوا در این قسمت ها قرار می گیرد. طرح بندی ( layout ) صفحه وب را با تگ های معنایی ( semantic ) انجام می دهیم. تگ های معنایی در HTML عبارتند از:

آموزش HTML – بخش دهم | آموزش طراحی سایت

  • <header> : برای تعیین سر صفحه یک صفحه وب به کاربرده می شود. لوگو و اطلاعات تماس در این قسمت قرار خواهد گرفت.
  • <nav> : در هر صفحه وب یک منو خواهیم داشت که لینک هایی را در خود جای داده است و به منظور هدایت مخاطب به صفحات دیگر ( که این کار را navigation می گوییم ) استفاده می شود.
  • <section> : دیگر قسمت های صفحه وب در این بخش قرار می گیرند.
  • <article> : در این بخش، مقالات اصلی قرار می گیرد.
  • <aside> : این بخش توضیحات و اطالاعات اضافه در مورد مقالات ( article ) را در خود جای می دهد.
  • <footer> : در این بخش که در انتهای هر صفحه وجود دارد، اطلاعات کپی رایت، اطلاعات تماس و … قرار می گیرد.
  • <details> : جزئیات بیشتری در مورد موضوعی را بیان می کند.
  • <summary> : برای محتوای details یک عنوان را انتخاب می کنیم و در این تگ قرار می دهیم.

در جلسه هفدهم آموزش HTML این المان ها به تفصیل بررسی خواهند شد.

4 تکنیک برای ایجاد یک طرح بندی مناسب وجود دارد که هر کدام از این روش ها، جوانب مثبت و منفی دارد. این 4 روش عبارتند از:

  • طراحی جدول وار
  • ویژگی float در CSS
  • استفاده از framework در CSS
  • استفاده از flexbox

طراحی جدول وار: منظور از طراحی جدولی در طرح بندی، استفاده از تگ <table>  نیست بلکه منظور نمایش اطلاعات به صورت طبقه بندی شده و جدا از هم می باشد. اگر از طراحی جدول وار استفاده کنید، خواهید دید که کدهای نوشته شده بسیار شلوغ خواهد شد و بررسی و تغییرات بعدی بر روی آن به سختی انجام می شود.

استفاده از چارچوب ها ( framework ): برای طرح بندی و سبک دهی به المان های صفحات وب می توان از چارچوب یا همان فریمورک ها ( مثلا bootstrap ) استفاده کرد.
استفاده از ویژگی float: این ویژگی را نیز می توان در طرح بندی صفحاب وب به کار برد. کافی است که بدانید که ویژگی float و clear ( که در آموزش CSS جلسه هفتم با این ویژگی آشنا خواهیم شد ) چگونه کار می کنند. استفاده از این روش نیز معایبی دارد از جمله: وقتی که از این روش استفاده می کنید، جریان طبیعی المان ها به هم گره خورده و این ممکن است که انعطاف پذیری را از بین ببرد.

منظور از جریان المان ها این است که هر المان در صفحه به صورت پیش فرض با یک جریانی در صفحه قرار می گیرد. مثلا هر جزئی را که وارد سند می کنیم، از سمت راست صفحه وارد می شوند و به ترتیب در سمت چپ قرار می گیرد. این موضوع را در CSS به طور مفصل بررسی خواهیم کرد. حال برای استفاده از ویژگی های float و clear باید این جریان طبیعی را بر هم بزنیم که موجب از بین رفتن انعطاف پذیری می شود.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> عنوان صفحه </title>
 <style>
	 div.container {
			   width: 50%;
			   border: 2px solid gray;
	 }
	 header, footer {
			   padding: 1em;
			   color: blue;
			   background-color: #00ffff;
			   clear: left;
			   text-align: center;
	 }
	 nav {
			   float: left;
			   max-width: 160px;
			   margin: 0;
			   padding: 1em;
			   border-right: 1px solid black;
			   background-color: purple;
	 }
	 nav ul {
			   list-style-type: none;
			   padding: 0;
	 }			   
	 nav ul a {
			   text-decoration: none;
	 }
	 article {
			   margin-left: 170px;
			   border-left: 1px solid black;
			   padding: 1.6em;
			   overflow: hidden;
			   background-color: green;
	 }
 </style>
</head>
	<body>
		<div class="container">
			<header>
			   <h1> اطلاعات عنوان اصلی محتوا و صفحه </h1>
			</header>
			<nav>
			  <ul>
			    لینکهای متعددی می توانند در این قسمت قرار گیرند.
			  </ul>
			</nav>
			<article>
			  <p> مقالات همراه با عناوینشان در این قسمت قرار خواهند گرفت </p>
			</article>
			<footer> <p> اطلاعات کپی رایت در این قسمت وارد می شوند. </p> </footer>
		</div>
	</body>
</html>

 

آموزش HTML – بخش دهم | آموزش طراحی سایت

استفاده از flexbox: در CSS3 امکانات جدیدی برای طرح بندی بهتر ایجاد شده است که جعبه های منعطف ( flexible boxes یا به اختصار flexbox ) نمونه ای از آن است. با استفاده از این امکانات، المان های صفحه، با توجه به اندازه صفحه مرورگر و دستگاهی که کاربر با استفاده از آن در حال بازدید از صفحه است، در صفحه جای داده خواهند شد. مطالب بیشتر در این زمینه را در جلسه سیزدهم آموزش CSS خواهید آموخت.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		<style>
			.flex-container {
			    display: -webkit-flex;
			    display: flex;
			    -webkit-flex-flow: row wrap;
			    flex-flow: row wrap;
			    text-align: center;
			}

			.flex-container > * {
			    padding: 15px;
			    -webkit-flex: 1 100%;
			    flex: 1 100%;
			}

			.article {
			    text-align: center;
			}

			header {background: #00ffff; color: blue;}
			footer {background: #00ffff; color: blue;}
			.nav {background:#eee;}

			.nav ul {
			    list-style-type: none;
			 padding: 0;
			}
			   
			.nav ul a {
			 text-decoration: none;
			}

			@media all and (min-width: 768px) {
			    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
			    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
			    footer {-webkit-order:3;order:3;}
			}
		</style>
	</head>
	<body>

		<div class="flex-container">
			<header>
			  <h1> عنوان مطلب </h1>
			</header>

			<nav class="nav">
			<ul>
			  <li> <a href="#"> لینک 1 </a> </li>
			  <li> <a href="#"> لینک 2 </a> </li>
			  <li> <a href="#"> لینک 3 </a> </li>
			</ul>
			</nav>

			<article class="article">
			  <p> در این بخش مقالات قرار می گیرند </p>
			</article>

			<footer> اطلاعات کپی رایت </footer>
		</div>
	</body>
</html>

آموزش HTML – بخش دهم | آموزش طراحی سایت

کدهای بالا را در ویرایشگر خودتان کپی کنید و در مرورگر مشاهده کنید. اندازه پنجره مرورگر خود را تغییر دهید. مشاهده خواهید کرد که نحوه چینیش قسمت های فلکس باکس تغییر خواهد کرد.

با کوچک کردن اندازه پنجره مرورگر، چیدمان به صورت زیر خواهد بود:

آموزش HTML – بخش دهم | آموزش طراحی سایت

واکنش گرایی صفحات وب

همانطور که می دانید امروزه بیشتر مردم با استفاده از تلفن های همراه هوشمند در اینترنت جستجو می کنند و به سایت های مختلف سر می زنند. اگر سایتتان را با دستگاه های مختلف سازگار نکنید، بازدید کنندگان زیادی را از دست خواهید داد.

طراحی واکنش گرا ( Responsive ) یعنی با استفاده از HTML و CSS صفحه را به گونه ای طراحی کنید که چیدمان بخش های مختلف صفحات سایت متناسب با دستگاه کاربر ( تبلت، موبایل و کامپیوتر شخصی ) تغییر کند. برای نمایش درست المان ها متناسب با هر دستگاهی نیاز به تغییر سایز قسمت های مختلف و بعضا پنهان کردن آنها، جمع کردن کردن متن متناسب با اندازه مرورگر و یا بزرگ کردن صفحه داریم تا تمام محتوا به صورت درست و مناسب به مخاطب نمایش داده شود.

برای مثال یک صفحه ساده را طراحی می کنیم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		<style>
			h3 { text-align: right; color: #ff0066; }
			.art {
				color: #000099;
			   float: right;
			   margin: 10px;
			   padding: 10px;
			   max-width: 300px;
			   height: 300px;
			   border: 3px solid red;
			   text-align: center;
			   background-color: #66ff33;
			}

		</style>
	</head>
	<body style="background-color: cyan;">

		<h3> این صفحه به صورت رسپانسیو طراحی شده است. </h3>
		<h3> اندازه صفحه را تغییر دهید تا با مفهوم شرینک یا جمع کردن متن و در کل طراحی واکنشگرا آشنا شوید. </h3>

		<div class="art">
		  <h2> بخش اول </h2>
		  <p> متن ها و محتوای مربوط به بخش اول </p>
		  <p> اندازه هر بخش متناسب با اندازه صفحه تغییر می کند. </p>
		  <p> با تغییر اندازه صفحه، متن ها و چیدمان بخشها، متناسب با اندازه صفحه دستگاه کاربر و یا اندازه پنجره مرورگر نمایش داده می شوند. </p>
		</div>

		<div class="art">
		  <h2> بخش دوم </h2>
		  <p> متن ها و محتوای مربوط به بخش دوم </p>
		  <p> اندازه هر بخش متناسب با اندازه صفحه تغییر می کند. </p>
		  <p> با تغییر اندازه صفحه، متن ها و چیدمان بخشها، متناسب با اندازه صفحه دستگاه کاربر و یا اندازه پنجره مرورگر نمایش داده می شوند. </p>
		</div>

		<div class="art">
		  <h2> بخش سوم </h2>
		  <p> متن ها و محتوای مربوط به بخش سوم </p>
		  <p> اندازه هر بخش متناسب با اندازه صفحه تغییر می کند. </p>
		  <p> با تغییر اندازه صفحه، متن ها و چیدمان بخشها، متناسب با اندازه صفحه دستگاه کاربر و یا اندازه پنجره مرورگر نمایش داده می شوند. </p>
		</div>

		<div class="art">
		  <h2> بخش چهارم </h2>
		  <p> متن ها و محتوای مربوط به بخش چهارم </p>
		  <p> اندازه هر بخش متناسب با اندازه صفحه تغییر می کند. </p>
		  <p> با تغییر اندازه صفحه، متن ها و چیدمان بخشها، متناسب با اندازه صفحه دستگاه کاربر و یا اندازه پنجره مرورگر نمایش داده می شوند. </p>
		</div>

	</body>
</html>

آموزش HTML – بخش دهم | آموزش طراحی سایت

آموزش HTML – بخش دهم | آموزش طراحی سایت

آشنایی با Entities در زبان HTML

هنگام وارد کردن یک متن، نیاز است که از بعضی کاراکتر ها و علامت هایی استفاده کنیم که در صفحه کلید وجود ندارند. بعضی از علامت ها هم هستند که اگر از آنها استفاده شود، ویرایشگر و مرورگر را به اشتباه خواهند انداخت. مثلا، ممکن است از علامت کوچکتر ( > ) و یا بزرگتر ( < ) استفاده کنید که ویرایشگر و یا مرورگرها این علامت ها را علامت تگ در نظر می گیرند و به درستی در مرورگر نمایش داده نخواهند شد. راه حل استفاده از کاراکترهای تعیین شده ای هستند که هنگام کار با زبان HTML از آنها برای ساختن علامت های مختلف استفاده می کنیم. این کاراکتر های از قبل تعیین شده را Entities می گوییم.

به دو صورت می توانیم از این کاراکترها استفاده کنیم.

&entity_name;

یا

&#entity_number;

اما استفاده از روش دوم ارجحیت دارد چرا که بعضی از مروگرها از نام های entity پشتیبانی نمی کنند. با استفاده از معادل عددی، مطمئن هستیم که کاراکتر ها به درستی نمایش داده می شوند.

 فاصله

در بخش های اولیه آموزش گفتیم که هر فاصله دلخواهی را نمی توان به بین لغات قرار داد و گفتیم که اگر هر تعداد فاصله را بین لغات در ویرایشگر کد وارد کنیم، مروگرها تنها یکی از آنها را در نظر می گیرند. استفاده از تگ <pre>  راه حلی بود که ارائه دادیم اما ایراد این تگ این بود که اندازه و فونت متن را تغییر می داد. برای ایجاد هر فاصله یعنی یک بار فشار دادن دکمه فاصله در صفحه کلید، &nbsp; را قرار می دهیم. توجه کنید که nbsp از لغت non-breaking space گرفته شده است.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> عنوان صفحه </title>
</head>
<body>
	<p> در      این متن      بین لغات     فاصله        های زیادی     استفاده شده     است که فقط     یکی از آنها      در مروگر     نمایش داده     می شود </p>
	<p> در &nbsp; &nbsp; &nbsp; این متن از &nbsp;&nbsp;&nbsp;&nbsp; کارکتر &nbsp;&nbsp;&nbsp;&nbsp; entity &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; برای ایجاد &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;فاصله استفاده&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; شده است. </p>
</body>
</html>

آموزش HTML – بخش دهم | آموزش طراحی سایت

در جدول زیر این کاراکترها و مقادیر عددی و اسمی آنها را خواهید دید توجه کنید که مقدار اسمی حتما باید با حروف کوچک نوشته شوند:

علامتتوضیحEntity NameEntity Number
فاصله&nbsp;&#160;
<کوچکتر&lt;&#60;
>بزرگتر&gt;&#62;
&ampersand&amp;&#38;
نقل قول&quot;&#34;
نقل قول&apos;&#39;
¢سنت&cent;&#162;
£پوند&pound;&#163;
¥ین&yen;&#165;
یورو&euro;&#8364;
©کپی رایت&copy;&#169;
®علامت تجاری&reg;&#174;

علامت های تفکیک کننده

هنگامی  که در word  در حال تایپ یک مقاله هستید، نیاز به علامت هایی برای تفکیک لغات دارید که این علامت ها در بالا، پایین و یا بین دو حرف قرار می گیرند. این علامت ها را علامت های تفکیک کننده ( diacritical ) می گوییم. در زبان HTML این علامت ها را باید با کدهایی بنویسیم که در جدول زیر برخی از این علامت ها را خواهید دید:

علامتکاراکترساختارنتیجه
̀aa&#768;
 ́aa&#769;
̂aa&#770;
 ̃aa&#771;
 ̀OO&#768;
 ́OO&#769;
̂OO&#770;
 ̃OO&#771;

تمام نشانه هایی که در نرم افزار word وجود دارند، دارای کد مخصوص هستند. با کمی  جستجو در اینترنت می توانید این کدها را پیدا کنید.

آشنایی با URL

URL مخفف عبارت Uniform Resource Locator است که می تواند هم به صورت لغت و هم به صورت پروتکل اینترنت ( IP ) باشد که معمولا از لغات استفاده می کنیم چون به خاطر سپاری لغات راحت تر است. هر آدرس URL از 6 قسمت تشکیل شده است:

scheme://prefix.domain:port/path/filename
  • Scheme: که نوع سرویس اینترنت را تعیین می کند. ( http و یا https )
  • Prefix: در این قسمت پیشوند آدرس سایت تعیین می شود. و برای http این قسمت www خواهد بود.
  • Domain: این قسمت معرف دامنه سایت است مانند net
  • Port: شماره پورت در هاست را تعیین می کند که برای http به صورت پیش فرض 80 است و در آدرس ها نوشته نمی شود.
  • Path: مسیر فایل های یک سایت در سرور را نمایش می دهد.
  • Filename: نام پوشه و یا فایل را تعیین می کند.

امیدواریم که مطالب گفته شده نظر شما دوستان و همراهان گرامی را جلب کرده باشد. قسمت نظرات برای شما دوستان ارجمند در نظر گرفته شده است تا با پیشنهادات خود ما را در ارائه مطالب بهتر و مفیدتر یاری نمایید. همچنین کارشناسان سایت سازان آماده پاسخگویی به سوالات شما کاربران عزیز می باشند.

 

دیدگاه ‏خود را بنویسید