آموزش html5: ساخت جدول در html + انواع لیست ها (قسمت ششم)

آموزش HTML5 قسمت ششم

درود بر همه شما عزیزان، از مجموعه آموزش های برنامه نویسی تحت وب، با موضوع ساخت جدول در html و انواع لیست ها و یک عالمه ویژگی و تگ جدید در خدمت شما هستیم.

ابتدا درباره ی اهمیت Comments یا توضیحات هنگام برنامه نویسی صحبت می کنیم و در ادامه به مباحثی مانند: انواع لیست ها، ساخت جدول در html و تگ های جنبی دیگر، صحبت خواهیم کرد.

اما به رسم همیشه اگر تمایل داشته باشید، ابتدا ویدئو آموزشی زیر را با دقت مشاهده نماییم و سپس در صورت نیاز، به بررسی توضیحات متنی این مطلب بپردازیم.

این شما و این هم قسمت ششم از آموزش HTML5:

اهمیت Comments یا توضیحات در برنامه نویسی

پیش از این که آموزش ساخت جدول در HTML و انواع لیست ها را آغاز کنیم، شاید بد نباشد کمی درباره کدنویسی استاندارد صحبت کنیم. یکی از نکاتی که باعث می شود کدهای ما به شکل استانداردتر و حرفه ای تری نمایش داده شود، قرار دادن Comment یا توضیحات است.

بسیاری از برنامه نویسان این موضوع کلیدی را جدی نمی گیرند و در توسعه سیستم با مشکلاتی مواجه خواهند شد. توضیحات در کدنویسی اگر چه در ظاهر سایت تأثیری ندارد اما به برنامه نویسان دیگر کمک می کند، سریعتر کدها را مدیریت یا اصطلاحاً Handle کنند.

بنابراین نوشتن توضیحات را در پروژه های خود جدی بگیرید!

Syntax دستور Comments در زبان HTML

قاعده نحوی نوشتاری توضیحات در زبان HTML به شکل < – – توضیحات – – !> است. همانطور که در تصویر زیر کاملاً مشخص است، به عنوان مثال: هر زمان که قصد طراحی بخش منوهای سایت را داشتیم، قبل از آن با استفاده از دستور Comment و متن menu here یادآوری می کنیم که در این بخش دستورات مربوط به Menu نوشته شده است. با این کار اگر چند سال آینده هم به کدهای خود سر بزنیم، به سرعت می توانیم تغییرات لازم را در بخش منوی سایت اعمال نماییم.

استفاده اصولی از Comments هنگام برنامه نویسی تحت وب

از دستور Comment می توان به شکل اصولی تر نیز استفاده کرد. به عنوان مثال: فرض کنید در قسمتی از سایت می خواهیم گالری از تصاویر نمایش داده شود. در این صورت شروع به کدنویسی این بخش می کنیم، در پایان تعداد خط کدها به عدد ۵۰۰ می رسد. شاید سال بعد اگر قرار باشد در قسمت گالری سایت تغییراتی اعمال شود، بسیار کار دشواری به نظر برسد.

برای این که مدیریت کدها راحت تر انجام شود، پیشنهاد می شود قبل از شروع کدهای مربوطه متن Gallery Here را قرار داده و پس از پایان کدهای این بخش عبارت End Gallery را درج نمایید. (مطابق با عکس زیر):

انواع لیست ها در زبان HTML

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

به طور کلی در زبان HTML دو نوع لیست داریم:

۱) لیست های نامرتب یا Unordered List

۲) لیست های مرتب یا Ordered List

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

 

لیست های نامرتب یا Unordered List با تگ <ul>

اما بپردازیم به لیست های نامرتب در زبان HTML، با استفاده از تگ <ul> و چند عدد تگ <li> می توان یک لیست نام مرتب طراحی نمود. ضمناً یک نکته کنکوری که شاید خوب باشد به عنوان یک برنامه نویس شش دونگ 🙂 به یاد داشته باشیم این است که تگ li سرنام کلمات List Item است. شاید به نظر نکته بدیهی به نظر برسد اما چند سال آینده همین اطلاعات جنبی هستند که شما را به یک Super Expert در حوزه طراحی وب تبدیل می کنند. علی ایحال با استفاده از لیست های نامرتب، طبق تصویر زیر، می توانیم لیست هایی با دایره های توپُر (Disk)طراحی نماییم.

 

نوع Circle در لیست های نامرتب HTML

تگ <ul> یک خاصیت مهم دارد تحت عنوان Type که با بهره گیری از آن می توانیم شکل دایره های توپُر لیست ها را تغییر دهیم. مثلاً اگر مقدار آن را برابر Cirlce یا دایره قرار دهیم. در نهایت شگفتی شاهد دایره های توخالی خواهیم بود 🙂

 

