آموزش Html - قسمت 1

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

در قسمت اول این دوره، شما یاد می‌گیرید که HTML چی هست، چطور کار می‌کنه، و چه مزایا و معایبی داره. همچنین، با مفاهیم مهمی مثل فرانت‌اند و تگ‌ها آشنا می‌شیم و ساختار اصلی یک سند HTML رو بررسی می‌کنیم. آماده‌اید؟ بریم که با هم این دنیای هیجان‌انگیز رو کشف کنیم!

html چیست؟

HTML یا HyperText Markup Language زبان نشانه‌گذاری استانداردی است که برای ایجاد و ساختاردهی صفحات وب استفاده می‌شود. این زبان به مرورگرها دستور می‌دهد که چگونه عناصر مختلف یک صفحه وب را نمایش دهند. HTML شامل مجموعه‌ای از تگ‌ها و عناصر است که هر کدام وظیفه خاصی در ساختاردهی و نمایش محتوا دارند. به عنوان مثال، تگ‌های <h1> تا <h6> برای عنوان‌ها، تگ <p> برای پاراگراف‌ها، و تگ <a> برای لینک‌ها به کار می‌روند. با استفاده از این تگ‌ها، طراحان وب می‌توانند محتوای متنی، تصاویر، ویدئوها و دیگر عناصر چندرسانه‌ای را به صورت منظم و قابل فهم برای مرورگرها و کاربران نمایش دهند.

HTML به عنوان پایه‌ای‌ترین زبان در توسعه وب شناخته می‌شود و تمامی صفحات وب بر اساس آن ساخته می‌شوند. این زبان از طریق نسخه‌های مختلفی توسعه یافته است، که آخرین نسخه آن HTML5 است. HTML5 علاوه بر بهبودهای قابل توجه در ساختاردهی و نمایش محتوا، امکانات جدیدی مانند تگ‌های <video> و <audio> برای پخش فایل‌های چندرسانه‌ای، و تگ <canvas> برای رسم گرافیک‌های دوبعدی را معرفی کرده است. HTML به تنهایی نمی‌تواند تعاملات پیچیده و استایل‌های زیبایی را فراهم کند، بنابراین معمولاً با CSS برای طراحی و JavaScript برای افزودن منطق و تعاملات بیشتر ترکیب می‌شود.

تاریخچه HTML

تاریخچه HTML به اوایل دهه 1990 برمی‌گردد، زمانی که تیم برنرز-لی، دانشمند بریتانیایی، HTML را به عنوان زبانی برای ساخت و به اشتراک‌گذاری اسناد در وب جهانی (World Wide Web) اختراع کرد. اولین نسخه HTML در سال 1991 منتشر شد و شامل تگ‌های ساده‌ای برای ساختاردهی صفحات وب بود. این نسخه ابتدایی، شامل تگ‌هایی برای عناوین، پاراگراف‌ها، لیست‌ها و لینک‌ها بود و به محققان اجازه می‌داد تا اسناد خود را به صورت متنی و لینک‌دار به اشتراک بگذارند. این اقدام نوآورانه، پایه‌گذار تحول بزرگ در نحوه دسترسی و اشتراک‌گذاری اطلاعات شد و اینترنت را به یک منبع عظیم و دسترس‌پذیر اطلاعات تبدیل کرد.

در سال‌های بعد، HTML به سرعت تکامل یافت و نسخه‌های جدیدتری از آن منتشر شد. HTML 2.0 در سال 1995 منتشر شد و استانداردهای اولیه را تقویت و گسترش داد. HTML 3.2 در سال 1997 معرفی شد و شامل بهبودهایی در قالب‌بندی متن و افزودن تگ‌های جدید بود. HTML 4.01 در سال 1999 معرفی شد و پشتیبانی بیشتری از زبان‌های مختلف و قابلیت‌های تعاملی به همراه داشت. در نهایت، HTML5 در سال 2014 منتشر شد که یک جهش بزرگ در قابلیت‌ها و امکانات این زبان بود. HTML5 با معرفی تگ‌های جدید برای محتوای چندرسانه‌ای، قابلیت‌های گرافیکی پیشرفته و APIهای جدید برای بهبود تعاملات کاربری، به یک استاندارد جامع و قدرتمند تبدیل شد که امروزه در تمامی وب‌سایت‌ها و برنامه‌های وب مورد استفاده قرار می‌گیرد.

مقایسه زبان نشانه‌گذاری با زبان برنامه‌نویسی

