html چیست و چه کاربردی دارد. کد HTML یک صفحه چیست؟ تمرین کنید تا بفهمید HTML چیست...

هر سایتی ظاهر و کارایی متفاوتی دارد اما دلیل این امر چیست و صفحه به چه زبانی نوشته شده است؟ برای همه اینها از Cascading Style Sheets و زبان HTML استفاده شده است. اگر اشیاء موجود در مرورگر را بررسی کنید، می توانید به کد این زبان نگاهی بیندازید. در این مقاله به طور خاص در مورد اینکه زبان HTML چیست صحبت خواهیم کرد.

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

پست به بخش های زیر تقسیم می شود:

صفحه HTML چیست؟

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

هر سند WWW دارای متن هایی با قالب بندی و طراحی زیبا و همچنین لینک ها و تصاویری است که توسط صاحب سایت انتخاب شده است. برای کار با این عناصر، برنامه نویسان زبانی به نام HTML (Hyper Text Markup Language) ایجاد کرده اند که به معنای زبان نشانه گذاری فرامتن است. هر مرورگر به طور متفاوتی کار می کند و HTML را رندر می کند، بنابراین در مرورگرهای مختلف، به خصوص در نسخه های قدیمی تر، رندر متفاوتی دارد. اینترنت اکسپلورر.

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

البته کدهای HTML استاندارد دارای معایب و معایبی هستند. باید سخت تلاش کنید تا پاراگراف ها را با متن در صفحه مرتب کنید، زیرا برای نشانه گذاری و هر چیز دیگری، باید ویژگی های خاصی را برای کل متن و برای هر پاراگراف جداگانه تجویز کنید. اگر سایت شما 50 صفحه داشته باشد و هر کدام 10-20 پاراگراف داشته باشد، قالب بندی متن و درج هر بار همان تگ ها زمان زیادی طول می کشد. این نه تنها صاحب سایت را خسته می کند، بلکه بر وزن صفحات سایت نیز تأثیر منفی می گذارد. به همین دلیل است که بعداً استایل شیت های آبشاری ایجاد شدند، به طور خلاصه به آنها CSS می گویند که به معنای برگه های سبک آبشاری است که به لطف آن می توانید متن را به سرعت مرتب کنید. می توانید یک تگ اختصاص دهید و به آن ویژگی های خاصی مانند رنگ متن، اندازه، فونت و غیره بدهید و سپس آن را روی پاراگراف ها اعمال کنید. در این حالت، فایل شیوه نامه به طور جداگانه ذخیره می شود، می توان آن را به یک یا چند سایت به طور همزمان بارگذاری کرد. در مرحله بعد، عناصر اصلی صفحه به صورت HTML نوشته می شوند و متن درج می شود و سپس CSS متصل می شود و تمام متن طرح مورد نیاز شما را می گیرد. همچنین وزن صفحات را کاهش می دهد که بسیار مهم است.

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

HTML5 چیست؟ تفاوت ها و فواید

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

  1. پس از ورود به سایت، افراد می توانند از طریق مرورگر به تماشای ویدیو و شنیدن صدا بپردازند، برای این کار دکمه جداگانه ای برای پخش ایجاد شده است.
  2. آپلود عکس های جدید از طریق این زبان بسیار ساده تر است، حتی می توانید گالری تصاویر ایجاد کنید. شما حتی نیازی به دانلود اضافی ندارید نرم افزار.
  3. شما می توانید متن را پیدا کنید و بلوک های متن را علامت گذاری کنید. همچنین می توانید متن را تنظیم کنید تا خواندن آن آسان باشد.
  4. اگر قبلاً در HTML4 شخصی پس از وارد کردن داده‌ها فقط هنگام ارسال فرم متوجه خطا می‌شد، اکنون مرورگر بلافاصله اگر فرم را اشتباه پر کند، خطا را گزارش می‌کند. این برای کاربران بسیار راحت است، زیرا مجبور نیستند یک بخش را چندین بار با داده ها پر کنند.
  5. نیازی به استفاده نیست ماژول های نرم افزاری، زیرا با کمک HTML5 می توانید هر ایده ای را در مورد سایت محقق کنید. فقط در صورتی که سایت منحصر به فرد است و نیاز به ارائه چیز خاصی دارید، ماژول های نرم افزار اضافی را نصب کنید.
  6. قبلاً، مردم نمی توانستند سایت را به طور معمول از طریق تبلت یا تلفن هوشمند مشاهده کنند، زیرا استاندارد HTML4 سازگاری با مرورگر را ندارد. دستگاه های تلفن همراهو دیگران سیستم های عامل. با استفاده از زبان HTML5، صفحاتی ایجاد می شوند که به طور ایده آل از همه دستگاه ها با سرعت بالا خوانده می شوند.

اگر سوالی دارید - آنها را در نظرات بنویسید، ما خوشحال خواهیم شد به آنها پاسخ دهیم!

