آموزش HTML5: ادامه دستورات در HTML (قسمت هفتم)

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

درود پروردگار مهربان بر شما دوست عزیزی که زمان ارزشمند خود را برای یادگیری صرف می کنید. با شما هستیم با سری ویدئوهای آموزش برنامه نویسی تحت وب، اگر مطالب قبلی را مشاهده نکرده اید، حتماً توصیه می کنیم از طریق این لینک مقالات پیشین را مطالعه نمایید، زیرا مطالب به هم پیوسته هستند. در قسمت هفتم آموزش HTML5 قصد داریم در رابطه با ادامه دستورات در HTML با شما صحبت کنیم.

مانند همیشه اگر مایل باشید، سریعاً فیلم آموزشی زیر را با هم مشاهده نماییم 🙂 :

 

 

خلاصه ویدیو آموزش HTML5: ادامه دستورات در HTML به صورت عکس و متن

 

ساخت محتوای Collapsible در HTML با تگ <details>

یکی از تگ های جالب HTML نسخه 5 تگ <Details> است که این دستور به ما این امکان را می دهد تا آیتم های Collapsible در وب سایت خود ایجاد نماییم.

معنی لغوی Collapsible فروریختگی است. به عبارتی ساده تر، حتماً در سایت های مختلف امکاناتی را دیده اید که با کلیک روی یک لینک، محتوای داخل آن لینک باز می شود و برای کاربر تا حدی لذت بخش است.

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

در واقع زمانی که روی لینک This is my abilities کلیک می کنیم، محتوای آن (که در اینجا 4 آیتم است)باز می شود و با کلیک مجدد روی آن، محتوا از دید کاربر پنهان می شود.

توصیه اکید می شود، کدهای بالا را به صورت عملی در یک ویرایشگر متن، آزمایش نمایید تا مطلب به طور کامل در ذهن شما جای بگیرد.

آموزش ساخت نوار پیشرفت (Progress Bar)در HTML5

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

همانطور که در تصویر زیر مشاهده می فرمایید، با استفاده از تگ های <progress> و <meter> قادر خواهیم بود، نوار پیشرفت های دلخواه خود را پیاده سازی کنیم.

این دو تگ تقریباً یک کار را انجام می دهند و صرفاً از لحاظ ظاهر با هم متفاوت هستند.

 

Attribute های مهم در تگ های <meter> و <progress>

اگر موافق باشید، چند خاصیت این دو دستور را مورد بررسی قرار دهیم:

Value : در این Attribute مقدار اولیه نوار پیشرفت قرار می گیرد. Value بسیار حائز اهمیت است و وجود آن کاملاً الزامی می باشد.

Min : اگر Progress Bar را یک ظرف در نظر بگیریم، کمترین مقداری که در آن ظرف می تواند قرار گیرد، در Min تعیین می شود. بدیهی است که به عنوان مثال اگر در Min عدد 10 قرار داده شود، عددی که در Value درج می شود، نمی تواند از 10 کمتر باشد.

Max : با توجه به مثال ظرف بالا، بیشترین مقداری که در ظرف Progress می تواند جای بگیرد، در Max مشخص می شود. مسلم است که اگر مقدار Max 140 باشد، در خاصیت Value نمی تواند، عددی بیشتر از 140 نوشته شود.

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

Optimum : این ویژگی تعیین کننده ایده آل ترین مقدار نوار پیشرفت است.

Low : این Attribute تعیین کننده پایین بودن عملکرد Progress Bar است.

High : این ویژگی مشخصه ی بالا بودن و یا مطلوب بود عملکرد نوار پیشرفت می باشد.

آشنایی با مفاهیم Block Element و Inline Element

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

Inline Element Tags : به تگ هایی که در اجرا کنار هم نمایش داده می شوند، Inline Element گفته می شود. مانند تگ a یا span که شاید در ویرایشگر متن زیر هم نوشته شوند اما هنگام اجرای کد در مرورگر، کنار هم نمایش داده می شوند.

