آموزش HTML : ساختاردهی اسناد
علاوه بر تعریف بخشهای جداگانه صفحه شما (مانند "یک پاراگراف" یا "یک تصویر")، HTML همچنین دارای تعدادی عنصر سطح بلوک است که برای تعریف بخشهایی از وبسایت شما مانند "سربرگ"، "منوی ناوبری" یا "ستون محتوای اصلی" استفاده میشوند. این مقاله به نحوه برنامهریزی یک ساختار اولیه وبسایت و نوشتن HTML برای نمایش این ساختار میپردازد.
صفحات وب میتوانند و کاملاً متفاوت از یکدیگر به نظر برسند، اما همه آنها معمولاً اجزای استاندارد مشابهی را به اشتراک میگذارند، مگر اینکه صفحه در حال نمایش یک ویدیو یا بازی تمام صفحه باشد، بخشی از نوعی پروژه هنری باشد یا فقط ساختار بدی داشته باشد:
معمولاً یک نوار بزرگ در بالا با یک عنوان بزرگ، لوگو و شاید یک شعار. این معمولاً از یک صفحه وبسایت به صفحه دیگر ثابت میماند.
لینکهایی به بخشهای اصلی سایت؛ معمولاً توسط دکمههای منو، لینکها یا تبها نمایش داده میشوند. مانند هدر، این محتوا معمولاً از یک صفحه وب به صفحه دیگر ثابت میماند - داشتن ناوبری ناهماهنگ در وبسایت شما فقط منجر به سردرگمی و ناامیدی کاربران میشود. بسیاری از طراحان وب، نوار ناوبری را بخشی از هدر میدانند تا یک جزء جداگانه، اما این یک الزام نیست. در واقع، برخی نیز استدلال میکنند که جدا بودن این دو برای دسترسی بهتر است، زیرا خوانندگان صفحه میتوانند این دو ویژگی را در صورت جدا بودن بهتر بخوانند.
یک ناحیه بزرگ در مرکز که شامل بیشتر محتوای منحصر به فرد یک صفحه وب مشخص است، به عنوان مثال، ویدیویی که میخواهید تماشا کنید، یا داستان اصلی که میخوانید، یا نقشهای که میخواهید مشاهده کنید، یا عناوین خبری و غیره. این بخشی از وبسایت است که قطعاً از صفحهای به صفحه دیگر متفاوت خواهد بود!
برخی اطلاعات جانبی، لینکها، نقل قولها، تبلیغات و غیره. معمولاً این اطلاعات وابسته به محتوای اصلی است (برای مثال در یک صفحه مقاله خبری، نوار کناری ممکن است شامل بیوگرافی نویسنده یا لینکهایی به مقالات مرتبط باشد) اما مواردی نیز وجود دارد که در آنها عناصر تکراری مانند یک سیستم ناوبری ثانویه پیدا خواهید کرد.
نواری در پایین صفحه که عموماً حاوی نوشتههای ریز، اطلاعیههای حق چاپ یا اطلاعات تماس است. این جایی برای قرار دادن اطلاعات رایج (مانند سربرگ) است، اما معمولاً این اطلاعات برای خود وبسایت حیاتی یا ثانویه نیستند. پاورقی همچنین گاهی اوقات برای اهداف سئو با ارائه لینکهایی برای دسترسی سریع به محتوای محبوب استفاده میشود.
یک «وبسایت معمولی» میتواند چیزی شبیه به این ساختار داشته باشد:
تصویر بالا بخشهای اصلی یک سند را نشان میدهد که میتوانید با HTML تعریف کنید. با این حال، ظاهر صفحهای که در اینجا نشان داده شده است - از جمله طرحبندی، رنگها و فونتها - با اعمال CSS به HTML حاصل میشود.
HTML برای ساختاردهی محتوا
مثال بالا زیبا نیست، اما برای نشان دادن یک نمونه طرحبندی وبسایت معمولی کاملاً مناسب است. برخی وبسایتها ستونهای بیشتری دارند، برخی بسیار پیچیدهتر هستند، اما شما متوجه منظور شدید. با CSS مناسب، میتوانید تقریباً از هر عنصری برای قرار دادن بخشهای مختلف استفاده کنید و آن را به شکلی که میخواهید درآورید، اما همانطور که قبلاً بحث شد، باید به معناشناسی احترام بگذاریم و از عنصر مناسب برای کار مناسب استفاده کنیم.
دلیلش این است که تصاویر تمام داستان را نمیگویند. ما از رنگ و اندازه فونت استفاده میکنیم تا توجه کاربران بینا را به مفیدترین بخشهای محتوا، مانند منوی ناوبری و لینکهای مرتبط، جلب کنیم، اما مثلاً در مورد افراد کمبینا که ممکن است مفاهیمی مانند «صورتی» و «فونت بزرگ» را خیلی مفید ندانند، چه؟
در کد HTML خود، میتوانید بخشهایی از محتوا را بر اساس عملکردشان نشانهگذاری کنید - میتوانید از عناصری استفاده کنید که بخشهای محتوای توضیح داده شده در بالا را به طور واضح نشان میدهند، و فناوریهای کمکی مانند صفحهخوانها میتوانند آن عناصر را تشخیص داده و در کارهایی مانند «یافتن ناوبری اصلی» یا «یافتن محتوای اصلی» به شما کمک کنند. همانطور که قبلاً در این دوره اشاره کردیم، عدم استفاده از ساختار و معنای صحیح عناصر برای کار مناسب، عواقب متعددی دارد.
برای پیادهسازی چنین نشانهگذاری معنایی، HTML تگهای اختصاصی ارائه میدهد که میتوانید از آنها برای نمایش چنین بخشهایی استفاده کنید، برای مثال:
سربرگ: . نوار ناوبری: . محتوای اصلی: ، با زیربخشهای مختلف محتوا که توسط عناصر نمایش داده میشوند. نوار کناری: ؛ اغلب درون قرار میگیرد. پاورقی:
کمی وقت بگذارید و کد را بررسی کنید و آن را بفهمید - کامنتهای داخل کد نیز باید به شما در درک آن کمک کنند. ما در این مقاله از شما کار زیادی نمیخواهیم، زیرا کلید درک طرحبندی سند، نوشتن یک ساختار HTML صحیح و سپس طرحبندی آن با CSS است. ما منتظر میمانیم تا زمانی که شما شروع به مطالعه طرحبندی CSS به عنوان بخشی از مبحث CSS کنید.
عناصر طرحبندی HTML با جزئیات بیشتر
خوب است که معنای کلی تمام عناصر بخشبندی HTML را با جزئیات درک کنید - این چیزی است که به تدریج با کسب تجربه بیشتر در توسعه وب روی آن کار خواهید کرد. میتوانید با خواندن مرجع عناصر HTML ما، جزئیات زیادی را بیابید. در حال حاضر، اینها تعاریف اصلی هستند که باید سعی کنید آنها را درک کنید:
برای محتوای منحصر به فرد این صفحه است. از فقط یک بار در هر صفحه استفاده کنید و آن را مستقیماً درون قرار دهید. در حالت ایدهآل، این نباید درون عناصر دیگر تو در تو باشد. بلوکی از محتوای مرتبط را در بر میگیرد که به خودی خود و بدون بقیه صفحه معنیدار است (مثلاً یک پست وبلاگ).
section مشابهاست، اما بیشتر برای گروهبندی یک بخش واحد از صفحه که یک بخش عملکردی واحد (مانند یک نقشه کوچک، یا مجموعهای از عناوین و خلاصهای مقاله) یا یک موضوع را تشکیل میدهد، استفاده میشود. شروع هر بخش با یک عنوان بهترین روش در نظر گرفته میشود؛ همچنین توجه داشته باشید که میتوانیدها را بههای مختلف یاها را بههای مختلف، بسته به متن، تقسیم کنید. حاوی محتوایی است که مستقیماً با محتوای اصلی مرتبط نیست، اما میتواند اطلاعات اضافی مرتبط با آن را به طور غیرمستقیم ارائه دهد (مدخلهای واژهنامه، شرح حال نویسنده، پیوندهای مرتبط و غیره).
گروهی از محتوای مقدماتی را نشان میدهد. اگر فرزند باشد، سربرگ سراسری یک صفحه وب را تعریف میکند، اما اگر فرزند یا باشد، یک سربرگ خاص برای آن بخش تعریف میکند (سعی کنید این را با عناوین و سرتیترها اشتباه نگیرید).
شامل قابلیتهای ناوبری اصلی صفحه است. لینکهای ثانویه و غیره، در ناوبری قرار نمیگیرند. گروهی از محتوای پایانی یک صفحه را نشان میدهد.
گاهی اوقات با موقعیتی مواجه میشوید که نمیتوانید یک عنصر معنایی ایدهآل برای گروهبندی برخی موارد یا قرار دادن برخی محتوا پیدا کنید. گاهی اوقات ممکن است بخواهید مجموعهای از عناصر را با هم گروهبندی کنید تا همه آنها را به عنوان یک موجودیت واحد با مقداری CSS یا جاوا اسکریپت تحت تأثیر قرار دهید. برای مواردی از این دست، HTML عناصر و را ارائه میدهد. شما باید ترجیحاً از این موارد با یک ویژگی کلاس مناسب استفاده کنید تا نوعی برچسب برای آنها فراهم شود تا بتوان آنها را به راحتی هدف قرار داد.
یک عنصر غیرمعنایی درونخطی است که فقط در صورتی باید از آن استفاده کنید که نتوانید عنصر متنی معنایی بهتری برای پوشش محتوای خود پیدا کنید، یا نخواهید معنای خاصی به آن اضافه کنید. برای مثال:
در این مورد، قرار است یادداشت سردبیر صرفاً جهتدهی بیشتری برای کارگردان نمایش ارائه دهد؛ قرار نیست معنای معنایی اضافی داشته باشد. برای کاربران بینا، شاید بهتر باشد از CSS برای فاصله دادن یادداشت از متن اصلی استفاده شود.
یک عنصر غیرمعنایی در سطح بلوک است که فقط در صورتی باید از آن استفاده کنید که عنصر بلوکی معنایی بهتری برای استفاده به ذهنتان نمیرسد، یا نمیخواهید معنای خاصی به آن اضافه کنید. برای مثال، یک ویجت سبد خرید را تصور کنید که میتوانید در هر زمانی از زمان حضورتان در یک سایت تجارت الکترونیک، آن را انتخاب و نمایش دهید:
این واقعاً یک نیست، زیرا لزوماً به محتوای اصلی صفحه مربوط نمیشود (شما میخواهید از هر جایی قابل مشاهده باشد). حتی استفاده از را نیز توجیه نمیکند، زیرا بخشی از محتوای اصلی صفحه نیست. بنابراین یک در این مورد خوب است. ما یک عنوان را به عنوان راهنما قرار دادهایم تا به کاربران صفحهخوان در یافتن آن کمک کند.
هشدار: استفاده از Divها آنقدر راحت است که به راحتی میتوان بیش از حد از آنها استفاده کرد. از آنجایی که هیچ ارزش معنایی ندارند، فقط کد HTML شما را شلوغ میکنند. مراقب باشید که فقط زمانی از آنها استفاده کنید که هیچ راه حل معنایی بهتری وجود ندارد و سعی کنید استفاده از آنها را به حداقل برسانید، در غیر این صورت در بهروزرسانی و نگهداری اسناد خود با مشکل مواجه خواهید شد.
دو عنصری که گاهی اوقات از آنها استفاده خواهید کرد و میخواهید درباره آنها بدانید، و هستند.
یک خط فاصله در یک پاراگراف ایجاد میکند؛ این تنها راه برای ایجاد یک ساختار ثابت در موقعیتی است که میخواهید مجموعهای از خطوط کوتاه ثابت، مانند یک آدرس پستی یا یک شعر، داشته باشید. به عنوان مثال:
بدون عناصر ، پاراگراف فقط در یک خط طولانی رندر میشود (همانطور که قبلاً در این دوره گفتیم، HTML بیشتر فضاهای خالی را نادیده میگیرد).
عناصر یک خط افقی در سند ایجاد میکنند که نشاندهنده تغییر موضوعی در متن (مانند تغییر در موضوع یا صحنه) است. از نظر بصری، این خط فقط شبیه یک خط افقی به نظر میرسد. به عنوان مثال:
ساختاردهی یک وبسایت پایه
مرحله بعدی پس از برنامهریزی ساختار یک صفحه وب، برنامهریزی ساختار کل یک وبسایت چند صفحهای است، از جمله نحوه چیدمان و پیوند آنها به یکدیگر برای بهترین تجربه کاربری ممکن. به این معماری اطلاعات میگویند.
در یک وبسایت بزرگ و پیچیده، برنامهریزی زیادی میتواند در این فرآیند دخیل باشد، اما برای یک وبسایت ساده با چند صفحه، میتواند یک تمرین سریع و سرگرمکننده باشد.
این فرآیند ممکن است به این شکل باشد:
شما چند عنصر مشترک در اکثر صفحات (اگر نه همه) خواهید داشت - مانند منوی ناوبری و محتوای پاورقی. به عنوان مثال، اگر سایت شما برای یک کسب و کار است، ایده خوبی است که اطلاعات تماس خود را در پاورقی هر صفحه در دسترس داشته باشید. آنچه را که میخواهید در هر صفحه مشترک باشد، یادداشت کنید. به عنوان مثال:
در مرحله بعد، یک طرح کلی از ساختار احتمالی هر صفحه رسم کنید (ممکن است شبیه وبسایت ساده ما در بالا باشد). توجه داشته باشید که هر بلوک چه شکلی خواهد بود.
حالا، در مورد تمام محتوای دیگری (که در همه صفحات رایج نیست) که میخواهید در وبسایت خود داشته باشید، طوفان فکری انجام دهید. برای مثال:
در مرحله بعد، سعی کنید همه این آیتمهای محتوا را در گروههایی مرتب کنید تا ایدهای از اینکه چه بخشهایی ممکن است در صفحات مختلف با هم باشند، به دست آورید. این کار بسیار شبیه به تکنیکی به نام مرتبسازی کارتی است.
حالا سعی کنید یک نقشه سایت تقریبی طراحی کنید - برای هر صفحه در سایت خود یک کادر داشته باشید و خطوطی را برای نشان دادن گردش کار معمول بین صفحات رسم کنید. صفحه اصلی احتمالاً در بالا یا مرکز قرار خواهد گرفت و به اکثر صفحات دیگر، اگر نگوییم همه آنها، لینک میدهد. اکثر صفحات یک سایت کوچک باید از طریق منوی ناوبری اصلی در دسترس باشند، اگرچه استثنائاتی نیز وجود دارد. همچنین ممکن است بخواهید یادداشتهایی در مورد نحوه ارائه مطالب اضافه کنید.
تمرین بالا را برای یک وبسایت که خودتان ساختهاید، امتحان کنید. دوست دارید سایتی در مورد چه چیزی بسازید؟ به عنوان یک هدف فرعی، از دانش HTML که تاکنون کسب کردهاید برای ایجاد چند صفحه در سایت استفاده کنید. میتوانید از الگوی HTML پایه ما به عنوان نقطه شروع استفاده کنید.
