دوره آموزشی HTML و CSS

از آنجا که اسناد اچ‌تی‌ام‌ال به صورت فایل‌های متنی ذخیره می‌شوند، می‌توان از هر نرم‌افزار ساده متنی نظیر Notepad استفاده نمود. نرم‌افزارهای نه چندان حرفه‌ایی نظیر Expression Web و Dreamweaver، اگر چه امکان ساخت سایت‌های بعضا جذاب را تنها با چند کلیک، در اختیار کاربران قرار می‌دهند، اما به علت پایه‌ریزی زیرساختی بسیار بد، سبب عدم نمایش یکسان در مرورگرهای مختلف نظیر اینترنت اکسپلورر و فایرفاکس میشوند. اما، راه حل بسیار ساده است: کدهای اچ‌تی‌ام‌ال را اصولی و بر اساس استانداردهای وب بنویسیم. یکی از اصلی‌ترین ارمغان این‌دوره، تفهیم بنیادی این موضوع است.

آشنایی کامل و بنیادی با HTML، CSS و ضرورت استفاده از آن. آشنایی با استانداردهای وب و اهمیت آن. المان‌های استاندارد اچ‌تی‌ام‌ال برای کار با متن‌ها، تصاویر، لینک‌ها، لیست‌ها، فرم‌ها و جداول. آشنایی با المان‌های طلائی div و span. چگونگی به‌کار گیری CSS، درک مفهوم وراثت (Inheritance) و Cascading و آشنایی با تمامی ویژگی‌های آن. آشنایی با مباحث پیشرفته در زمینه CSS نظیر CSS Box Model و CSS Hacks و یادگیری درست کردن صفحات وب بدون استفاده از جداول (Table Less Design). آشنایی مختصر با جاوااسکریپت و کاربردهای آن در وب.


  • مقدمه‌ای بر اینترنت، وب و HTML
    • درک مفهوم HTML
    • آشنایی با مرورگر وب و انواع آن
    • نقش CSS در ساخت صفحات وب
    • آشنایی با XHTML
    • جنگ مرورگرهای وب
    • استانداردهای موجود
  • عناصر سازنده صفحات وب
    • آشنایی با مارک‌آپ (Markup)
    • آشنایی با المان، تگ، خاصیت و مقدار
    • محتوای متنی یک صفحه وب
    • لینک‌ها، تصاویر و محتوای غیرمتنی
    • اسم فایل‌های صفحات وب
    • HTML در مقابل XHTML
    • انواع نسخه‌های HTML
    • آشنایی با DOCTYPE و ضرورت استفاده از آن
  • ساخت اولین صفحه وب
    • آشنایی با نرم‌افزارهای ساخت صفحات وب نظیر Dreamweaver و Expression Web
    • ضرورت کدنویسی دستی و ساخت صفحه وب با Notepad
    • استفاده درست و به‌جا از نرم‌افزارهای WYSIWYG
    • ساخت اولین صفحه وب توسط Notepad
    • مشاهده صفحه وب ساخته شده در مرورگرهای مختلف
    • آشنایی با ناسازگاری‌های مرورگرهای مختلف
  • ساختار اساسی HTML
    • فنداسیون یک صفحه وب
    • عنوان یک صفحه وب
    • ساخت پاراگراف‌ها
    • آشنایی با Headerها
    • نامگذاری المان‌ها
    • تقسیم کردن یک صفحه وب به قسمت‌های مختلف
    • Encoding برای نمایش درست متن‌ها
    • کاراکترهای خاص در HTML
    • المان‌های طلایی وب: div و span
  • فرمت کردن متن در HTML
    • نوشتن متن به صورت bold و italic
    • تغییر سایز نوشته یک متن
    • استفاده از فونت‌های Monospaced
    • استفاده از متن‌های Preformatted
    • متن‌های نقل قول
    • متن‌های Superscript و Subscript
    • تراز متن در صفحه وب
  • تصاویر در وب
    • پسوندهای رایج تصاویر در وب
    • آشنایی با نرم‌افزارهای کار با تصاویر
    • ضرورت استفاده از فوتوشاپ (یا نرم‌افزارهای مشابه)
    • آشنایی با دستور Save for Web
    • آشنایی با نحوه لود شدن تصاویر در وب
    • شفافیت (Transparency) در تصاویر
    • شفافیت، تصاویر PNG و ناسازگاری‌های مرورگرها
    • وارد کردن تصاویر درون یک صفحه وب
    • تغییر سایز تصاویر توسط HTML
    • آشنایی با متن جایگزین عکس
    • شناورکردن تصاویر در صفحه وب
  • لینک‌ها
    • لینک‌ها: فرامتن بودن HTML
    • ساخت لینک‌ها در صفحه وب
    • آشنایی با انواع لینک‌ها
    • نحوه آدرس‌دهی به لینک‌ها
    • درست کردن میانبرهای کیبوردی برای کار با لینک‌ها
    • آشنایی با دکمه Tab در کیبورد و نقش آن در لینک‌ها
    • آشنایی با لینک‌های Anchor و HASHها
  • لیست‌ها
    • آشنایی با انواع لیست‌ها
    • ساخت لیست‌های ترتیبی و غیرترتیبی
    • انتخاب نوع بولت برای لیست‌ها
    • تعیین شماره شروع برای لیست‌ها
    • ساخت لیست‌های توضیحی
    • لیست‌های تودرتو و مدیریت آن‌ها
  • جداول
    • آشنایی با جداول و کاربردهای آن در صفحات وب
    • ساخت اولین جدول
    • تعیین حاشیه کنار جدول
    • تعیین فاصله درونی و بیرونی سلول جدول
    • ساخت جدول‌های حرفه‌ای‌تر
    • تقسیم کردن جدول به گروه‌های افقی
    • تقسیم کردن جدول به قسمت‌های عمودی
    • کنترل حرفه‌ای حاشیه‌های کناری و داخلی یک جدول
    • افزایش سرعت لود شدن جداول
  • فرم‌ها
    • نقش فرم‌ها در صفحات وب
    • ساخت اولین فرم
    • پردازش اطلاعات وارد شده توسط کاربر
    • آشنایی با Server-Side Programming
    • ساخت اولین برنامه دینامیک فوق ساده
    • دسته‌بندی المان‌های موجود در فرم
    • ساخت منوهای Drop Down
    • ساخت دکمه‌های رادیویی و چک‌باکس‌ها (Checkbox)
    • فیلدهای آپلود فایل
    • فیلدهای مخفی و کاربردهای آن
    • آشنایی با دکمه‌های Submit و Reset
    • قراردادن عکس به جای دکمه تایید فرم
    • نقش دکمه Tab در فیلدهای یک فرم
    • غیرفعال کردن المان‌های موجود در فرم
    • فیلدهای فقط خواندنی
  • مقدمات کار با CSS
    • درک مفهوم CSS و جایگاه آن در کنار HTML
    • آشنایی با استایل‌ها و روش‌های مختلف نوشتن آن
    • درک ساختار یک دستور CSS
    • نوشتن دستورات CSS در کنار یکدیگر
    • انتخاب المان مورد نظر در HTML
    • آشنایی کامل با انتخاب‌کننده‌ها در CSS
    • آشنایی با کلاس‌های دروغین (Pseudo-Class)
    • آشنایی با المان‌های دروغین (Pseudo-Element)
    • وراثت در CSS
    • آشنایی با واژه Cascade و نحوه عملکرد آن
  • فرمت‌دهی متن و فونت توسط CSS
    • تعیین نوع فونت مورد نظر
    • آشنایی با گروه‌های کلی فونت (Font Families)
    • تعیین سایز فونت
    • آشنایی با ویژگی‌های یک فونت: style, weight, variant
    • تعیین تورفتگی یک متن از کناره‌ها
    • تعیین فاصله بین حروف و فاصله بین خطوط یک متن
    • تراز یک متن در صفحه وب
  • تعیین موقعیت المان‌ها (Position)
    • درک کامل CSS Box Model و ناسازگاری‌های موجود
    • نقش استانداردها در CSS Box Model
    • شناور کردن المان‌ها در صفحه وب
    • کنترل المان‌های موجود در مجاورت المان‌های شناور
    • آشنایی با انواع مختلف تعیین موقعیت یک المان و کاربردهای آن
    • مخفی کردن المان‌ها در یک صفحه وب
  • درست کردن ساختار (Layout) توسط CSS
    • چرا برای ساخت یک صفحه وب، از جداول استفاده نکنیم
    • آشنایی با انواع صفحات وب مختلف
    • آشنایی با صفحات تک‌ستونی
    • آشنایی با صفحات چندستونی
    • ساخت صفحات دوستونی
    • ساخت صفحات سه‌ستونی ساده و پیچیده
    • تنظیم ارتفاع تمامی ستون‌های صفحه وب به یک اندازه
    • آشنایی با صفحات Absolutely-Positioned
    • آشنایی با باگ‌های مختلف مرورگرهای مختلف
  • آشنایی مقدماتی با جاوااسکریپت
    • نقش جاوااسکریپت به عنوان لایه سوم وب
    • آشنایی با کاربردهای جاوااسکریپت در برنامه‌های مدرن
    • طریقه استفاده از کدهای آماده جاوااسکریپت
    • بایدها و نبایدهای استفاده از اسکریپتهای آماده