Block Element Tags : به تگ هایی که حتی اگر در صفحه کدنویسی کنار هم قرار بگیرند، اما هنگام اجرای کد، زیر هم نمایش داده می شوند، Block Element گفته می شود.

تعاریف بالا در تصویر زیر کاملاً مشهود است

 

فرق بین inline element و block element در html

 

معرفی تگ مهم </br> در HTML

اما به سراغ ادامه دستورات در HTML برویم:

یک تگ بسیار کارآمد و مهم در HTML، تگ </br> است. این تگ سرنام واژه های Break Line است.

خیلی وقت ها نیاز است، خط ما شکسته شود. به عنوان مثال اگر بخواهیم یک تگ Inline را به Block تبدیل نماییم، فقط کافیست بعد از اتمام هر یک از تگ های a دستور </br> را درج کنیم. در این صورت طبق فرمان ما، هز زمان که اراده کنیم، قادر خواهیم بود خط را بشکنیم (با توجه به تصویر زیر)و اصطلاحاً Enter بزنیم 🙂 .

 

آشنایی با تگ </hr> در زبان HTML

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

 

3 نکته درباره استاندارد های HTLM5

اما بپردازیم به 3 نکته جالب توجه در زبان HTML نسخه 5 (که البته توصیه می شود این نکات را نادیده بگیرید، چون کد شما را ناتَمیز می نُماید 🙂 ):

1) به حروف کوچک یا بزرگ حساس نیست (Case sensitive نیست). یعنی اگر مثلاً: تگ <body> را به صورت <BoDy> بنویسیم، از ما خطا نمی گیرد.

2) الزامی به قرار دادن تگ پایانی نیست (به جز تگ a). می توانیم تگ پایانی (Closing Tag)را درج نکنیم.

3) الزامی به قرار دادن “” در Attribute ها نیست. مثلاً: دستور “5”=Value را می توان به صورت 5 =Value نوشت.

بررسی صحت کدهای HTML از طریق لینک وب سایت

یکی از سوالاتی که بسیار پرسیده می شود، این است که: از کجا بفهمیم کدنویسی ما استاندارد است یا خیر؟

آیا لازم است کتاب های ویژه ای خوانده شود؟ یا منبع خاصی را به صورت روزانه رصد نماییم؟

پاسخ: خیر. فقط کافیست به سایت Validator.w3.org مراجعه نمایید. و مطابق با تصویر زیر، به راحتی در قسمت مربوطه، آدرس یکی از صفحات سایت خود را وارد نمایید و روی دکمه Check کلیک نمایید.

در نهایت، تمامی خطاها و هشدارهای مربوط به کدهای HTML آن صفحه را به صورت رایگان به شما ارائه می دهد.

 

بررسی کدهای وب سایت از طریق آپلود فایل

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

 

با توجه به عکس زیر، ما نیز همین اقدام را انجام دادیم و یک فایل html سبک را آپلود کردیم و دکمه Check را انتخاب نمودیم.

 

بررسی خطاهای فایل HTML ما

همانطور که در تصویر زیر نمایان است. 1 عدد Warning یا هشدار و 3 عدد Error یا خطا از فایل ما گرفته شده است که در ادامه به بررسی هرکدام از آن ها می پردازیم:

مورد اول : مربوط به کدهای Responsive وب سایت است که البته خطای جدی ای نیست و صرفاً در غالب هشدار ارائه شده است.

مورد دوم : مربوط به باز بود تگ <a> است و باید تگ پایانی برای آن قرار داده شود.

مورد سوم : این خطا هم دقیقاً با مورد دوم یکسان است و باید Closing Tag درج شود.

مورد چهارم : این خطا به این مورد اشاره می کند که استفاده از خاصیت Type در تگ <ul> منسوخ شده است و این کار باید در CSS انجام شود که پیش تر درباره آن صحبت شد.

 

معرفی یک تگ منسوخ شده در HTML

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