HTML چیست و چه کاربردی دارد؟ - امتیاز 3.7 از 5 بر اساس 3 رای

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

HTML مخفف Hyper Text Markup Language است که می تواند به عنوان زبان نشانه گذاری Hyper Text ترجمه شود. با کمک این زبان صفحات وب ایجاد می شود.

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

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

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

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

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

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

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

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

هر تگ از براکت های زاویه تشکیل شده است،< >که در آن شخصیت های خاصی قرار می گیرند. اکثر آنها شامل باز و بسته شدن هستند.

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

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

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

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

HTML- مخفف HyperText Markup Language است که پرکاربردترین زبان برای نوشتن صفحات وب است.

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

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

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

سند HTML

مثال زیر یک سند HTML را نشان می دهد ساده ترین شکل:

عنوان سند

سرتیتر

اینم محتویات سند...

بیایید کد را در فایل HTML document.html با استفاده از ویرایشگر متن مورد علاقه خود ذخیره کنیم. و فایل را با یک مرورگر وب مانند اینترنت اکسپلورر باز کنید، گوگل کرومیا فایرفاکس و غیره. باید نتیجه زیر را نشان دهد:

برچسب ها برای ایجاد یک سند HTML

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

مثال بالا از تگ های زیر برای ایجاد یک سند HTML استفاده می کند:

برچسب بزنیدشرح
این تگ نوع سند و نسخه HTML را مشخص می کند.
این تگ سند کامل HTML را پوشش می دهد و عمدتاً از عنوان سند تشکیل شده است که توسط تگ ها نشان داده می شود. ... و بدنه سند که با برچسب ها نشان داده می شود ... .
این تگ نشان دهنده عنوان سند است که ممکن است حاوی تگ های html دیگری مانند , <link>و غیره.</td> </tr><tr><td><title> </td><td>برچسب بزنید <b><title> </b>داخل تگ استفاده می شود <head>تا عنوان سند را مشخص کنید.</td> </tr><tr><td><body> </td><td>این تگ نمایانگر بدنه سند است که تگ های html دیگری مانند <h1>, <div>, <p>و دیگران.</td> </tr><tr><td><h1> </td><td>این تگ نشان دهنده عنوان است.</td> </tr><tr><td><p> </td><td>این تگ نشان دهنده یک پاراگراف است.</td> </tr></table><p>دانستن این تگ ها برای ایجاد یک سند html (صفحه html) کاملاً کافی است.</p> <p>برای یادگیری HTML، باید تگ های مختلف را بشناسید و نحوه رفتار آنها را در زمان فرمت کردن درک کنید. <a href="https://obanracer.ru/fa/kak-vstavit-skrinshot-v-tekstovyi-dokument-kak-sdelat-printskrin-s.html">سند متنی</a>. یادگیری HTML آسان است زیرا کاربران فقط باید یاد بگیرند که چگونه از برچسب های مختلف برای قالب بندی متن یا تصاویر استفاده کنند تا یک صفحه وب زیبا بسازند.</p> <h2>ساختار سند HTML</h2> <p>ساختار یک سند معمولی HTML به شکل زیر است:</p><p>برچسب اعلامیه سند <html> <head> <title>برچسب های مرتبط با عنوان سند برچسب های مرتبط با بدنه سند

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

اعلام

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

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

سلام!. درس دوم را به این سؤال اختصاص خواهیم داد - HTML چیست و چگونه با آن کار کنیم. در آن، با ویژگی های محبوب ترین زبان برنامه نویسی وب آشنا خواهید شد و به وضوح ماهیت اصلی آن را درک خواهید کرد.

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

HTML چیست

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

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

برای همه این نکات - ویکی پدیا عالی به شما کمک می کند. ما می خواهیم یاد بگیریم که چگونه به سرعت وب سایت ایجاد کنیم، درست است؟ خوب! سپس بیایید به جلو برویم و تمام ظرافت های این علم وب را درک کنیم.

مبانی زبان HTML مفهوم برچسب

