کد HTML و CSS بنویسید و نتیجه را همان لحظه کنارش ببینید؛ با نمونههای آماده، بررسی تگها، نمای موبایل و لینک اشتراک برای استاد و همکلاسیها.
کد را در ویرایشگر ببینید؛ برای دیدن نتیجه، دکمه زیر را بزنید. کد در محیطی امن و بدون اجرای جاوااسکریپت نمایش داده میشود.
کد شما خودکار در همین مرورگر ذخیره میشود. در ویرایشگر، Tab دو فاصله میگذارد؛ برای رفتن به بخش بعدی صفحه، اول Esc و بعد Tab را بزنید. جاوااسکریپت در پیشنمایش اجرا نمیشود.
برای کار با ابزار، جاوااسکریپت مرورگر را فعال کنید.
هر صفحه وب از دو لایه اصلی ساخته میشود: HTML محتوا و ساختار را میسازد (عنوان، متن، تصویر، دکمه) و CSS ظاهر آن را تعیین میکند (رنگ، فاصله، فونت و چیدمان). در این ویرایشگر هر تغییری بدهید، همان لحظه نتیجه را میبینید.
هر تگ یک نوع محتوا را مشخص میکند و بیشترشان یک تگ باز و یک تگ بسته دارند: <p>…</p>. بررسیکننده زیر ویرایشگر، تگهای بستهنشده را نشان میدهد.
در CSS اول انتخاب میکنید کدام عنصر (مثلاً .card)، بعد داخل آکولاد ویژگیها را مینویسید: color: #F97207;
Flexbox برای چیدن عناصر در یک ردیف یا ستون و Grid برای جدولبندی دوبعدی صفحه است. نمونههای آماده هر دو را در نوار بالای ویرایشگر امتحان کنید.
پیشنمایش در یک قاب جدا و ایزوله ساخته میشود: جاوااسکریپت اجرا نمیشود، فرمها ارسال نمیشوند و کد به اطلاعات سایت یا حساب کاربری شما دسترسی ندارد. کد فقط در مرورگر خودتان ذخیره میشود و لینک اشتراک هم کد را در خود لینک نگه میدارد، نه روی سرور.
برای یادگیری قدمبهقدم، کتاب رایگان HTML و CSS کادوس را کنار همین ویرایشگر باز کنید و مثالهایش را اینجا امتحان کنید.
۱۵ جلسه از صفر تا یک سایت کامل و ریسپانسیو، در هر دو شعبه کادوس.
صفحه دوره HTML و CSSراهنمامسیر کامل طراحی سایت: HTML و CSS، جاوااسکریپت، PHP یا وردپرس.
صفحه طراحی سایتکتاب رایگان۱۶ فصل آموزش قدمبهقدم؛ مثالهایش را در همین ویرایشگر امتحان کنید.
خواندن کتابابزاری است که در آن کد HTML و CSS مینویسید و نتیجه را همان لحظه در پیشنمایش کنارش میبینید؛ بدون نصب برنامه و بدون ساخت فایل. برای تمرین کلاس، امتحان کردن یک ایده و یادگیری طراحی سایت مناسب است.
فقط در حافظه همین مرورگر. هر تغییر خودکار ذخیره میشود و دفعه بعد که صفحه را باز کنید ادامه کار را میبینید. کد به سرور کادوس فرستاده نمیشود. برای نگه داشتن دائمی، «دانلود index.html» را بزنید.
«کپی لینک کد» را بزنید. کد به شکل فشرده داخل خود لینک قرار میگیرد؛ گیرنده با باز کردن لینک کد را در ویرایشگر میبیند و با یک کلیک نتیجه را هم میبیند. برای کدهای خیلی طولانی، فایل دانلودشده را بفرستید.
برای امنیت. پیشنمایش در قابی ایزوله و بدون اجازه اجرای اسکریپت ساخته میشود تا هیچ کدی، حتی کدی که از یک لینک باز شده، نتواند به اطلاعات شما یا سایت دسترسی پیدا کند. این ویرایشگر مخصوص تمرین HTML و CSS است.
بله. تصویرها، فونتها و فایلهای CSS که با آدرس https بارگذاری میشوند در پیشنمایش نمایش داده میشوند. فایلهای روی کامپیوتر خودتان را نمیشود مستقیم آدرس داد؛ برای آنها فایل index.html را دانلود کنید و کنار تصویرها بگذارید.
تگهایی که باز شدهاند اما بسته نشدهاند و تگهای بستهای که با تگ باز مطابقت ندارند، با شماره خط. این بررسی ساده است و جای اعتبارسنج کامل W3C را نمیگیرد، اما رایجترین اشتباههای شروع کار را پیدا میکند.
درباره دوره طراحی سایت، HTML و CSS یا وردپرس سؤال دارید؟ با دپارتمان کامپیوتر کادوس تماس بگیرید.
رشت، خیابان لاکانی، ابتدای خیابان صندوق عدالت · ساعت کاری ۸ تا ۲۱
۰۱۳۹۱۰۰۲۳۴۳صفحه شعبه