• HTML چیست؟ ساختار یک سند HTML چه تگ هایی ساختار یک صفحه html را تعریف می کنند

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

    ساختار صحیح کلی یک سند HTML

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

    /*نوع DTD فعلی را نشان می دهد*/ /*آغاز سند را نشان می دهد*/ /*آغاز هدر (هدر) را نشان می دهد*/ تست/*نمایش عنوان*//*آغاز هدر را نشان می دهد*/ /*آغاز قسمت اصلی سند (بدنه) را نشان می دهد*/ /*قسمت محتوای سند*//*انتهای متن سند را نشان می دهد*//*نمایش انتهای سند*/

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

    تست

    نوع DTD فعلی

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

    علاوه بر این، زبان های نشانه گذاری دیگری به غیر از HTML مانند XHTML وجود دارد.

    توجه داشته باشید: XHTML مخفف عبارت Extensible HyperText Markup Language است که به صورت Extended HyperText Markup Language ترجمه می شود.

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

    مفهوم تگ در HTML

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

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

    • تگ به معنای عنوان سند html است. تگ های سر اطلاعات را برای مرورگرها و موتورهای جستجو ذخیره می کنند. از جمله در قالب متا تگ.
    • تگ به معنای محتوای اصلی سند 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>تگ های H2 - h6 در html5 کار می کنند</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()، "twentyseventeen-featured-image"); echo "</div><!-- .single-featured-image-header -->"; endif; ?> <div class="site-content-contain"> <div id="content" class="site-content"> </p><p>شما می توانید ببینید که اگر همه <a href="https://periscopes.ru/fa/kak-uluchshit-funkcii-vizualnogo-redaktora-wordpress-plagin-ultimate-tinymce-tinymce-advanced.html">ویژگی های وردپرس</a>در کلاسیک قرار داده شده است <a href="https://periscopes.ru/fa/yazyk-gipertekstovoi-razmetki-html-yazyki-gipertekstovoi-razmetki-sgml-xml.html">نشانه گذاری HTML</a>. یک نوع سند وجود دارد:<!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>در خاتمه، می‌خواستم نتیجه‌گیری کنم، اما فقط این فکر به ذهنم خطور می‌کند که مقاله کاملاً برای مبتدیان معلوم شد. بین کد نمونه مقاله و نمونه هایی از سایت های واقعی، در نگاه اول <a href="https://periscopes.ru/fa/evm-i-personalnye-kompyutery-zabluzhdenie-o-tom-chto-evm-i-kompyuter-eto-dve.html">یک تفاوت بزرگ</a>. با این حال، تمام فایل ها دارای ساختار سند HTML یکسانی هستند و بسیار مهم است که هنگام کار با سایت، این ساختار شکسته نشود.</p> <p>سلام به خوانندگان عزیز وبلاگ امروز در مورد ساختار متن در صفحات وب، در مورد ویژگی های نمایش آن صحبت خواهیم کرد و نحوه تقسیم متن را به قطعات منطقی جداگانه در نظر خواهیم گرفت: <b>سرفصل ها، پاراگراف ها، فهرست ها</b>.</p> <p>برای کار با متن در html، تگ های زیادی وجود دارد، اما ابتدا باید در مورد برخی از ویژگی های نمایش متن در مرورگر صحبت کنیم. ابتدا، هر تعداد فاصله متوالی، برگه و شکست خط به صورت یک فاصله نمایش داده می شود. آن ها قرار دادن متن با استفاده از فاصله ها و تب ها کار نخواهد کرد.</p> <p>به عنوان مثال، این خطوط در یک صفحه وب با وجود املای متفاوتشان یکسان نشان داده می شوند:</p> <p><p>به سایت ما خوش آمدید!</p><br> <p>خوب <br>به سایت ما خوش آمدید!</p><br> <p>خوش آمدی <br>به ما <br>سایت اینترنتی!</p></p> <p>استثنا است <b>برچسب زدن <pre> </b>، که در داخل آن تمام فاصله ها و خط تیره ها به شکلی که هستند نمایش داده می شوند.</p> <p>ثانیاً، متن عرض پنجره مرورگر را می گیرد. اگر خط طولانی متن از پنجره مرورگر عریض‌تر باشد، شکسته‌های خط به طور خودکار در فاصله یا خط تیره درج می‌شوند. اگر هیچ فاصله یا خط تیره ای در خط وجود نداشته باشد و خط با عرض پنجره مطابقت نداشته باشد، یک نوار اسکرول افقی در مرورگر ظاهر می شود.</p> <p>حال بیایید به بررسی عناصر ساختاری متن در نشانه گذاری html برویم.</p> <h2>پاراگراف ها در HTML</h2> <p>معمولاً بلوک های متن با پاراگراف ها (پاراگراف ها) از هم جدا می شوند. این کار خواندن تکه های بزرگ متن را آسان تر می کند. زبان HTML برای ایجاد یک پاراگراف شامل یک جفت است <b>برچسب زدن <p> </b>. نحو ایجاد پاراگراف ها به شرح زیر است:</p> <p><p>این اولین پاراگراف است.</p><br> <p>و این پاراگراف دوم است.</p></p> <p>پاراگراف ها در صفحه html با یک تورفتگی کوچک از عناصر قبلی و بعدی جدا می شوند. برچسب بزنید <p>همچنین یک عنصر بلوک است. چه اتفاقی افتاده است <a href="https://periscopes.ru/fa/pozicionirovanie-elementov-html-css---pozicionirovanie-blochnyh.html">عناصر بلوک</a>من در مقاله "" نوشتم. بگذارید این را به شما یادآوری کنم <b>عناصر بلوک</b>مشخصه آنها این است که کل عرض موجود صفحه html را اشغال می کنند، ارتفاع عنصر با محتوای آن تعیین می شود و همیشه از یک خط جدید شروع می شود.</p> <p>مثالی از استفاده از پاراگراف ها در یک صفحه وب را در نظر بگیرید. بیا باز کنیم <a href="https://periscopes.ru/fa/kak-otkryt-tekstovyi-redaktor-v-vindovs-7-tekstovyi-redaktor.html">ویرایشگر متن</a>، کد HTML را تایپ کرده و با آن ذخیره کنید <a href="https://periscopes.ru/fa/kak-otkryt-fail-htm-vybiraem-optimalnuyu-programmu-dlya-sozdaniya-i.html">پسوند html</a>:</p> <p><!doctype html><br> <html><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br> <title>وب سایت در مورد اتومبیل.


    وب سایت در مورد اتومبیل.



    طبقه بندی خودرو


    مسافر؛


    بار;


    ماشین شاسی بلند؛


    باگی؛


    سوار کردن؛


    ورزش ها؛


    مسابقه.



    هنگام باز کردن فایل داده شدهچیزی شبیه به این وجود خواهد داشت:

    تا کنون صفحه ما فقط شامل پاراگراف هاست.

    برای تراز کردن متن در تگ پاراگراف

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

      • ترک کرد- تراز متن به سمت چپ.
      • مرکز- تراز کردن متن در مرکز؛
      • درست- تراز کردن متن در لبه سمت راست؛
      • توجیه- تراز در عرض، به عنوان مثال. تراز کردن متن به طور همزمان در لبه های راست و چپ. برای انجام این کار، مرورگر بین کلمات فاصله قرار می دهد.

    به طور پیش فرض، ویژگی align در سمت چپ تنظیم شده است. مثالی از استفاده از ویژگی align:

    این متن در یک پاراگراف در صفحه html تراز می شود!


    این متن در مرورگر در مرکز صفحه نمایش داده می شود!


    این متن به درستی تراز خواهد شد!


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

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

    سرفصل ها در HTML

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

    ، و پایین ترین سطح 6، برچسب است

    . برچسب ها

    —

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

    سینتکس ایجاد هدرها به صورت زیر است:





    سرصفحه های html


    عنوان سطح اول


    عنوان سطح دوم


    عنوان سطح سوم


    عنوان سطح چهارم


    عنوان سطح 5

    عنوان سطح 6


    نتیجه:

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

    بیایید عنوان ها را به صفحه خود اضافه کنیم:

    وب سایت در مورد اتومبیل.


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


    در اصطلاح علمی، خودرو عبارت است از:


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


    طبقه بندی خودرو


    خودروها از انواع زیر هستند:


    مسافر؛


    بار;


    ماشین شاسی بلند؛


    باگی؛


    سوار کردن؛


    ورزش ها؛


    مسابقه.

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

    برچسب ها

    -

    مانند برچسب

    برای تراز کردن متن از ویژگی align استفاده کنید. هنگام استفاده از این ویژگی، همه چیز مانند برچسب است

    لیست های شماره گذاری شده و گلوله ای در HTML

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

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

    هر لیستی در HTML مجموعه ای از عناصر است که هر کدام در داخل یک تگ قرار می گیرند

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




        سرصفحه های html


        لیست گلوله شده:


        • نقطه اول

        • نکته دوم

        • نکته سوم

        لیست شماره گذاری شده:

        1. اولین مورد در لیست شماره گذاری شده

        2. دومین مورد در لیست شماره گذاری شده

        3. سومین مورد در لیست شماره گذاری شده



        و آنها چیزی شبیه به این هستند:

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

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

          • دیسک - دایره پر.
          • دایره - دایره؛
          • مربع - مربع.

          ویژگی نوع پیش فرض دیسک است. مثال استفاده:


          • بند 1

          • نقطه 2

          • نکته 3



          • بند 1

          • نقطه 2

          • نکته 3



          • بند 1

          • نقطه 2

          • نکته 3

          نمایش در مرورگر:

          لیست شماره گذاری شده همچنین از ویژگی type پشتیبانی می کند که می تواند برای تعیین انواع نشانگرهای زیر استفاده شود:

          • الف - حروف لاتین بزرگ؛
          • الف - حروف کوچک لاتین؛
          • I - اعداد رومی بزرگ؛
          • i - اعداد رومی کوچک؛
          • 1 - اعداد عربی.

          به طور پیش فرض، در یک لیست مرتب شده، ویژگی type گلوله ها را با اعداد عربی تنظیم می کند. علاوه بر ویژگی type، یک لیست مرتب شده نیز پشتیبانی می کند ویژگی شروع، که شماره ای را که لیست از آن شروع می شود را مشخص می کند. در مشخصات HTML5 برای یک لیست شماره دار نیز وجود داشت ویژگی معکوس،که شماره گذاری را معکوس می کند . آن ها به جای 1، 2، 3، لیست به شماره 3، 2، 1 خواهد بود. اما ویژگی معکوس هنوز توسط تعداد بسیار کمی از مرورگرها پشتیبانی می شود.

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

        • لیست خارجی:


          • نقطه اول

          • نکته دوم

            • اولین مورد در لیست تودرتو

            • دومین مورد در لیست تودرتو

            • سومین مورد در لیست تودرتو.



          • نکته سوم

          و در مرورگر:

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

          . جفت "اصطلاح - تعریف" در داخل آن قرار می گیرد. شرایط در یک جفت تگ محصور شده است
          ، و تعاریف در یک تگ جفت هستند
          :


          ترم 1

          تعریف 1

          ترم 2

          تعریف 2

          نمایش در مرورگر:

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


          • مسافر؛

          • بار;

          • ماشین شاسی بلند؛

          • باگی؛

          • سوار کردن؛

          • ورزش ها؛

          • مسابقه.

          و نتیجه را ببینیم:

          خطوط افقی

          برای جدا کردن یا برجسته کردن بلوک های متن در HTML، یک واحد وجود دارد برچسب HR - خط افقی. در کد html به این صورت است:

          پراگراف اول



          پاراگراف دوم

          و نحوه نمایش آن به این صورت است:

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

          می توانید از ویژگی ها برای تنظیم ظاهر یک خط افقی استفاده کنید. برچسب بزنید

          ویژگی های زیر را پشتیبانی می کند:

          • align - تراز خط را تعیین می کند.
          • رنگ - رنگ خط را تعیین می کند.
          • اندازه - ضخامت خط را بر حسب پیکسل تنظیم می کند.
          • عرض - عرض خط را بر حسب پیکسل تنظیم می کند.

          بیایید یک خط افقی در صفحه وب خود درج کنیم. بیایید آن را سبز، 1 پیکسل ضخامت و 320 پیکسل عرض کنیم:

          وب سایت در مورد اتومبیل.


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


          در اصطلاح علمی، خودرو عبارت است از:


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



          طبقه بندی خودرو


          خودروها از انواع زیر هستند:



          • مسافر؛

          • بار;

          • ماشین شاسی بلند؛

          • باگی؛

          • سوار کردن؛

          • ورزش ها؛

          • مسابقه.

          نتیجه چیزی شبیه به این خواهد بود:

          ساختار سند HTML کار را شروع می کنیم.

          جایی که HTML شروع می شود

          برای اینکه یک فایل متنی به یک فایل HTML تبدیل شود، تغییر پسوند آن از ".txt" به ".html" کافی نیست. شما باید قانون خط اول را دنبال کنید:

          هر سند HTML مطابق با مشخصات HTML هر نسخه باید با یک خط اعلام نسخه HTML شروع شود !DOCTYPE، که معمولاً به شکل زیر است:

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

          نمونه ای از کوتاه ترین سند HTML:

          کار از کجا شروع می شود

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

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

          جویدن؟

          اگر مثال بالا به صورت شماتیک توضیح داده شود، به صورت زیر خواهد بود:

          از نمودار می توان دریافت که سند از دو بلوک اصلی تشکیل شده است - "هدر" و "بدنه سند". عنوان با استفاده از عنصر تعریف می شود سر ، و بدن یک عنصر است بدن .

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

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

          (HTML 1.0) - نظر()

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

          یادداشت:

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

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

          عنوان سند html

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

          عناصر مربوط به سر سند:

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

          نام کل سند را مشخص می کند که در نوار عنوان پنجره مرورگر نمایش داده می شود

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

          برای درج یک شیوه نامه CSS در یک سند استفاده می شود

          ارتباط سند با اشیاء دیگر را شرح می دهد

          برای درج ابرداده استفاده می شود

          (HTML 1.0) - سر

          ابتدا و انتهای عنوان سند را مشخص می کند. این محفظه ای برای عناصر حاوی اطلاعات فنی در مورد یک سند است. ( عنوان ,پایه ,سبک ,ارتباط دادن ,متا ).

          (HTML 2.0) - عنوان

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

          (HTML 3.2) - URL پایه

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

          ویژگی های:

          HREFآدرس پایه (URL) سند جاری را مشخص می کند.

          هدف– نام فریمی را که در هایپرلینک ها به طور پیش فرض استفاده می شود را مشخص می کند. اگر می‌خواهید همه پیوندهای یک سند را در فریم دیگری باز کنید، این می‌تواند مفید باشد.

          (HTML 3.2) - سبک

          برای درج یک شیوه نامه (CSS - Cascade Style Sheet) در یک سند استفاده می شود.

          ویژگی های:

          تایپ کنیدیک ویژگی مورد نیاز است. نوع MIME بلوک سبک درج شده را مشخص می کند. به طور معمول، مقدار این ویژگی "text/css" است.

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

          (HTML 2.0) - پیوند

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

          ویژگی های:

          HREF- URL شیء را تعریف می کند.

          REL- نوع رابطه سند جاری با شی مشخص شده توسط ویژگی HREF را مشخص می کند. مقادیر ممکن:

          برگه سبک- به فایل حاوی شیوه نامه (CSS) برای سند جاری اشاره می کند. مرورگر فایل css را از آدرس مشخص شده در ویژگی HREF دانلود می کند و آن را در سند جاری اعمال می کند (همچنین به عنصر مراجعه کنید سبک ) خانه- به صفحه اصلی سایت شما اشاره می کند جاری، مطالب- به فایل حاوی فهرست مطالب این سند اشاره کنید. فهرست مطالب- به یک فایل حاوی اطلاعات برای جستجوی فهرست در سند فعلی اشاره می کند. واژه نامه- به فایلی اشاره می کند که حاوی لیستی از اصطلاحات مربوط به سند جاری است. کپی رایت- به صفحه سایت اشاره می کند که در مورد سازندگان آن، حق چاپ و غیره صحبت می کند. بالا، پدر و مادر- به صفحه "والد" (سندی که یک پله در ساختار سلسله مراتبی سایت شما بالاتر است) اشاره می کند. کودک- صفحه "فرزند" را نشان می دهد (سندی که یک پله پایین تر در ساختار سلسله مراتبی سایت شما قرار دارد). بعد- به صفحه بعددر دنباله ای از اسناد (به عنوان مثال صفحه بعدی یک کاتالوگ الکترونیکی، اسناد یا فرهنگ لغت). قبلی– در ترتیب اسناد به صفحه قبلی اشاره می کند. آخر، پایان- به آخرین صفحهبه ترتیب اسناد اولین- به صفحه اول در ترتیب اسناد اشاره می کند. کمک- به صفحه ای با اشاره اشاره می کند (مثلاً برای پیمایش در سایت خود).

          تایپ کنید– نوع MIME را برای شی مشخص شده در ویژگی HREF مشخص می کند.

          یادداشت:

          (HTML 2.0) - متا

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

          ویژگی های:

          نام- نام ورودی متا را مشخص می کند. نام های از پیش تعریف شده زیادی وجود دارد که برخی از آنها را می توانید در مثال زیر مشاهده کنید.

          معادل HTTP- نام ورودی متا را مشخص می کند. تقریباً مشابه ویژگی NAME است، اما فقط زمانی استفاده می‌شود که نیاز باشد اطلاعات اضافی در هدر HTTP ارسال شود.

          محتوا- مقدار ورودی متا مشخص شده در ویژگی NAME (یا HTTP-EQUIV) را اختصاص می دهد.

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

          عناصر ایجاد فریم و کار با آنها:

          یادداشت:

          قاب

          (HTML 4.0) - مجموعه قاب

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

          ویژگی های:

          ROWS- تعداد و اندازه فریم های افقی (قاب های خط) را در پنجره مرورگر تعیین می کند. مقدار، فهرستی از اندازه‌های فریم است که با کاما از هم جدا شده‌اند. روش های اندازه گیری:

          به عنوان درصدی از ارتفاع ناحیه مشتری پنجره مرورگر. به عنوان مثال: "30%,30%,40%"؛ به شکل "*" (ستاره)، که نشان می دهد قاب تمام فضای خالی پنجره مرورگر را که توسط فریم های دیگر با اندازه های مشخص شده اشغال نشده است، اشغال می کند. برای مثال، ستاره در "25%,25%*" معادل 50% است. در پیکسل به عنوان مثال: "75،*"؛

          هر سه روش را می توان با هم ترکیب کرد. به عنوان مثال، "25%,40،*" صفحه را به سه فریم افقی تقسیم می کند که اولی یک چهارم ارتفاع پنجره مرورگر، دومی 40 پیکسل و سومی بقیه را اشغال می کند. از منطقه

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

          مرز- عرض مرزهای فریم را بر حسب پیکسل تعریف می کند. این ویژگی فقط در مرورگرهای Netscape موثر است.

          FRAMEBORDER- وجود فریم ها را برای محتویات موجود در داخل تعیین می کند قابقاب ها مقادیر ممکن:

          آره- قاب های نمایش؛ نهیا 0 - فریم ها را نمایش ندهید.

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

          قاب بندی- فاصله (به اصطلاح "منطقه خاکستری") بین فریم ها را در پیکسل مشخص می کند. این ویژگی برای ایجاد فریم های بدون حاشیه لازم است.

          توجه داشته باشید:

          (HTML 4.0) - Frame یک فریم و ویژگی های آن را در داخل تعریف می کند قاب-سازه های. (به عنصر مراجعه کنید قاب ) ویژگی های:

          SRCیک ویژگی مورد نیاز است. آدرس (URL) فایل HTML نمایش داده شده در این فریم را مشخص می کند.

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

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

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

          پیمایش- وجود نوارهای اسکرول را برای محتوای قاب تعیین می کند. مقادیر ممکن:

          آره- نمایش نوارهای اسکرول نه- نوارهای اسکرول نمایش داده نشود. خودکار- در صورت لزوم نوارهای پیمایش را نمایش دهید (اگر سند مشخص شده در ویژگی SRC در کادر قرار نگیرد).

          NORESIZE- به شما اجازه تغییر اندازه قاب را نمی دهد. این ویژگی یک پرچم است و نیازی به مقدار ندارد.

          FRAMEBORDER- تعیین می کند که آیا فریم حاشیه دارد یا خیر. مقادیر ممکن:

          آره- قاب های نمایش؛ نهیا 0 - فریم ها را نمایش ندهید.

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

          مثال (فایل index.html):

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

          در نتیجه پنجره مرورگر مطابق شکل زیر به سه فریم تقسیم می شود. و frame1.html 265 پیکسل عرض خواهد داشت و frame2.html- قد 165.

          NOFRAMES

          (HTML 4.0) - بدون قاب

          اگر از فریم‌ها پشتیبانی نکند، هر چیزی بین تگ‌های شروع و پایان این عنصر توسط مرورگر ارائه می‌شود. عنصر NOFRAMESهیچ ویژگی ندارد و باید درون یک عنصر باشد قاب .

          مثال:

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

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

          ساختار سند HTML

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

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

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

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


          مثال تصویری صفحات html

          برچسب DOCTYPE

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

          که در آخرین نسخه 5 به نظر می رسد این است:

          تگ HTML

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

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

          این تگ به مرورگر می گوید که سند html ما از کجا شروع و به کجا ختم می شود. بنابراین، تمام عناصر دیگر ( غیر از doctype) باید داخل این ظرف تو در تو باشد.

          برچسب سر

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

          محتوای سر به‌جز برچسب عنوان، مستقیماً در صفحه وب نمایش داده نمی‌شود. مسئول عنوان صفحه است.

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

          برچسب عنوان

          سر دارای یک جزء مورد نیاز است. این برچسب عنوان. او مسئول ظاهر آن است هدر htmlصفحات آنچه در اینجا می نویسید در یک برگه مرورگر نمایش داده می شود.

          آن را جدی بگیر!

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

          ساخت حرفه ای وب سایت در اینترنت با مثال

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

          متا تگ

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

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

          بیایید پارامتر charset را روی عنصر بنویسیم و رمزگذاری ترجیحی سند را در آن نشان دهیم.

          ساخت حرفه ای وب سایت در اینترنت با مثال

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

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

          برچسب بدن

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

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

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

          نحو html

          شایان ذکر است در مورد نحو html کمی ذکر شود. فورا سعی کنید برچسب ها را به گونه ای راحت ترتیب دهید، مانند مثال بالا. البته، می توانید آنها را به ترتیبی آشفته مرتب کنید.

          ساخت حرفه ای وب سایت در اینترنت با مثال

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

          مرورگر اهمیتی نمی دهد.

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

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

          نام سند

          نام ماده

          متن اصلی

          یعنی تگ head باید یک برگه از تگ html تورفتگی داشته باشد. بدنه در راستای سر قرار می گیرد زیرا در ظرف html نیز تودرتو است.

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

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

          نام سند

          متن اصلی

          با یک تودرتو بزرگ، این روش به صرفه جویی در فضا و گم نشدن در ساختار html کمک می کند.

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

          اگر برچسبی باز شد، باید بسته شود. اگر خالی و بدون قسمت انتهایی باشد، هیچ چیز را نمی توان در چنین برچسبی قرار داد.

          مهم است که به شدت از دستور پیروی کنید!

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

          مثال صحیح:

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

          مثال اشتباه:

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

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

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

          نظر خود می تواند تک خطی یا چند خطی باشد.

          نام سند

          متن اصلی

          بین ساختارها نوشته شده است.

          نحوه ایجاد فایل html

          شاید برخی از شما ندانید که چگونه یک فایل html ایجاد کنید. بسیاری از برنامه های ویژه برای این کار وجود دارد:

          • براکت ها
          • نوت بوک
          • Notepad++
          • متن عالی
          • اتم و دیگران

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

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

          ساخت حرفه ای وب سایت در اینترنت با مثال

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

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

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

          رمزگذاری HTML

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

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

          اکنون ما نقش یک اشاره گر رمزگذاری را ایفا می کند. وجود دارد ورودی ویژه. به مرورگر می گوید که این سند در رمزگذاری ایجاد شده است utf-8.

          اصلاً چرا به کدنویسی نیاز دارید؟

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

          قبلاً هنگام ایجاد یک صفحه html ، لازم بود رمزگذاری را که به زبان روسی می نویسیم مشخص کنیم. باید به آلمانی ها می گفتند که به آلمانی می نویسند و غیره.

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

          متأسفانه، این همیشه کار نمی کرد.

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


          کدگذاری html اشتباه است

          به عنوان راه حلی برای این مشکل، رمزگذاری جهانی utf-8 ایجاد شد.

          وقتی استاندارد شد، نیازی به تعیین رمزگذاری خاص برای یک زبان خاص نبود. برای نشان دادن جهانی کافی بود utf-8و سایت شما به طور معمول در همه مرورگرها نمایش داده می شود.

          این نیز کار با پایگاه داده را ساده می کند. بنابراین، در اینجا به خاطر داشته باشید که ما همیشه کدگذاری را در utf-8 مشخص می کنیم. اما در اینجا باید به یک چیز دیگر توجه کنید.

          html utf-8 را ذخیره کنید

          برای اینکه همه چیز کار کند و مرورگر صفحه را نمایش دهد، توصیه می شود خود سند html را در utf-8 ذخیره کنید. این برنامه Notepad ++ به خوبی به ما کمک می کند.

          یک مورد "رمزگذاری" وجود دارد. اگر در حال حاضر رمزگذاری ندارید ( مانند مال من در تصویر زیر، سپس بر روی "تبدیل به UTF-8 بدون BOM" کلیک کنید.

          در این صورت فایل html شما به رمزگذاری utf-8 تبدیل می شود. تغییرات خود را ذخیره کنید

          در گوشه سمت راست پایین، کتیبه "Dos\Windows ANSI as UTF-8" را خواهید دید. این بدان معناست که سند در حالت utf-8 ایجاد شده است و نمایش عادی خواهد بود.

          و فقط چنین توصیه ای!

          به "گزینه ها" -> "تنظیمات" بروید. در اینجا یک برگه وجود دارد سند جدید". فوراً کادر "UTF-8 بدون برچسب BOM" را علامت بزنید. بنابراین شما باید تمام اسناد جدید بلافاصله در این رمزگذاری ایجاد می شود.

          نحوه ذخیره صفحه html

          نام فایل می تواند هر چیزی باشد. اما به طور پیش فرض و به خصوص اگر باشد صفحه اصلیسایت، سپس آن را به عنوان ذخیره کنید index.html.

          وقتی آدرس سایت را بدون تعیین صفحه خاصی تایپ می کنیم، به این معنی است که صفحه index.html را درخواست می کنیم. یعنی وقتی به سرور دسترسی پیدا می کنیم صفحه ایندکس را گسترش می دهد.

          اگر صفحه خاصی را مشخص کنیم، در پایان نمایش داده می شود. اما اگر آدرس مشخص نشده باشد، صفحه فهرست برگردانده می شود. بنابراین به صورت پیش فرض صفحه را index.html می نامیم.

          و همانطور که قبلاً متوجه شده اید، پسوند فایل باید باشد html. یعنی در نوع فایل «Hyper Text Markup Language» را انتخاب کرده و روی «ذخیره» کلیک کنید.

          نحوه باز کردن فایل html

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

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

          به طور کلی با دکمه سمت راست ماوس روی فایل کلیک می کنیم.

          در منو، روی "Open with" اشاره کرده و انتخاب کنید گزینه مورد نظرمرورگر. اگر آنها نمایش داده نشدند، روی "انتخاب یک برنامه دیگر" کلیک کنید. در آنجا ما قبلاً از لیست انتخاب می کنیم برنامه مورد نظربرای خواندن htmlصفحات

          اگر نیاز به ویرایش کد دارید، ویرایشگر مناسب را انتخاب کنید. توصیه می کنم از Notepad++ استفاده کنید.

          نحوه مشاهده کد html یک صفحه

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

          دیدن کد بسیار آسان است. فقط میانبر صفحه کلید را فشار دهید Ctrl+U. در یک تب جدید، کد منبع صفحه سایت را مشاهده خواهید کرد.


          منبعسایت

          شما همچنین می توانید در نوار آدرسدرست قبل از آدرس صفحه بنویسید:

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


          ابزار توسعه دهنده مرورگر

          در تب "Elements" کد html در سمت چپ وجود دارد و . چنین ابزاری از این جهت راحت است که می توانید کد موجود در آن را ویرایش کنید و بلافاصله نتیجه را مشاهده کنید. همچنین، هنگام ویرایش، نکات می توانند نمایش داده شوند. این نیز مفید است.

          همین!

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

          • 1. اسناد HTML اسناد ساختاری هستند.
          • 2. نام عناصر را می توان در هر صورت نوشت.
          • 3. نام صفات را می توان در هر صورت نوشت.
          • 4. مقادیر مشخصه به حروف بزرگ و کوچک حساس هستند، به خصوص آدرس ها

          picture.gif و picture.GIF متفاوت هستند!).

          • 5. نام عناصر نمی تواند حاوی فاصله باشد.
          • 6. اگر مقادیر مشخصه حاوی فاصله هستند، باید در علامت نقل قول باشند.
          • 7. فضاهای اضافی، زبانه ها و برگردانده های کالسکه نادیده گرفته شده و در یک فضا فشرده می شوند.
          • 8. عناصر را می توان در داخل یکدیگر تودرتو کرد. در این صورت باید قانون تودرتو رعایت شود. در داخل عنصر تو در تو، علاوه بر تگ باز، باید یک تگ بسته نیز وجود داشته باشد. تقاطع ها نادرست هستند:

          ساختار سند HTML

          9. عناصر و ویژگی های ناآشنا توسط مرورگرها نادیده گرفته می شوند ("تحمل خطا").

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

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

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

          عنوان کلی سند.تگ سر سند باید بلافاصله بعد از تگ استفاده شود و هیچ جای دیگری در متن سند نیست. این تگ است توضیحات کلیسند برچسب شروع مستقیماً قبل از برچسب قرار می گیرد و سایر تگ هایی که سند را توصیف می کنند و تگ پایان</head>بلافاصله پس از پایان شرح سند قرار می گیرد.</p> <p><b>عنوان سند.</b>اکثر مرورگرهای وب محتویات برچسب را نمایش می دهند <TITLE>در نوار عنوان پنجره حاوی سند، و در فایل نشانک، اگر توسط مرورگر وب پشتیبانی می شود. عنوان با برچسب ها مشخص شده است <TITLE>و، داخل تگ ها قرار می گیرد . وقتی خود سند در پنجره نمایش داده می شود، عنوان سند ظاهر نمی شود.

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

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

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

          برچسب پاراگراف<Р>. که درمتفاوت از اکثر واژه پردازهادر سند HTML نادیده گرفته می شود. مرورگر پاراگراف ها را تنها زمانی تقسیم می کند که یک برچسب وجود داشته باشد<Р>. اگر نه برای جدا کردن پاراگراف ها با یک برچسب<Р>، سپس سند مانند یک پاراگراف بزرگ به نظر می رسد.

          تگ متنی از پیش فرمت شده 

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

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

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

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

           
            و با تگ به پایان می رسد
           
        • .
          

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

          یک لیست شماره گذاری شده با یک تگ شروع شروع می شود 
            و با تگ به پایان می رسد
          .  هر مورد لیست با یک برچسب شروع می شود<ы>.
          

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

          گرافیک در یک سند HTML.یکی از جذاب‌ترین ویژگی‌های وب، قابلیت گنجاندن گرافیک و انواع دیگر داده‌ها در یک سند HTML است.
          

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

          

          پارامتر مورد نیاز همان دستور URL استاندارد را دارد.  این URL به مرورگر می گوید که کجا
          

          طراحی  نقاشی باید در آن نگهداری شود فرمت گرافیکیتوسط مرورگر پشتیبانی می شود.  تا به امروز، این فرمت های GIF، JPG، PNG.  آنها توسط اکثر مرورگرها پشتیبانی می شوند.
          

          ALT = "متن"
          

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

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

          پیوندهای ابرمتن یک جزء کلیدی در جذاب کردن وب برای کاربران هستند.  کاربر با افزودن پیوندهای فرامتن (که از این پس پیوند نامیده می شود)، مجموعه ای از اسناد مرتبط و ساختار یافته را ایجاد می کند که به او امکان می دهد اطلاعات مورد نیاز خود را در سریع ترین زمان و راحت تر به دست آورد.
          

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

          ساختار پیوند در یک سند HTML.برای اینکه مرورگر بتواند لینک یک URL را نمایش دهد، باید متن یا تصویری را در داخل تگ هایپرلینک قرار دهید.  سینتکس HTML به شرح زیر است:
          

          <А HREF="URL">متن-یا-تصویر-به-عنوان پیوند برجسته شود
          


          برچسب بزنید<А HREF="URL">توضیحات پیوند و برچسب را باز می کند- آن را می بندد.  هر متنی بین این دو تگ به روشی خاص توسط مرورگر وب برجسته می شود.  به طور معمول، این متن با رنگ های خط دار و برجسته نمایش داده می شود.  تصویر توسط یک قاب مستطیلی قاب شده است.  متنی که نشان‌دهنده URL است توسط مرورگر نمایش داده نمی‌شود، اما فقط برای انجام اقدامات مورد نظر خود در هنگام فعال شدن پیوند مورد استفاده قرار می‌گیرد (معمولاً زمانی که ماوس روی متن برجسته یا زیر خط‌دار کلیک می‌کند).
          

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