آموزشآموزش HTML5طراحی سایت

آموزش طراحی سایت – قسمت دوم

در این قسمت از آموزش طراحی سایت به معرفی و ساختار HTML5,CSS3,JS,JQuery میپردازیم

HTML5

ربان HTML5 که بعد از HTML بوجود آمد دارای ساختار ساده تر و بسیار گسترده تر و هوشمند تر از نسخه ای قبلی اش بود. بنابراین هرجا که مشاهده کردید از کلمه html استفاده کردیم بدانید که منظور همان نسخه ۵ html است. در این زبان که بسیاری از زبانهای تحت وب نیز از ساختار آن نشأت گرفته اند و به نوعی تنها با استفاده از HTML است که معنا پیدا میکنند ساختاری کلی وجود دارد که به آن تگ بیس یا tag base گفته میشود. به این صورت که تگها هستند که این زبان را میسازند. تگها که از قبل برای مرورگرها (Browser) شناخته شده هستند، خوانده شده و بصورت گرافیکی یا متنی به کاربر نمایش داده میشوند. منظور از تگها این موارد مثالی هستند:

همانطور که در مثال بالا دقت نمودید، هر تگ یکبار بار بصورت <tag> باز شده و سپس بصورت <tag/> بسته میشود. بعبارتی ساده هر دری را که باز کردید زمان خروج باید بسته شود.

تعدادی از تگها هستند که فقط یکبار در هر پروژه استفاده میشوند بعنوان مثال تگ <title> تنها یکبار استفاده میشود و چنانچه بین آنها متنی نوشته شود آن متن در بالا مرورگر نمایش خواهد یافت. و همچنین تگ <body> یا تگ که نوع فایل و مکان نوشته شدن کدها و نمایش عناصر را در مرورگر مشخص میکنند نیز فقط یک بار استفاده میشود. احساس میکنم کمی هضم این جمله مشکل است. اجازه بدهید با ذکر یک مثال آنرا روشنتر بیان کنیم.

تگهایی که در مثال بالا خدمتتان عرض کردیم فقط یکبار در هر فایل نوشته میشوند و اگر دو بار در هر فایل مورد استفاده قرار گیرند باعث عدم فراخوانی صحیح توسط مرورگر خواهد شد. برای درک بهتر میتوانید یک سایت فارسی را به دلخواه باز کرده سپس در جایی از صفحه راست کلیک نموده و گزینه view page source را زده و از بالا به دقت کدهای استفاده شده را مورد بررسی قرار دهید. ببینید تگها در کجا باز شده و در کجا بسته شده اند.

همچنین جملات فارسی که در <– –!> نوشته شده صرفاً جهت راهنمایی میباشد و وجود آن در کدنویسی الزامی نیست.

یک طراحی و اجرای کوچک!

با فرض بر اینکه کدهای ثابت بالا را در قایل خود قرار داده ایم، میخواهیم یک محتوای ساده ایجاد کرده و در مرورگر به نمایش در آوریم. برای انجام این کار ابتدا برنامه Notepad2 را که در جلسه اول معرفی کردیم اجرا نموده و کدهای مثال قبلی را در آن بنویسید یا کپی نمایید.

سپس یک جمله کوتاه بین دو تگ body قرار داده فایل را با نام index.html ذخیره و توسط مرورگر اجرا نمایید.

مثال:

با نوشتن کدهای بالا و اجرای آن احتمالا با چنین جمله درهم ریخته ای مواجه خواهید شد: اين ÙŠÚ© جمله آزمايشي است

دلیل این امر اینست که مرورگر میبایست نوع کدینگ زبان را بتواند تشخیص دهد.

کدینگ زبان چیست؟

هر زبانی مانند انگلیسی، چینی ، روسی، لاتین، فارسی و عربی دارای نوعی کد شناسایی است که در حالت پیشفرض همیشه زبان انگلیسی و لاتین مد نظر مرورگرها میباشد. لذا ما برای اینکه مرورگر را وادار سازیم که کدینگ زبان فارسی یا بعبارتی زبانهای غیر لاتین و انگلیسی را شناسایی و اجرا کند میبایست یک کد دیگر به قسمت head فایل خود اضافه نماییم. به این نوع کدها کدهای متا یا اضافی یا برتر گفته میشود. بعداً در خصوص متا کدها بیشتر بحث خواهیم کرد. پس برای حل مشکل کد را به شکل زیر به قسمت هد اضافه میکنیم.

هم اکنون مشکل بایستی حل شده باشد.

تبریک میگویم شما موفق شدید اولین فایل html را ایجاد و اجرا نمایید.

در این مبحث قصد نداریم html را آموزش دهیم صرفاً هدف این بود که با ساختار اجرایی این زبان آشنا شوید.

