کانال تلگرام html5

برای دریافت مطالب آموزش html5 ، می توانید عضو کانال تلگرامی زیر شوید

https://telegram.me/html5_channel

---

دسترسی سریع :

درس اول  /  درس دوم  /  درس سوم  /  درس چهارم  /  درس پنجم  /  درس ششم  /  درس هفتم  /  درس هشتم  /  درس نهم  /  درس دهم  /  درس یازدهم 

آموزش html5 جلسه ی بیستم

15 )  صفت عمومی  * - data : 

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

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

<element data-exname="exname2" >

🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود 

🌟 دوستان نگران یاد نگرفتن این صفت نباشید . در آینده خواهید فهمید .

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

آموزش html5 جلسه ی نوزدهم

14 )  صفت عمومی contexmenu   :

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

🌟   صفت contextmenu نیز همین حکایت را دارد . یعنی عملا در هیچ مرورگری کار نمی کند . اما چون قرار بر کامل بودن آموزش های دوره الا در موارد استثنا است ، لذا نحوه ی کارکرد این صفت را به صورت کامل بیان می کنیم .

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

🌟   زبان html5 این قابلیت را دارد که برای یک المان ، کلیک راست تعیین کنیم و زمانی که روی المان کلیک راست کردیم ، منویی که ما برای آن ساختیم ، ظاهر شود . یادگیری کامل این صفت نیاز به دانستن دو المان menu و menuitem و شاید حتی مقداری جاوااسکریپت دارد .

🌟  نحوه ی استفاده از صفت contenxtmenu :

فرض کنید می خواهیم المان p ما ، این خاصیت کلیک راست را داشته باشد و با کلیک راست کردن ، یک منو با سه گزینه ظاهر شود .

1  ایتدا باید صفت contextmenu را در المان p ست کنیم . مقداری که این صفت می گیرد ، یک نام دلخواه است که از آن در مراحل بعدی استفاده خواهیم کرد .

<p contextmenu="exname" >content</p>

فرض می کنیم محتوای المان p یک قطعه متن باشد .

<p contextmenu="exname" >hello world!</p>

2  اکنون باید المان menu با دو صفت مهم type و id را درون المان p ایجاد کنیم :

<p contextmenu="exname" >hello world!
        <menu type="" id="" ></menu>
</p>

صفت type می تواند سه مقدار بگیرد که مقدار context مدنظر ماست . باقی موارد را در قسمت اختصاصی المان <menu> یاد خواهید گرفت .
صفت id نیز باید مقداری که در صفت contextmenu قرار دادیم را بگیرد پس تا الآن داریم

<p contextmenu="exname" >hello world!
        <menu type="context" id="exname" ></menu>
</p>

3  حالا باید گزینه های منو را تعیین کنیم . هر گزینه با یک المان menuitem ایجاد می شود . هر المان menuitem ، می تواند دارای صفت های مختلفی باشد که به موقع همه ی آنها را بررسی می کنیم . در اینجا فقط به صفت ضروری  lable و صفت غیرضروری icon پرداخته می شود :

<menuitem lable="" icon="" ></menuitem>

در صفت lable ، نام گزینه یعنی همان متنی که در گزینه می آید قرار می گیرد و در صفت icon آدرس عکس که کنار متن در گزینه می آید قرار می گیرد .

4  جمع بندی :

<p contextmenu="exname" >hello world!

        <menu type="context" id="exname" >

              <menuitem lable="گزینه اول منو" icon="آدرس عکس کنار گزینه ی اول منو" ></menuitem>
              <menuitem lable="گزینه دوم منو" icon="آدرس عکس کنار گزینه ی دوم منو" ></menuitem>
              <menuitem lable="گزینه سوم منو" icon="آدرس عکس کنار گزینه ی سوم منو" ></menuitem>

      </menu>
</p>

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

🌟  متاسفانه چون این صفت توسط هیچ مرورگری پشتیبانی نمی شود ، لذا نمی توانیم نتیجه کار را ببینیم .

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

آموزش html5 جلسه ی هجدهم

🌷  آموزش html5 جلسه ی هجدهم


13  )  صفت عمومی id :

🌟 یکی از صفات بسیار پرکاربرد زبان html5 ، صفت id می باشد . اگر از ابتدای دروس ما را همراهی کرده باشید ، گفتیم که این صفت و صفت class برای نام گذاری المان به کار می رود و بعدها از این نام می شود استفاده های مختلفی کرد .

