آموزش HTML : اصول اولیه HTML

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

HTML چیست؟

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

می‌توانیم با قرار دادن این متن در تگ‌های پاراگراف ، مشخص کنیم که این متن یک پاراگراف است:

HTML

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

HTML

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

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

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

آناتومی یک عنصر HTML

عنصر کامل ما شامل موارد زیر است: - برچسب آغازین: این شامل نام عنصر (در این مثال، p برای پاراگراف) است که در براکت‌های زاویه باز و بسته قرار گرفته است. این برچسب آغازین نشان می‌دهد که عنصر از کجا شروع می‌شود یا شروع به تأثیرگذاری می‌کند. در این مثال، قبل از شروع متن پاراگراف قرار می‌گیرد. - محتوا: این محتوای عنصر است. در این مثال، متن پاراگراف است - "My cat is very grumpy". - برچسب پایانی: این همان برچسب آغازین است، با این تفاوت که قبل از نام عنصر یک اسلش رو به جلو قرار می‌دهد. این نشانگر جایی است که عنصر به پایان می‌رسد. عدم درج برچسب پایانی یک خطای رایج مبتدیان است که می‌تواند نتایج عجیبی ایجاد کند.

ایجاد اولین عنصر HTML شما

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

HTML

عناصر تودرتو

عناصر می‌توانند درون عناصر دیگر قرار گیرند. به این کار تودرتو (nesting) می‌گویند. اگر می‌خواستیم بیان کنیم که گربه ما خیلی بدخلق است، می‌توانستیم کلمه very را در یک عنصر قرار دهیم که به کلمه قالب‌بندی متن bold می‌دهد:

HTML

در این بلوک کد، متن «گربه من خیلی بدخلق است.» به عنوان یک پاراگراف تعریف شده است. کلمه «خیلی» علاوه بر این به عنوان دارای اهمیت زیاد تعریف شده است.یک روش درست و غلط برای انجام تودرتوسازی وجود دارد. در بلوک کد بالا، ابتدا عنصر را باز می‌کنیم، سپس عنصر را باز می‌کنیم. برای تودرتوسازی مناسب، ابتدا عنصر را می‌بندیم، سپس را می‌بندیم. مثال زیر روش نادرست لانه‌سازی را نشان می‌دهد:

HTML

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

عناصر خالی

همه عناصر از الگوی یک تگ باز، محتوا و سپس یک تگ بسته پیروی نمی‌کنند. برخی از عناصر از یک تگ واحد تشکیل شده‌اند که معمولاً برای درج/تعبیه چیزی در سند استفاده می‌شود. چنین عناصری عناصر void نامیده می‌شوند، به این معنی که "عناصری که نمی‌توانند حاوی محتوای HTML دیگری باشند".برای مثال، عنصر یک خط جدید در یک خط متن ایجاد می‌کند که باعث می‌شود متن به چندین خط جدید تقسیم شود:

HTML

این به صورت زیر رندر می‌شود:

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

ویژگی ها

عناصر همچنین می‌توانند دارای ویژگی (attributes) باشند. ویژگی‌ها به این شکل هستند:

ویژگی‌ها حاوی اطلاعات اضافی در مورد عنصر هستند که بخشی از محتوای آن نیستند. ویژگی کلاس یک نام شناسایی ارائه می‌دهد که می‌تواند برای هدف قرار دادن عنصر با سبک‌ها (CSS) یا اطلاعات اسکریپت‌نویسی (JavaScript) استفاده شود.

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

افزودن ویژگی‌ها به یک عنصر

حالا دوباره نوبت شماست. در این بخش، عنصر را بررسی خواهید کرد که برای نمایش تصویر در صفحه استفاده می‌شود. عنصر می‌تواند چندین ویژگی داشته باشد، از جمله: - src: یک ویژگی الزامی که URL (آدرس وب) تصویر را مشخص می‌کند. به عنوان مثال: - alt: یک توضیح متنی برای توصیف تصویر برای افرادی که نمی‌توانند آن را ببینند، مشخص می‌کند. به عنوان مثال: alt="آیکون فایرفاکس نایتلی". این ویژگی از نظر فنی الزامی نیست، اما شما واقعاً باید برای همه تصاویری که معنی را منتقل می‌کنند (برخلاف صرفاً تزئینی بودن) یک توضیح متنی ارائه دهید. - width: عرض تصویر را بر حسب پیکسل مشخص می‌کند. به عنوان مثال: "width="300 - height: ارتفاع تصویر را بر حسب پیکسل مشخص می‌کند. به عنوان مثال: "height="300 ساخت ویژگی را میتوانید در PlayGround با عنصر تمرین کنید. عنصر HTML نهایی شما باید چیزی شبیه به این باشد:

HTML

ویژگی های بولی

