برای ساختار و قالب بندی متن، از برچسب ها استفاده می شود - کلمات کلیدی خاصی که در پرانتز قاب می شوند< и >. اکثر آنها دارای یک جفت بسته با علامت اسلش "/" قبل از نام تگ هستند. این به شما امکان می دهد بخش های خاصی از متن را علامت گذاری کنید. مثلا:

همانطور که در مثال مشاهده می کنید، برچسب ها در مرورگر نمایش داده نمی شوند، اما می توانند بر نمایش متن تأثیر بگذارند.

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

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

نحو و مکانیسم نمایش

به یاد بیاورید که یکی از عملکردهای موتور ارائه HTML 5 اطمینان از سازگاری استاندارد جدید با اسناد HTML/XHTML موجود است. این به دلیل وجود سه "حالت" (HTML5، XHTML5، DOM5 HTML) مفسر است که هر کدام از نحو خاص خود را پشتیبانی می کنند.

به طور کلی، استاندارد HTML اجازه می دهد تا برچسب ها در هر صورت تایپ شوند. شما همچنین می توانید برخی از تگ های بسته شدن (و اسلش در تگ های تکی) را حذف کنید. در HTML 5 این نیز معتبر است (Syntax ارائه HTML5)، اما چنین کدی با نحو XML/XHTML سازگار نخواهد بود و استفاده از فناوری های سازگار با XML مانند میکروفرمت ها را دشوار می کند. به همین دلیل، نوشتن کد با استفاده از نحو XHTML را توصیه می کنیم (سند در نمایش XHTML5 تفسیر می شود). بر این اساس، ارائه بیشتر انجام خواهد شد.

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

قانون تودرتو تگ

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

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

عناصر تودرتو فرزند نامیده می شوند و آنهایی که درون آنها قرار گرفته اند والدین نامیده می شوند. این یک ویژگی نسبی است، زیرا هر گره می تواند هم فرزند یکی و هم والد دیگران باشد. عنصر سطح بالا (بدون والدین) عنصر ریشه نامیده می شود.

ویژگی‌ها را تگ کنید

هر تگ باز (یا خالی) می تواند دارای ویژگی هایی باشد که برخی از ویژگی های اضافی کل عنصر را تعریف می کند. ویژگی ها بلافاصله بعد از نام تگ نوشته می شوند و با فاصله از آن و از یکدیگر جدا می شوند:

<а href="http://www.example.com/" target="_blank">ارتباط دادن

در این مثال تگ را مشخص کردیم (هایپرلینک) دو ویژگی. ما مقدار http://www.example.com/ را به اولین (href)، که مسئول آدرس پیوند است، اختصاص دادیم. مقدار _blank مشخصه target به این معنی است که وقتی روی پیوند کلیک می کنید، صفحه مشخص شده در href باید در یک تب جدید مرورگر باز شود.

برخی از ویژگی ها می توانند تنها یک مقدار معتبر و تنها دو حالت ممکن داشته باشند - زمانی که ویژگی در عنصر وجود دارد و بر این اساس، زمانی که وجود ندارد. در این درس، به این گونه صفات، به قیاس با متغیرهای ریاضی، Boolean می گویند. مقدار یک ویژگی Boolean معمولاً با نام آن یکی است. برای مثال، disabled="disabled" . به طور کلی، می توان آنها را حذف کرد و فقط نام ویژگی را مشخص کرد (اصطلاحات اختصاری). با این حال، برای سازگاری با نحو XHTML/XML، مقادیر همچنان مورد نیاز است. علاوه بر این، همه نام‌های مشخصه باید با حروف کوچک تایپ شوند و مقادیر آنها باید در گیومه‌های دوتایی محصور شود، اگرچه HTML 5 چنین محدودیتی را اعمال نمی‌کند.

توصیه نمیشود:
توصیه شده:

نمادهای خاص

اما اگر نیاز به استفاده از دو نقل قول در مقدار ویژگی داشته باشید، چه؟ یا در متن سند - یک براکت مثلثی؟ بالاخره معلوم نیست کدام یک از نقل قول ها صفت را می بندد و کدام به مقدار آن اشاره دارد و آیا پرانتز ابتدای تگ است یا یک علامت ریاضی "کمتر از" است؟ در این، و همچنین در بسیاری از موارد دیگر، کاراکترهای خاص HTML به کمک می آیند.

