دوره مقدماتی آموزش HTML و CSS | قسمت دوم – تگ های اصلی HTML

موضوع : HTML
تاریخ : 1399/09/01
مجموع پسند شده : 0
بازدید : 921

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

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

توجه : IDE ما نرم افزار vscode هست. اما شما می توانید از نرم افزار PHPStorm هم جهت کدنویسی HTML و CSS استفاده کنید.

جهت دانلود نرم افزار vscode به لینک زیر مراجعه کنید:

نرم افزار ویرایش زبان های برنامه نویسی Visual Studio Code 1.5.1.1

جهت دانلود نرم افزار PHPStorm به لینک زیر مراجعه کنید:

ویرایش حرفه ای کدهای PHP با نرم افزار JetBrains PhpStorm 2019.3.1

جهت آشنایی با مفهوم IDE به لینک زیر مراجعه کنید :

محیط یکپارچه توسعه نرم‌افزار

ابتدا نرم افزار ویرایش کد خود را باز کرده و یک پروژه جدید ایجاد میکنیم. برای ایجاد پروژه مراحل زیر را انجام دهید :

۱- نرم افزار VSCode رو اجرا کنید.

۲- از نوار منو گزینه file را زده و روی Open Folder کلیک میکنیم

باز کردن پوشه در نرم افزار vsCode

۳- به پوشه مورد نظر خود بروید و آن را انتخاب کنید.

انتخاب پوشه پروژه در vsCode

۴- سپس به قسمت چپ نرم افزار رفته و در ناحیه خالی آن کلیک راست کرده گزینه New File را انتخاب میکینیم.

ایجاد فایل جدید در vsCode - آموزش تگ های اصلی HTML

۵- یک نام برای فایل در نظر گرفته و وارد می کنیم. ما در اینجا از index استفاده کرده ایم.

توجه : نام فایل را بر اساس سلیقه خود انتخاب کنید ولی توجه داشته باشید که نام فایل بر روی سرور بسیار حائز اهمیت است. به این صورت که در سرور هنگام فراخوانی یک سایت ابتدا فایل index.html بارگذاری میشه اگه این فایل نبود default.html بارگذاری میشه و اگه هیچ یک از این فایل ها نبودند فایل هایی با پسوند هایی مثل : .php و .aspx و … که مربوط به فایل های برنامه نویسی هستند بارگذاری میشن البته اسم فایل ها بایستی به ترتیب index و default باشند.

ساختار اصلی فایل HTML

<html >
       <head>
           <title>وب استند</title>
       </head>
       <body>
           <h1>  به وبسایت وب استند مرجع آموزشهای برنامه نویسی و طراحی سایت خوش آمدید </h1>
       </body>
<html/ >

<html >

<head>

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

</head>

<body>

<h1> به وبسایت وب استند مرجع آموزشهای برنامه نویسی و طراحی سایت خوش آمدید </h1>

</body>

خب کدهایی که نوشته شده اند تگ های اصلی HTML یک صفحه وب هستند.

همونطور که مشاهده میکنید تگ html همه تگهای دیگر رو در بر گرفته و به اصطلاح تگ پدر یا ریشه بهش میگن و دو تگ body و head فرزاندان مستقیم اون هستن و این دو تگ با هم برادرن .

بریم سراغ بررسی بقیه تگهای بالا!

تگ head در HTML

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

تگ title در HTML

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

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

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

تگ title فقط در داخل تگ head استفاده می شود.

تگ title از تگ های اصلی HTML

تگ body در HTML

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

تمامی کدهایی که در body نوشته میشود ، محتوای صفحه ما را تشکیل می دهند و مرورگر برای کاربر محتوای این تگ را نمایش میدهد.

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

تگهای h1 تا h6 در HTML

این تگها برای تیترهای وبسایت شما هستند که هر چقدر از سمت h1 به سمت h6 حرکت کنیم اندازه فونت آنها کوچکتر می شود.

البته توی فونت های فارسی بهتره حتما از CSS برای تغییر به اندازه دلخواه نسبت به فونت خود استفاده کنید.

این تگ ها به صورت پیش فرض پر رنگ (Bold) هستند.

خب این قسمت از آموزش هم تموم شد و امیدواریم براتون مفید واقع شده باشه.

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