پنهان کردن عناصر صفحه در php
در آموزش قبلی شما دیدید که چگونه می توانید یک فایل با پسوند های (html یا htm - فرقی با هم ندارند) را به وسیله ی نرم افزار notepad که به صورت پیشفرض روی ویندوز وجود دارد تغییر دهید. همچنین شما این یک فایل html را در مرورگر خود باز کردید و با استفاده از ctrl + u توانستید کد های آن صفحه را مشاهده کنید. در اصل شما اگر آموزش قبلی را مطالعه کرده باشید ، مقدمات html را به پایان رسانده اید و آماده ی ادامه ی مطالعه ی خود در این مطلب هستید.
توجه داشته باشید که شما اگر می خواهید این کد ها را امتحان کنید ، از تگ های body , head , html هم استفاده کنید و این کد ها را در بخش body آزمایش کنید.
در این آموزش قرار است ایجاد یک صفحه که دارای سر تیتر ، یک بند متن ، خط افقی ، شکست خط و توضیح در کد ها را یاد بگیرید.
1- سر تیتر (h1 , h2 , h3 , h4 , h5 , h6) :
کلمات کلیدی بالا ، کلمات کلیدی ای هستند که برای ایجاد سرتیتر در صفحات اچ تی ام ال به کار می روند. موتور های جستجوگر هم برای فهمیدن میزان اهمیت و موضوع صفحه از این تگ ها استفاده می کنند (در واقع اگر نام مطلب در بین <h2> و </h2> قرار دارد ، موضوع آن صفحه را از آن متوجه می شوند و در جستجو از آن کمک می گیرند. پس این تگ ها اگر به درستی در صفحه استفاده شوند می توانند بازدید صفحه را افزایش دهند)
این کدها را ببینید:
<<<code>>>
<h1> this is h1 </h1>
<h2> this is h2 </h2>
<h3> this is h3 </h3>
<h4> this is h4 </h4>
<h5> this is h5 </h5>
<h6> this is h6 </h6>
<<</code>>>
این کد ها را به در کنار هم استفاده کنید و نتیجه را ببینید. (استفاده از نمایش دهنده ی آنلاین وبلاگ)
همان طور که مشاهده می کنید ، ترتیب اندازه ی متن ها با استفاده از تگ های بالا ، از کوچک به بزرگ به این شکل است:
h6
h5
h4
h3
h2
h1
نکته: اگر دقت کرده باشید بعد از استفاده از تگ های بالا در صفحه ، متن بعدی به خط پایین انتقال می یابد.
2- بند (پاراگراف - p):
در اچ تی ام ال برای ایجاد بند ، از تگ <p> .... </p> استفاده می شود. هر چیزی که در آن قرار گیرد جزو آن بند به حساب می آید. این تگ هم مانند تگ های قبلی باعث می شود متن های بعدی در خط جدید نمایش داده شوند.
<<<code>>>
<h2>this is title (h2):</h2>
<p>this is the paragraf ....</p>
<<</code>>>
کد بالا را امتحان کنید و خروجی را ببینید. (استفاده از نمایش دهنده ی آنلاین وبلاگ)
3- خط افقی (hr):
ایجاد خط افقی می تواند در یک صفحه ی وب کاربرد زیادی داشته باشد. این حالت می تواند به شما کمک کند که بخش های مختلف را از هم جدا کنید. در اچ تی ام ال برای ایجاد یک خط افقی سر تا سری از تگ <hr>؟</hr> استفاده می شود. همان طور که می بینید در بین این تگ علامت سوال قرار داده ایم. علت این است که برای ایجاد خط افقی اصلا نیازی به این نیست که در داخل تگ آن متنی قرار گیرد. و اگر در آن متن هم قرار گیرد هیچ تاثیری ندارد. پس به همین دلیل به جای این که از این تگ به دو صورت باز و بسته استفاده کنیم فقط آن را باز می کنیم و در آخر آن یک فاصله با اسلش قرار می دهیم ( /) در واقع اینگونه از آن استفاده می کنیم:
<<<code>>>
<hr />
<h2>this is title (h2):</h2>
<p>this is the paragraf ....</p>
<hr />
<h4> this is title (h4) </h4>
<p> this is paragraf. p tag. </p>
<<</code>>>
کد بالا را امتحان کنید و خروجی را ببینید. (استفاده از نمایش دهنده ی آنلاین وبلاگ)
4- شکستن خط (br):
یک بار متنی به شکل زیر را در صفحه ی اچ تی ام ال خود وارد کنید:
<<<code>>>
dfdfdsfdfdsfdsfsdfsdfd
safsdafsdfsdfsdfsdfsdf
ghjhgjghjghjhgjhgjhgj
ilkjlkjlkjlhljljljkljhljlk
ewrewrewqrwqerwer
<<</code>>>
حالا خروجی را مشاهده کنید. (استفاده از نمایش دهنده ی آنلاین وبلاگ) می بینید که این حروف با این که به صورت خط شکسته (enter) نوشته شده اند اما در خروجی صفحه ی اچ تی ام ال ، پشت سر هم و فقط با یک فاصله ی کوچک نمایش داده می شوند. حال برای رفع این مشکل شما دو راه دارید.
یکی از راه ها این است که از تگ <br /> در هر قسمتی که می خواهید خط شکسته شود استفاده کنید.
دومین راه این است که متن خود را در تگ <pre> ... </pre> به همان شکل که هست بنویسید. این تگ حالتی ایجاد می کند که با هر اینتری که شما در کد های خود وارد می کنید ، خط شکسته می شود و خط جدید آغاز می شود و دیگر لازم نیست از تگ <br /> به تعداد زیاد استفاده کنید.
روش اول بسیار وقت بر و گیج کننده است اما روش دوم ساده و بسیار کار آمد است. اما در خیلی از مواقع اگر از روش دوم استفاده کنید ممکن است حالت صفحه به هم بریزد. چون خیلی مواقع هست که خط در کد ها شکسته شده است اما هدف شروع خط جدید در خروجی نیست.
5- در اچ تی ام ال برای مشخص کردن توضیحات در بین کد ها از روش زیر استفاده می شود:
خیلی از برنامه نویسان وب هستند که می خواهند در کد خود توضیحاتی را بنویسند که در صفحه نمایش داده نشود ، اما در کد ها وجود داشته باشد و شخص استفاده کننده بتواند آن ها را در بین کد ها بخواند. برای این کار می توان از روش زیر استفاده کرد:
<<<code>>>
<!-- متنی که می خواهید در کد ها نمایش داده نشود -->
<<</code>>>
نکته: این تگی که برای مشخص کردن توضیحات استفاده می شود ، حالت بسته ندارد.
خروجی ساز - مشاهده ی نتیجه ی کد ها
در پایان برای مشاهده ی تمام تگ هایی که مطالعه کرده اید می توانید این فایل را دانلود کنید.
آموزش سریع جاوا اسکریپت - دریافت ورودی از فرم 
آموزش سریع جاوا اسکریپت - دریافت ورودی 
آموزش سریع جاوا اسکریپت - شروع کد نویسی 
آموزش سریع جاوا اسکریپت - مفاهیم پایه 
آموزش سریع جاوا اسکریپت - اجرای کد ها 
آموزش سریع جاوا اسکریپت - مقدمه 
کد کاراکتر (char code) چیست؟ 
مرحله 1 بازی رمزگشایی 
بازی رمزگشایی 
آموزش مبهم کردن کد های جاوا اسکریپت 
مقدمه ای بر رمزگذاری و مبهم کردن کد 
انیمیشن در جی کوئری 
قالب ورود و عضویت در سایت به سبک ویندوز 10
قالب تماس با ما ریسپانسیو برای رزبلاگ
قالب تفریحی گرافیکی برای رزبلاگ
ایجاد خودکار لینک داخلی عناوین صفحه
انواع سیستم عامل و ماشین
تعریف سیستم عامل
قالب سایت ابر دانلود برای رزبلاگ
بنر تلگرام جذب اعضا full css
آموزش استفاده از افزونه جاوا اسکریپت wow
قالب حرفه ای گرافیکی برای رزبلاگ
اجرای انیمیشن css با حرکت اسکرول
آموزش ایجاد چرخش مداوم با css
کدَک تغییر پس زمینه ی سایت و وبلاگ
معرفی چند باگ معروف و پچ آن ها در php
کدَک نمایان و مخفی کردن شی
آموزش ساخت تصویر تصادفی امنیتی در php
آموزش C# قسمت پنجم | انواع عملگر ها
قالب واکنشگرای حرفه ای برای رزبلاگ 
قالب فوق العاده ی فلت طرح گرافیک
قالب فلت و واکنش گرای نوین
مرجع رویداد های موس ، صفحه کلید و کلیپ بورد جاوا اسکریپت
آموزش Css قسمت دوم - انتخابگر ها
افکت فول css متنی که کوچک و بزرگ می شود
بررسی خط به خط متن با جاوا اسکریپت
آموزش HTML شماره 3 - ایجاد لینک و جدول
فایل روبات چیست؟
ابزار ایجاد کد رنگ برای صفحات وب - طرح جدید با امکان قرار دادن در وبلاگ شما
طرح نمايش برچسب هاي مطلب - زرد با لينک هاي آبي