ماموریت: رسم اَشکال هندسی با تگ “svg”
بدون هیچ مقدمه‌ای، ما برای زیباتر سازی صفحه خودمون، این موضوع رو میتونیم در نظر بگیریم که با کمک تگ “svg” میتونیم از شکل های هندسی استفاده کنیم. اما شاید زیادی قشنگ نشه پس باید تگ های دیگه‌ای هم، استفاده کنیم. مثلا برای اینکه قاب و گوشه های مستطیلمون رو نرم‌تر و منحنی‌تر کنیم، میتونیم از دستور “border” در تگ “style” استفاده کنیم که خیلی کار رو قشنگ‌تر و تمیز تر در میاره.
یا اینکه به عنوان صاحب (server) یک قاب خاص برای پروفایل تمامی اعضا (client) بزاریم مثلا با شکل دایره که زیبا تر بشه؛ چجوری؟ خودتون ایده بدید. مثلا میتونیم در همین تگ “style”، از دستور “bg_shape” استفاده کنیم!
کد های مربوطه!
دایره! برای نوشتن این کد، بعد از اینکه تگ “body” رو باز کردید، در تگ “svg” قبل از اینکه اون رو ببندید، عرض و طولش رو تنظیم می‌کنیم (منطقیه که اگر یکی از اون ها بیشتر از اون یکی باشه، شکل ما بیضی میشه). و در ادامه (هنوز تگ رو نبستیم) رنگ دور شکل رو تنظیم می‌کنیم و بعدش، ضخامتش (باز هم منطقیه که اگر ضخامتش رو صفر در نظر بگیریم، دور نداره).
بعد از اون، دستور “fill” رو می‌نویسیم که نشون دهنده اینه که رنگ خود دایره، چه هست. من هم در اینجا رنگ داخلش رو “transpicture” یا “non-color” انتخاب کردم که مخصوص پروفایل هست و جای خالیش، میشه بک گراندش؛ یعنی توش انگار یک سوراخ یا حفره‌ای به ابعاد (150-20 در 150-20) دایره شکل داریم : ابعاد کل منهای ابعاد دور.
<!DOCTYPE html>
<html>
<body>
<svg width="150" height="150">
<!--اندازه شکل-->
<circle cx="60" cy="60" r="40"
stroke="red" stroke-width="20" fill="transpicture" />
<!--دایره بودن شکل، بعد از اون فاصله شکل تا گوشه صفحه و در خط پایین، رنگ دور شکل، بعد از اون ضخامت دور و بعد اینکه درون دایره، چه رنگی باشه که من اینجا اون رو تو خالی انتخاب کردم-->
</svg>
</body>
</html>و اگر بعد از باز کردن تگ “svg” یعنی بین “svg” و “svg/”، متنی رو به جز اون المنت “comment” که گذاشتم، بدون هیچ تگی پشتش، میشه متن درون دایره : مثلا اگر کاربر ما پروفایل نداشت، می‌نویسیم این کاربر، هنوز تصویری را انتخاب نکرده است. تگ “br” رو هم یاد گرفتید دیگه، پس هر چند کلمه، یک تگ “br” می‌نویسیم تا متنمون از دایره، بیرون نزنه!
ادامه اشکال با تگ “svg”
مستطیل! توضیحی لازم نداره و همه رو در کد بالا (دایره) یاد گرفتید؛ اما در این کد جای اسم رنگ، از کد رنگی استفاده شده که اگر شما از “VSC” استفاده کنید، حتی نیاز به اسم رنگ هم ندارید و خیلی راحت از طریق زیر می‌تونید اقدام کنید :
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
کلی شکل های هندسی و غیر هندسی دیگه هم داریم که چون تعدادشون نامحدوده، من همین دو تا رو آوردم. اگر بدنبال دیدن همه شکل های دیگه هستید و یا حس میکنید خوب یاد نگرفتید (ولی ساده بود)، بیاین اینجا!
هر چی حرفه ای تر میشی، ولی یاد گرفتن درس جدید بیشتر کِیف داره!
اگر به این مقاله، با دقت توجه کرده باشید! می‌تونید راحت تر، مقاله های دیگه، مخصوصا در رابطه با تگ های دیگه رو دربارۀ آموزش “html”، بخونید. در واقع در این سری، قراره دونه به دونه تگ هارو مانند تگ “svg” بررسی کنیم. تا بتوانید با تک مقاله های کوتاه که قابلیت خوانش سریع را دارند، تگ ها را به سبک سایت “W3School” یاد بگیرید، اون هم به زبان فارسی! پس برای یادگیری تگ های بیشتر، روی اینجا کلیک کنید؛ و اگر حس می کنید نیاز به آموزش تگ بعدی دارید، اینجا را کلیک کنید.
راستی، اگر به دنبال آموزشات بیشتر در این زمینه هستید و می‌خواهید به یکی از افراد دانای این جامعه تبدیل بشید! یا بقیه تگ ها رو مانند تگ “svg” دنبال یا برای ما در نظرات بنویسید تا بخش های دیگر مربوط به “html” را برای شما توضیح بدهم. فرصت های شغلی در این زمینه کم است ولی هر فرد سایت دار، حتی اگر سایتش وردپرسی باشد! باید مقداری با این مورد آشنا باشد تا بتواند توانایی حل مسئله در دنیای خارج وردپرسی را داشته باشد.
