سلام! در این درس، اگر از قبل با شکل‌گیری ساختار یک سند HTML آشنا باشید، هیچ چیز مفیدی برای خود پیدا نمی‌کنید. برای کسانی که آشنا نیستند، ساختار HTML صحیح (معتبر) یک سند وب، از جمله برای یک سایت وردپرس را نشان خواهم داد.
ساختار صحیح کلی یک سند HTML
اول از همه، بدون پیشگفتار طولانی - ساختار کلی هر سند HTML باید به شرح زیر باشد:
/ * نوع DTD فعلی را نشان می دهد * / / * شروع سند را نشان می دهد * / / * شروع عنوان (سرصفحه) را نشان می دهد * /
تست/ * عنوان را نشان می دهد * // * شروع عنوان را نشان می دهد * / / * شروع متن اصلی سند (بدنه) را نشان می دهد * / / * محتوای سند * // * انتهای متن اصلی سند را نشان می دهد * // * انتهای سند را نشان می دهد * /
اگر توضیحاتی را که بعد از هر تگ نشان دادم حذف کنیم، ساختار ساده یک سند HTML به این شکل است.
تست
نوع سند فعلی DTD
نوع سند فعلی ( تعریف نوع سند، DTD) برای مرورگر برای درک نحوه تفسیر صفحه وب فعلی ضروری است، زیرا HTML در چندین نسخه وجود دارد.
علاوه بر این، زبان های نشانه گذاری دیگری غیر از HTML مانند XHTML وجود دارد.
توجه داشته باشید: XHTML زبان نشانه گذاری فرامتن توسعه پذیر است که ما آن را به عنوان زبان نشانه گذاری فرامتن توسعه یافته ترجمه می کنیم.
XHTML شبیه HTML است، اما در نحو متفاوت است. برای جلوگیری از گیج شدن زبان ها توسط مرورگر و باید آن را در خط اول کد، نوع سند فعلی DOCTYPE نشان دهید.
مفهوم برچسب در HTML
شما متوجه شده اید که کل ساختار یک سند HTML با برچسب های خاصی تعریف می شود - کلمات خاصی که در پرانتزهای زاویه ای محصور شده اند.
کلمه ای که در یک سند HTML در داخل پرانتز قرار می گیرد، تگ نامیده می شود. هر تگ معنای خاص خود را دارد که توسط قوانین نشانه گذاری تعریف شده است.
- تگ به معنای سر سند html است. تگ های head اطلاعات را برای مرورگرها و موتورهای جستجو ذخیره می کنند. از جمله در قالب متا تگ.
- تگ به معنای محتوای اصلی سند html است. یعنی متن، تصاویر، جاوا اسکریپت و غیره.
- تگ [p] یک عنصر بلوک است، همیشه از یک خط جدید شروع می شود. به معنای پاراگراف محتوای اصلی یک سند html است.
مهم! همه تگ های html باید جفت شوند. یعنی تگ افتتاحیه<тег>، باید با برچسب بسته شدن، با اسلش رو به جلو بسته شود .
برچسب های عنوان و زیر عنوان H1-h6
برای بهبود ساختار متن سند و همچنین بهبود سئوی صفحات وب، تگ های محتوای اصلی اضافی وجود دارد. به آنها تگ های سرفصل و فرعی از h1 تا h6، در مجموع 6 می گویند.
آنها، مانند تگ‌های [p] -paragraph، که به شما امکان می‌دهند بخش‌های معنایی متن را برجسته کنید، به شما امکان می‌دهند متن را به مقدرات معنایی تقسیم کنید و به هر بخش عنوان خاص خود را بدهید.
برچسب ها h1—h6دارای وابستگی فرعی هستند، سطح پایین تر این تابع پاراگراف است.
مهم است که توجه داشته باشید که شکستن وابستگی برچسب های فرعی h1—h6—پنمایش و اعتبار سند را مختل نمی کند، بلکه فقط بهینه سازی آن را برای موتورهای جستجو بدتر می کند.
نمونه ای از ساختار سند توسعه یافته HTML
در اینجا یک مثال آکادمیک از ساختار سند HTML پیشرفته تر آورده شده است:
تست
عنوان اصلی
عنوان اصلی
عنوان فرعی اول
عنوان اصلی
عنوان فرعی دوم
عنوان فرعی اول
ساختار HTML 5
HTML 5 باید ساختار سند زیر را داشته باشد:
این یک اعلامیه است که نشان می دهد این سند در HTML5 چیست؟;
این عنصر اصلی صفحه HTML است.
عنصر با متا تگ در مورد سند.
این عنصر عنوان سند را مشخص می کند.</p><p><body>این عنصر حاوی محتوای قابل مشاهده صفحه است.</p><p><h1>عنصر یک عنوان بزرگ را تعریف می کند</p><p><p>عنصر یک پاراگراف را تعریف می کند.</p><p>با تگ های html5 h2 - h6 کار کنید</p><p><i>همه برچسب ها دو برابر هستند. تگ شروع را تگ شروع و تگ پایان را تگ پایان می نامند.</i></p><h2>نشانه گذاری HTML در سایت وردپرس</h2><p>علیرغم اینکه اسکریپت وردپرس به زبان php نوشته شده است، تمامی فایل های سایت یا بهتر است بگوییم تمامی فایل های قالب سایت در حال کار دارای نشانه گذاری html هستند. بیایید به یک مثال در فایل header.php الگو نگاه کنیم <b>بیست و هفده</b>:</p><p> <?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?>class = "no-js no-svg"> <head>
<meta charset="<?php bloginfo("charset"); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<?php _e("Skip to content", "twentyseventeen"); ?>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part("template-parts/header/header", "image"); ?>
<?php if (has_nav_menu("top")) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part("template-parts/navigation/navigation", "top"); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
if ((is_single() || (is_page() && ! twentyseventeen_is_frontpage()))
&& has_post_thumbnail(get_queried_object_id())) :
echo "<div class="single-featured-image-header">"; echo get_the_post_thumbnail (get_queried_object_id ()،" twentyeventeen-featured-image "); echo</div><!-- .single-featured-image-header -->"; endif;؟> <div class="site-content-contain">
<div id="content" class="site-content">
</p><p>می‌توانید ببینید که اگر همه عملکردهای وردپرس در نشانه‌گذاری کلاسیک HTML میزبانی شوند. یک نوع سند وجود دارد:<!DOCTYPE html></p><p>برچسب های جفت شده،</p><p>برچسب باز کردن</p><p>تگ بسته شدن را می توان در فایل footer.php پیدا کرد.</p><h2>نحوه مشاهده کد HTML یک صفحه در سایت وردپرس</h2><p>آنچه در ویرایشگر سایت می نویسید، ایجاد مقاله یا صفحات، تنها بخشی از صفحه HTML سایت است. حتی کل بدنه صفحه هم نیست.</p><p>برای مشاهده کد HTML یک صفحه در یک سایت وردپرس، که اغلب مورد نیاز است، شما نیاز دارید:</p><p>صفحه را در مرورگر باز کنید؛</p><p>جابجایی به فونت صفحه کلید انگلیسی؛</p><p>دکمه های زیر را فشار دهید:</p><ul><li>کروم: Ctrl + U</li><li>Opera: Ctrl + U</li><li>موزیلا: Ctrl + U</li>
</ul><p>شاید هنوز ندانید چرا به آن نیاز دارید. باور کنید، این بیش از یک بار برای تجزیه و تحلیل سایت شما و احتمالاً سایت های رقبا مورد نیاز است.</p><h2>نتیجه</h2><p>در پایان، من می خواهم یک نتیجه گیری کنم، اما فقط این فکر به ذهن خطور می کند که مقاله کاملاً برای مبتدیان معلوم شد. در نگاه اول، تفاوت زیادی بین کد نمونه مقاله و نمونه هایی از سایت های واقعی وجود دارد. با این حال، تمام فایل‌ها ساختار یکسانی با سند HTML دارند و بسیار مهم است که هنگام کار با سایت، این ساختار نقض نشود.</p>
<i>
</i><p>اکنون زمان آن است که به یک سند ساده HTML به عنوان مثال نگاه کنید. ما یک کد می نویسیم که نتیجه آن خروجی عبارت "Hello, World!" در پنجره مرورگر است. (به معنای واقعی کلمه از انگلیسی ترجمه شده است - "سلام، جهان!"). به طور معمول، این تمرین کدنویسی اولین تجربه در هنگام یادگیری یک زبان جدید است. این فرمول مسئله توجه دانش آموز را به چند نکته کلیدی زبان برنامه نویسی (در مورد ما، زبان نشانه گذاری) جلب می کند، که اصلی ترین آنها ساختار اصلی برنامه (در مورد ما، صفحه وب) است.</p>
<h2>doctype</h2>
<!DOCTYPE html>
<html>
</html>
<p>این عنصر را عنصر ریشه نیز می نامند، زیرا تمام عناصر دیگر سند در آن قرار دارند. عنصر ریشه فقط می تواند دو فرزند داشته باشد: <head>و <body>.</p>
<h2>عنصر سر</h2>
<p>عنصر <head>محفظه ای برای عناصر دیگر است که اطلاعاتی درباره یک سند ارائه می دهد که به عنوان ابرداده شناخته می شود. این ابرداده به مرورگر در مورد مکان اسکریپت ها و شیوه نامه های خارجی اطلاع می دهد، رابطه ای بین سند فعلی و سایر منابع ایجاد می کند و می تواند داده های اضافی در نظر گرفته شده برای مرورگرها را فراهم کند. علاوه بر عنصر مورد نیاز <title>که بعداً در این فصل مورد بحث قرار گرفت، مرورگرها هیچ یک از ابرداده های موجود در یک عنصر را نمایش نمی دهند <head>.</p>
<p>عنصر <head>باید بچه اول باشه <html>، هیچ محتوا یا عنصری نباید قبل از آن باشد:</p><p>
<!DOCTYPE html>
<html>
<head>
</head>
</html>
</p><h2>عنصر عنوان</h2>
<p>عنصر <title>یک عنوان متنی برای سند ارائه می دهد. هر سند HTML باید دقیقاً یک عنصر داشته باشد <title>که باید در داخل عنصر قرار گیرد <head>:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>عنوان پنجره
مرورگرها محتوای یک عنصر را نمایش می دهند
به عنوان عنوان (نام) سند، که معمولاً در بالای پنجره مرورگر یا در عنوان یک برگه نمایش داده می شود:</p>
<h2>عنصر بدنه</h2>
<p>عنصر <body>محفظه ای برای تمام محتوای یک صفحه وب است. هر چیزی که در پنجره مرورگر نمایش داده می شود و کاربر می بیند در آن موجود است (هر سند HTML فقط می تواند یک عنصر داشته باشد. <body>). هدف اصلی آن جداسازی محتوای سند از ابرداده است:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>عنوان پنجره