زبان‌های نشانه‌گذاری و زبان‌های برنامه‌نویسی دو نوع مختلف از زبان‌های کامپیوتری هستند که هر کدام نقش و کاربرد ویژه‌ای دارند. زبان‌های نشانه‌گذاری مانند HTML برای ساختاردهی و نمایش محتوای صفحات وب به کار می‌روند. این زبان‌ها با استفاده از تگ‌ها و عناصر مشخص، به مرورگرها می‌گویند که هر قسمت از محتوا چگونه نمایش داده شود. برای مثال، تگ <p> برای تعریف یک پاراگراف و تگ <a> برای ایجاد یک لینک استفاده می‌شود. زبان‌های نشانه‌گذاری فاقد منطق برنامه‌نویسی پیچیده هستند و تمرکز اصلی آن‌ها بر روی ارائه ساختار و فرمت محتواست. به عبارت دیگر، HTML به مرورگرها دستور می‌دهد که محتوا چگونه نمایش داده شود، اما نمی‌تواند عملیات محاسباتی یا تعاملی پیچیده را مدیریت کند.

در مقابل، زبان‌های برنامه‌نویسی مانند JavaScript، Python و Java برای ایجاد منطق و عملکردهای پیچیده در نرم‌افزارها و برنامه‌های وب به کار می‌روند. این زبان‌ها قابلیت تعریف متغیرها، توابع، حلقه‌ها و شرط‌ها را دارند که به برنامه‌نویسان امکان می‌دهند تا عملیات محاسباتی، تعاملات کاربری و مدیریت داده‌ها را به راحتی انجام دهند. برای مثال، JavaScript می‌تواند برای ایجاد تعاملات داینامیک در یک صفحه وب، مانند تغییر محتوا با کلیک بر روی یک دکمه، استفاده شود. برخلاف زبان‌های نشانه‌گذاری که تنها ساختاردهی محتوا را انجام می‌دهند، زبان‌های برنامه‌نویسی قادر به انجام محاسبات پیچیده و مدیریت جریان برنامه هستند. به همین دلیل، در توسعه وب معمولاً HTML برای ساختاردهی محتوا، CSS برای استایل‌دهی و طراحی، و JavaScript برای افزودن تعاملات و منطق برنامه‌نویسی استفاده می‌شود.

HTML چطور کار می‌کند؟

HTML یا HyperText Markup Language به عنوان زبان اصلی ساختاردهی صفحات وب، نقش حیاتی در نحوه نمایش و سازماندهی محتوا در مرورگرهای وب ایفا می‌کند. وقتی شما یک فایل HTML را باز می‌کنید، مرورگر وب به عنوان تفسیرگر این فایل عمل می‌کند. فایل HTML شامل مجموعه‌ای از تگ‌ها است که هر کدام به مرورگر می‌گویند چگونه باید عناصر مختلف صفحه، مانند متن، تصاویر، لینک‌ها و فرم‌ها را نمایش دهد. تگ‌های HTML معمولاً به صورت جفت‌های باز و بسته می‌آیند، مثلاً <p> برای شروع یک پاراگراف و </p> برای پایان آن. مرورگر وب تگ‌ها را خوانده و سپس محتوای داخل آن‌ها را به صورت قابل مشاهده برای کاربران نمایش می‌دهد.

ساختار یک فایل HTML با یک اعلامیه داک‌تایپ شروع می‌شود که نوع سند را مشخص می‌کند. سپس تگ‌های <html>, <head>, و <body> می‌آیند. تگ <head> حاوی اطلاعات متا و تنظیمات صفحه است، مانند عنوان صفحه که در نوار عنوان مرورگر نمایش داده می‌شود، و لینک به فایل‌های CSS برای استایل‌دهی. تگ <body> حاوی محتوای اصلی صفحه است که شامل تگ‌های مختلفی برای عناوین، پاراگراف‌ها، تصاویر، لینک‌ها و سایر عناصر است. مرورگر با تفسیر این تگ‌ها، محتوای صفحه را به صورت یک صفحه وب قابل مشاهده و تعاملی به کاربران نمایش می‌دهد. به عنوان مثال، تگ <h1> یک عنوان بزرگ و برجسته ایجاد می‌کند، در حالی که تگ <p> یک پاراگراف متنی را نمایش می‌دهد. این فرایند تفسیر و نمایش تگ‌های HTML توسط مرورگر، به کاربران امکان می‌دهد تا محتوای وب را به صورت ساختارمند و قابل فهم مشاهده کنند.

کاربردها، مزایا و معایب زبان HTML

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