🌟 هم از id برای اضافه کردن کدهای جاوااسکریپت به المان استفاده می شود . هم برای اضافه کردن استایل های css در دو حالت external و internal استفاده می شود و هم برای اتصال دادن بعضی المان به المان های دیگر . لذا دامنه ی بزرگتری از صفت عمومی class دارد .

🌟 مقداری که صفت id می گیرد ، صرفا یک نام دلخواه است و معرف آن المان می باشد .

<element id="" >

🌟 یک فرق مهم بین صفت class و صفت id اینست که نام کلاس لازم نیست اختصاصی باشد . یعنی می توانیم به ده المان ، نام کلاس یکسان دهیم . اما نام id فقط باید یکی باشد یعنی اختصاصی باشد و نمی توانیم یک نام را به بیش از یک المان اختصاص دهیم

🌟 این صفت توسط همه ی مرورگرها پشتیبانی می شود .

ویژگی های نامی که به عنوان id می دهیم :

1⃣  باید حداقل یک کاراکتر باشد .

2⃣  بین حروف نباید space باشد .

3⃣  این نام به حروف کوچک و بزرگ حساس نیست .

🌟 مثال عملی :  

می خواهیم با استفاده از صفت عمومی id ، یک سری استایل های css را به صورت internal به المان body دهیم . استایل های ما شامل تغییر رنگ و اندازه فونت می باشد :

1  )  نوت پد را باز کنید . کدهای زیر را در آن تایپ کنید ! سپس فایل را با فرمت html. ذخیره کنید .

<!doctype html>
<html>
<head>
<style>
#exname{
color:red;
font-size:20px;
}
</style>
</head>
<body id="exname">
hello world !
</body>
</html>

همانطور که مشاهده می کنید ، ما برای اینکه رنگ متن و فونت خودمان را با استایل های css و روش internal اعمال کنیم . باید ابتدا یک نامی به المان بدهیم . این نام را می توانستیم هم با صفت class و هم  با صفت id بدهیم . سپس باید کدهای css را درون المان style قرار دهیم . المان style را می توانیم در هرجای کدها استفاده کنیم ولی بهتر و معمول تر اینست که در المان head قرار دهیم . اکنون با فرض اینکه زبان css را می دانیم ، کدهای موردنظر را در این استایل قرار می دهیم . و همانطور که در کدهای css می بینید ما از id برای معرفی المان خودمان استفاده کردیم . علامت # هم نشان دهنده ی id بودن آن است . چنانچه در مورد کلاس از . استفاده می کردیم


اکنون فایل را با مرورگر ( ترجیحا فایر فاکس ) باز کنید . می بینید که کدهای css ما به درستی روی محتوای المان body اعمال شدند .

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

آموزش html5 جلسه ی هفدهم

12 )  صفت عمومی translate  : 

🌟  گاهی اوقات ما یک صفحه ی وب را با ابزارهایی مثل google translate ترجمه می کنیم . در حالت پیشفرض ، همه ی متون صفحه ترجمه می شوند . اما می توانیم جلوی ترجمه متن در یک المان خاص را بگیریم . این کار با استفاده از صفت عمومی translate ، صورت می گیرد .

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

🌟  ساختار صفت translate :

<element translate="value" >

🌟  این صفت دو مقدار می گیرد :

1 )  مقدار true : یعنی محتوای المان ترجمه بشود . ( پیشفرض )

2 ) مقدار false : یعنی محتوای المان ترجمه نشود .

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

آموزش html5 جلسه ی شانزدهم

11 ) صفت عمومی spellcheck :

🌟  برای اینکه بتوانیم متن ورودی کاربر را از لحاظ درست بودن لغوی و ساختار گرامری چک و اعتبار سنجی کنیم ، از صفت عمومی spellcheck استفاده می کنیم .

🌟  این صفت یه صورت خاص معمولا در فرم ها استفاده می شود . اما در همه ی المان ها قابل استفاده است . چون با استفاده از صفت عمومی contenteditable می شود ، هر محتوایی را editable کرد . زمانی که کاربر شروع کند به edit محتوا ، اعتبار سنجی نیز صورت می گیرد .

🌟  زبان html5 برای اعتبارسنجی فرم ها ، امکانات خوبی به خودش اضافه کرده است .

🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود .

🌟  ساختار این صفت عمومی به صورت زیر است :

<element spellcheck="value" >

🌟  این صفت قادر است دو مقدار بگیرد :

1 )  مقدار false : یعنی از لحاظ لغوی و گرامری ، چک و اعتبارسنجی نشود ( پیشفرض )

2 )  مقدار true : یعنی از لحاظ لغوی و گرامری ، چک و اعتبارسنجی بشود .

🌟 مثال عملی :

می خواهیم یک متنی که خاصیت contenteditable آن فعال است را زمانی که کاربر edit می کند ، از نظر لغوی چک شود . برای اینکار واضح است که باید صفت spellcheck المان را true کنیم .

1 ) نوت پد را باز کنید و قطعه کد زیر را در آن تایپ کنید و با نام دلخواه و در مکان دلخواه و پسوند html. ذخیره کنید .

<!DOCTYPE html>
<html>

<head></head>

<body>
<p contenteditable="true" spellcheck="true" >

hello world !

</p>

</body>

</html>

2 )  اکنون این فایل را با مرورگر باز کنید و شروع کنید به edit متن . کل متن رو پاک کنید و عبارت اشتباه helllo رو وارد کنید و space بزنید . مشاهده می کنید که یک خط رنگی زیر عبارت ظاهر شده و بیان می کند که این عبارت در لغت وجود ندارد .

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

آموزش html5 جلسه ی پانزدهم

10 ) صفت عمومی title  :

🌟  برای اینکه در مورد المان ، یک سری اطلاعات اضافی در نظر بگیریم ، طوری که در صفحه نباشد و زمانی که با ماوس رو آن می رویم ، آن اطلاعات اضافی ظاهر شود ، از صفت title استفاده می کنیم .

🌟  برای دیدن یک مثال ، صفحه ی زیر را باز کنید :

http://www.w3.org/International/resources

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

🌟  نحوه ی نمایشی که صفت title ایجاد می کند را اصطلاحا tooltip گویند .

🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود .

🌟  مثال عملی :

می خواهیم زمانی که با ماوس روی عبارت hello world در المان p می رویم ، اطلاعات اضافی زیر ظاهر شود

this is extra information about this text

1 )  نوت پد را باز کنید و قطعه کد زیر را در آن وارد کنید و سپس با نام دلخواه و پسوند html. در مکان دلخواه ذخیره کنید .

<!DOCTYPE html>
<html>

<head></head>

<body>

<p title="this is extra information about this text">hello world</p>

</body>

</html>

خیلی راحت فقط کافیست صفت title را برابر مقدار موردنظر قرار دهیم .

2 ) اکنون فایل ذخیره شده را با مرورگر ( ترجیحا فایرفاکس ) باز کنید . با ماوس روی عبارت بروید . مشاهده می کنید که اطلاعات اضافی تعیین شده ظاهر می شود .

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

آموزش html5 جلسه ی چهاردهم

9 )  صفت عمومی tabindex :

🌟  اگر یک صفحه ی وب مانند index یک سایت اینترنتی را باز کنید ، می بینید که با زدن tab های متوالی می توانید رو لینک های صفحه حرکت کنید . در حالت پیشفرض ، این حرکت از بالا به پایین انجام می گیرد .

🌟  گاهی نیاز است که این ترتیبِ از بالا به پایین را تغییر دهیم . مثلا در یک منو بخواهیم ابتدا روی دومی بیاید و بعد روی اولی . html5 این امکان را برای ما فراهم کرده است تا هر ترتیبی که میخواهیم برای لینک های خودمان لحاظ کنیم .

🌟  برای فهمیدن نحوه ی کارکرد این صفت مطابق زیر عمل کنید :

1 ) نوت پد را باز کنید و قطعه کد زیر را در آن وارد کنید و فایل را با پسوند html. و نام دلخواه در مکان دلخواه ذخیره کرده و با مرورگر ( ترجیحا فایر فاکس ) آنرا باز کنید .

<!DOCTYPE html>
<html>

<head></head>

<body>

<a href="http://w3schools.com">W3Schools</a><br>
<a href="http://www.google.com">Google</a><br>
<a href="http://www.microsoft.com">Microsoft</a><br>
<a href="http://msn.com">msn</a>

</body>

</html>

