برچسب ها دو نوع هستند. اولی شامل موارد جفتی است که شامل دو جزء است که نام خود را از آنها گرفته اند. به این اجزا تگ باز و بسته می گویند. برچسب بسته شدن با وجود نماد با جفت خود متفاوت است / ، که بلافاصله بعد از آن قرار می گیرد < .

نوع دوم تگ ها تگ های تکی هستند. و همانطور که از نام آن پیداست، آنها یک جفت تگ بسته دوم ندارند.

تگ های تک HTML

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

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

این برچسب ها عبارتند از:
,

خط
خط بعدی

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

ویژگی های تگ HTML

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

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

به عنوان یک قاعده، در بیشتر موارد، برچسب ها و ویژگی ها در HTML به این صورت نوشته می شوند:

<имя-тега атрибут1="значение1" атрибут2="значение2" …>

یک تگ می تواند یک یا چند ویژگی داشته باشد. در زیر می توانید نمونه هایی را مشاهده کنید.

......

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

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

تگ های تک HTML

تگ های تکیبرچسب بسته شدن ندارید مثلا:
, . قبلاً اینطور نوشته می شد:
, ، حالا این سبک تک تگ نویسی ربطی نداره پس اینطوری ننویس. بیشترین استفاده شده تگ های تک:
- انتقال به خط جدید,

تگ های HTML جفت شده

برچسب های جفت شدهخیلی بیشتر. توصیفگر جفت دارای یک تگ باز و بسته شدن است. تگ جفت یک ظرف را تشکیل می دهد. محتوای ظرف همان چیزی است که بین تگ باز و بسته قرار دارد. در مثال این مقاله، برچسب را مشاهده کردید

تگ ها در HTML چیست؟

، و در پایان

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

پاراگراف پررنگ

پاراگراف پررنگ

نحوه صحیح نوشتن تگ های جفت

چه چیزی در HTML5 از نظر برچسب ها جدید است؟

زبان HTML5یک پسوند HTML4 است، بنابراین بیشتر یا همه برچسب ها را از HTML4 نگه داشته و خود را اضافه کرده است. HTML5 معرفی شد برچسب های ویژهبرای تقسیم سایت به بلوک های اصلی: هدر، منو، پاورقی، نوار کناری و محتوا.

چرا یادگیری نحوه استفاده از برچسب ها مهم است؟

موتورهای جستجو Yandex و Google به آن حساس هستند طرح بندی HTMLاسناد، بررسی اعتبار آنها. آنها به دنبال کلمات کلیدی محصور شده در توصیفگرهای خاص و غیره می گردند. اما این بخش در مورد آن نیست. این در مورد ارتقاء (SEO) صدق می کند.

چگونه تمام تگ های HTML را یاد بگیریم؟

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

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

تگ HTML چیست، انواع تگ های HTML، نمونه هایی از نوشتن

این تگ برجسته است با حروف درشت. برچسب ها سه نوع هستند:

• برچسب باز کردن- برچسب در ابتدا در مثال بالا، تگ متن آغازین است و قبل از متنی که باید انتخاب شود می آید.
• برچسب بسته شدن- در پایان تگ کنید انگبه عنوان یک اسلش "/" قبل از کاراکترها در براکت های زاویه ای عمل می کند. بیایید دوباره به مثال بالا نگاه کنیم. برچسب بزنیدپایانی است و بعد از متن می آید تا پررنگ شود
• تگ های تکی- برچسب هایی که برچسب بسته شدن ندارند. یک مثال می تواند باشد
  در اینجا یک مثال از یک تگ باز و بسته است:

کل ساختار، از جمله متن، به شکل زیر خواهد بود:

این متن پررنگ خواهد بود

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

اساساً از تگ های منفرد برای درج برخی از عناصر مانند تصویر یا جدول استفاده می شود.

ویژگی ها، قوانین نوشتن چیست و چرا به آنها نیاز است

، که بدون صفات در واقع هیچ کار معقولی انجام نمی دهد.

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

متن