کاراکترهای ویژه در HTML با استفاده از یادداشت های تفسیر شده توسط مرورگر پیاده سازی می شوند. به عنوان مثال، یک مظنه مضاعف (") را می توان با کد " , و یک علامت یورو (€) با یورو به خروجی داد. همه کدهای یادگاری با علامت علامت (&) شروع می شوند و با نقطه ویرگول (;) به پایان می رسند. برای جلوگیری از اشتباه گرفتن علامت علامت معمول در متن با ابتدای کد یادگاری، باید همیشه با کد & خروجی داده شود. حتی کاراکترهای UTF-8 را می توان با استفاده از یادداشت ها نمایش داد. چنین کدهای یادگاری شبیه xxx هستند. ، جایی که xxxx با کد اعشاری کاراکتر در رمزگذاری UTF-8 جایگزین می شود. به عنوان مثال، © به صورت "©" ظاهر می شود. بسیاری از کاراکترهای UTF-8 مشابه هایی در قالب کدهای یادگاری متنی دارند. همان نماد " " را می توان به این صورت تعیین کرد: .

9 نظر

جایی خواندم که مشخصه target="_blank" برای استفاده زیاد مناسب نیست، آیا استانداردی را نقض می کند؟ من خواندم که توسعه دهنده نمی تواند برای کاربر تصمیم بگیرد که چگونه یک پیوند (در یک برگه جدید یا در همان تب) باز کند، مهم نیست چقدر خوب است. دوست دارم نظر شما را بدانم. ویژگی target="_blank" در استاندارد XHTML گنجانده نشده است. برای حفظ اعتبار صفحات XHTML، مقدار هدف (البته در صورت لزوم) با استفاده از جاوا اسکریپت جایگزین می شود. در HTML این یک ویژگی کاملا معتبر است و نیازی به چنین ترفندهایی نیست.

با توجه به مصلحت آن، من موافقم که نباید از آن سوء استفاده کرد، زیرا اکثر کاربران راهی برای باز کردن هر پیوند در یک برگه جدید می دانند و دکمه "بازگشت" همیشه در دسترس است. و با این حال، بدون target="_blank" تا حدی احتمال از دست دادن کاربری وجود دارد که "فراموش کرده است" برگردد، در حالی که با آن احتمال خشم عادلانه همان کاربر وجود دارد. معلوم می شود یک شمشیر دو لبه است.

در عمل من، به عنوان یک قاعده، من از این ویژگی فقط برای پیوندهای اضافه شده توسط کاربران (به عنوان مثال در نظرات) استفاده می کنم. انتقالی که هنگام تهیه مقاله برنامه ریزی نشده بود. و همچنین در شرایطی که واقعاً لازم است: به عنوان مثال، در صفحاتی که کاربر می تواند در لحظه کلیک کردن یک ویدیو بارگیری کند، به رادیو گوش دهد، چت و غیره.

به نظر می‌رسد در HTML 5 است که می‌توانید تگ‌های جفت شده را در صورتی که با تگ دیگری دنبال می‌شوند، باز بگذارید. مانند، در لیست ها، برچسب li اکنون می تواند باز بماند. کاترینا، شما می توانید، بله. و در HTML 4 نیز. در این صورت مرورگرها باید خودشان آنها را ببندند. با این حال، در برخی موارد (به عنوان مثال IE9) این کار را به اشتباه انجام می دهند، که منجر به خطاهای طرح بندی می شود که تشخیص آن چندان آسان نیست. تجزیه کننده های XML (اگر نیاز به استفاده از آنها وجود داشته باشد) به احتمال زیاد بر سر این رنک می افتند. اما به طور کلی، هیچ مزیتی از چنین صرفه جویی در کد وجود ندارد. به نظر من باز هم بهتر است تگ ها را ببندیم. کسانی که در HTML 5 کدنویسی می کنند، چندان به IE اهمیت نمی دهند. بسیاری از ویژگی های HTML5 را پشتیبانی نمی کند -- مقایسه مرورگر ویکی پدیا (HTML5). و در htmlbook.ru لیستی از برچسب هایی وجود دارد که مجاز به رد شدن هستند - http://htmlbook.ru/samhtml5/sintaksis-html5

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

متشکرم، نگاهی خواهم انداخت) با تشکر از افشاگری! مواد عالی، قطعا ارزش استفاده را دارد.

وزارت آموزش و پرورش جمهوری بلاروس

دانشگاه فنی ملی بلاروس

دپارتمان مبانی کسب و کار

