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

<polyline>
با استفاده از این تگ میتوانیم یک چندخطی به روش svg ایجاد کنیم ، برای مثال میتوانیم با چندخطی یک پله بسازیم ، این تگ حتما باید داخل تگ svg قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است:👇

points
دوستان در پست قبلی و در تگ line مشاهده کردید که ما برای ایجاد یک خط به دو عدد مختصات نیاز داشتیم که با x1,y1 و x2,y2 ابتدا و انتهای خط خودمون رو مشخص میکردیم.
این صفت کاری که انجام میده این است که مختصات های مارو خلاصه نویسی میکنه یعنی ما دیگه از x1,y1 و x2,y2 استفاده نمیکنیم و هر چندتا که مختصات داشتیم مستقیم داخل همین صفت مینویسیم.
برای مثال:

<polyline points="50,100 120,120">

خب دوستان همانطور که در مثال بالا مشاهده میکنید برای ایجاد هر یک از مختصات ها ما به دو عدد نیاز داریم که با یک علامت ( , ) از هم جدا میشوند و مختصات بعدی با یک علامت فاصله از مختصات قبلی جدا میشود.
در یک مختصات اولین عدد مشخص کننده ی x هست و دومین عدد مشخص کننده ی y هست که با علامت ( ، )از هم جدا میشن.
دوستان ما میتوانیم به تعداد دلخواه مختصات های مختلف رو داخل این تگ مورد استفاده قرار بدیم.
مختصات اولی شروع خط و مختصات دومی پایان خط رو مشخص میکند ، و همینطور اگه از چند مختصات بخوایم استفاده کنیم باید برای هر کدوم از مختصات های شروع و پایان تعیین کنیم.

stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.
این صفت برای نمایش دادن خط های موجود الزامیه.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

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



تمرین یادتون نره⁦❤️⁩
@segmenttt
🌐 www.segmentt.ir

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

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

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

stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

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



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


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

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

<path>
دوستان با این تگ ما میتوانیم انواع مختلف از اشکال هندسی مثل مربع ، مثلث ، مستطیل ، خط ، خط منحنی و... رو به روش svg ایجاد نماییم.
این تگ حتما باید داخل تگ svg قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است: 👇

نکته: دوستان برای ایجاد اشکال مختلف داخل این تگ ما به کلمه های کلیدی احتیاج داریم.
که ما در این پست سه کلمه ی کلیدی M , L , Z رو برسی خواهیم کرد.

d
با استفاده از این صفت ما میتوانیم از کاربرد کلمه های کلیدی استفاده کنیم و مختصات مدنظر خودمون رو اعمال کنیم.
به مثال زیر توجه کنید:👇

<path d="M50 50 L100 120 L140 120 L190 50 Z">
</path>

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

کاربرد کلمه ی کلیدی M در مثال بالا:

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

کاربرد کلمه ی کلیدی L در مثال بالا:

با استفاده از این کلمه ی کلیدی میتوانیم یک خط ایجاد بکنیم ، در مثال بالا درست از اون مختصاتی که در کلمه ی کلیدی M مشخص کردیم شروع به ترسیم میکنه تا به اون مختصاتی که در کلمه ی کلیدی L مشخص کردیم.
همانطور که در مثال بالا مشاهده میکنید ما از چندین کلمه ی کلیدی L استفاده کردیم ، علتش این بوده که بتونیم چندین خط رو رسم کنیم و در نهایت یک شکل هندسی بسازیم.

کاربرد کلمه ی کلیدی Z در مثال بالا:

دوستان فرض کنید ما یک مربع میخواهیم بسازیم و خطوط پایین و کناری رو ساخته ایم و تنها خط بالا مونده ، ما بجای اینکه برای اون خط مختصات بدیم , بجاش از کلمه ی کلیدی Z استفاده میکنیم ، این کلمه میاد و خودش اون نقاط رو تشخیص میده و اون نقاط رو به هم وصل میکنه ، به نوعی شکل مارو میبنده close میکنه.

نکته: دوستان وقتی از کلمات کلیدی استفاده میکنیم برای جدا سازی مختصات ها از کاراکتر ( , ) استفاده نمیکنیم.


stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

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

ادامه ی این مبحث در پست بعدی ...


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


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

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

در این پست قصد داریم به اموزش دو کلمه ی کلیدی H , V بپردازیم.

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

<path d="M50 50 H100 V100 H50 Z">
</path>

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

