برچسب بسته شدن:

محتوای بین تگ های باز و بسته، محتوای عنصر است.

برچسب ها به دو صورت قابل استفاده هستند:

استفاده از تگ ها به صورت جفت

تگ های جفت شده حاوی یک تگ باز و بسته هستند. در اینجا ظاهر آنها به شرح زیر است:

اینم چند متن

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

تگ های تکی

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

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

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

ویژگی های

ویژگی ها عناصری هستند که تگ ها را گسترش می دهند اطلاعات اضافی. این ویژگی در تگ افتتاحیه قرار می گیرد و شامل یک نام و یک مقدار است.

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

تگ 'HTML' در بالا دارای ویژگی 'lang' با مقدار 'en-US' است.

ساختار سندHTML

هر سند HTML دارای یک ساختار اساسی است که با آن تعریف شده است موارد زیر:

DOCTYPE یاDTD:اعلان نوع سند، نسخه HTML در حال استفاده را مشخص می کند. این تگ در ابتدای سند قرار می گیرد.

HTML:جفت کردن تگ های HTMLابتدا و انتهای یک سند HTML را تعریف می کند.

فصلسرتیتر< سر>:این بخش تعریف می کند اطلاعات کلیبرای صفحه، و معمولاً کوتاه است. محتوای این عنصر در صفحه نمایش داده نمی شود. عنوان حاوی تگ TITLE است که عنوان سند نمایش داده شده در نوار عنوان مرورگر را مشخص می کند. HEADER همچنین می‌تواند حاوی ابرداده یا پیوندهایی به فایل‌های خارجی باشد.

فصلبدن: این بخش شامل بدنه اصلی صفحه است. محتوای آن در مرورگر نمایش داده می شود. بیشتر کد صفحه HTML داخل عنصر بدنه است.

رمزگذاری:این تگ رمزگذاری مورد استفاده در سند HTML را مشخص می کند. رمزگذاری نحوه ذخیره فایل و نحوه نمایش آن را مشخص می کند. نمادهای خاص. مقدار پذیرفته شده عمومی برای این تگ UTF-8 است که تقریباً همه کاراکترهای زبان را امکان نمایش می دهد.

صفحه سادهHTML

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

مرحله 1:اولین خط کد HTML برای اضافه کردن، عنصر DOCTYPE را به عنوان "html" مشخص می کند. این بدان معناست که آخرین نسخه HTML در حال استفاده است.

مرحله 3:سپس یک تگ عنوان با تگ عنوان و اطلاعات مجموعه کاراکتر اضافه می کنیم.

مرحله 4:پس از آن تگ BODY نوشته می شود.

مرحله 5:اکنون سند خالی HTML آماده است. بیایید شروع به اضافه کردن متن برای نمایش کنیم. یک تگ عنوان اضافه می کنیم

و تگ کنید

آنها عنوان سطح اول و پاراگراف زیر آن را تعریف می کنند.

سلام دنیا

صفحه HTML ساده

صفحه اصلی HTML آماده است و می‌توانیم آن را در پوشه دلخواه خود ذخیره کنیم.

نمای صفحهHTML

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

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

عنوانی مانند «سلام دنیا»

عنوان سطح اول به عنوان "Hello World"

پاراگراف با متن "صفحه HTML ساده"

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

قالب بندی متن پیشرفته

HTML عناصر خاصی را برای قالب بندی متن خاص فراهم می کند.

سطوح عنوان را می توان با استفاده از برچسب ها تنظیم کرد

-

. در مجموع 6 سطح عنوان وجود دارد. و

- این بزرگترین آنها در اندازه است،

- کوچکترین.

برچسب ها

برای نشان دادن شروع یک پاراگراف جدید استفاده می شود. مرورگر معمولاً یک خط خالی بین دو پاراگراف اضافه می کند.

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

پررنگ -

مورب -

زیرخط دار -

فونت -

لیست کامل این برچسب ها در اینجا موجود است.

افزودن لینک ها

این متن پیوند است