گزارش کار آزمایشگاهی شماره 1

"ساختار یک سند ابرمتن"

در رشته "فناوری اطلاعات"

تکمیل شده توسط: student gr 105032 Bychko E.V.

پذیرفته شده توسط: معلم Dashkevich N.V.

کار آزمایشگاهی شماره 1

ساختار یک سند ابرمتن

هدف کار:کسب مهارت های اولیه در ایجاد اسناد اینترنتی ساده؛ یاد بگیرید که چگونه صفحات وب ایجاد شده را قالب بندی کنید.

تکمیل کار

وظیفه 1. ایجاد ساختار فایل

با استفاده از ابزارهای Explorer، ساختار فایل نشان داده شده در شکل 1 در پوشه کاری من ایجاد شد. 1.1.

برنج. 1.1. ساختار فایل

وظیفه 2. ایجاد یک سند HTML

با استفاده از برنامه Notepad، یک سند HTML ایجاد کنید، که وقتی در مرورگرها مشاهده می شود، متن "محتوای نوار عنوان" را در نوار عنوان پنجره نمایش می دهد و متن "این چیزی است که سند HTML به نظر می رسد" در صفحه نمایش داده می شود. منطقه اصلی در شکل 2.1. سند HTML ارائه شده است.

برنج. 2.1. سند HTML

مشاهده یک سند در یک مرورگر در شکل 2.2 نشان داده شده است.

برنج. 2.2. سند در مرورگر

وظیفه 3. تغییر سند HTML

لازم است سند را به گونه ای تغییر دهید که هنگام مشاهده در مرورگر، متن "نمای عمومی سند html" در نوار عنوان نمایش داده شود و متن در قسمت اصلی سند نمایش داده شود:

"در اینجا چند راه برای کار وجود دارد:

که به آن مسلط خواهیم شد:

تقسیم متن

تراز متن

ایجاد هدر

کار با جداول."

ساختار سند HTML در شکل 3.1 نشان داده شده است.

برنج. 3.1. سند HTML

سند را در مرورگر مشاهده کنید (شکل 3.2).

برنج. 3.2. سند در مرورگر

کنترل سوالات

فرامتن چیست؟

ساختار یک سند HTML ساده چیست؟

ساختار ساده ترین سند HTML به شرح زیر است:

متن اول در صفحه

چگونه شروع یک پاراگراف متنی را تنظیم کنیم؟

برای تنظیم پاراگراف اولیه، باید از یک تگ جفت استفاده کنید - ابتدا و انتهای پاراگراف.

نشانه گذاری فرامتن با استفاده از HTML چیست؟

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

برچسب های جفت نشده چه تفاوتی با تگ های جفت دار دارند؟

تگ های HTML را می توان جفت یا غیر جفت کرد. تگ‌های جفت‌نشده اثری در سراسر سند دارند یا در جایی که درج می‌شوند یک اثر یک‌باره دارند. هنگام استفاده از تگ های جفت شده، تگ های باز و بسته به سند اضافه می شود که بر بخشی از سند که بین آنها محصور شده است تأثیر می گذارد.

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

…

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

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

…

و تگ کنید

…

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

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

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

…

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

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

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

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

---

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

انواع برچسب

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

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

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

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

ساختار برچسب

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

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

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

1. 
2. وب مستر خودتان

به عنوان مثال، من دو تگ کاملاً متفاوت دادم. اولین تک - مسئول نمایش تصاویر، ویژگی - src=”logo.jpg”. دومین … paired مسئول ایجاد پیوندها است، ویژگی است href=”وب سایت”.

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

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

تصویر برای روشن شدن مطلب:



سلام! خوب، آیا صفحه اول خود را ساخته اید؟ آفرین! حالا بیایید در مورد برچسب ها صحبت کنیم: آنها چیست و چرا به آنها نیاز است.

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

هر برچسب، صرف نظر از هدف و مکان آن، بین نمادها قرار می گیرد < و > ، به ترتیب در ابتدا و انتهای تگ قرار دارد.

مثال:

برچسب های جفت شده

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

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

تگ های تک HTML

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

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

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

---

, .

خط
خط بعدی

اگر جایی مانند این فرمت برای ضبط یک تگ می بینید
، سپس بدانید که در نسخه های قبلی HTML اینگونه نمایش داده می شد. اما اکنون که HTML 5 ظاهر شده است، اسلش ضروری نیست.

ویژگی های تگ HTML

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

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

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

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

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

......

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