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

اگر می‌خواهید این نوشته به شکل یک پاراگراف در صفحه وب شما نمایش داده شود، باید آن را با تگ پاراگراف محصور کنید. تگ پاراگراف در HTML با <p> باز و با </p> بسته می‌شود.

 

ساختار عناصر HTML

بیاید این پاراگراف را کمی بیشتر بررسی کنیم.

بخش اصلی عنصر ما عبارت است از:

۱- تگ باز:

شامل نام عنصر است (در این مورد خاص، p) که درون < > قرار می‌گیرد. این علامت نشان دهنده آن است که تگ مورد نظر روی محتوای شما شروع به تاثیرگذاری می‌کند. (در این مورد خاص یعنی پاراگراف آغاز می‌شود).

۲- تگ بسته:‌

تگ بسته هم مانند تگ باز، شامل نام عنصر است با این تفاوت که قبل از نام عنصر یک اسلش قرار می‌گیرد. این تگ نشان‌دهنده پایان تاثیر عنصر روی محتوای شما است. (در این مورد خاص یعنی پاراگراف تمام می‌شود). نگذاشتن تگ بسته در پایان محتوا، اشتباهی است که معمولا مبتدیان مرتکب می‌شوند و این اتفاق منجر به بروز نتایج عجیب و غریبی شود.

پیشنهاد فرانش به شما
چرا کارهایمان را به تعویق می‌اندازیم؟

۳- محتوا:‌ 

محتوا می‌تواند تصویر، متن یا لینک باشد. در این مورد، محتوای ما یک متن است.

۴- عنصر:‌

تگ باز، تگ بسته و محتوا با هم، عنصر را تشکیل می‌دهند.

عناصر می‌توانند ویژگی‌هایی (Attributes) هم داشته باشند:

ویژگی‌ها حاوی اطلاعات اضافی در مورد عنصر است که نمی‌خواهید در محتوای واقعی (روی صفحه وب) ظاهر شوند. در اینجا، class، نام ویژگی و editor-note، مقدار ویژگی است. ویژگی کلاس به شما اجازه می‌دهد تا عنصر را شناسایی کرده و گروه عنصر را تشخیص دهید.

یک ویژگی همیشه باید شامل موارد زیر باشد:

۱- باید یک فاصله (space) بین آن و نام عنصر وجود داشته باشد. (اگر عنصر شامل چند ویژگی باشد، باید بین هر کدام از ویژگی‌ها یک فاصله قرار دهید)

۲- بعد از نام ویژگی باید علامت مساوی (=) وجود داشته باشد.

۳- در دو طرف مقدار ویژگی باید علامت نقل قول (“) وجود داشته باشد.

  • عناصر تو در تو

شما می‌توانید عناصر را در داخل یکدیگر استفاده کنید. به این کار تو در تویی (nesting) می‌گویند. در جمله‌ی “My cat is very grumpy” می‌توانیم برای تاکید روی خشن بودن گربه، کلمه very را داخل تگ <strong> قرار دهیم.

دقت کنید در زمان استفاده از تگ‌های تو در تو، ترتیب باز و بسته کردن تگ‌ها رعایت کنید. مثلا در این مثال، ما ابتدا تگ <p> و سپس تگ <strong> را باز کردیم. بنابراین ابتدا باید تک <strong> و بعد تگ <p> را ببندیم.

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

  • عناصر خالی

برخی عناصر فاقد محتوا هستند و عناصر خالی نامیده می‌شوند. عنصر <img> در HTML یک عنصر خالی محسوب می‌شود.

این عنصر شامل ۲ ویژگی است. اما تگ بسته </img> و هیچ محتوایی در داخل آن وجود ندارد. به این دلیل که در عنصر تصویر، محتوا وجود ندارد و هدف از این عنصر، جاگذاری یک عکس در صفحه وب است.

پیشنهاد فرانش به شما
یادگیری وردپرس در یک هفته

 