افزودن تصاویر

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

ویژگی src مکان تصویر را مشخص می کند.

ویژگی style گزینه های زیادی از جمله عرض و ارتفاع تصویر بر حسب پیکسل دارد.

ویژگی alt می دهد توضیح کوتاهتصاویر. اگر به دلایلی تصویر بارگیری نشود استفاده می شود.

افزودن عنوان

برچسب بزنید

برای HTML5 جدید است و بالاترین عنصر یک صفحه وب را مشخص می کند. سرفصل ها معمولا حاوی آرم شرکت هستند، اطلاعات تماس، پیوندهای پیمایش و غیره. می تواند چندین عنصر در یک سند وجود داشته باشد<>.

مفاهیم پیشرفته در HTML

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

ما به چند مفهوم اشاره می کنیم که بیشتر به شما کمک می کند. می توانید به یادگیری بیشتر ادامه دهید و از HTML پیشرفته و ویژگی های آن استفاده کنید.

اعتبار سنجی کد HTML

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

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

اضافه کردن برچسب های اضافی

تگ‌ها و ویژگی‌های HTML بسیار بیشتر از آنچه در اینجا بحث کردیم وجود دارد. دو منبع یادگیری خوب w3schools و HTML Dog هستند که آموزش های بیشتری دارند و لیست کاملبرچسب ها

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

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

الحاقیهCSS وجاوا اسکریپت

از CSS می توان برای بهبود سریع استفاده کرد ظاهرسایت شما. شما می توانید از CSS برای اضافه کردن رنگ ها، فونت ها و تغییر مکان عناصر استفاده کنید. با صحافی میز سبک های cssبه یک صفحه HTML، می توانید سبک کل متن را تغییر دهید.

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

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

به طور کلی زمان مطالعه پایه را تخمین می زنم htmlمانند 2-8 ساعت، بقیه اختیاری است. و البته زمان مطالعه بستگی به علاقه دارد. توصیه می کنم آن را به چند روز 20 تا 30 دقیقه ای تقسیم کنید.

شما آماده ای؟ پس بیا بریم!

ما برای ایجاد یک صفحه در html نیازی به اتصال به اینترنت نداریم.

ما نیاز داریم

1) انتخاب کنید ویرایشگر متن . برای اولین بار کافی است دفترچه یادداشت(در آن فقط به دستور نیاز داریم ذخیره به عنوان)

اگر می خواهید بلافاصله برنامه نویسی را در ویرایشگرهای متن تخصصی شروع کنید، به موارد زیر توجه کنید: 1) برای پنجره ها NotePad++(دانلود یا ) بی نوع(دانلود) 2) برای مکو لینوکس ویرایشگر ماهی آبی(دانلود) تفاوت آنها با ویرایشگرهای متن معمولی عمدتاً در این است که آنها تورفتگی خودکار را انجام می دهند، ! امکان ذخیره مجدد فایل در یک رمزگذاری متفاوت (توجه داشته باشید که در آینده با آن مواجه خواهید شد)، برچسب ها را در رنگ های مختلف مانند کد پایین درس نقاشی کنید. در یک ویرایشگر معمولی، یک رنگ خواهد بود.

2) هر مرورگر اینترنتی مانند اینترنت اکسپلورر برای ویندوز یا سافاریبرای Mac OS X و iOS. بله، شما نیز می توانید موزیلا, گوگل کروم , اپرا, Yandexو ایمیلمرورگرها و غیره

بیایید شروع به ایجاد یک صفحه HTML کنیم

1) یک پوشه در دسکتاپ ایجاد کنید html. ما این کار را انجام خواهیم داد تا دروس ساختار یافته و در یک مکان گنجانده شوند.

2) ایجاد کردنفایل ما در یک ویرایشگر متن مانند Notepad. به علاوه ذخیره به عنوان.

رمزگذاری بهتر است UTF-8 را انتخاب کنید، سپس انتخاب کنید انواع فایل هاو به عنوان مثال یک نام فایل با .html در پایان انتخاب کنید index.html

