قبل از آموزش مقدماتی HTML ، بهتر است راجع به صفحات وبسایت توضیحات مختصری بدهیم ، یک صفحهی وبسایت شامل تصویر، متن و … میباشد. یکی از موارد مورد استفاده ازHTML مخفف (Hypertext Markup Language)کنار هم قرار دادن اجزای صفحات وبسایت است .با بهره گیری از عناصر و تگ های HTML میتوانیم نوشته ها ، عکسها ، ویدئوها ، و دیگر اجزا را درکنار هم قرار بدهیم تا برای کاربران سایت قابل مشاهده شود.
معرفی HTML به عنوان یک زبان کدنویسی وبسایت
زمانی که با یک مرورگر صفحات وبسایت را فراخوانی می کنید، سرور نتایج را به صورت کدهایی به مرورگر ارسال میکند، کدها توسط مرورگر پردازش شده و در نهایت به صورت یک صفحه کاربردی نمایش داده می شود بدون اینکه کاربر متوجه شود در پشت این صفحات ، کدنویسی های دقیق و استانداردی قرار گرفته است، این کدها در واقع همان دستورات HTML هستند.
قبل از ورود به دنیای کدنویسی وبسایت لازمه بدانیم که HTML یک زبان قراردادی است، یکی از اهداف ایجاد این زبان برنامه نویسی, نیاز به تعریف استانداردی فراگیر جهت بهره بردن در شبکه وبسایت می باشد که به کمک ان بتوان صفحات اینترنتی را ساخت و در برنامه هایی همانند مرورگر، نتیجه کار را مشاهده کرد، برای این کار HTML از Tag ها به عنوان علائم نشانه گذاری استفاده میکند .
تگها برای قرار دادن یک المان درون HTML است،عنوان مربوط به هر تگ نیز بین علامت های <> قرار داده می شود. به طور کلی هر تگ برای منظور خاصی مورد استفاده قرار میگیرد که با فهم آنها می توان یک صفحهی وبسایت کاربردی را ایجاد کرد.
نحوه ساخت یک صفحه وبسایت با کدهای HTML
ابتدا یک فایل New Text Document باز کرده و با پسوند html ذخیره کنید(برای این کار از منوی File گزینه Save As را انتخاب کرده و در قسمت تعیین نام فایل، به جای پسوند txt، پسوند html را جایگزین کنید).
برای شروع نوشتن برنامه از دو تگ اصلی head و bodyاستفاده می کنیم.
– دو تگ head و body : این دو تگ که دو جز اصلی تگ های HTML را تشکیل میدهند و دربرگیرنده تگ های زیرمجموعه، عناصر مورد نیاز و محتوای درونی یک صفحه وبسایت هستند همچنین تگ headشامل قسمت تنظیمات (کلمات کلیدی )و تگ body شامل قسمتهای قابل مشاهده (client) است.
– تگ title : از این تگ برای نمایش عنوان صفحه در مرورگر استفاده میشود، این عنوان همان متنی است که در سربرگ مرورگر برای هر صفحه نمایش داده می شود که زیر مجموعه ای از تگ head میباشد.
<title>this is my site | padide</title>
معرفی برخی از تگ های زیر مجموعه body
– تگ h1 : این تگ نشانگر سرتیترها است که می تواند مقادیری تا h6 را در بر بگیرد، هرچه عددی که مقابل h نوشته میشود بزرگتر باشد، اهمیت نوشته درون تگ کمتر میشود، به طور مثال اهمیت تگ h3 بیشتر از تگ h4 است.
<h3>bmw m3</h3> <h4>bmw m3</h4>
– تگ p : این تگ در کدهای HTML پاراگراف را نشان میدهد. همانطور که گفته شد HTML, زبان نشانه گذاری است و تگp در این نشانه گذاری نماینده پاراگراف میباشد.
<p>this is my car</p>
-تگ b :از این تگ درکدهای HTML جهت بولد کردن کلمات و زیباسازی بیشتر استفاده میشود به صورتی که تگ ابتدا و انتهای کلمه مورد نظر گذاشته میشود.
<p>this is my <b>car</b></p>
-تگ ol: یکی از تگ های مورد استفاده برای لیست بندی در html تگ olمخفف (order list) به معنی لیست ترتیبی میباشد به صورتی که پس از اجرای کد در صفحه مرورگر کلمات با عدد نشانه گذاری میشوند.
-تگ ul: یگی دیگر از تگ های مورد استفاده برای لیست بندی در htmlتگ ul مخفف (unordered list) به معنی لیست غیر ترتیبی میباشد به صورتی که پس از اجرای کد در صفحه مرورگر کلمات با دایره توپر نشانه گذاری میشوند.
-تگ li: از این تگ در لیست های ترتیبی وغیر ترتیبی برای نمایش دادن ایتم های لیست (سطرهای لیست) استفاده میشود.
<ol> <li>bmw m1</li> <li>bmw m2</li> <li>bmw m3</li> </ol>
– اکثر تگ های HTML با افزودن یک اسلش (/) به ابتدای تگ آغازین بسته می شوند، این تگ ها اصولا شامل محتوایی درون خود هستند،
<p>آموزش مقدماتی طراحی وبسایت </p>
هدف ما از این مقاله آموزش مقدماتی و اشنایی جزئی با مفهوم و کاربرد html و معرفی برخی از تگ های مورد نیاز و اساسی برای نوشتن یک برنامه به زبان html می باشد که کاربران عزیز میتوانند با مطالعه ان شروعی برای نوشتن یک برنامه به این زبان داشته باشند.