ساختار سند (Document) در HTML

مجموعه‌ای از عناصر و تگ‌ها، داکیومنت HTML را ایجاد می‌کنند. اما این عناصر به تنهایی کاربردی ندارند. در این مرحله می‌خواهیم چگونگی ترکیب عناصر برای ایجاد یک صفحه HTML کامل را بررسی کنیم:

  • <!DOCTYPE html> چیست؟

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

  • تگ <html></html> چیست؟

تگ <html> یک عنصر است. تمام مطالب و کدهای موجود در مرورگر وب، درون این عنصر قرار می‌گیرد. <html> به عنوان عنصر ریشه شناخته می‌شود.

  • تگ <head></head> چیست؟

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

  • چرا از <meta charset=”utf-8”> استفاده کنیم؟

تگ meta اطلاعات کاراکتر شما را تنظیم می‌کند. اطلاعاتی که در متا درج می‌شود، در صفحه وب قابل مشاهده نیستند ولی ماشین می‌تواند آنها را بخواند. می‌توانید محتواهایی نظیر نام نویسنده، آخرین تغییرات یا کلمات کلیدی را در این تگ قرار داده و آنها را مدیریت کنید.

  • تگ <title></title> چیست؟

تگ title یک عنصر است. این تگ، عنوان صفحه شما را تنظیم می‌کند. عنوانی که در تگ title قرار می‌دهید، در واقع همان عنوانی است که در تب (tab) مرورگر ظاهر شده و صفحه در آن بارگذاری می‌شود. زمانی که شما صفحه‌ای را نشانه‌گذاری (bookmark) می‌کنید نیز از این عنوان استفاده می‌شود.

  • کاربرد تگ <body></body> چیست؟

تگ body شامل تمام محتواهایی است که در صفحه وب شما توسط کاربر مشاهده می‌شود. این بخش می‌تواند شامل متن، تصویر، فبلم، بازی،‌ آهنگ یا هر چیز دیگری باشد.

 

تگ تصاویر در HTML

در این بخش می‌خواهیم تگ <img> را بررسی کنیم:

پیشنهاد فرانش به شما
چرا شبکه‌های یادگیری شخصی بسازیم؟

همان طور که پیش‌تر گفتیم، این تگ یک تصویر را در صفحه مرورگر ما نمایش می‌دهد. این کار از طریق ویژگی scr (source) انجام می‌شود. این ویژگی حاوی مسیری است که فایل تصویر ما در آن قرار دارد.

در این تگ، ویژگیalt (alternative) را نیز داریم. این ویژگی شامل یک متن توصیفی برای عکس است. وقتی کاربر نتواند عکس را ببیند، این متن به جای تصویر به او نشان داده می‌شود.

۱- این ویژگی به نابینایان و کسانی که دارای اختلالات بصری هستند، کمک می‌کند. معمولا این افراد از ابزارهایی برای خواندن صفحات وب استفاده می‌کنند. ویژگی alt این امکان را می‌دهد تا تصویر مورد نظر برای آنها خوانده شود.

۲- خاصیت دیگر این ویژگی، زمانی است که چیزی مانع از نمایش تصویر می‌شود. مثلا اگر عمدا مسیر فایل عکس را در scr تغییر دهید. اگر صفحه را ذخیره و بارگیری کنید، چیزی مانند تصویر زیر به جای عکس برای شما نمایش داده می‌شود.

کلمات کلیدی برای متن alt، باید یک متن توصیفی باشد. متنی که شما برای ویژگی alt می‌نویسید باید تصویر را به خوبی توصیف کرده و به اندازه کافی اطلاعات در اختیار کاربر قرار دهد. مثلا در این مثال، استفاده از متن “تصویر امتحانی من” توصیف خوبی برای تصویر لوگوی فایرفاکس نیست. بهتر از به جای آن از عبارت “لوگوی فایرفاکس: روباه آتشین حلقه زده روی زمین” استفاده کنید.

 

