#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

<linearGradient>
دوستان با استفاده از این تگ میتوان یک گرادینت خطی برای اشکال مختلف ایجاد کرد ، منظور از گرادینت خطی یعنی اینکه تمامی رنگهای ایجاد شده در راستای یک خط در کنار هم شروع به قرار گیری میکنند.

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

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

<stop>
با استفاده از این تگ میتوان
1: رنگ گرادینت را مشخص کرد.
2: میتوان مشخص کرد که گرادینت مدنظر ما چند درصد از شکل را بگیرد و از کجا شروع به شکل گیری کند.
این تگ حتما باید داخل تگ linearGradient مورد استفاده قرار بگیرد.

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

offset
با استفاده از این صفت ما مشخص میکنیم که گرادینت ما چند درصد از شکل مدنظر مارا فرابگیرد.

stop-color
با استفاده از این صفت مشخص میکنیم که اون رنگ گرادینت ما کدام رنگ باشد ، و یک رنگ را به عنوان مقدار میپذیرد.

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

پس باید به صورت زیر عمل کنیم:👇

<svg width="400" height="400">
<linearGradient id="frozen">

<stop offset="0%" stop-color="red"></stop>

<stop offset="50%" stop-color="blue"></stop>

<stop offset="100%" stop-color="lime"></stop>

</linearGradient>

<text. x="50" y="200" fill="url(#frozen)">frozencoding</text>