2 ) حالا شروع کنید به زدن tab های متوالی . می بینید که از بالا به پایین روی لینک ها حرکت می کند .

3 ) حالا همین فایل را با نوت پد باز کنید و کد زیر را به جای قبلی قرار دهید و فایل را ذخیره کرده و با مرورگر باز کنید .

<!DOCTYPE html>
<html>

<head></head>

<body>

<a href="http://w3schools.com" tabindex="3">W3Schools</a><br>
<a href="http://www.google.com" tabindex="2">Google</a><br>
<a href="http://www.microsoft.com" tabindex="4">Microsoft</a><br>
<a href="http://msn.com" tabindex="1">msn</a>

</body>

</html>

4 ) اکنون شروع کنید به زدن tab های متوالی . مشاهده می کنید که به صورت جابه جا و غیر مرتب روی لینک ها حرکت می کند . این عمل ، توسط صفت tabindex انجام شده است .

🌟  نحوه ی استفاده از این صفت اینست که ابتدا لینک هایی که میخواهیم به صورت نامرتب فعال شوند را مشخص کنیم . بعد صفت tabindex را در آنها قرار دهیم و سپس به این لینک ها بر حسب ترتیبی که مد نظرمان است اعداد 1 تا n دهیم ( n برابر تعداد لینک های مدنظر ماست ) .

🌟  مثال عملی : 5 لینک داریم و میخواهیم با زدن tab های متوالی با اولویت زیر روی آنها حرکت کنیم :

سومی >  اولی  >  پنجمی  >  دومی  >  چهارمی

1 ) نوت پد را باز کنید . قطعه کد زیر را در آن وارد کنید و فایل را با پسوند html. و نام دلخواه و در مکان دلخواه ذخیره کنید

<!DOCTYPE html>
<html>

<head></head>

<body>

<a href="http://w3schools.com" tabindex="2">W3Schools</a><br>
<a href="http://www.google.com" tabindex="4">Google</a><br>
<a href="http://www.microsoft.com" tabindex="1">Microsoft</a><br>
<a href="http://msn.com" tabindex="5">msn</a><br>
<a href="http://msn.com" tabindex="3">msn</a>

</body>

</html>

همانطور که مشخص است اعدادی که tabindex لینک ها باید بگیرند به این صورت است :

سومین لینک > شماره 1

اولین لینک > شماره 2

پنجمین لینک > شماره 3

دومین لینک > شماره 4

چهارمین لینک > شماره 5

2 ) اکنون فایل را با مرورگر باز کنید و شروع کنید به زدن tab های متوالی . می بینید که دقیقا به همان اولویتی که خواستیم بین آنها جابجا می شود .

🌟  دقت کنید که لینک هایی که دارای صفت tabindex نباشد ، به همان صورت اولویت از بالا به پایین فعال می شوند .

🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود .

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

آموزش html5 جلسه ی سیزدهم

8 ) صفت عمومی lang :

🌟  با استفاده از صفت عمومی lang ، می توانیم زبان محتوای متنی یک المان را مشخص کنیم .

🌟  این صفت هم می تواند برای کل صفحه ست شود . یعنی در تگ body قرار گیرد ، و هم برای یک المان خاص .

🌟  معمولا در حالت دوم زمانی استفاده می شود که بخواهیم در یک المان ، متنی را وارد کنیم که زبان دیگری دارد . مثلا فرض کنید زبان کل صفحه انگلیسی باشد ، اما بخواهیم درون المان p ، یک متنی به زبان فارسی وارد کنیم . در اینجا بهتر است از صفت lang استفاده کنیم و عبارت fa که نشان دهنده ی فارسی بودن متن این المان است را در المان p وارد کنیم . این کار باعث می شود مرورگر بفهمد این المان محتوی متن فارسی است و در خروجی این المان دچار مشکل نشود .

🌟  کلمه ی lang ، مخفف عبارت language است .

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

🌟  این مقدار برای زبان فارسی ، fa و برای زبان انگلیسی en می باشد

<element lan="fa">

<element lan="en">

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

آموزش html5 جلسه ی دوازدهم

7 ) صفت عمومی style :

🌟  چنانچه قبلا بیان کردیم ، html قابلیت این را دارد که تکنولوژی های مختلف به آن ضمیمه شود . یکی از این تکنولوژی ها ، زبان css است .