ما به عنوان یک پوشه (پوشه) انتخاب می کنیم که در آن ذخیره شود html
کلیک صرفه جویی. آماده!

این سوال اغلب در مورد چیست پرسیده می شود پسوند فایل قابل مشاهده نیست. بیایید آن را به ترتیب در نظر بگیریم

دیدن پسوندهای فایل می تواند به تعیین دقیق نوع فایل کمک کند و به شما امکان می دهد به صورت دستی (با دستور تغییر نام دهید) نه تنها پسوند، بلکه نوع فایل را نیز تغییر دهید (به عنوان مثال، از txt به html)

نباید به این شکل باشد: عکس، سند متنی، بازی اینطوری باید به نظر برسد: photo.jpg; text document.txt; game.exe اما اگر نام فایل شما همچنان مانند گزینه اول است (بدون مثال، txt .; jpg؛ .exe در انتهای نام فایل)، موارد زیر را انجام دهید: ما به تنظیمات فایل ها و پوشه ها نگاه می کنیم: برای ویندوز XPباز کردن هر پوشه ای - ابزارها (در بالای پنل) - گزینه های پوشه - مشاهده - پنهان کردن پسوندهای فایل های ثبت شده (انتخاب علامت) - اعمال برای ویندوز 7باز کردن هر پوشه - سازماندهی - گزینه های فایل و جستجو - مشاهده - مخفی کردن پسوندها برای انواع فایل های ثبت شده (علامت را بردارید) - اعمال کنید برای سیستم عامل مکروی دسکتاپ کلیک می کنیم - Finder - Preferences (تنظیمات) - Advanced (Advanced) - کادر را در Show all extensions file (نمایش پسوند همه فایل ها) علامت بزنید - Apply

3) کل کد (همراه با نظرات) را در زیر بچسبانید:

عنوان صفحه من

4) فایل را باز کنید می توانید مرورگر دیگری را برای باز کردن این فایل انتخاب کنید، برای این کار دکمه سمت راست ماوس را روی فایل خود فشار می دهیم index.html - برای باز کردن باو یک مرورگر را از لیست انتخاب کنید، به عنوان مثال، اینترنت اکسپلورر، گوگل کروم، موزیلا، مرورگر Yandex و غیره.

در نتیجه با باز کردن مرورگر اینترنت، نتیجه می شود index.html، باید صفحه ای مانند این را ببینید:

تصویر 1.

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

عنوان صفحه من

این اولین صفحه وب من است!

در کد زیر می توانید حداقل پایه یک سند html را مشاهده کنید. باید آن را یاد گرفت و در جاهایی با باز کردن و بستن تگ ها اشتباه نگرفت.

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

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

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

هر عنوانی

فقط پیامک بده

متن در یک پاراگراف با نوشته خواهد شد خط جدیدو با یک تگ پایانی پایان دهید

متن دیگر

تقریبا تمام تگ ها در HTML باز و بسته شدن(مثلاً یک استثناء تگ img است که به معنای درج تصویر است).

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

من می خواهم متن را برجسته کنم پررنگ و این یکی به صورت مورب

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

من می خواهم متن را برجسته کنم پررنگ و این یکی به صورت مورب

همانطور که می بینید، متن تا انتها درشت خواهد بود و متنی که قرار بود ایتالیک باشد، هم درشت و هم کج خواهد بود. خیلی مراقب باش!

5) اگر می خواهید چیزی را در فایل خود ویرایش کنید index.html(و اکنون به طور پیش فرض فقط توسط مرورگر باز می شود)، سپس دکمه سمت راست ماوس را روی فایل خود فشار می دهیم index.html- انتخاب کنید برای باز کردن باو از لیستی که قبلاً یک ویرایشگر متن را انتخاب کرده ایم، یکی خواهد بود دفترچه یادداشت، یا ویرایشگر متن دیگری که نصب کرده اید.

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

تبریک می گویم!
آیا آسان است؟)

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