مزایای HTML

1. سادگی و یادگیری آسان: HTML زبان ساده‌ای است و یادگیری آن برای مبتدیان بسیار آسان است.
2. پشتیبانی گسترده مرورگرها: تمامی مرورگرهای وب از HTML پشتیبانی می‌کنند و استانداردهای آن را تفسیر می‌کنند.
3. قابلیت ترکیب با CSS و JavaScript: HTML به راحتی با CSS برای استایل‌دهی و JavaScript برای افزودن تعاملات و منطق برنامه ترکیب می‌شود.
4. انعطاف‌پذیری: HTML می‌تواند برای انواع مختلفی از محتوای وب از جمله متن، تصاویر، ویدئو و فرم‌ها استفاده شود.
5. دسترسی‌پذیری: HTML به توسعه‌دهندگان امکان می‌دهد تا محتوای وب را به شکلی سازماندهی کنند که برای همه کاربران، از جمله کاربران با ناتوانی‌ها، قابل دسترسی باشد.

معایب HTML

1. عدم توانایی برنامه‌نویسی: HTML یک زبان نشانه‌گذاری است و نمی‌تواند عملیات محاسباتی یا منطق برنامه‌نویسی پیچیده را انجام دهد.
2. وابستگی به CSS و JavaScript: برای ایجاد صفحات وب پیشرفته و تعاملی، HTML به تنهایی کافی نیست و نیاز به ترکیب با CSS و JavaScript دارد.
3. سازگاری مرورگرها: گاهی اوقات تفسیر HTML ممکن است در مرورگرهای مختلف متفاوت باشد، که می‌تواند باعث مشکلات سازگاری شود.
4. محدودیت در طراحی و فرمت‌بندی: بدون CSS، HTML به تنهایی توانایی زیادی در ارائه طراحی‌های پیچیده و زیبا ندارد.

با توجه به این مزایا و معایب، HTML همچنان یکی از ابزارهای اصلی و ضروری در توسعه وب است و هر توسعه‌دهنده وب باید به آن مسلط باشد.

فرانت‌اند چیست؟

فرانت‌اند (Front-end) به بخشی از توسعه وب گفته می‌شود که مستقیماً با کاربر نهایی در تعامل است و مسئولیت ایجاد و پیاده‌سازی رابط کاربری را بر عهده دارد. به عبارت دیگر، فرانت‌اند تمام عناصر بصری و تعاملی یک وب‌سایت یا اپلیکیشن وب را شامل می‌شود، از جمله طراحی گرافیکی، چینش عناصر، انیمیشن‌ها و تمامی تعاملاتی که کاربر با صفحه انجام می‌دهد. این بخش از توسعه وب با استفاده از سه فناوری اصلی یعنی HTML، CSS و JavaScript ساخته می‌شود. HTML برای ساختاردهی محتوا، CSS برای استایل‌دهی و زیباسازی، و JavaScript برای ایجاد تعاملات و داینامیک کردن صفحات وب به کار می‌رود.

فرانت‌اند نقش حیاتی در تجربه کاربری دارد، زیرا اولین چیزی که کاربر هنگام بازدید از یک وب‌سایت می‌بیند و با آن تعامل می‌کند، عناصر فرانت‌اند است. هدف اصلی فرانت‌اند، ایجاد تجربه‌ای جذاب، سریع و کاربرپسند است که نه تنها به خوبی عمل کند، بلکه از نظر بصری نیز جذاب باشد. یک توسعه‌دهنده فرانت‌اند باید با اصول طراحی رابط کاربری (UI)، تجربه کاربری (UX) و تکنیک‌های بهینه‌سازی عملکرد آشنا باشد تا بتواند وب‌سایتی بسازد که هم زیبا و هم کارآمد باشد. علاوه بر این، توسعه‌دهندگان فرانت‌اند باید با ابزارها و فریم‌ورک‌های مختلفی مانند React، Angular و Vue.js نیز آشنا باشند تا بتوانند برنامه‌های وب پیچیده و تعاملی را پیاده‌سازی کنند.

تگ چیست؟