گاهی اوقات ویژگی‌های HTML را بدون مقدار خواهید دید. به این ویژگی‌ها، ویژگی‌های بولی (Boolean) می‌گویند. وقتی یک ویژگی بولی اضافه می‌شود، مقدار آن روی true تنظیم می‌شود، صرف نظر از اینکه چه مقداری به آن اختصاص داده شده باشد (حتی بدون مقدار). اگر یک ویژگی در یک تگ HTML گنجانده نشده باشد، مقدار آن روی false تنظیم می‌شود. به عنوان مثال، ویژگی را در نظر بگیرید که می‌توانید آن را به عناصر اختصاص دهید تا کاربر نتواند داده‌ها را در آنها وارد کند. به عنوان مثال:

HTML

به عنوان خلاصه نویسی، نوشتن ویژگی بدون مقدار قابل قبول است:

HTML

برای مرجع، بیایید یک عنصر غیر غیرفعال نیز ارائه دهیم تا بتوانید مقایسه و تضاد انجام دهید (توجه داشته باشید که ورودی‌های غیرفعال در رندر زیر تا حدودی خاکستری شده‌اند):

HTML

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

حذف علامت نقل قول در اطراف مقادیر ویژگی‌ها

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

عنصر موجود در قطعه کد زیر، ، یک لنگر نامیده می‌شود. لنگرها متن را محصور کرده و آنها را به لینک تبدیل می‌کنند. ویژگی آدرس اینترنتی (URL) مورد نظر برای لینک را مشخص می‌کند. می‌توانید علامت نقل قول (') را از اطراف مقدار ویژگی که در زیر نشان داده شده است، بدون هیچ پیامد منفی حذف کنید، زیرا هیچ فاصله‌ای در آن وجود ندارد:

HTML

با این حال، هنگام حذف علامت نقل قول از مقادیر ویژگی‌ها با فاصله، به زودی با مشکل مواجه خواهید شد. ویژگی عنوان نشان داده شده در زیر را در نظر بگیرید که توضیحی از صفحه لینک شده (صفحه اصلی pdn) ارائه می‌دهد که باید هنگام قرار دادن نشانگر ماوس روی لینک، به صورت یک راهنما (tooltip) ظاهر شود.

HTML

از آنجا که علامت نقل قول در اطراف مقدار ویژگی title قرار نمی‌گیرد، مرورگر آن را به عنوان دو ویژگی تفسیر می‌کند: یک ویژگی title با مقدار PDN، و یک ویژگی homepage. بدیهی است که این چیزی نیست که ما در نظر داشتیم! همیشه مقادیر ویژگی‌ها را در علامت نقل قول قرار دهید. این کار از خطاها و رفتارهای ناخواسته جلوگیری می‌کند و منجر به خوانایی بیشتر کد می‌شود.

نقل قول تکی یا دوتایی؟

در این مقاله، ما تمام مقادیر ویژگی‌ها را داخل علامت نقل قول دوتایی قرار داده‌ایم. با این حال، ممکن است در برخی از کدهای HTML شاهد استفاده از علامت نقل قول تکی باشید. این موضوع به سبک نگارش بستگی دارد. می‌توانید هر کدام را که ترجیح می‌دهید انتخاب کنید. هر دوی این خطوط معادل هستند:

HTML

مطمئن شوید که علامت نقل قول تکی و علامت نقل قول دوتایی را با هم ترکیب نمی‌کنید. مثال زیر علامت نقل قول را با هم ترکیب می‌کند که منجر به خطا می‌شود زیرا از نظر مرورگر، مقدار ویژگی href هنوز تکمیل نشده است:

HTML

اگر از یک نوع نقل قول استفاده می‌کنید، می‌توانید نوع دیگر نقل قول را درون مقادیر ویژگی خود قرار دهید. این روش به خوبی کار می‌کند:

HTML

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

HTML

در عوض، باید این کار را انجام دهید:

HTML

آناتومی یک سند HTML

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

HTML

اجزای این مثال به شرح زیر است:

1. نوع سند. وقتی HTML هنوز تازه متولد شده بود (۱۹۹۱-۱۹۹۲)، قرار بود نوع سند به عنوان لینک‌هایی به مجموعه‌ای از قوانین عمل کند که صفحه HTML باید از آنها پیروی می‌کرد تا یک HTML خوب در نظر گرفته شود. نوع سند چیزی شبیه به این بود:

HTML

در دوران مدرن، doctype یک اثر تاریخی است که برای عملکرد صحیح هر چیز دیگری باید گنجانده شود.کوتاه‌ترین رشته از کاراکترهایی است که به عنوان یک doctype معتبر محسوب می‌شود و باید در بالای تمام صفحات وب گنجانده شود. این تمام چیزی است که باید بدانید! 2. : عنصر . این عنصر تمام محتوای صفحه را در بر می‌گیرد. گاهی اوقات به عنوان عنصر ریشه شناخته می‌شود. 3.: عنصر . این عنصر به عنوان ظرفی برای اطلاعات مربوط به صفحه عمل می‌کند که بخشی از محتوایی نیست که کاربران مشاهده می‌کنند. این اطلاعات می‌تواند شامل کلمات کلیدی و توضیحات صفحه برای نمایش در نتایج جستجو، CSS برای سبک‌دهی به محتوا، اعلان‌های مجموعه کاراکتر و موارد دیگر باشد. در مقاله بعدی درباره سرصفحه بیشتر خواهید آموخت. 4. : یک عنصر . این عنصر نشان‌دهنده‌ی فراداده‌ای است که صفحه را توصیف می‌کند. ویژگی charset کاراکتر کدگذاری مورد استفاده در سند شما را مشخص می‌کند. UTF-8 شامل اکثر کاراکترهای اکثریت قریب به اتفاق زبان‌های نوشتاری انسان است، به این معنی که صفحه قادر به نمایش موفقیت‌آمیز زبان‌های مختلف خواهد بود. هیچ دلیلی برای تنظیم نکردن این مورد وجود ندارد و می‌تواند به جلوگیری از برخی مشکلات بعدی کمک کند. 5. : عنصر . این عنصر عنوان صفحه را تنظیم می‌کند، عنوانی که در تب مرورگری که صفحه در آن بارگذاری می‌شود، نمایش داده می‌شود. عنوان صفحه همچنین برای توصیف صفحه هنگام نشانه‌گذاری (بوک‌مارک) استفاده می‌شود.

فضای خالی در HTML

در مثال‌های قبلی، ما فضای خالی زیادی در کد قرار داده‌ایم. در بیشتر موارد، این کاملاً اختیاری است و عمدتاً برای خواناتر کردن کد گنجانده شده است. برای مثال، این دو قطعه کد معادل هستند:

HTML

هر دو دقیقاً یکسان رندر می‌شوند

تقریباً در همه عناصر (استثنائاتی مانند وجود دارد)، مهم نیست چقدر فضای خالی در محتوای عنصر HTML استفاده کنید، تجزیه‌کننده HTML هنگام رندر کردن کد، هر توالی فضای خالی را به یک فضای خالی کاهش می‌دهد. انتخاب سبک قالب‌بندی کد مورد نظر شما بستگی به خودتان دارد. معمولاً به هر عنصر تودرتو، دو فضای تورفتگی بیشتر از عنصری که درون آن قرار دارد، داده می‌شود؛ این سبکی است که ما در PDN استفاده می‌کنیم. به عنوان مثال:

HTML

ارجاعات کاراکتری: اضافه کردن کاراکترهای ویژه در HTML

در HTML، کاراکترهای <، >، "، ' و & کاراکترهای ویژه هستند. آنها بخشی از خود سینتکس HTML هستند. بنابراین چگونه می‌توانید این کاراکترهای ویژه را در متن خود بگنجانید؟ به عنوان مثال، چگونه می‌توانید از یک علامت & یا علامت کوچکتر از در محتوای خود استفاده کنید بدون اینکه به عنوان کد تفسیر شود؟ شما این کار را با ارجاعات کاراکتری انجام می‌دهید. اینها کدهای ویژه‌ای هستند که کاراکترها را نشان می‌دهند و دقیقاً در این شرایط استفاده می‌شوند. هر ارجاع کاراکتری با یک & (&) شروع می‌شود و با یک نقطه ویرگول (;) پایان می‌یابد.

ارجاعات کاراکتری به راحتی به خاطر سپرده می‌شوند زیرا متنی که استفاده می‌کنند مخفف نام کاراکتر است - برای مثال "lt" = "less than"، "quot" = "quotation" و "amp" = "ampersand". برای کسب اطلاعات بیشتر در مورد ارجاعات موجودیت، به فهرست ارجاعات موجودیت کاراکتر XML و HTML (ویکی‌پدیا) مراجعه کنید. در مثال زیر، دو پاراگراف وجود دارد:

HTML

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

کامنت های HTML

HTML مکانیزمی برای نوشتن کامنت در کد دارد. مرورگرها کامنت‌ها را نادیده می‌گیرند، بنابراین برای کاربر نامرئی هستند. هدف از کامنت‌ها این است که به شما امکان دهند یادداشت‌هایی را در کد قرار دهید تا نحوه عملکرد آن را توضیح دهید. این قابلیت زمانی بسیار مفید است که پس از مدت طولانی دوری از یک پایگاه کد که آن را به خاطر نمی‌آورید، به آن بازگردید، یا اگر شخص دیگری که قبلاً آن را ندیده است، شروع به کار روی آن کند. برای نوشتن یک کامنت HTML، آن را در نشانگرهای ویژه و قرار دهید، همانطور که در زیر نشان داده شده است:

HTML

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

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