اکنون کمی در مورد قوانین نوشتن صفت ها. ویژگی های همیشهدر تگ آغازین و بعد از کاراکترهای خود تگ نوشته می شود. شما می توانید چندین ویژگی را در یک تگ به هر ترتیبی بنویسید. شما می توانید ویژگی ها را در وب سایت اعتبارسنجی W3C (که در زیر در مورد آن خواهم نوشت) پیدا کنید. بنابراین در اینجا یک مثال از یک تگ فونت با ویژگی اندازه است:

متن

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

متن

قبلاً دیده اید که چگونه ویژگی ها نوشته می شوند. دقیقاً به همان شکلی که در تگ های دیگر نوشته می شوند: ابتدا خود ویژگی را می نویسیم (in این مورداندازه)، سپس "="" را قرار داده و پارامتر ویژگی را در آن قرار دهید نقل قول های دوگانه. پارامترهای مشخصه را می‌توانید در همان وب‌سایت کنسرسیوم پیدا کنید وب جهانی.

اعتبار سنج W3C، قوانین املایی و لیست برچسب چیست؟

همانطور که نوشتم، تعداد زیادی تگ وجود دارد. اما کجا می توانید همه آنها را پیدا کنید؟ برای این منظور وجود دارد اعتبار سنجی W3C W3C- جهان وب گستردهکنسرسیوم،و به زبان روسی - کنسرسیوم وب جهانی. کاملاً مشخص نیست، درست است؟ این جایی است که استانداردهای وب در آن توسعه می‌یابند - (زبان‌های نشانه‌گذاری فرامتن زاییده ذهن آنهاست). در رأس کل کنسرسیوم، که از آخرین مقاله شناخته شده است، تیم برنرز لی - خالق HTML است. وب سایت این سازمان w3.org است. من به شما هشدار می دهم، سایت کاملاً انگلیسی است، بنابراین یک فرهنگ لغت یا مترجم در مرورگر خود تهیه کنید. به هر حال، گوگل برای این سایت 9 و - 37000 است (اگر کسی اطلاعی نداشته باشد، همه اینها زیاد است).

به موضوع مقاله برمی گردیم. ما به استانداردهای زبان HNTML 4.01 علاقه مندیم. ما پیوند HTML 4.01 Specification را دنبال می کنیم، پس از آن تب عناصر را در بالا می بینیم، روی آن کلیک می کنیم. این صفحه با تمام برچسب ها است. این برچسب ها به عنوان یک استاندارد توسط یک کنسرسیوم توسعه یافته و پذیرفته شده اند. همه چیز دوباره به زبان انگلیسی است. بلافاصله پس از کلمات "شاخص عناصر" افسانه (معنای حروف در ستون ها) را می بینیم:

و درست بعد از افسانه، جدولی از خود برچسب ها وجود دارد:

• در ستون اول - نام- نام خود برچسب - چه چیزی باید در براکت های زاویه ای باشد (< и >).
• ستون دوم - برچسب شروع- وجود یک برچسب باز کننده. که در این ستونمی توانید حرف "O" را ببینید که به معنای "اختیاری" است و از انگلیسی ترجمه شده است - اختیاری. این حرف فقط در مقابل تگ ها وجود دارد , , و و به این معنی است که می توانید تگ افتتاحیه را قرار دهید یا نمی توانید آن را قرار دهید - مرورگر همه کارها را انجام می دهد.
• ستون سوم - تگ پایان- وجود یک برچسب بسته شدن. در مقابل این تگ هم حرف "O" و هم حرف "F" را می بینید. ارزش اولی تغییر نکرده است. حرف دوم - "F" - به معنای واقعی کلمه از انگلیسی "ممنوع" - به این معنی است که قرار دادن برچسب بسته شدن ممنوع است، به سادگی وجود ندارد. مثلاً هیچ برچسبی وجود ندارد، زیرا چیزی برای بستن در آن وجود ندارد.
• چهارم - خالیبه این معنی که تگ تک (خالی) است. تمام تگ هایی که در این ستون کنارشان "E" دارند، در ستون قبلی نیز "F" دارند. به هر حال، تگ های منفرد تگ های بسته شدنی ندارند. همین تگ به عنوان مثال عمل می کند .
• ستون پنجم - Depr.یا منسوخ- از انگلیسی "توصیه نمی شود". اگر این ستون حاوی حرف "D" باشد (که دقیقاً همان حرف است) به این معنی است برچسب داده شدهبرای استفاده در HTML توصیه نمی شود. با نگاهی به آینده، امروز برای طراحی هر دو متن و ظاهرکل سایت و سند HTML از شیوه نامه های آبشاری استفاده می کند - CSS. به طور خلاصه و ساده، یک فایل ایجاد می شود که در آن تمام پارامترهای متنی که می توان با ویژگی های برچسب خاصی فراخوانی کرد، نوشته شده است. پس اینجاست عملکرد داده شدهفقط در وب سایت ها استفاده می شود، زیرا CSS هنگام ارسال اخبار از طریق پست یا RSS قابل استفاده نیست. اینجاست که تگ ها به کار می آیند. اتفاقاً اکثر این برچسب ها به طراحی متن مربوط می شوند ( و نمونه هستند)
• ستون ششم - DTD- می تواند یک حرف داشته باشد "ل"، یا اف. اولین - "ل" - DTD شل- یعنی تگ مقابل که هست نامه داده شده، فقط در یک نوع سند انتقالی قابل استفاده است (- انتقالی که در مقاله قبلی در مورد آن نوشتم). دومین - اف — فریم مجموعه DTD- به این معنی است که برچسب فقط می تواند در یک سند از نوع FRAMESET استفاده شود (- مجموعه قاب). اگر حرف گم شده باشد، می توان از برچسب در همه انواع اسناد استفاده کرد.
• و آخرین ستون هفتم - شرح — توضیح کوتاهبرچسب، دوباره به زبان انگلیسی

