# آشنایی با HTML

# مقدمه

برای انتشار عمومی محتوای وب -مثل مقاله‌ای که شامل چندین عنوان و لینک و متن و عکس و… است- به یک زبان مشترک نیاز است که همه کامپیوترها بتونن اون رو درک کنن. این زبان مشترک که برای ایجاد صفحه‌ها و نشر محتوا روی وب به‌کار می‌ره HTML نام داره.

‫HTML توسط تیم برنرز-لی در سال ۱۹۸۹ در آزمایشگاه CERN ابداع شد و هدف اولیه اون ساده‌تر کردن دسترسی به داکیومنت‌های علمی برای دانشمندان در سراسر دنیا بود تا بتونن ساده‌تر روی مقالات علمی مشارکت داشته باشن.

با این ایده که زمانی که مشغول خوندن یک داکیومنت هستید بتونید با یک لینک به داکیومنت دیگه برید به جای اینکه تک‌تک اون‌ها رو روی کامپیوترتون دانلود کنید.

برای مطالعه بیشتر به این صفحه رجوع کن.

# شروع

برای آشنایی اولیه با HTML این لینک‌ها رو مطالعه کن:

1. Getting started with HTML
2. What’s in the head? Metadata in HTML
3. HTML text fundamentals
4. Creating hyperlinks
5. Advanced text formatting
6. Debugging HTML

# تمرین

1. با چیزهایی که تا اینجا یاد گرفتی این صفحه از ویکی‌پدیا رو دوباره بساز. (فقط قسمت میانی صفحه. از ستون‌های چپ و راست و بالا و پایین صفحه صرف‌نظر کن)
2. قسمت Table of Contents رو طوری بساز که با کلیک روی لینک‌های اون، صفحه به اون قسمت اسکرول بشه. این کار بدون استفاده از JavaScript انجام بشه.

در ادامه‌‌ی آشنایی با HTML این موضوعات رو مطالعه کن:

7. Images in HTML
8. From <object> to <iframe> element (قسمت iframe)
9. HTML table basics
10. HTML table advanced features (<thead>, <tbody>, <tfoot>, <caption>)

# تمرین

1. در صفحه‌ای که پیش‌تر ساختی تصاویر اون صفحه رو هم قرار بده و جدول داخل صفحه رو هم ایجاد کن.
2. یک iframe بساز و بالای اون چند‌تا لینک قرار بده که با کلیک روی هرکدوم، اون عبارت رو داخل iframe با موتور جستجوی bing سرچ کنه. (نتیجه جستجو رو داخل iframe نمایش بده)

# فرم‌ها در HTML

برای دریافت از سمت کاربر و ارسال اونها به سرور از المنت‌های form, input, button و… استفاده میشه. همینطور برای راستی‌آزمایی مقدار وارد شده توسط کاربر امکان validation در html5 به فرم‌ها اضافه شده.

در لینک‌های زیر مطالب ذکر شده رو مطالعه کن:

11. Your first HTML form
12. How to structure an HTML form
13. The native form widgets
14. Sending form data
15. Form data validation (built-in form validation
    • Validation-related attributes

# تمرین

1. تمرین iframe بالا رو با فرم انجام بده بطوری که مقدار سرچ رو از کاربر دریافت کنه و با ارسال فرم، نتیجه جستجو رو در iframe نمایش بده. این کار بدون استفاده از JavaScript انجام بشه.
2. یه فرم بساز که نام و ایمیل و آدرس وبسایت کاربر رو به همراه تصویر پروفایلش دریافت کنه و به آدرس /submit/ ارسال کنه.
   تمامی فیلد‌ها ضروری هستن و باید مقدار ایمیل و آدرس اینترنتی راستی‌آزمایی بشه. برای انتخاب تصویر، تنها پسوند jpg و png قابل قبول هست و بطور پیش‌فرض این پسوند‌ها قابل انتخاب باشند. (بدون استفاده از JavaScript)

در ادامه دو مبحث global attributes و block-level/inline elements رو مطالعه کن.

# یک قدم فراتر

با مراجعه به این اسلاید و لینک‌های داخل اون، موضوعات زیر رو مطالعه کن:

• HTML5 (What's New)
• Semantic Elements (تفاوت‌های معنایی و نحوه کاربرد صحیح)
• Document Outline
• Accessibility (a11y)