علامت‌گذاری متن

در این بخش، برخی از عناصر اصلی HTML که برای علامت‌گذاری متن استفاده می‌شوند را معرفی می‌کنیم.

عنوان‌ها (Headings)

عنصر هدینگ به شما اجازه‌ می‌دهد تا عناوین و زیرعنوان‌های متن خود را مشخص کنید. یک سند HTML، درست مانند یک کتاب دارای عنوان اصلی، عنوان فصل، زیرنویس و… است. HTML دارای ۶ سطح عنوان است که از <1> تا <6> را پوشش می‌دهد. معمولا برای داخل متن از سطح ۳ و ۴ استفاده می‌شود.

پاراگراف‌ها (Paragraphs)

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

لیست‌ها (Lists)

بسیاری از محتواهای وب، لیست هستند و HTML عنصر مخصوصی برای آن دارد. لیست‎های علامت‌گذاری همیشه شامل حداقل دو عنصر هستند. دو نمونه از رایج‌ترین لیست‌ها، لیست‌های منظم (ordered) و نامنظم (unordered) هستند:

پیشنهاد فرانش به شما
بازاریابی درونگرا چیست؟ نیازمند زمان و خلاقیت؟! آموزش جامع 2019

لیست‎های نامنظم لیست‎هایی هستند که ترتیب قرار گرفتن آیتم‎ها در آنها اهمیتی ندارد. مانند یک لیست خرید. این لیست‌ها درون تگ <ul> قرار می‌گیرند.

لیست‌های منظم لیست‌هایی هستند که ترتیب قرار گرفتن آیتم‌ها در آنها اهمیت دارد. مانند یک دستور آشپزی. این لیست‌ها درون تگ <ol> قرار می‌گیرند.

هر کدام از آیتم‌های لیست درون تگ <li> قرار می‌گیرید.

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

می‌توانیم به صورت زیر نشانه‌گذاری کنیم:

آموزش html پاراگراف و لیست

لینک‌ها (Links)

لینک‌ها بسیار مهم هستند. آنها چیزهایی هستند که وب را به وجود می‌آورند. برای افزودن یک لینک، ما به عنصر <a> نیاز داریم. “a” کوتاه شده‌ی کلمه‌ی “anchor” است. برای تبدیل بخشی از پاراگراف متن خود به لینک، طبق دستور زیر عمل کنید:

۱- بخشی از متن را انتخاب کنید. ما در اینجا متن “Mozilla Manifesto” را انتخاب کردیم.

۲- بخش انتخاب شده را درون تگ <a> </a> قرار می‌دهیم. مانند تصویر زیر:

۳- در تگ <a> از ویژگی href استفاده کنید. مانند تصویر زیر:

۴- به جای مقدار این ویژگی، لینکی که می‌خواهید متن مورد نظر به آن پیوند داده شود را قرار دهید.

اگر بخشی از لینک را به درستی وارد نکنید (مثلا https:// یا http:// را کامل وارد نکنید) ممکن است نتایج عجیبی را مشاهده کنید. پس از ایجاد یک پیوند، حتما روی آن کلیک کنید تا مطمئن شوید که لینک را درست قرار داده‌اید.

نتیجه

اگر همه دستورات این مطلب را به درستی رعایت کرده باشید، باید صفحه‌ای مشابه تصویر زیر در مرورگرتان مشاهده کنید:

آموزش HTML

اگر مشکلی در نوشتن کدهای HTML دارید، از گوگل کمک بگیرید. هیچ مشکلی وجود ندارد که نتوانید روی اینترنت جوابی برای آن پیدا کنید.

برای تقویت یادگیری HTML می‌توانید از دوره های آموزش HTML در فرانش استفاده کنید.

تمرین، کلید موفقیت است. تمرین روزانه را فراموش کنید.