اچ تی ام ال چیست؟ چگونگی کار با اچ تی ام ال



اچ تی ام ال چیست؟ چگونگی کار با اچ تی ام ال

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

اچ تی ام ال چیست؟ چگونگی کار با اچ تی ام ال یک زبان نماد گذاری یا نشانه گذاری است که در طراحی سایت کاربرد بسیار فراوانی دارد . از اچ تی ام ال برای ساختن صفحات استاتیک استفاده می‌شود و به وسیله آن میتوان صفحات وبی ساخت که شامل عکس ، فیلم ،موزیک ، پاراگراف ، جدول و … است. HTML  مخفف عبارت Hyper Text Markup Language به معنی زبان نشانه گذاری ابر متن است، که در ادامه به توضیح ھر یک از کلمات این عبارت خواهیم پرداخت و معرفی زبان HTML را تکمیل خواهیم کرد.

چگونگی کار با HTML

قبل از نوشتن کد HTML یا طراحی اولین صفحه وب خود ، باید در مورد ویرایشگر HTML یا ویرایشگر متن مانند Notepad یا WordPad تصمیم بگیرید. پس از نصب ویرایشگر HTML و تنظیم پوشه ، آماده شروع ایجاد صفحه خود هستید. با ایجاد پرونده ای به نام index.htm یا index.html به عنوان صفحه شروع خود شروع کنید. اگر هیچ پرونده ای مشخص نشود ، همه سرورهای موجود در اینترنت به دنبال یک پرونده ایندکس می گردند. پس از ایجاد فایل index.htm یا index.html و باز شدن آن در ویرایشگر HTML ، توصیه می کنیم کد منبع زیر را در صفحه خود وارد کنید. اگر ویرایشگر HTML شما کد HTML را به طور خودکار در صفحه شما قرار می دهد یا ویرایشگر WYSIWYG دارید ، می توانید از این مرحله صرف نظر کنید.

<html>

<head>

<title>My first web page</title>

</head>

<body>

Your web page content goes here.

</body>

</html>

کد فوق یک نمونه بسیار اساسی از کدی است که به تشکیل هر صفحه وب کمک می کند. همانطور که مشاهده می کنید ، کد با <html> شروع می شود ، که تعریف می کند همه آنچه در <html> وجود دارد کد HTML است. بعد ، شما <head> دارید ، که عنوان سند HTML شما را تعریف می کند. سوم ، بخش <title> را در <head> داریم ، که عنوان صفحه وب را که در بالای پنجره مرورگر اینترنت نمایش داده می شود ، تعریف می کند. سرانجام ، بخش <body> شامل آنچه در صفحه وب نشان داده شده است. در زیر کد اضافی برای بخش <body> کد وجود دارد که به شما کمک می کند تا با برخی از دستورات HTML که معمولاً مورد استفاده قرار می گیرند آشنا شوید.

<center><h1>Welcome to my web page</h1></center>

<hr>

<br>

<p>Hello and welcome to my first website.<br><br>

<b>These are my favorite links:</b><br>

<ul>

<li><a href=”https://www.computerhope.com”>Computer Hope</a></li>

<li><a href=”http://www.google.com”>Google</a></li></ul></p>

همانطور که از مشاهده کد بالا مشاهده می کنید ، متوجه خواهید شد که استفاده از دستورات اساسی HTML نسبتاً ساده است. ابتدا ، ما با <center> شروع می کنیم ، که به مرورگر می گوید اطلاعات موجود در این برچسب ها را متمرکز کند. بعد ، عبارت <h1> یا عنوان یک به مرورگر می گوید که متن را در بزرگترین سبک عنوان نمایش دهد. در مرحله بعدی ، برچسب <hr>به مرورگر می گوید که یک خط مستقیم در صفحه نمایش دهد. خط سوم حاوی <br> است که باعث ایجاد شکاف در صفحه می شود. بعد ، <p> مخفف “پاراگراف” است و به تفکیک متن در صفحه کمک می کند. در مرحله بعدی ، برچسب <b> مخفف bold است و متن موجود در برچسب را پررنگ می کند. بعد ، <ul> یک لیست گلوله شروع می کند و هر گلوله با برچسب <li> نشان داده می شود. سرانجام ، برچسب “<a href” روشی برای ایجاد پیوند به مکان دیگر است. در این مثال ، ما در حال ایجاد یک لیست گلوله ای از پیوندها به Computer Hope و Google هستیم.

نمایش تصاویر:

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

<img src=”https://www.computerhope.com/logo.gif” alt=”logo”>

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

<img src=”mypic.gif” alt=”My picture”>

یا اگر پوشه “تصاویر” دارید:

<img src=”images/mypic.gif” alt=”My images picture”>

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

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