ویرایشگر آنلاین HTML و CSS

ابزار رایگان دانش‌پذیران کادوس

کد HTML و CSS بنویسید و نتیجه را همان لحظه کنارش ببینید؛ با نمونه‌های آماده، بررسی تگ‌ها، نمای موبایل و لینک اشتراک برای استاد و هم‌کلاسی‌ها.

پیش‌نمایش زندهذخیره خودکارامن و بدون اسکریپت
نمونه
HTMLindex.html
CSSstyle.css
    preview · index.html

    کد شما خودکار در همین مرورگر ذخیره می‌شود. در ویرایشگر، Tab دو فاصله می‌گذارد؛ برای رفتن به بخش بعدی صفحه، اول Esc و بعد Tab را بزنید. جاوااسکریپت در پیش‌نمایش اجرا نمی‌شود.

    برای کار با ابزار، جاوااسکریپت مرورگر را فعال کنید.

    آموزش

    HTML و CSS چه می‌کنند؟

    هر صفحه وب از دو لایه اصلی ساخته می‌شود: HTML محتوا و ساختار را می‌سازد (عنوان، متن، تصویر، دکمه) و CSS ظاهر آن را تعیین می‌کند (رنگ، فاصله، فونت و چیدمان). در این ویرایشگر هر تغییری بدهید، همان لحظه نتیجه را می‌بینید.

    <h1>

    تگ‌ها

    هر تگ یک نوع محتوا را مشخص می‌کند و بیشترشان یک تگ باز و یک تگ بسته دارند: <p>…</p>. بررسی‌کننده زیر ویرایشگر، تگ‌های بسته‌نشده را نشان می‌دهد.

    .card { }

    انتخابگر و ویژگی

    در CSS اول انتخاب می‌کنید کدام عنصر (مثلاً .card)، بعد داخل آکولاد ویژگی‌ها را می‌نویسید: color: #F97207;

    flex · grid

    چیدمان

    Flexbox برای چیدن عناصر در یک ردیف یا ستون و Grid برای جدول‌بندی دوبعدی صفحه است. نمونه‌های آماده هر دو را در نوار بالای ویرایشگر امتحان کنید.

    چند تمرین کوتاه

    • رنگ دکمه نمونه کارت را عوض کنید و با :hover برایش رنگ دوم بگذارید.
    • در نمونه Flexbox، مقدار justify-content را به space-between تغییر دهید و نتیجه را در عرض موبایل ببینید.
    • یک تگ را عمداً نبندید و پیام بررسی‌کننده را بخوانید؛ بعد اصلاحش کنید.
    • با @media (max-width: 600px) کاری کنید که در موبایل کارت‌ها زیر هم بیایند.

    این ویرایشگر امن است

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

    برای یادگیری قدم‌به‌قدم، کتاب رایگان HTML و CSS کادوس را کنار همین ویرایشگر باز کنید و مثال‌هایش را این‌جا امتحان کنید.

    پرسش‌های پرتکرار

    سؤال‌های رایج درباره ویرایشگر

    ویرایشگر آنلاین HTML و CSS چیست؟

    ابزاری است که در آن کد HTML و CSS می‌نویسید و نتیجه را همان لحظه در پیش‌نمایش کنارش می‌بینید؛ بدون نصب برنامه و بدون ساخت فایل. برای تمرین کلاس، امتحان کردن یک ایده و یادگیری طراحی سایت مناسب است.

    کدهای من کجا ذخیره می‌شود؟

    فقط در حافظه همین مرورگر. هر تغییر خودکار ذخیره می‌شود و دفعه بعد که صفحه را باز کنید ادامه کار را می‌بینید. کد به سرور کادوس فرستاده نمی‌شود. برای نگه داشتن دائمی، «دانلود index.html» را بزنید.

    چطور کدم را برای استاد یا دوستم بفرستم؟

    «کپی لینک کد» را بزنید. کد به شکل فشرده داخل خود لینک قرار می‌گیرد؛ گیرنده با باز کردن لینک کد را در ویرایشگر می‌بیند و با یک کلیک نتیجه را هم می‌بیند. برای کدهای خیلی طولانی، فایل دانلودشده را بفرستید.

    چرا جاوااسکریپت در پیش‌نمایش اجرا نمی‌شود؟

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

    می‌توانم از عکس و فونت اینترنتی استفاده کنم؟

    بله. تصویرها، فونت‌ها و فایل‌های CSS که با آدرس https بارگذاری می‌شوند در پیش‌نمایش نمایش داده می‌شوند. فایل‌های روی کامپیوتر خودتان را نمی‌شود مستقیم آدرس داد؛ برای آن‌ها فایل index.html را دانلود کنید و کنار تصویرها بگذارید.

    بررسی‌کننده تگ‌ها چه خطاهایی را نشان می‌دهد؟

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

    دپارتمان کامپیوتر و برنامه‌نویسی کادوس

    این ابزار را برای دانش‌پذیران خودمان ساختیم

    درباره دوره طراحی سایت، HTML و CSS یا وردپرس سؤال دارید؟ با دپارتمان کامپیوتر کادوس تماس بگیرید.

    شعبه مرکزی (خیابان لاکانی)

    رشت، خیابان لاکانی، ابتدای خیابان صندوق عدالت · ساعت کاری ۸ تا ۲۱

    ۰۱۳۹۱۰۰۲۳۴۳صفحه شعبه

    شعبه مسکن مهر

    رشت، مسکن مهر، میدان دوم، مهر ۶۶

    ۰۱۳۹۱۰۰۲۳۲۳صفحه شعبه