به عنوان مثال در تصویر زیر، بعد از کلمه mohammad چند فاصله درج شده است، اگر تگ <pre> نباشد، در فقط یک Space در مرورگر نمایش داده می شود، اما همانطور که در عکس زیر مشهود است، به همان شکلی ک در ویرایشگر متن تایپ شده است، هنگام اجرا نمایش داده شده است.

 

کار با Specific Characters در زبان HTML

یکی از مفاهیمی که فقط HTML بازهای حرفه ای بلد هستند 🙂 بحث Specific Character ها یا کاراکترهای خاص است.

یکی از پرسش های متدوالی که وبمسترها مطرح می کنند این است که ما در وردپرس چگونه می توانیم آیکون Copy رایت را اضافه کنیم؟ قالب ما که پشتیبانی نمی کند.

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

نکته کنکوری: کاراکترهای خاص در HTML همیشه با & (Ampersand)شروع و به ; (Semi Column)ختم می شوند

اگر در یک صفحه html بخواهیم به تعداد دلخواه فاصله خالی ایجاد کنیم، کافیست از دستور ;nbsp& استفاده کنیم. در تصویر زیر کاملاً مشخص است، به تعدادی که این قطعه کد را وارد کردیم، در اجرا Space ایجاد شده است (که در حالت عادی امکان پذیر نیست).

نحوه چاپ کردن علامت های < > در HTML

اگر بخواهیم دقیقاً کدهای HTML را در مرورگر نمایش دهیم، تنها کافیست علامت های کوچکتر و بزرگتر را با استفاده از Specific Character ها چاپ نماییم.

برای مثال اگر هدف ما نمایش تگ <p> باشد، ابتدا دستور ;lt& (سرنام کلمات Lower Than است)، کاراکتر p و در آخر نیز دستور ;gt& (سرنام واژه های Greater Than است)را درج می کنیم و در نتیجه خواهیم دید که تگ <p> برای ما چاپ می شود.

 

لیست جامع کاراکترهای خاص (Specific Charachters)

اکنون شاید پرسشی ذهن شما را درگیر کرده باشد: چه تعداد از این دستورات وجود دارد؟ آیا همه آن ها را باید حفظ کرد؟ منبعی جامع برای کاراکترهای خاص وجود ندارد؟

پاسخ: نیازی به حفظ کردن این کدها نیست و در سایت W3Schools به راحتی با جستجوی عبارت HTML Symbols می توانید به تمامی این کاراکترها دست یابید.

 

همانگونه که از عکس زیر پیداست، می توانید هرکدام از آیکون های زیر که دوست داشتید را انتخاب کرده و گزینه Try it را کلیک نمایید و در نهایت کد آن را در وب سایت شخصی خود اضافه کنید و لذتش را ببرید 🙂 .

 

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

دستور ;copy& معرف آیکون CopyRight است.

دستور ;9728#& معرف آیکون خورشید می باشد.

و دستور ;9749#& مشخصه فنجان قهوه است.

 

آخرین تگ در HTML5 تحت عنوان <time>

آخرین تگی که قصد معرفی آن را داریم، تگ <time> است. این دستور در ظاهر کار خاصی برای کاربر انجام نمی شود و صرفاً چون از سری تگ های HTML5 است، به رسم احترام، هر زمان که قصد افزودن تاریخ در صفحات وب سایت خود را داشتیم، بهتر است از این دستور استفاده نماییم.

 

در قسمت هشتم آموزش HTML5، با ادامه دستورات در HTML در خدمت شما خواهیم بود. منتظر ویدئوهای بعدی باشید.

جمع بندی (آموزش HTML5: ادامه دستورات در HTML)

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

اما به شما قول می دهم اگر تا انتهای ویدئوهای آموزشی HTML5 همراه ما باشید، دیگر نیازی به دوره های چند صد میلیونی 🙂 ندارید و با همین مطالب می توانید در حد کفایت از HTML برای ویرایشگرهایی مثل PhpStorm سخن بگویید.

پیروز و پایدار باشید، تا دیداری دیگر بدرود…

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

 

 

دیدگاهتان را بنویسید

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

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