بررسی نوع Square در لیست های نامرتب HTML

شاید باورتان نشود اما می توانیم دایره های توپُر و توخالی را به مربع های کوچک و نه چندان زیبا تبدیل کنیم!

این کار صرفاً با قرار دادن مقدار Square (مربع)در ویژگی Type امکان پذیر است.

در ضمن به صورت پیش فرض مقدار Type برابر با Disk است. اگر می خواهید لیست های شما بدون اشکال هندسی باشند، کافی است مقدار Type را برابر None قرار دهید.

تعیین نوع لیست ها با استفاده از کد CSS

جالب است بدانید در حال حاضر استفاده از Attribute هایی مثل: Type توصیه نمی شود و افراد حرفه ای پیشنهاد می کنند تمامی کارهای مربوط به ظاهر سایت را با به کارگیری کدهای Css پیاده سازی نمایید. منتهای مراتب به دلیل این که هنوز با زبان Css آشنا نشده ایم، فعلاً با Attribute ها کار خود را پیش می بریم. در ادامه به طور مفصل زبان CSS را آموزش خواهیم داد.

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

خاصیت های منسوخ شده در زبان HTML

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

اولین خاصیت bgcolor که مخفف Background color است که قدیما:) به ما کمک می کرد تا رنگ پس زمینه متون را تغییر دهیم.

خاصیت بعدی Forecolor است که در روزگار قدیم باعث می شد، به متون خود رنگ دلخواه انتساب بدهیم که با ظهور Css، این خاصیت هم به رحمت ایزدی پیوست 🙁

قاعده نحوی این دو خاصیت را می توانید در تصویر زیر مشاهده نمایید:

آشنایی با لیست های مرتب یا Ordered List با تگ <ol>

اکنون اگر موافق باشید، به سراغ لیست های هماهنگ یا مرتب برویم. این لیست ها با بهره گیری از تگ <ol> اجرایی می شوند.

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

با توجه به تصویر زیر، چهار آیتم ما به ترتیب از شماره ۱ شروع شده و کار خود را تا شماره ۴ ادامه داده است.

مرتب سازی لیست ها بر اساس حروف بزرگ انگلیسی

همچنین لیست های مرتب را با استفاده از خاصیت Type و قرار دادن مقدار A در آن، می توان به صورت حروف الفبای انگلیسی البته با حروف بزرگ مرتب نمود.

مرتب سازی لیست ها بر اساس اعداد رومی

اگر مقدار ویژگی Type برابر با i باشد. لیست های ما بر اساس اعداد رومی مرتب می شوند. در عکس زیر به طور واضح، این اتفاق قابل مشاهده است.

 

استفاده از خاصیت Start در تگ <ol>

تگ <ol> خاصیت دیگری دارد تحت عنوان Start. با درج این خاصیت می توان مشخص نمود، حرکت لیست ها از چه شماره یا چه مرحله ای آغاز شود. تصویر زیر به خوبی ویژگی Start را تعریف می کند:

معرفی تگ <span> در زبان HTML

تگ <span> که به خودیِ خود نمود بیرونی ندارد، اما در غالب مواقع به کمک طراحان سایت می آید.

از این تگ برای زمانی استفاده می شود که قصد داریم روی بخشی از متن، استایلی خاص را اعمال کنیم. مثلاً: به تصویر زیر دقت کنید.

کلمه ی important بخشی از یک جمله طولانی است که با استفاده از property های Css به آن شکل متفاوتی دادیم.

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

آشنایی با تگ <mark> در HTML5

تگ <mark> از جمله تگ هایی است که در HTML نسخه ۵ به وجود آمد. اگر راستش را بخواهید، خیلی تگ پرکاربردی نیست ولی به رسم ادب (درمقابل W3C که زحمت کشیده و این تگ رو ساخته)این دستور را معرفی می کنیم.

هر متنی که بین تگ های Mark قرار گیرد، پس زمینه آن به رنگ زرد در می آید.

دیدید چقدر کاربردی بود؟؟؟؟ 🙂

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

معرفی تگ های <i> , <cite> , <em> در HTML

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

تگ های   <i> , <cite> , <em>  از این دسته تگ ها هستند که معروف ترین آن ها تگ <i> است.

معرفی مختصر تگ <nav> در HTML

تگ <nav> که بسیار توضیح مختصری در اینجا داده می شود، برای ساخت منوهای سایت به کار می رود. در ادامه زمانی که به آموزش بوت استرپ یا Bootstrap رسیدیم، به طور عملی با این تگ کار خواهیم کرد.