تگ‌ها (Tags) در HTML عناصر اصلی هستند که ساختار و محتوای یک صفحه وب را تعریف و سازماندهی می‌کنند. هر تگ از دو بخش تشکیل شده است: یک تگ باز <tagname> و یک تگ بسته </tagname>. برخی از تگ‌ها مانند <img> یا <br> به تگ بسته نیاز ندارند و خودبسته هستند. تگ‌ها به مرورگرها می‌گویند که چگونه محتوای بین آن‌ها باید نمایش داده شود. برای مثال، تگ <h1> برای ایجاد یک عنوان بزرگ و تگ <p> برای ایجاد یک پاراگراف متنی استفاده می‌شود. تگ‌ها می‌توانند دارای خصوصیات (Attributes) باشند که اطلاعات اضافی را به تگ اضافه می‌کنند و رفتار یا ظاهر آن را تغییر می‌دهند.

خصوصیات تگ‌ها می‌توانند شامل اطلاعاتی مانند شناسه (id)، کلاس (class)، منبع تصویر (src) یا مقصد لینک (href) باشند. این خصوصیات به توسعه‌دهندگان امکان می‌دهند تا کنترل بیشتری بر عناصر HTML داشته باشند و بتوانند آن‌ها را به صورت دقیق‌تر استایل‌دهی یا دستکاری کنند. به عنوان مثال، خصوصیت class برای اعمال استایل‌های CSS به گروهی از عناصر مشابه استفاده می‌شود و خصوصیت id یک شناسه یکتا به عنصر می‌دهد که می‌توان به طور خاص با آن در CSS یا JavaScript تعامل داشت.

مثال زیر یک تگ ساده HTML با برخی خصوصیات را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
    <title>Sample HTML page</title>
    <style>
        .highlight {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 id="main-title" class="highlight">welcome to my page</h1>
    <p class="highlight">This is a paragraph with a special style.</p>
    <a href="https://example.com" target="_blank">Link to another website</a>
</body>
</html>

در این مثال، تگ <h1> یک عنوان بزرگ با خصوصیت‌های id و class دارد. خصوصیت id به عنوان یک شناسه یکتا عمل می‌کند، در حالی که class برای اعمال استایل CSS استفاده می‌شود. تگ <a> برای ایجاد یک لینک استفاده شده و خصوصیت href مقصد لینک و target نحوه باز شدن آن را مشخص می‌کند. این تگ‌ها و خصوصیات به مرورگر کمک می‌کنند تا محتوای صفحه را به درستی نمایش دهد و رفتار مورد نظر را اعمال کند.

ساختار اصلی HTML

ساختار اصلی HTML شامل مجموعه‌ای از تگ‌ها و عناصر است که به مرورگرها می‌گویند چگونه باید محتوای یک صفحه وب را نمایش دهند. یک فایل HTML با اعلامیه <!DOCTYPE html> شروع می‌شود که به مرورگر می‌گوید از کدام نسخه HTML استفاده می‌کند؛ در این مورد، HTML5. این اعلامیه به مرورگرها کمک می‌کند تا صفحه را به درستی تفسیر و نمایش دهند. پس از این اعلامیه، تگ ریشه‌ای <html> قرار دارد که همه‌ی محتوای HTML بین تگ‌های باز و بسته آن قرار می‌گیرد. این تگ به مرورگر نشان می‌دهد که محتوای داخل آن یک سند HTML است.

ساختار اصلی HTML به دو بخش عمده تقسیم می‌شود: <head> و <body>. تگ <head> شامل اطلاعات متا و تنظیمات صفحه است که برای مرورگرها و موتورهای جستجو اهمیت دارند اما مستقیماً به کاربران نمایش داده نمی‌شوند. درون تگ <head>, عناصری مانند <title>, که عنوان صفحه را تعیین می‌کند و در نوار عنوان مرورگر نمایش داده می‌شود، و تگ‌های <meta> که اطلاعاتی درباره کدگذاری کاراکترها، توضیحات صفحه، و کلمات کلیدی فراهم می‌کنند، قرار می‌گیرند. همچنین می‌توان درون تگ <head> لینک‌هایی به فایل‌های CSS برای استایل‌دهی و فایل‌های JavaScript برای افزودن تعاملات پویا قرار داد.

بخش <body> حاوی محتوای اصلی صفحه وب است که کاربران آن را می‌بینند و با آن تعامل دارند. این بخش شامل تگ‌های مختلفی مانند <h1> تا <h6> برای عناوین، <p> برای پاراگراف‌ها، <a> برای لینک‌ها، <img> برای تصاویر و <div> برای تقسیم‌بندی بخش‌های مختلف صفحه است. برای مثال، یک ساختار ساده HTML به این شکل است:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample HTML page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 80%;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>welcome to my page</h1>
        <p>This is a simple paragraph inside a div.</p>
        <a href="https://example.com">This is a link to another site</a>
    </div>
</body>
</html>

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

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