ساختار اصلی HTML
بیایید نهایی را ایجاد کنیم html سادهسند برای انجام این کار، یک پوشه در رایانه ایجاد کنید. اسمش رو هر چی میخوای بذار وارد آن می شویم، کلیک کنید کلیک راستموش توسط میدان خالیو New > Text Document را انتخاب کنید. سند متنی ایجاد شده را باز کنید و منوی بالا"File" > "Save As..." را انتخاب کنید. در کادر محاوره ای که باز می شود، در خط "نام فایل" می نویسیم index.htm. در خط "Encoding"، UTF-8 را انتخاب کنید و روی "ذخیره" کلیک کنید. ما یک فایل ایندکس خواهیم داشت که تمام کدهای HTML را در آن وارد می کنیم.

حالا کد زیر را کپی کرده و در فایل پیست کنید فهرست مطالب. مهم! شما باید این فایل را با یک ویرایشگر خاص باز کنید. من معمولا از Notepad استفاده می کنم. برای این کار روی فایل مورد نظر راست کلیک کنید فهرست مطالبو "Open With..." > "Notepad" را انتخاب کنید. ویرایشگرهای ویژه دیگری با برجسته کردن نشانه گذاری وجود دارد. کی راحت تره پس از آن با فشردن کلیدهای Ctrl + S تغییرات خود را ذخیره می کنیم و پس از آن روی ایندکس دوبار کلیک می کنیم. اولین صفحه وب ایجاد شده ما در مرورگر باز می شود.

اولین صفحه وب من

این اولین صفحه وب من است

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

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

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

عناصر مورد نیاز یک سند XHTML
در زبان XHTML، بیشتر نسخه جدید HTML، یک عنصر دیگر برای صفحات وب ایجاد شده مورد نیاز است - تگ. برای نشان دادن نوع سند فعلی - DTD (تعریف نوع سند، شرح نوع سند) در نظر گرفته شده است. این لازم است تا مرورگر بداند چگونه صفحه وب فعلی را تفسیر کند. این تگ در بالای فایل ظاهر می شود و سند HTML فعلی را مطابق با الزامات XHTML (یا مطابق با مشخصات XHTML) شناسایی می کند. اگر در حال ایجاد یک سند سازگار با XHTML هستید، ممکن است چیزی شبیه به این باشد:

صفحه XHTML من این اولین صفحه XHTML من است.

این برچسب دارای سه طعم است: Strict، Transitional و Frameset. در بالای سند HTML، شما اعلام می کنید که می خواهید از کدام یک استفاده کنید.

سخت گیرانهفقط در صورتی از این تغییر تگ استفاده کنید که مطمئن باشید همه بازدیدکنندگان صفحه وب شما از مرورگرهای وب جدیدتری استفاده می کنند که می توانند برگه های سبک را به درستی تفسیر کنند. نوع Strict به شکل زیر است:

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

مجموعه فریمهنگام کار با قاب از این تنوع استفاده کنید.

به تفاوت دیگر کدهای XHTML با کدهای معمولی توجه کنید. اسناد HTML: تگ دارای سه ویژگی جدید است: xmlns، xml:lang و lang. چه زمانی برنامه های کاربردی HTMLشما فقط باید یک برچسب برای شناسایی فایل به عنوان یک سند HTML اضافه کنید، اما در این مورد، باید یک ویژگی xmlns اضافه کنید که سند را به تعریف W3C از XHTML متصل می کند، که هنوز در حال تکامل است. در حال حاضر، به یاد داشته باشید که برچسب و تگ کامل را در تمام صفحات وب خود قرار دهید.

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

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

برای همه تگ ها از حروف کوچک استفاده کنید. برای ضبط مرورگر

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

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

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

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

یک سلسله مراتب تگ تودرتو وجود دارد. مثلا تگ کنید

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