بدون دانش یک پایه محکم، نمی توانید به جایی برسید، هیچ کس هنوز "mat.chast" ("بنیاد" هر موضوعی را لغو نکرده است. و از سنت ها و احکام عدول نخواهیم کرد.

اصول اولیه زبان HTML تگ ها یا به عبارت دقیق تر مجموعه ای از برچسب ها هستند. آنها اینگونه برچسب زده شده اند<тег>. برچسب ها همیشه به این صورت جفت می شوند و نمایش داده می شوند

<тег>.

< тег> < / тег> .

هر یک از آنها به شدت عمل می کند عملکرد خاصبرای نمایش در مرورگرها

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

و یک چیز دیگر برای درک نکته مهم. که در زبان داده شدهاصل پارتو اعمال می شود، یعنی مانند هر زمینه ای از زندگی، فعالیت و هر جای دیگری، قانون 80/20 وجود دارد.

چی میگه؟ این به ما می گوید که 20٪ (در مورد ما html) زبان 80٪ کار را انجام می دهد. منطق این است که یادگیری همه برچسب ها ضروری نیست، زیرا بسیاری از آنها به سادگی استفاده نمی شوند یا بسیار به ندرت استفاده می شوند. بنابراین در درس‌هایمان روی متداول‌ترین و مهم‌ترین آنها تمرکز می‌کنیم. و شما با آن عالی عمل کردید!

ساختار سند HTML

ساختار هر سند html به این صورت است

سند بدون عنوان

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

< html >

< head >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" >

< title >سند بدون عنوان< / title >

< / head >

< body >

< / body >

< / html >

حال اجازه دهید هر نکته را با جزئیات بیشتری توضیح دهیم:

Doctype چیست و معانی آن

عنصر doctype برای نشان دادن نوع صفحه وب ما استفاده می شود. این به اصطلاح "اعلام نوع سند" یا "اعلام نوع سند" است.

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

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

چندین مقدار Doctype وجود دارد:

  1. سختگیرانه (سخت)
  2. انتقالی (انتقالی)
  3. مجموعه فریم (با قاب)

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

بگذارید توضیح دهم که تفاوت آنها در چیست. نسخه انتقالی کاملاً با استانداردهای اعتبار سنجی W3C (یا به زبان روسی چک) مطابقت ندارد، یعنی مرورگر محتویات سند وب را به همان شیوه نمایش می دهد، حتی اگر حاوی منسوخ، توصیه نشده، و غیره باشد. تغییرات کد استاندارد اما نسخه Strict دقیقاً تمام استانداردها را رعایت می کند ، یعنی در عمل اگر فراموش کرده اید نماد مربوطه را در جایی از کد قرار دهید (مثلاً یک اسلش /) ، در حین بررسی به شما اخطار داده می شود.

در اینجا یک سند وب با استفاده از نسخه سخت به نظر می رسد:

انطباق دقیق با استانداردهای زبان

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

< html xmlns = "http://www.w3.org/1999/xhtml">

< head >

< title >انطباق دقیق با استانداردهای زبان< / title >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

< / head >

< body >

< p > . . . < / p >

< / body >

< / html >

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

- یا تگ "head"، حاوی مهمترین تگ ها است که به مرورگر توضیح می دهد که چه کارهایی باید در صفحه انجام شود و چه مکانیزم هایی باید اجرا شوند. یک سند وب و محتوای آن را تعریف می کند. اغلب حاوی اسکریپت های مختلفی است که ویژگی های مختلفی را در صفحه اجرا می کند و همچنین یک "ظرف" مهم برای ارتقاء SEO وجود دارد - برچسب

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

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

چرا یادگیری HTML آسان است؟

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

بیایید شروع به یادگیری این فناوری جذاب و در عین حال ساده کنیم.

کمی تئوری...

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

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

اما تگ در HMTL چیست؟

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

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

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

  • و بسته شدن
  • و بسته شدن
  • و بسته شدن

برای واضح تر شدن، من آنها را با رنگ نارنجی در تصویر زیر برجسته کرده ام:

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

و در اینجا تمام تگ هایی وجود دارد که بین تگ ها خواهیم نوشت وبسته به هدف آن دقیقاً بر ساختار ما تأثیر می گذارد صفحات HTML.

خوب، واضح تر شد که HTML چیست؟ 😉 اما ما متوقف نمی شویم و ادامه می دهیم ...

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

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

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

کد HTML را درست کنید

آنچه در بالا می بینید - این ترتیب درست نوشتن تگ های پایانی است. اما ممکن است چنین وضعیتی وجود داشته باشد

خطا در کد HTML

بنابراین برچسب ها را ببندید اکیدا ممنوع!

تمرین کنید تا بفهمید HTML چیست...

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

بیا شروع کنیم. پس از باز کردن برنامه، پنجره زیر را مشاهده خواهید کرد:

برای ایجاد یک صفحه HTML باید "بدنه" صفحه را در این کادر وارد کنید. می توانید متن زیر را کپی کرده و فقط آن را Paste کنید. اما بهتر است همه چیز را با دست وارد کنید. بنابراین می توانید به سرعت برچسب ها را به خاطر بسپارید و به آنها عادت کنید.

بنابراین، شما باید موارد زیر را دریافت کنید:

بعد، شما باید ذخیره کنید این صفحهدر قالب HTML برای انجام این کار، روی منوی "File" کلیک کنید، در اینجا روی "Save As ..." کلیک کنید. نام صفحه HTML را وارد کنید. اسمش را گذاشتم index.html. سپس فقط در ذخیره کنید نقطه راحتدر کامپیوتر شما. پس از آن، نور پس زمینه ظاهر می شود تگ های HTML، زیرا ویرایشگر Notepad++ متوجه خواهد شد که چیست سند HTML. و کار با نور پس زمینه بسیار لذت بخش تر است.