خب دوستان همانطور که مشاهده میکنید ، ما برای اتصال گرادینت به متن خودمان از اون id که به تگ linearGradient داده بودیم استفاده کردیم و داخل صفت fill از url استفاده کردیم و id رو با استفاده از یک (#) به متن متصل کردیم ، گرایدنت ما الان آماده هست و در مرورگر میتوانیم زیبایی این تگ رو مشاهده کنیم.

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

</svg>

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



تمرین یادتون نره⁦❤️⁩
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹

خب دوستان در این پست و چندین پست دیگر قصد داریم به سازماندهی و ساختاربندی عناصر در svg بپردازیم.

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

در این پست و پست های بعدی قصد داریم این عناصر را تعریف و تفاوت های انها را به شکلی ساده بیان کنیم.

<g>
از این عنصر برای گروه بندی عناصری که از نظر منطقی در یک گروه قرار دارند استفاده میشود.

در نرم افزار هایی مثل adobe illustrator نیز ما به کرات عناصر مرتبط را در یک گروه قرار میدهیم تا به قولی اگر بخواهیم این عناصر را جابجا کنیم بتوانیم یکجا و به صورت گروهی جابجاشون کنیم.

دوستان یک هواپیما را در نظر بگیرید ، از عناصری که این هواپیما را تشکیل میدهند میتوان به بال ها و چرخ ها و بدنه اصلی و... اشاره کرد.

ما با استفاده از گروه بندی عناصر میتوانیم هر عنصر از این هواپیما را در یک گروه قرار بدهیم.

این عنصر میتواند به صورت تودرتو به کار رود ، یعنی میتوانیم از چندین عنصر g (فرزند) داخل یک عنصر g (والد) استفاده کنیم.

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

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

داخل این عنصر ما میتوانیم از دو تگ <title> و <desc> استفاده کنیم که یکی از ویژگی های عالی این عنصر میباشد.

تگ <title> عنوانی را برای عنصر گروه بندی مشخص میکند و تگ <desc> یک توضیح کوتاه برای این عنصر مشخص میکند.

برای درک بهتر ، میتوانید به کد زیر توجه کنید:👇

<svg>
<g id="cont">
<g id="body">

...
...
...

</g>

<g id=""head>
...
...
...

</g>
</g>
</svg>

خب دوستان در مثال بالا اون سه نقطه ها میتوانند تگ path و یا rect و... باشند.

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


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

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

عنصر <use> این عملکرد را که ما در نرم افزارهای گرافیکی داریم در SVG برای ما به ارمغان می آورد. توسط این عنصر می توان یک تک شکل یا گروهی از عناصر <g> را دوباره استفاده کرد.

این تگ صفت های زیر را اختیار میکند:

x
y
width
height
xlink:href

دوستان فرض کنید داخل یک عنصر g با استفاده از تگ rect یک مربع ایجاد کردیم ، خب اگر بخواهیم از این مربع یک کپی ایجاد کنیم باید به این صورت انجامش بدیم.
ابتدا برای اون عنصر g خودمون یک id میدیم بعد این ایدی رو داخل صفت xlink:href قرار میدیم دقت داشته باشید قبل از نوشتن id داخل این صفت حتما ابتدا از یک کاراکتر (#) استفاده کنید.

همچنین برای مشخص کردن مختصات مربع کپی شده باید از صفت های x , y استفاده کنیم و این مختصات نسبت به عنصر اصلی شروع به تغییر مکان خواهد کرد.

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

1: توجه داشته باشید ما می توانیم به هر عنصری توسط xlink:href در عنصر <use> اشاره کنیم حتی اگر آن عنصر در فایل دیگری باشد.

2: مورد دیگری که باید در زمان استفاده از عنصر <use> در نظر داشته باشیم این است که کپی جدید از یک عنصر دیگر تمام استایل ها و تغییر شکل های عنصر اصلی و اولیه را خواهد داشت. پس هر زمان بر روی مربع اصلی استایل جدید اعمال کنیم مربع کپی هم آن استایل و تغییر شکل ها را خواهد داشت.

۳: همچنین این امکان برای ما وجود ندارد تا استایل هایی از قبیل fill و stroke عنصر اصلی را override کنیم. آنها برای عنصر کپی بصورت جداگانه قابل تغییر نخواهند بود.


تمرین یادتون نره⁦❤️⁩


——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه مباحث

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

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

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

در واقع میتوان این عنصر را با دید یک تمپلت نگاه کرد که‌ ابتدا ساخته میشود و بعد هرجا که نیاز داشتیم میتوانیم یک‌ نمونه از ان را رسم کنیم ، خود تمپلت هیچگاه رسم نمیشود.

اگه یادتون باشه در عنصر <use> دو تا نکته داشتیم:

1: مکان عنصر کپی شده نسبت به مکان عنصر اصلی تعیین میشد.
2: ویژگی های عنصر اصلی را نمیتوانستیم در عنصر کپی شده تغییر بدهیم.

هیچکدوم از این دو‌ مورد در عنصر <defs> مثل عنصر <use> عمل نمیکنند.

به مثال زیر توجه کنید 👇

<svg width="400" height="400">

<defs>
<g id="frozen">

<rect width="50" height="50" x="20" y="20" fill="lime">
</rect>

</g>
</defs>
<use xlink:href="#frozen" x="100" y="100">
<use xlink:href="#frozen" x="150" y="100">
</svg>

حالا به نکات زیر توجه کنید 👇

1: اولا اون مربع ها تا زمانی که توسط عنصر <use> مورد استفاده قرار نگیرد رسم نمیشود.

2: اگر برای مثال از سه عدد عنصر <use> استفاده کنیم یعنی بخوایم سه عدد مربع داشته باشیم ، هر کدام از این عناصر به سیستم مختصات خودشان وابسته هستند و نسبت به مکان اصلی عنصر وابسته نیستند چراکه عنصر اصلی اصلا رسم نشده.

3: حالا میتوانیم به مربع های مختلف استایل ها و ویژگی های مختلفی اختصاص بدهیم

4: توجه داشته باشید که حتی اگر ویژگی display این عنصر برابر none باشد ، همچنان میتوان از عناصر و فرزندان داخل اون استفاده کرد.
تمرین یادتون نره⁦❤️

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

<symbol>
این عنصر دقیقا شبیه به عنصر <g> هست و با استفاده از آن میتوان عناصر را گروه بندی کرد.

تفاوت های منحصر به فرد عنصر <symbol> با عنصر <g> در این هست که عنصر <symbol> به هیچگاه رسم نمیشود و به نوعی شبیه عنصر <defs> عمل میکند و زمانی نمایش داده می شود که توسط عنصر <use> مورد استفاده قرار بگیرد.
همچنین این عنصر میتواند ویژگی viewBox مخصوص به خود را داشته باشد که این امر باعث میشود شکل مدنظر ما متناسب با فضاهای مختلف شروع به قرار گیری بکند.

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


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


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

دوستان در این پست قصد داریم به الگوها در svg بپردازیم.

از الگو ها در طراحی بیشتر برای بوجود اوردن زیبایی استفاده میشود.
الگو ها معمولا با استفاده از تصاویر به وجود میان اما ما قصد داریم این الگو هارو با svg نیز به وجود بیاریم

الگو ها دقیقا شبیه background-repeat ( در دوره جامع css برسی خواهد شد) در سی اس اس هستن و قابل تکرار هستن که دقیقا همین امر باعث ایجاد طرح های عالی میشه.

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

<pattern>
دوستان برای ایجاد الگو در اس وی جی از این تگ استفاده میشود.
مهم ترین صفت های این تگ به شرح زیر است 👇

width
height
دوستان این دو صفت اندازه الگو که قرار است تکرار شود را مشخص میکنند ، هرچقدر اندازه ی این الگو بیشتر شود بی شک‌ اندازه و فواصل الگو های تکراری بیشتر خواهد شد.

x
y
این دو صفت مشخص میکنند که شروع رسم الگو در راستای افقی و عمودی چقدر باشد در واقع مانند ویژگی padding ( در دوره جامع css برسی خواهد شد) در سی اس اس عمل میکنند .

patternUnits
از این صفت برای تعیین واحد و سیستم مختصات الگو های <pattern> استفاده میشود.

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

1: userSpaceOnUse
اگر از این مقدار استفاده کنیم واحد های الگو بر اساس سیستم مختصات خود عنصر pattern هستند یعنی الگو ها در هر کجا استفاده بشوند انداز اشکال داخلی انها یکسان خواهد بود.
بیشتر از این مقدار استفاده میشود.

2: objectBoundingBox
این مقدار پیش فرض هست در این مقدار اندازه ی الگو بستگی به شکلی خواهد داشت که از ان استفاده میکند.
از این مورد خیلی کم استفاده میشود.

patternContentUnits
این صفت هم‌ مثل صفت قبلی عمل میکند با این تفاوت که صفت قبلی در مورد خود عنصر pattern میباشد اما این صفت موثر بر روی محتوای و عناصر داخل عنصر pattern است.
مقادیر این صفت هم مثل صفت قبلی هست فقط مقادیر این صفت برعکس مقادیر صفت قبلی هست.

به مثال زیر توجه کنید 👇

<svg width="600" height="600">

<defs>

<pattern id="frozen" x="0" y="0" width="20" height="20">

<circle cx="10" cy="10" r="10" fill="lime" /> </pattern>

</defs>

<rect width="300" height="140" stroke="#333" stroke-width="1" fill="url(#frozen)" />

</svg>

دوستان همانطور که مشاهده میکنید در مثال بالا ما قصد داریم یک الگو دایره ای شکل ایجاد بکنیم بنابراین داخل تگ pattern از تگ circle استفاده میکنیم
همچنین میخواهیم این الگو دایره ای شکل رو داخل یک مربع به نمایش بگذاریم بنابراین یک id به تگ pattern میدیم و همون id رو داخل صفت fill تگ rect به صورتی که در مثال گفته شده قرار میدهیم ، همچنین میتوانیم به صفت stroke هم این ویژگی رو اعمال کنیم.

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

همچنین میتوانید الگو های تو در تو ایجاد کنید ، فرض کنید میخواهید یک الگو مربعی ایجاد کنید همچنین در عین حال میخواهید داخل الگو های مربعی از الگو های دایره ای استفاده کنید ، برای این کار باید مثل مثال زیر عمل کنید👇


<svg>

<defs>

<pattern id="frozen" x="5" y="5"
width="75" height="75" patternUnits="userSpaceOnUse">

<circle cx="22" cy="22" r="14" stroke="lime" stroke-width="2" fill="yellow" />

</pattern>

<pattern id="coding" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">

<rect x="2" y="2" width="30" height="30" stroke="blue" stroke-width="2" fill="url(#frozen)" />

</pattern>

</defs>

<rect width="300" height="150" stroke="red" stroke-width="2" fill="url(#coding)" />

</svg>


پیشنهاد میدم حتما ویدیو مربوط به این پست رو مشاهده کنید تا بهتر بتونید این ویژگی رو درک کنید.


تمرین یادتون نره⁦❤️⁩


——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

دوستان تا اینجا ما یاد گرفتیم که چطور از تگ ها ، عناصر ، کلمات کلیدی و ویژگی های موجود در svg استفاده کنیم.

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

1: Inline svg
این مورد همان تگ svg هست و اولین راه استفاده از کد های svg هست که تا الان به صورت کامل یاد گرفتیم.
تمام مرورگر هایی که از html5 پشتیبانی میکنند از این روش هم پشتیبانی خواهند کرد.

2: img
دومین روش استفاده از تگ img برای فایل های svg هست.
مرورگر های IE8 , Android 2.3 به پایین این روش را پشتیبانی نمیکنند.

3: background-image
روش بعدی استفاده از فایل های svg به عنوان پس زمینه هست ، که این مورد رو در دوره جامع css یاد خواهیم گرفت.
پشتیبانی مرورگر این روش مثل روش img هست.

4 : picture
روش بعدی استفاده از تگ picture هست ، این روش هم کاملا شبیه به روش img است با این تفاوت که می توان جایگزینی برای فایل svg درون تگ picture در نظر گرفت تا اگر به هر دلیلی مرورگر نتوانست فایل svg را نمایش دهد به جای آن تصویر پشتیبان را نمایش دهد.
مرورگر IE8 به پایین این روش رو پشتیبانی نمیکنند.
دوستان این تگ رو در ادامه ی اموزش ها به صورت کامل برسی خواهیم کرد.

5: object
روش بعدی استفاده از تگ object هست که یکی از متداول ترین روش های استفاده از فایل های svg هست.
از لحاظ پشتیبانی مرورگر این روش خوب عمل میکند.
دوستان این تگ رو در ادامه ی اموزش ها به صورت کامل برسی خواهیم کرد.

6: iframe
این روش تقریبا شبیه به روش object عمل می کند و همان خصوصیات را دارد اما در حالت کلی استفاده از تگ iframe برای این کار توصیه نمی شود بهتر است از object کنیم.

7: embed
روش اخر استفاده از تگ embed هست که اصلا توصیه نمیکنم .
این تگ رو هم در ادامه اموزش ها به صورت کامل برسی خواهیم کرد.


به نکات زیر توجه کنید:👇

1: تگ svg و object امکان تعامل با css را دارند و میتوان بر روی این دو انیمیشن اجرا کرد ، دقت داشته باشید زمانی میتوان برای تگ object انیمیشن در نظر داشت که داخل تگ svg قرار داشته باشد و مورد استفاده قرار بگیرد.

2: اگر قرار است فقط از svg به عنوان یک تصویر ساده و بدون تعامل استفاده کنیم بهتر است روش های img و background-image را انتخاب کنیم.

3: از دو روش embed و iframe در حد امکان استفاده نکنید.

4: میتوان برای دو روش svg , object اسکریپت ها مخصوص به خودشون را نوشت.

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


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

دوستان در این پست قصد داریم به معرفی چندین ابزار بپردازیم ، که با استفاده از این ابزارها میتوانیم با سرعت بالا و کیفیت عالی اشکال مختلف svg رو بسازیم و کد های اشکال ساخته شده رو کپی کنیم و در صفحه html خودمان مورد استفاده قرار بدیم.

ابزار های عالی برای ساخت اشکال svg 👇

1: https://www.shapedivider.app/


2: https://getwaves.io/


3: https://codepen.io/anthonydugois/full/mewdyZ/


4: https://www.blobmaker.app/


5: https://jxnblk.github.io/paths/?d=M8%2048%20L56%2048%20V12%20LNaN%2030%20Z


دوستان هر کدوم از این ابزار ها کاربرد خاص خودشونو دارن و من از شما خواهشمندم که به تک تک این سایتها مراجعه بکنید و کاربردشونو ببینید و نحوه کار با این ابزار هارو یاد بگیرید و مطمعن باشید خیلی مفید خواهد بود 🌸

دوستان حتما پیشنهاد میکنم ویدیو مربوط به این پست رو مشاهده بکنید یک مینی پروژه ساده هست اما بسیار بسیار کاربردی 🌷


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

دوستان در این پست قصد داریم به برسی چندین صفت بپردازیم که خیلی کاربردی هستند و در html5 اضافه شده اند .

1: autofocus
دوستان با استفاده از این صفت میتوانیم مشخص کنیم که همزمان با لود صفحه کدوم عنصر focus شود.
یعنی اشاره گر ماوس بروی آن قرار گیرد.
این صفت را میتوان برای عناصر textarea ، select , input , button مورد استفاده قرار داد.

2: autocomplete
با استفاده از این صفت میتوانیم مشخص کنیم که ایا یک فیلد قابلیت تکمیل خودکار را داشته باشد یا خیر.
این صفت دو مقدار on , off رو اختیار میکنه و مقدار on یعنی قابلیت تکمیل خودکار را داشته باشد و مقدار off یعنی قابلیت تکمیل خودکار را نداشته باشد.

این صفت رو میتوان برای عناصر form , input مورد استفاده قرار داد.

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

3: contenteditable
با این صفت میتوانیم مشخص کنیم که آیا محتوای یک عنصر توسط کاربر قابل ویرایش باشد یا خیر.
مثلا اگر یک پاراگراف را قابل ویرایش کنیم کاربر میتواند اون پاراگراف را به سلیقه ی خودش ویرایش کند.
این صفت دو مقدار true , false رو اختیار میکند که مقدار true مشخص میکند که محتوای عنصر توسط کاربر قابل ویرایش باشد و مقدار false مشخص میکند که قابل ویرایش نباشد.

4: draggable
با استفاده از این صفت میتوانیم مشخص کنیم که آیا یک عنصر قابلیت جابجایی یا به اصطلاح قابلیت drag and drop را داشته باشد یا خیر .
این صفت سه پارامتر به عنوان مقدار میگیره اولی هست true که قابلیت جابجایی را فعال میکند ، دومی هست false که قابلیت جابجایی را غیر فعال میکند ، سومی هست auto که در این مقدار مرورگر مشخص میکند که ایا یک عنصر قابلیت جابجایی را داشته باشد یا خیر.

5: hidden
همانطور که از نام این صفت هم مشخص هست ، ما با استفاده از این صفت میتوانیم یک عنصر رو به صورت کامل از دید کاربر مخفی کنیم و مرورگر هم این عنصر را به صورت کامل مخفی خواهد کرد.

6: novalidate
این صفت صفتی است که میتوان از آن در تگ Form استفاده کرد و تعریف کرد که داده های عناصر یا فیلدهای فرم در هنگام ارسال به سرور اعتبارسنجی نشوند.

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

7: reversed
این صفت داخل تگ <ol> مورد استفاده قرار میگیرد و باعث میشود تا ایتم های این تگ به صورت نزولی شماره گذاری شوند.

8: spellchack
این صفت صفتی است که ما با استفاده از آن میتوانیم تعریف یا مشخص نماییم که آیا محتوای یک عنصر از نظر املایی و گرامر چک شود یا خیر .
شاید تا به الان برای یکبار هم که شده در نرم افزارهایی همچون Word براتون پیش اومده که یک کلمه را تایپ میکنید ولی بلافاصله یک خط قرمز زیر اون کلمه ظاهر می شود ، که این یعنی شما از نظر املایی اون کلمه رو اشتباه تایپ کرده اید.
این صفت هم دقیقا همینکارو میکنه، یعنی برای مثال ما میتونیم با قرار دادن این صفت در تگ <textarea> حالت چک نوشتاری املایی را فعال نماییم.


تمرین یادتون نره⁦❤️⁩


——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم به سراغ ادامه ی مباحث

دوستان در این پست قصد داریم به برسی تگ های عبارتی بپردازیم.

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

از تگ های عبارتی که قبلا برسی کردیم میتوان به موارد زیر اشاره کرد:👇

1: strong
2: em
3: mark
4: dfn
5: blockquote
6: address
7: q
8: kbd
9: abbr

و اما برسیم به یاد گیری چندین تگ عبارتی جدید 🌷

<code>
با استفاده از این تگ میتوانیم یک تکه کد (معمولا کدهای کامپیوتری) را درون یک صفحه ی وب تعریف نماییم.
در حالت عادی این تگ شکل شمایل خاصی ندارد ولی ما با استفاده از CSS میتونیم به دلخواه به این تگ استایل بدهیم .
برای مثال :

<p>Salam. Man <code>Amir</code> Hastam.</p>


<samp>
با استفاده از این تگ میتوان خروجی یک برنامه کامپیوتری را در یک صفحه وب قرار داد.
در حالت عادی این تگ شکل شمایل خاصی ندارد ولی ما با استفاده از CSS میتونیم به دلخواه به این تگ استایل بدهیم .
برای مثال :

<p>Salam. Man <samp>Amir</samp> Hastam.</p>


<var>
با استفاده از این تگ میتوان متغیر ها را در یک صفحه وب تعریف و یا ایجاد کرد.
در حالت عادی این تگ شکل شمایل خاصی ندارد ولی ما با استفاده از CSS میتونیم به دلخواه به این تگ استایل بدهیم .
برای مثال:
<var>value</var>


نکته:
دوستان شاید در حالت عادی و در ظاهر تفاوت انچنانی مابین تگ های code , var , samp , kbd مشاهده نکنید ، ببینید دوستان تفاوت اصلی این تگ ها در ماهیت و نحوه ی شناخت موتور جستجو از انها هست.
برای صفحه ی شما این خیلی بهتر خواهد بود که اگر میخواهید متغیر به کاربر نشان بدهید از تگ var و اگر میخواهید یک تکه کد نمایش بدید از تگ code و اگر میخواهید دکمه ای از صفحه کلید نمایش بدید از تگ kbd استفاده کنید.


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

<embed>
ما با استفاده از این تگ میتوانیم محتوای خارجی را در یک صفحه ی وب قرار بدیم.

به عبارتی بهتر ما با استفاده از این تگ میتوانیم فایل های Pdf یا فایل های وب (مثل html و..) یا فایل های فلش (swf.) تصاویر ، ویدئو و... را در یک صفحه وب قرار بدیم.
مهم ترین صفت های این تگ به شرح زیر است 👇

width
این صفت عرض محدوده ی تگ رو مشخص میکند.

height
این صفت ارتفاع محدوده ی تگ رو مشخص میکند.

src
با استفاده از این صفت آدرس محتوایی را که میخواهیم به صفحه وارد کنیم را مشخص میکنیم.

type
این صفت نوع رسانه محتوایی که میخواهیم وارد بکنیم را مشخص میکند.

نکته:برای قرار دادن ویدئو سعی کنید حتما و فقط از تگ video استفاده نمایید ، و همچنین برای قرار دادن آهنگ از تگ audio استفاده نمایید ، استفاده از تگ embed برای گذاشتن ویدئو و اهنگ در صفحه اصلا توصیه نمیشود.

<object>
دوستان با استفاده از این تگ میتوانیم یک شئ را از خارج صفحه با داخل صفحه وارد بکنیم.

فایل صوتی ، ویدئویی ، فایل های PDF ، فایل های فلش و حتی صفحات وب دیگر را میتوان با استفاده از این تگ درون یک صفحه وب دیگر قرار داد.
مهم ترین صفت های این تگ به شرح زیر است 👇

width
height
این دو صفت مثل صفت های تگ قبلی عرض و ارتفاع را مشخص میکنند.

data
با استفاده از این صفت آدرس محتوایی را که میخواهیم به صفحه وارد کنیم را مشخص میکنیم.

name
با این صفت میتوان یک نام برای این تگ مشخص نمود.

usemap
این صفت نام یک نقشه تصویری را مشخص میکند.

form
با استفاده از این صفت میتوانیم مشخص کنیم که این تگ متعلق به یک یا چند فرم باشد.

type
این صفت نوع رسانه محتوایی که میخواهیم وارد بکنیم را مشخص میکند.

نکته : هر متنی که داخل این تگ نوشته شود ، اگر مرورگر کاربر به هر دلیلی از این تگ پشتیبانی نکند اون متن نمایش داده خواهد شد.

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


تمرین یادتون نره⁦❤️⁩
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه یادگیری

<param>
با استفاده از این تگ میتوانیم یک پارامتر برای تگ object مشخص یا تعریف کنیم.
صفت های این تگ به صورت زیر است👇

⁦☘️⁩name
با استفاده از این صفت میتوانیم یک نام برای پارامتر خودمان تعریف کنیم.

☘️value
با استفاده از این صفت میتوانیم یک مقدار برای پارامتر خودمان تعریف کنیم.

مثال برای این تگ :

<object data="halo.mp3">

<param name="autoplay" value="true">

</object>


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

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


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

<output>
با استفاده از این تگ میتوان خروجی یک عمل انجام شده مثل عمل محاسبه را در مرورگر نمایش داد.
صفت های این تگ به شرح زیر است 👇

⁦☘️for
این صفت رابطه بین نتیجه محاسبات و عناصر مورد استفاده در محاسبات را مشخص میکند.

⁩⁦☘️name
با استفاده از این صفت میتوانیم یک نام برای این عنصر تعریف بکنیم.

⁩⁦☘️⁩form
این صفت مشخص میکند که عنصر متعلق به یک یا چند فرم باشد.


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

معمولا بیشترین استفاده از این تگ برای نمایش یک یا چندین تصویر در حالت واکنش گرایی ( ریسپانسیو ) یک صفحه وب می باشد ، به اینصورت که کاربر بتواند با تغییر اندازه دادن صفحه نمایش تصاویر های مختلفی را مشاهده نماید.

به مثال زیر توجه کنید و نحوه تعریف تصاویر مختلف در اندازه های مختلف را مشاهده کنید:

<picture>

<source media="(min-width: 650px)" srcset="img_1.jpg">

<source media="(min-width: 465px)" srcset="img_2.jpg">

<img src="img_3.jpg">

</picture>

در مثال بالا تعریف کردیم که مثلا وقتی اندازه صفحه نمایش کمتر از ۶۵۰ پیکسل شد تصویر (img_1.jpg) را نمایش بده و وقتی اندازه کمتر از ۴۶۵ پیکسل شد تصویر (img_2.jpg) را نمایش بده.


سوالی که پیش میاد اینه که تگ img در اون وسط چیکار میکنه ؟
در جواب باید بگم اولویت نمایش تصاویر اول با تگ picture می باشد ، یعنی از ابتدا به هر اندازه که تگ source درون تگ picture وجود داشته باشد تصاویر هم نمایش داده می شوند و اولویت آخر با تگ img است.
و همچنین اگر مرورگر از تگ picture پشتیبانی نکند ، بجای اون ، تگ img نمایش داده میشود.

دوستان همانطور که در مثال بالا مشاهده میکنید ما برای تعیین تصویر از تگ source و برای تعیین اندازه صفحه از صفت media و برای نمایش تصویر در اون سایز از صفت srcset استفاده میکنیم ، دوستان اصلا نگران نحوه تعیین اندازه صفحه و حالت ریسپانسیو سازی نگران نباشید زیرا تمام این موارد رو در دوره ی جامع css برسی خواهیم کرد.


تمرین یادتون نره⁦❤️⁩
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش

روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

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

نکته: ببینید دوستان این تگ رو با تگ br اشتباه نگیرید ، تگ br متن رو به صورت کامل میشکنه و به سطر بعدی انتقال میده ، اما تگ wbr متن رو نمیشکنه بلکه تعیین میکنه که کجا متن شکسته بشه.


<noscript>
دوستان همانطور که در پست مربوط به تگ script گفتیم ، شما میتوانید از جاوا اسکریپت داخل html استفاده بکنید.

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

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

نکته: در نسخه قبلی html این تگ حتما بایستی داخل تگ body مورد استفاده قرار می گرفت.
اما در html5 این تگ رو میتوان در قسمت head و body مورد استفاده قرار داد.



تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

دوستان در این پست قصد داریم به یادگیری دو عدد صفت کاربردی بپردازیم.


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

همانطور که میدونید ما میتوانیم با فشردن کلید tab در سیستم خودمان بین نرم افزارها و برنامه ها سوییچ کنیم.

⁦☘️⁩این صفت یک عدد را به عنوان مقدار اختیار میکنه.

فرض کنید در صفحه وب خودتان 6 عدد اینپوت دارید ، هنگامی که صفحه شما بارگذاری شد اگر شما کلید tab رو فشار بدید نشانگر ماوس ابتدا روی اینپوت اولی قرار خواهد گرفت ، حال اگر بخواهید اینپوت اخر شما با اولین کلید tab نشانگر ماوس را انتخاب کند ، پس شما tabindex اون اینپوت را عدد 1 خواهید گذاشت.


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

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

این صفت دو مقدار yes , no را اختیار میکند که مقدار yes یعنی قابلیت ترجمه فراهم باشد و مقدار no یعنی عنصر ترجمه نشود.

❌ این صفت در هیچ یک از مرورگر های فعلی پشتبانی نمیشود.

از انجایی که این صفت در هیچ یک از مرورگر ها پشتیبانی نمیشود بنابراین ما باید یک نوع هک انجام دهیم و برای غیر فعال کردن قابلیت ترجمه یک عنصر به شکل زیر عمل کنیم:


<p class="notranslate">سلام</p>



تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش


روزتون خوش 🌹
بریم سراغ ادامه یادگیری


<keygen>
این تگ داخل تگ form مورد استفاده قرار میگیره و باعث میشه تا اطلاعات فرم ما با امنیت بالاتری ارسال بشه ، بطور کلی این تگ وظیفش تولید کلید عمومی و خصوصی هستش که برای رمزگذاری و رمزگشایی داده های ارسال شده به سرور در هنگام ارسال فرم و اطلاعات میباشد.

از این تگ بیشتر برای استفاده در سیستم هایی که مثلا نیاز به تایید امضای دیجیتال دارند استفاده میشود.

نکته: این تگ در برخی از مرورگر ها مثل IE به درستی کار نمیکنه.

نکته: در برخی از شرایط استفاده از این تگ نیاز به سخت افزار ها و نرم افزار های خاصی داره.

این تگ صفت های زیر را اختیار میکند👇

☘️autofocus
این صفت رو در پست های قبلی با تعریف کامل و مثال اموزش دادیم ، ولی باز هم بهتره مختصرا بهش بپردازیم تا درک بهتر و راحت تری از این صفت در ذهن شما ایجاد بشه ، این صفت مشخص میکند که بلافاصله با بارگذاری صفحه اشاره گر ماوس درست روی keygen فوکوس کند.

☘️challenge
این صفت یک رشته را به همراه کلید عمومی انتقال میدهد.

☘️disabled
این صفت رو هم در پست های قبلی و بیشتر در قسمت فرم ها بهش پرداختیم ، اما بد نیست باز هم بگویم که استفاده از این صفت باعث غیر فعال سازی تگ موردنظر میشود.

☘️form
این صفت مشخص میکند که داده های این تگ به یک یا چندین فرم ارسال شود.

☘️keytype
این صفت نوع الگوریتم رمزگذاری رو مشخص میکند و سه مقدار rsa , dsa , ec را اختیار میکند.

☘️name
این صفت رو هم در گذشته یه کرات برسی کردیم و میدانیم که یک نام برای تگ مورنظرمون ایجاد و اعمال میکنه.


یک مثال برای این تگ:
<form action="demo_keygen.php" method="get">

<keygen name="mykey" keytype="RSA">

<input type="text" name="user-name">

<input type="submit" value="send">

</form>


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش



روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

<track>
با استفاده از این تگ میتوان یک محتوای متنی را به یک رسانه مثل ویدیو یا قایل صوتی اضافه کرد.
این محتوای متنی میتوانند یک چیزی شبیه به زیر نویس باشند و یا فایل متنی برای ایجاد عناوین.

صفت هایی که این تگ اختیار میکند به شرح زیر است👇

☘️default
این صفت مشخص میکند که فایل track بصورت پیش فرض با اجرای فایل رسانه نمایش داده شود.

☘️kind
این صفت نوع متن رسانه را مشخص میکند و این مقادیر رو اختیار میکند: caption , chapters , descriptions , metadata , subtitles

برای فایل زیر نویس بایستی مقدار subtitles رو قرار بدید.

☘️label
این صفت یک عنوان برای track مشخص میکند.

src
این صفت مسیر و ادرس فایل track رو مشخص میکند.
این صفت اجباری است.

☘️srclang
کد زبان متنی فایل track را مشخص میکند.
کد زبان فارسی fa میباشد.

نکته: فایل زیر نویس شما حتما باید از فرمت vtt باشد ، نه از فرمت srt .

مثال از این تگ:
<video width="400" height="300" controls>

<source src="video/hi.mp4" type="video/mp4">

<track src="files/subtitle.vtt" kind="subtitles" srclang="fa" label="سلام" default>

</video>

این سایت میتونه زیر نویس از نوع srt را به یک زیر نویس با فرمت vtt تبدیل کنه.


<time>
این تگ همونطور که از اسمش هم مشخصه تگی است که با استفاده از آن میتوان یک تایم (زمان) را در یک صفحه وب ایجاد و یا تعریف کرد.

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

مهم ترین صفت این تگ به شرح زیر است 👇

☘️datetime
با استفاده از این صفت میتوان زمان یا تاریخ دقیق عمل انجام یک کار را مشخص کرد.

مثال از این تگ:
<p>
My BirthDay Is <time datetime="1900-10-22">Here</time>
</p>


مثال دوم:

<p>We open at <time>12:00</time> every morning.</p>

<p>I have a date on <time datetime="2018-02-14 20:00">Valentines day</time>.</p>


<canvas>
تگ canvas تگی است در واقع همانند یک ظرف برای نگهداری اشکال گرافیکی ، که این اشکال گرافیکی معمولا توسط اسکریپت ها (جاوا اسکریپت) ایجاد می شوند.
دوستان از انجایی که این تگ نیاز به بلد بودن جاوا اسکریپت داره ، بنابراین بعد از یادگیری جاوا اسکریپت کاملا یه دوره اموزشی مجزا برای این تگ قرار خواهیم داد.



تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

سگمنت کانالی برای برنامه نویسان عزیز

😍پر از فیلم های آموزشی (رایگان)😍
😍 لایسنس های رایگان nod32😍
😍اموزش تخصصی html 😍
😍 فیلترشکن های قدرتمند 😍
😍 موسیقی های آرام‌بخش برای تمرکز😍
@segmenttt
😍 فیلم های اموزشی java😍
😍 فیلم های اموزشی JavaScript 😍
😍 اخبار تکنولوژی و فناوری های روز😍
😍ترفند های موبایل و کامپیوتر 😍
😍جزوات دانشگاهی رشته نرم افزار😍
😍سورس کد های باز 😍
😍 دوره جامع php 😍
😍 آموزش صفر تا صد c# 😍
😍 آموزش کامل زبان C😍
😍 آموزش بهینه سازی سایت seo 😍
😍 اموزش برنامه نویسی کاتلین 😍
😍انجام پروژه های دانشجویی 😍
😍و هزاران ترفند ها و دانستنی های رشته کامپیوتر و it😍

با سگمنت
متفاوت بیندیش،
بی حد و مرز،
جلوتر از دیگران حرکت کن
(انجام طراحی سایت ، تولید محتوا ،سئو ،طراحی گرافیک ، برنامه نویسی سی شارپ)


——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

برای دریافت اموزش ها لطفا به کانال اصلی ما بپیوندید
@segmenttt
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
@computer4

برای دریافت ادامه اموزش ها لطفا به کانال اصلی ما بپیوندید
https://t.me/segmenttt
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
@computer4

برای دریافت ادامه اموزش ها لطفا به کانال اصلی ما بپیوندید
https://t.me/segmenttt
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
@computer4