ویژگی‌ها در همان صفحه مشخصات HTML 4.01 قرار دارند، اما قبلاً در برگه «ویژگی‌ها» قرار دارند. ویژگی های بسیار بیشتری نسبت به برچسب ها وجود دارد. و دوباره همه چیز را نقطه به نقطه امضا خواهم کرد.

• ستون اول - نام- همانطور که در مورد برچسب ها - نام ویژگی. همه چیز به زبان انگلیسی است، اما داشتن دانش عمومیمی توانید حدس بزنید که این یا آن ویژگی چه می کند.
• ستون دوم - عناصر مرتبطلیستی از تمام برچسب هایی است که از هر ویژگی استفاده می کنند. همه برچسب‌ها به هم مرتبط هستند، بنابراین می‌توانید مستقیماً به اطلاعات مربوط به برچسب بروید.
• ستون سوم - نوع- این همه است مقادیر ممکنیک ویژگی خاص به عنوان مثال، در مقابل انتخاب ما ویژگی اندازه V برچسب فونتارزش CDATA را دارد. ما بعداً آن را در نظر خواهیم گرفت و به طور خلاصه، مجموعه خاصی از گزینه های اندازه (در این مورد) است. پس از همه، شما می توانید هم پیکسل و هم درصد بنویسید
• ستون چهارم - پیش فرض- نشان می دهد که آیا ویژگی در یک برچسب خاص مورد نیاز است یا خیر. به عنوان مثال، در تگ imgویژگی src مورد نیاز است، زیرا منبعی را که باید از آن تصویر گرفته شود را نشان می دهد.
• ستون های 6، 7 و 8 همان معنایی هستند که در مورد برچسب ها وجود دارد.

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

ایجاد یک فایل html - سند HTML

اول از همه، بیایید بفهمیم چیست سند HTML. این در واقع یک فایل HTML است. و تمام صفحات وب اسناد HTML هستند. به عنوان مثال، هنگامی که به سایت وارد می شوید نوار آدرسدر پایان می توان بعد از آدرس ".html" یا ".htm" مشاهده کرد. در اینجا فایلی با این پسوند است که ما ایجاد خواهیم کرد. به طور کلی، اگر می خواهید در سایت آزمایش کنید، و نه در صفحه، بهتر است ایجاد کنید سرور محلی- دنور (که می خواهم همه چیز را در مورد آن بنویسم).

