آموزش HTML – بخش دهم

آموزش HTML – بخش دهم

در این قسمت از طراحی سایت و آموزش HTML با طرح‌بندی یک صفحه وب آشنا میشویم و می‌بینیم که برای Layout از تگ‌های semantic استفاده میکنیم و برای چیدمان این تگها، ۴ روش اصلی را معرفی میکنیم. در ادامه با طراحی واکنش گرا (responsive) به صورت مختصر آشنا میشویم. ادامه‌ی این آموزش کاراکترهای entity را بررسی خواهیم کرد و در انتها با URL آشنا میشویم.

طرح‌بندی صفحه با HTML

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

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

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

  • استفاده از جدول در HTML
  • پراپرتی float در CSS
  • استفاده از framework در CSS
  • استفاده از flexbox

اما کدام یک از این روشها را باید انتخای کرد؟

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

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

منظور از جریان اجزاء این است که هر جزء در صفحه به صورت دیفالت با یک جریانی در صفحه قرار می‌گیرد؛ مثلا یک div تمام صفحه را در برمی‌گیرد. لازم است بدانید که هر جزئی را که وارد سند میکنیم، از سمت راست صفحه وارد میشوند و به ترتیب در سمت چپ قرار می‌گیرد. این نکته را در 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 یک نوع Layout به نام 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="#"> لینک ۱ </a> </li>

                               <li> <a href="#"> لینک ۲ </a> </li>

                               <li> <a href="#"> لینک ۳ </a> </li>

                             </ul>

                             </nav>

 

                             <article class="article">

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

                             </article>

 

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

                   </div>

 

          </body>

</html>

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

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

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

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

طراحی واکنش گرا یا Resposive

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

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

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

<!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 – بخش دهم | آموزش طراحی سایت

روش دیگری که برای طراحی واکنش گرا استفاده می‌شود، به‌کارگیری W3.CSS است که در آینده به طور کامل آموزش داده خواهد شد.

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

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

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

&entity_name;

 

&#entity_number;

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

Non-breaking Space

در قسمت‌های اولیه آموزش گفتیم که هر فاصله دلخواهی را نمی‌توان به بین لغات قرارداد و گفتیم که اگر هر تعداد فاصله را بین لغات در ادیتور وارد کنیم، مرورگرها تنها یکی از آن‌ها را در نظر میگیرند. استفاده از تگ <pre> راه حلی بود که ارائه دادیم اما ایراد این تگ این بود که اندازه و فونت متن را تغییر می‌داد. در اینجا کاراکتر entity را معرفی میکنیم که برای ایجاد فاصله بین لغات به کار میرود. این کاراکتر را Non-Breaking Space میگوییم و به این صورت به کار میرود که برای ایجاد هر فاصله یعنی یک‌بار فشار دادن دکمه فاصله در صفحه کلید، &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>

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

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

 

افزودن علامت‌های تفکیک‌کننده

هنگامی که در word  در حال تایپ یک مقاله هستید، نیاز به علامت‌هایی برای تفکیک کردن لغات دارید که این علامتها در بالا، پایین و یا بین دو حرف قرار میگیرند. این علامتها را علامت‌های تفکیک‌کننده ( diacritical ) میگوییم. مانند grave (  ̀) و یا acute (  ́) که آن‌ها را accent ( بخوانید اکسِنت ) میگوییم. در زبان HTML این علامتها را باید با کدهایی بنویسیم که در جدول زیر با برخی از این علامتها آشنا و کد ایجاد آن‌ها را خواهید دید:

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

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

آشنایی با URL

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

scheme://prefix.domain:port/path/filename

  • Scheme: که نوع سرویس اینترنت را تعیین میکند. ( http و یا https )
  • Prefix: در این قسمت پیشوند آدرس سایت تعیین می‌شود. و برای http این قسمت www خواهید بود.
  • Domain: این قسمت معرف دامنه سایت است مانند net
  • Port: شماره پورت در هاست را تعیین میکند که برای http به صورت دیفالت ۸۰ است و در آدرسها نوشته نمی‌شود.
  • Path: مسیر فایلهای یک سایت در سرور را نمایش می‌دهد.
  • Filename: نام پوشه و یا فایل را تعیین میکند.

[rating itemreviewed=”آموزش HTML – بخش دهم” rating=”9.5″ reviewer=”سایت سازان” dtreviewed=”23/11/2016″ best=”10″ worst=”0″]در آموزش HTML و آموزش طراحی سایت بخش دهم با طرح‌بندی یک صفحه وب آشنا میشویم و می‌بینیم که برای Layout از تگ‌ semantic استفاده میکنیم و طرح‌بندی صفحه با HTML[/rating]

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

دسته بندی طراحی سایت در سایت سازان