سه حالت برای تگ پایان وجود دارد: Required، Not Required یا Not Required. تگ پایان مورد نیاز باید همیشه وجود داشته باشد، در غیر این صورت هنگام ارائه سند با خطا مواجه می شود. برای برخی از تگ ها اصلاً تگ پایانی وجود ندارد. یک تگ بسته اختیاری نشان می دهد که توسعه دهنده می تواند آن را اضافه یا حذف کند، این منجر به خطا نمی شود. با این حال، توصیه می شود همه را ببندید برچسب های مشابه، از جمله موارد اختیاری، کدهای هماهنگ و سختگیرانه تر ایجاد می کند که به راحتی قابل تغییر است.

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

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

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

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

مبانی HTML

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

از تگ های شروع و پایان برای نشان دادن جایی که این عنصر شروع و به پایان می رسد استفاده می شود. به نظر می رسد این است.

<открывающий тег>محتوا

همانطور که می بینید، تنها تفاوت بین تگ باز و بسته "/" است.

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

همچنین به یاد داشته باشید که ساختار زبان HTMLسلسله مراتب خاص خود را دارد. در غیر این صورت به آن تودرتو می گویند. از همه مهمتر است زیرا بقیه در درون آن هستند.

HTML دو تا دارد عنصر کودک:

• ... ;
• .. .

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

مهمتر از همه، اینجا هیچ محتوایی وجود ندارد.

قسمت BODY محتوای سندی را مشخص می کند که به کاربر نمایش داده می شود.

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

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

چگونه یک صفحه HTML ساده ایجاد کنیم

برای نوشتن کد، به نوعی ویرایشگر نیاز دارید. تعداد زیادی از آن ها وجود دارد. Notepad++ و Adobe Dreamweaver محبوب هستند. از Notepad نیز می توان استفاده کرد.

این همان چیزی است که ویرایشگر Notepad ++ به نظر می رسد.

این خیلی ویرایشگر راحتو در عین حال رایگان Adobe Dreamweaver فوق پرداخت می شود. تفاوت بین ویرایشگرهای طراحی شده برای نوشتن و دفترچه یادداشت در این است که برچسب های ویژه برجسته می شوند. اگر برجسته نشده باشد، اشتباه نوشته اید.

برای اینکه هایلایت با زبان مطابقت داشته باشد، باید در تنظیمات مشخص شود.

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

نحوه ایجاد یک صفحه وب در HTML Notepad

ابتدا دفترچه یادداشت را باز کنید.

سپس آنچه در تصویر زیر نشان داده شده است را در آن تایپ کنید.

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

پس از آن، فایل را می توان در مرورگر باز کرد و نتیجه را تحسین کرد. اکنون باید بتوانید نحوه ایجاد یک صفحه وب در HTML Notepad را درک کنید.

کنسرسیوم جهانی W3C

سازمانی مانند W3C وجود دارد که تمام استانداردهای اینترنت را توسعه داده و اجرا می کند. همه مرورگرها از این استانداردها تبعیت می کنند و علامت گذاری صفحه (کدها) را طبق این قوانین پردازش می کنند.

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

آیا می توانید فکر کنید قوانین چه می تواند باشد؟ همه برچسب های توصیف شده توصیه های خاص خود را دارند. چندین مورد از آنها وجود دارد:

• برچسب اختیاری
• ممنوع.
• برچسب خالی
• منسوخ شده
• گمشده.

برچسب ها در HTML

قبل از ایجاد یک صفحه HTML، باید بفهمید که چه چیزی باید در قسمت سرویس HEAD باشد.

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

بیایید به بخش BODY برویم. عناصری هستند که در مرورگر نمایش داده می شوند و نمایش داده نمی شوند. به عنوان مثال، نظرات به کاربر نمایش داده نمی شود. اگر در یک تیم کار می کنید، می توان از آنها برای یادداشت یا به عنوان یک اشاره به سایر کارمندان استفاده کرد.

به عنوان تعیین می شوند

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

نمونه ای از این تودرتو:

ادامه کامنت اول -->

نتیجه در مرورگر به صورت زیر خواهد بود

ادامه کامنت اول -->

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