کاربرد کلمه ی کلیدی M در مثال بالا:

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

کاربرد کلمه ی کلیدی H در مثال بالا:

با استفاده از این کلمه ی کلیدی میتوانیم یک خط در محور x (افقی)ایجاد بکنیم و این خط دقیقا از اون مختصاتی که در کلمه ی کلیدی M مشخص کردیم شروع به ترسیم میکنه و یک پارامتر میگیره که مشخص کننده ی مختصاتی هست که خط از کلمه کلیدی M تا اون مختصات رسم خواهد شد.
همانطور که در مثال بالا مشاهده میکنید ما از چندین کلمه ی کلیدی H استفاده کردیم ، علتش این بوده که بتونیم چندین خط رو رسم کنیم و در نهایت یک شکل هندسی بسازیم.

کاربرد کلمه ی کلیدی V در مثال بالا:

با استفاده از این کلمه ی کلیدی میتوانیم یک خط در محور y (عمودی)ایجاد بکنیم و این کلمه ی کلیدی مثل کلمه ی کلیدی قبلی عمل میکنه و از انتهای مختصات کلمه ی کلیدی H شروع به ترسیم میکنه.


کاربرد کلمه ی کلیدی Z در مثال بالا:

دوستان فرض کنید ما یک مربع میخواهیم بسازیم و خطوط پایین و کناری رو ساخته ایم و تنها خط بالا مونده ، ما بجای اینکه برای اون خط مختصات بدیم , بجاش از کلمه ی کلیدی Z استفاده میکنیم ، این کلمه میاد و خودش اون نقاط رو تشخیص میده و اون نقاط رو به هم وصل میکنه ، به نوعی شکل مارو میبنده close میکنه.

نکته: دوستان وقتی از کلمات کلیدی استفاده میکنیم برای جدا سازی مختصات ها از کاراکتر ( , ) استفاده نمیکنیم.


stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

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

ادامه ی کلمات کلیدی در پست بعدی ...

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

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

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

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

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

<path d="M50 30 C80 90 10 220 220 100"></path>

در جلسات گذشته کاملا با کاربرد کلمه ی کلیدی M پرداختیم و بدون شک دقیقا شما کارایی این کلمه کلیدی رو درک کردید و میدونید.
پس فقط به توضیحات کلمه کلیدی C میپردازیم:👇

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

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

و برای نمایش دادن خط طبق روال همیشگی از صفت های

1: stroke
2: stroke-width
3: fill

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

کارایی این کلمه ی کلیدی دقیقا مثل ابزار pen در نرم افزار Adobe illustrator هستش که اون دسته از افرادی که با این ابزار اشنا باشن درک راحت تری از این کلمه کلیدی خواهند داشت.


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


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

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

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

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

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

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

به عنوان مثال:👇

M100 100
در این مثال مرورگر قلم خود را در مختصات 100 از محور افقی و 100 از محور عمودی قرار میدهد به نوعی ادرس دهی مطلق انجام میدهد.

حالا اگر به شکل زیر باشد:👇

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

همانطور که میبینید مبحث خیلی ساده ای هست .

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

نکته: در کلمه کلیدی Z حروف کوچک و بزرگ تفاوتی ندارند.


نکاتی خارج از این پست:👇

نکته: اگر برای دستور M بیشتر از یک نقطه (یک جفت پارامتر) تعیین شود جفت های دیگر به عنوان پارامتر دستور L در نظر گرفته می شوند.

نکته: همانطور که میدانید کلمه کلیدی S دستور مکمل یا میانبر کلمه کلیدی C هست ، همچنین دستور T مکمل یا میانبر کلمه کلیدی Q هست ، با توجه به این نکته بریم سراغ نکته بعدی.

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

نکته: رسم منحنی توسط Q آسان تر است چرا که فقط یک کنترل کننده داریم اما با دستور C می توانیم منحنی های دقیق تر و پیچیده تری رسم کنیم.


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

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

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

<text>
با این تگ میتوانیم یک متن را به شکل svg ایجاد کنیم.
این تگ حتما باید داخل تگ svg مورد استفاده قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است:👇

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

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

font-size
این صفت اندازه ی متن موردنظر رو مشخص میکنه و یک عدد به عنوان مقدار میگیره.

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

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

stroke-width
این صفت میزان ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.


به عنوان مثال:

<text x="50" y="100" stroke="blue" fill="none" stroke-width="1">frozencoding</text>



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

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

#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