🌟  زبان css ، یک زبان برای استایل دهی به المان ها می باشد . در واقع نشانه گذاری محتوا و قرارگرفتن در ظرف المان ها ، کار html ، و چیدن ، آرایش و زیباسازی آنها وظیفه ی استایل های زبان css است .

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

🌟  هدف آموزشی این درس و حتی این دوره ، یادگیری  زبان css نیست . فقط این نکته را باید بدانیم که دستورات css ، وظیفه ی چیدن محتوا ، آرایش و تغییر خصوصیت های آن را بر عهده دارند .

🌟  چنانچه در آینده به طور مفصل حواهد آمد ، این دستورات را به سه روش می توان به فایل html و المان های آن نسبت داد و ضمیمه کرد .

1 )  در فایل خارجی ( external style ) : یعنی کدهای css را در یک فایل جداگانه بنویسیم و لینک آن فایل را با استفاده از تگ لینک در تگ head قرار دهیم .

2 )  در تگ استایل ( internal style ) : یعنی کدهای css را در درون تگ style و درون فایل html قرار دهیم .

3 )  در المان موردنظر و درون صفت style ، ( روش inline style ) : یعنی کدهای css را درون صفت عمومی style المان بنویسیم . مثلا می خواهیم دو قطعه کد تغییر رنگ و تغییر اندازه ی فونت را به المان body دهیم .

<body style="color:red;font-size:18px;">content</body>

این تغییر رنگ و اندازه ی فونت ، در کل محتوای متنی المان body اثر می گذارد .

🌟  ساختار صفت عمومی style : 

<element style="css_styles" >

🌟 از نظر اولویت اثرگذاری استایل ها ، ابتدا با inline بعد با internal و در آخر با external می باشد . مثلا اگر در هر یک از سه حالت رنگی برای المان مشخص شود ، آن رنگی که به صورت inline تعیین شده اعمال می شود . اگر نبود رنگی که به صورت internal تعیین شده اعمال می شود . و اگر نبود آن رنگی که به صورت external تعیین شده اعمال می شود .


🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود .


🌟 مثال عملی : تغییر فونت و اندازه متن hello world موجود در تگ body :

1 )  نوت پد را باز کنید و قطعه کدهای زیر را در آن تایپ کنید !

<!DOCTYPE HTML>
<html>

<head>

</head>
<body>
hello world !
</body>
</html>

می خواهیم به استفاده از روش inline و صفت عمومی style ،  رنگ و اندازه متن را تغییر دهیم . فرض می کنیم css بلدیم و می دانیم قطعه کد های مورد نظر برای تغییر رنگ و اندازه متن چیست . حالا کافیست این کد ها را درون صفت style المان body قرار دهیم .

<!DOCTYPE HTML>
<html>
<head>
</head>
<body style="color:red;font-size:18px;">
hello world !
</body>
</html>

2 ) اکنون فایل را با نام دلخواه و پسوند html. در یک مکانی ذخیره کنید و آن را با مروگر باز کنید

مشاهده می کنید که رنگ و اندازه متن تغییر کرده است .

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

آموزش html5 جلسه ی یازدهم

6 ) صفت عمومی hidden

 

🌟  صفاتی که تاکنون آموخته ایم ، همگی دارای مقدار بودند ولی بعضی صفات مقدار ندارند و به صورت یک کلمه ظاهر می شوند و کار خود را انجام می دهند . به این صفات ، صفات منطقی گفته می شود .

🌟  صفت عمومی hidden نیز یک صفت منطقی است و مقدار نمی گیرد .

🌟  کاری که صفت hidden  می کند اینست که هر موقع در المان قرار گیرد ، آن المان را از دید کاربر مخفی می کند .

🌟  گاهی لازم است یک المان در ابتدا مخفی باشد و بعد از یک رویداد ظاهر شود که به کمک جاوااسکریپت یا تکنولوژی های دیگر این کار صورت می گیرد .

🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود .

🌟  مثال عملی :

1 ) نوت پد را بازکنید و قطعه کد زیر را در آن وارد کنید.

<!DOCTYPE HTML>
<html>
<head>

</head>
<body hidden>
hello world !
</body>
</html>

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

2 ) حالا فایل را با پسوند .html  ذخیره کنید و آن را با مرورگر باز کنید .

مشاهده می کنید که متن وارد شده نشان داده نمی شود !

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.