بنابراین تا شروع بحث بوت استرپ، لطفاً تگ <nav> را گوشه ذهن خود نگهدارید!

شروع ساخت جدول در HTML

شاید باورتان نشود، اما رسیدیم به بحث جدی ماجرا. موضوع ساخت جدول در HTML.

قبل از این که کدنویسی را آغاز نماییم، برای این که درک یکسانی از مفهوم جدول داشته باشیم، ابتدا صفحه Word را باز کردیم و در آن جدولی ایجاد کردیم.

اما قبل از شروع، ۲ اصطلاح مهم را با هم تعریف نماییم:

Table Row: به هر کدام از ردیف های یک جدول گفته می شود. مثلا: Devices, Social networks, Brands مجموعاً ردیف محسوب می شوند.

Table Data: به هرکدام از بخش های یک ردیف گفته می شود. مثلاً: Devices اولین Data از اولین Row است.

ساخت جدول در html با استفاده از تگ <table>

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

برای ایجاد جدول، از تگ <table> استفاده می شود. برای ایجاد ردیف یا Row از تگ <tr> (سرنام واژه های Table Row)به کار گرفته خواهد شد و برای درج اطلاعات در هرکدام از بخش های ردیف، از تگ <td> (سرنام واژه های Table Data)استفاده خواهد شد.

حال، جدولی می خواهیم که ۳ ردیف داشته باشد و هر ردیف دارای ۳ بخش باشد. به عنوان مثال: مانند عکس زیر، ابتدا ۳ عدد تگ <tr> ایجاد کرده و در هر کدام از تگ های <tr> از سه تگ <td> استفاده می نماییم. و نهایتاً چیزی که در مرورگر برای ما قابل مشاهده است، شباهت کمی با یک جدول دارد. در ادامه دلیل آن را خواهیم فهمید :).

استفاده از خاصیت border در تگ <table>

برای این که جدول ما به شکل درست در مرورگر نمایش داده شود، نیاز است که خاصیت Border در تگ <table> اضافه شود.

در واقع این ویژگی، مرزهای بین اطلاعات درج شده در بخش های Table Row را نمایان می کند. طبق تصویر زیر اگر مقدار border را عدد ۵ قرار دهیم. نتیجه قابل تحمل تر خواهد بود 🙁

تگ مهم <th> در زبان HTML

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

ضمناً در عکس زیر به اشتباه به تگ <thead> اشاره شده و نتیجه ای که ملاحظه می فرمایید، حاصل تلاش های بی دریغ تگ <th> است 🙂

اما نگران نباشید ( هرچند می دونم نیستید:) )در ادامه در رابطه با <thead> صحبت خواهیم کرد.

فعلاً از <th> لذت ببرید تا بعد 🙁

استفاده از تگ <tfoot> در html

اما با به کار گیری از یکسری تگ ها، می توانیم ردیف های جدول را به صورت دلخواه، جا به جا نماییم. به این صورت که اگر می خواهیم ردیف اول (هنگام نمایش به کاربر)در ردیف انتهایی جدول قرار بگیرد، کل ردیف را با تگ باز و بسته ی <tfoot> محاصره کرده و به همین راحتی به هدف خود دست خواهیم یافت.

معرفی تگ <tbody> در HTML

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

بررسی تگ <thead> در تگ <table>

و آخرین تگی که در این قسمت از آموزش HTML5 با هم بررسی خواهیم کرد، تگی نیست جز <thead> . شاید باورتان نشود اما هر ردیفی که بین این تگ قرار گیرد، بلافاصله در سطر ابتدایی جدول ما قرار خواهد گرفت. همانند تصویر ذیل!

جمع بندی و نکات پایانی آموزش ساخت جدول در HTML و انواع لیست ها

اگر هنوز مطالب مذکور برای شما پیچیده و گنگ است، واقعاً راه حل علمی دیگری به ذهنم نمی رسد، چون از بس توضیح دادم که دیگه کم کم انگشتانم به زبان آمده اند و فریادی با مضمون دیگه بسه را سر می دهند ( یکم شوخی لازمه 🙂 ).

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

یادگیری html را دست کم نگیرید، ابر برنامه نویسان جهان نیز از همین تگ های ساده شروع کردند

( 🙂 اووف چه جمله ای گفتم 🙂 )

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

بهترین ها را برایتان آرزومندم- محمدرضا یعقوبی

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

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

رونمایی از محصول قدم صفر کسب و کار + گارانتی بی قید و شرط
همین الان توضیحات محصول را می خوانم