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

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

با توجه جلسات قبلی و همونطور که در جلسه سوم قول داده بودیم در جلسه چهارم آموزش طراحی سایت در نظر داریم تا یک پروژه عملی کوچک را با استفاده از HTML5 و CSS3 انجام دهیم تا از این طریق درک بهتری نسبت به چگونگی قرارگیری عناصر در صفحه و همچنین تگهای HTML5 پیدا کنید. خوشبختانه در HTML5 نوشتن بسیاری از کدها ساده تر شده است و طبق تعاریفی که از قبل در مرورگرها صورت گرفته بسیاری از تگهای قدیمی در تگهای جدید ادغام شده و در پروژه های ساده نیازی به نوشتن مجدد آنها نیست. در این تمرین به این موضوع خواهیم پرداخت.

نمونه کار ما به شکل زیر خواهد بود.

آموزش تگهای HTML5 جلسه چهارم

هدف این جلسه اینست که تنها جایگاههای تگهای HTML5 را که برای بخش بندی صفحه ابداع شده اند را یاد بگیرید و با نحوه چنش بعضی از موارد مهم آشنا شوید.

طبق جلسات قبلی ابتدا یک فایل با نامی دلخواه با پسوند html ایجاد کنید. بعنوان مثال: index.html

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

اگر در کدهای بالا دقت کرده باشید ما از شش تگ جدید استفاده کرده ایم.

این تگها عبارتند از Header,Nav,Article,Section,Aside,Footer که مختص HTML5 میباشند

در کدنویسی نسخه قدیمی تر HTML برای ایجاد بخش هدر سایت میبایست یک div ایچاد میکردیم و به آن یک class یا id اختصاص میدادیم. اما در HTML5 جهت سریعتر شدن کدنویسی با تلفیق عناصر تکراری و استاندارد سازی بهتر ، کدها قابل فهم تر شده است.

توضیح تگهای HTML5 بکارگرفته شده در بالا:

  • Header: برای ایجاد سر صفحه استفاده میگردد. مانند عکس ، نام سایت و توضیح سایت.
  • Nav: برای ایجاد بخش منو در زیر هدر یا هرجای دیگری از سایت استفاده میگردد.
  • Article: حهت در ایجاد بخش محتوا و مطالب سایت مورد استفاده قرار میگیرد.
  • Section: سکشن یا بخش برای ایجاد بخشهای مختلف در هرجایی قابل استفاده است مثلا داخل تک Article یا تگهای دیگر.
  • Aside: جهت ایجاد ستون کناری یا ساید بار استفاده میشود.
  • Footer: برای درج پاصفحه و موارد مربوط به آن استفاده میشود.

تگهای زیاد دیگری نیز به HTML اضافه شده که به مرور با آن آشنا خواهید شد.

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

به ادامه آموزش طراحی سایت میپردازیم:

بعد از انجام کار بالا در کنار همان فایل، فایل دیگری با نام style.css نیز ایجاد نمایید. و با توجه به تگ های مورد استفاده در کدهای اچ تی ام ال بالا، استایل مربوط به آن را در فایل css بنویسید. لطفاً کپی نکنید!! بنویسید تا با نحوه نوشتن آن نیز آشنا شوید.

تمام زیبایی یک وبسایت از طریق نوشتن کدهای سی اس اس برای قالب سایت بدست می آید.

حال میتوانید با کمی کنجکاوی و خلاقیت طرجی را که در اختیارتان قرار دادیم تغییر دهید و به دلخواه خودتان آن را تنظیم و قالب بندی کنید.

در نظر داشته باشید همین پروزه ساده میتواند بعنوان کار عملی دوره دبیرستان یا دانشگاه ارائه گردد.

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

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

کد بالا را در یک فایل html ذخیره و اجرا کنید. چه میبینید؟

کار ساده ای انجام دادیم، ابتدا یک Div با کلاس dayereh ایجاد کردیم… کلاس میتواند هر نامی باشد، قبلا گفتیم از id و class میتوان در هنگام استایل دهی در فایل css استفاده کرد.

سپس در استایل آن به کلاس مربوطه مقدار ارتفاع را ۲۰۰ و مقدار عرض را نیز ۲۰۰ پیکسل در نظر گرفتیم و پس زمینه را نیز قرمز انتخاب کردیم با اینکار یه مربع به دست آمد. که در آخر با اضافه کردن border-radius به میزان ۱۰۰% همه لبه های مربع را تا نهایت امکان گرد کردیم و در نهایت دایره به دست آمد.

اما شاید بپرسید چرا از سی اس اس استفاده کنیم وقتی میتوانیم از عکس بهره ببریم.

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

در جلسه بعدی در خصوص id . کلاس و تفاوتهای آن در سی اس اس بیشتر صحبت خواهیم کرد.

موفق باشید

 

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

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

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

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

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

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

Adblock رو غیر فعال کنید

بخشی از درآمد سایت با تبلیغات تامین می شود لطفا با غیر فعال کردن ad blocker از ما حمایت کنید