با توجه به اینکه من حتی در مورد برچسب های موجود در هر صفحه صحبت نکرده ام، به سادگی یک فایل با هر نام و پسوند.html ایجاد می کنیم. امکان (و بهترین) استفاده از آن وجود دارد Notepad++، زیرا در این ویرایشگر متناز برجسته سازی کد استفاده می شود که هنگام ویرایش کد بسیار راحت است و می توانید فایل ها را در فرمت های مختلف ذخیره کنید. همچنین برنامه هایی وجود دارد که هنگام تایپ کد، نتیجه بلافاصله در فرم پردازش شده ظاهر می شود.

پس فقط باید باز کنیم Notepad++و فایل را با متن آزاد(می تواند خالی باشد)، اما در قالب html. برای انجام این کار، طبق معمول، بر روی فایل کتیبه کلیک کنید، سپس "save as" را انتخاب کنید و به دنبال بین باشید لیست بزرگپسوندها فایل زبان نشانه گذاری HyperText(پسوند فایل)". این در واقع همه چیز است. اولین خطوط را در مقاله بعدی با عنوان "ایجاد سایت از ابتدا" به این فایل اضافه می کنیم.

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

…

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

هر تگ در HTML معنای خاصی دارد و وظیفه نمایش داده های خاصی را بر عهده دارد. مورد حروف در نام تگ ها مهم نیست، مثلاً برچسب

…

و تگ کنید

…

- این همان است. یعنی تگ ها را می توان هم با حروف کوچک نوشت و هم حروف بزرگ. قبلاً پذیرفته شده بود که همه برچسب ها با حروف بزرگ بنویسند به طوری که برچسب ها متفاوت از متن ساده. اکنون این کار ضروری نیست، زیرا بسیاری از ویرایشگرها دارای برجسته سازی نحو هستند.

طبقه بندی برچسب

بیش از 90 تگ در HTML وجود دارد. به عنوان یک قاعده، یک تگ تنها بر بخشی از سند تأثیر می گذارد، به عنوان مثال، تگ عنوان سطح اول.

…

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

) اثر را ایجاد می کند و بسته شدن (

) آن را خاتمه می دهد. همانطور که از مثال می بینید، تگ بسته همیشه این کاراکتر را دارد ( / ) یک اسلش رو به جلو است. این برچسب ها نامیده می شوند جفت شده است.

برخی از برچسب ها در جایی که ظاهر می شوند یک اثر یکباره دارند. مثلا تگ کنید نوار افقی

---

یا تگ نمایش تصویر . چنین تگ هایی تگ پایانی ندارند. چنین برچسب هایی جفت نشده نامیده می شوند.

انواع برچسب

علاوه بر این، برچسب ها به چندین نوع تقسیم می شوند که در عملکرد آنها متفاوت است:

• برچسب های عنوان سند؛
• عناصر بلوک؛
• عناصر درون خطی؛
• عناصر جهانی؛
• لیست ها
• جداول;
• قاب ها

این تقسیم بندی سخت گیرانه نیست، بنابراین برخی از برچسب ها در آن هستند گروه های مختلف. به عنوان مثال، برچسب هایی برای ایجاد لیست

و
برای هر دو لیست و عناصر بلوک اعمال می شود.

ساختار برچسب

وقتی در مرورگر بارگذاری می شود، خود برچسب ها نمایش داده نمی شوند، اما بر نحوه نمایش محتوای آنها تأثیر می گذارند. اگر برچسبی غلط املایی داشته باشد، به طور کامل نادیده گرفته می شود.

همه تگ ها ساختار خاصی دارند که باید هنگام نوشتن رعایت شود. علاوه بر این، تقریباً همه برچسب ها دارای ویژگی های مختلفی هستند که می توانند نحوه نمایش محتوا را تغییر دهند.

بیایید نگاهی بیندازیم به ساختار صحیحبرچسب های حاوی ویژگی ها:

1. 
2. خودش مدیر وب

مثلا من دو تا دادم مطلقا برچسب های مختلف. اولین تک - مسئول نمایش تصاویر، ویژگی - src="logo.jpg". دومین …جفت مسئول ایجاد پیوندها است، ویژگی است href="سایت".

نتیجه گیری 1: ویژگی‌ها می‌توانند برچسب‌های جفت شده و جفت نشده داشته باشند.

نتیجه 2: ویژگی‌ها فقط می‌توانند تگ شروع داشته باشند، تگ‌های پایان هیچ ویژگی ندارند.

تصویر برای روشن شدن: