طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

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

آموزش HTML | آموزش HTML5

در آموزش HTML بخش دهم مباحث مهم زیر را خواهیم آموخت:

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

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

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

آموزش 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 باید این جریان طبیعی را بر هم بزنیم که موجب از بین رفتن انعطاف پذیری می شود.

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

&entity_name;

یا

&#entity_number;

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

 فاصله

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

آموزش 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: که نوع سرویس اینترنت را تعیین می کند. ( http و یا https )
  • Prefix: در این قسمت پیشوند آدرس سایت تعیین می شود. و برای http این قسمت www خواهد بود.
  • Domain: این قسمت معرف دامنه سایت است مانند net
  • Port: شماره پورت در هاست را تعیین می کند که برای http به صورت پیش فرض 80 است و در آدرس ها نوشته نمی شود.
  • Path: مسیر فایل های یک سایت در سرور را نمایش می دهد.
  • Filename: نام پوشه و یا فایل را تعیین می کند.

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

 

نوشته های مرتبط

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