مبحث بعدی ما در مورد قالب بندی و استایل دهی به خروجی مان است. در سالهای ابتدایی وب، استایل ها همزمان با نوشته شدن کدهای html در ادامه همان خط ایجاد میشد و معمولا آنرا با نام inline style میشناسند، که این خود باعث میشد نتیجه کار بسیار شلوغ و ناخوانا شود. البته این نوع استایل دهی هنوز هم برای کدهای کوتاه مورد استفاده قرار میگیرد و ایراد دیگر نیز کندی در بارگزاری صفحه بود. زیرا تمام کدها و استایلها به یکباره میبایست توسط مرورگر بارگزاری میشد. لذا بعدها تگ <style>به زبان HTML اضافه شد و برای هر قطعه کد یا هر قسمت از عناصر صفحه یک ID یا Class اختصاص گرفته سپس در انتهای کدهای html این ID و کلاسها فراخوانی شده و استایل دهی میشدند. و کمی بعد روش استایل دهی CSS بوجود آمد که انقلابی در زمینه طراحی ایجاد کرد. هم اکنون روشی که بیشتر مورد استفاده قرار میگیرد CSS3 است که بدلیل دارا بودن تمام قابلیتهای نسخه های قبلی و فراوانی کدهای استایل دهی، متحرک سازی، رسپانسیو کردن صفحه و…. جایگاه ثابتی در امر طراحی دارد.

اما CSS چگونه عمل میکند؟

همانگونه که قبلا اشاره کردیم ما برای هر عنصری در زبان html یک ID یا Class تعریف میکنیم که بعدا بتوانیم با استفاده از آن ایدی یا کلاس به عنصر مورد نظرمان استایل مناسبی در فایل CSS بدهیم. روند کار به این صورت است که ابتدا در کنار دیگر فابلهای html که قبلا ایجاد کرده ایم، یک فایل css نیز ایجاد میکنیم. نام فایل هرچیزی میتواند باشد مثلاً style.css که با باز کردن این فایل توسط notepad میتوانیم شروع به نوشتن استایل کنیم.

ما در مثال بالاتر برای آزمایش نحوه نوشتن html یک فایل ایجاد کرده بودیم. حال تصمیم داریم با استفاده از همان فایل به جمله آزمایشی که نوشته بودیم استایل مناسبی بدهیم تا بدینوسیله با روش کار CSS نیز آشنا شوید.

به کدهای زیر با دقت نگاه کنید:

ابتدا در کنار فایل قبلی یعنی index.html فایلی با نام style.css ایجاد کردیم. سپس در قسمت head فایل ایندکس، فایل css را فراخوانی کردیم تا هنگام بازشدن صفحه محتویات استایل نیز فراخوانی و توسط مرورگر اعمال گردد.

همچنین جمله “این یک جمله آزمایشی است” را داخل دو تگ p که منظور همان پاراگراف است، قرار دادیم و برای آن یک کلاس تعیین کردیم تا بتوانیم با فراخوانی آن در فایل css اقدام به استایل دهی آن نماییم.

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

تبریک! شما اولین فایل css را با موفقیت ایجاد کردید.

حال اگر ما هزاران عنصر شامل فرمها، کادرها، پس زمینه، سطر، ستون، عکس، جدول…. و هرچیزی که در قالب سایت خود داشته باشیم میتوانیم با تعریف یک Class یا ID به تک تک آنها در همان فایل سی اس اس که ایجاد کردیم استایل دلخواه بدهیم. به مرور با کلیه کدهای پرکاربرد سی اس اس آشنا خواهید شد. عجله نکنید.

حال به سراغ مواردی چون js یا همان جاوا اسکریپت و jQuery که جی کوئری خوانده میشود برویم.

ابتدا یک توضیح در مورد علت و نحوه کارکرد این دو قابلیت خدمت شما دوستان عرض کنم.

بعضی از امور در زمینه طراحی هستند که پردازش آنها برای سرور مقابل سنگین است و نیازمند آنست که این امور توسط کامپیوتر و مرورگر شخص بازدید کننده اجرا و بارگزاری شوند. در ادامه با ذکر یک مثال بیشتر متوجه خواهید شد.

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

در اینجا فعلا قصد نداریم مثالی از نحوه انجام اینکار بزنیم زیرا فعلا مورد نیاز ما نیست. اما در جلسات بعدی آموزش طراحی سایت حتماً اینکار را انجام خواهیم داد.

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

موفق باشید.

بهنام رحیمی نژاد

بهنام هستم، متولد اسفند ۵۹ ، عاشق کسب تجربه های جدید در تمام زمینه ها و آموزش دادن هر چیزی که یاد گرفتم. از روزی که اینترنت رو شناختم فرصت های بسیار زیادی رو در مقابل خودم دیدم که میتونست پولساز باشه و خدماتی ارائه کرد که مشکل خیلی ها رو حل کنه. سالها در پی راهی برای ارائه تجربیاتم در خصوص طراحی سایت و آموزش اصول وب بودم که حدود ۹ سال پیش ایده آزاد وب به ذهنم رسید. اما چالش های زیادی پیش روی من بود که باعث شد کمتر به سایت سر بزنم. با اینحال تمام تلاشم رو کردم تا این رؤیا به واقعیت تبدیل بشه. و امروز این واقعیت پیش روی شماست.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی * Time limit is exhausted. Please reload the CAPTCHA.

دکمه بازگشت به بالا
بستن
بستن