اکنون به مرحلهای رسیدهایم که باید شروع به نوشتن دستورات و تگهای HTML کنیم. برای این منظور، ابتدا باید محیط و نرمافزار مورد نظر برای انجام کار را انتخاب کنیم. برای نوشتن کدهای HTML، میتوانید از هر نرمافزاری که دوست دارید استفاده کنید و بدون تأخیر کار را آغاز کنید. در ادامه به معرفی مهم ترین تگ های HTML خواهیم پرداخت.
فیلم آموزشی شروع کار و معرفی مهم ترین تگ های Html
برای مشاهده فیلم از فیلترشکن استفاده کنید.
نرم افزار جهت نوشتن کدهای hTML
بهترین نرم افزار ها جهت نوشتن تمامی تگ های hTML چیست ؟
از جمله سادهترین ویرایشگرهای متنی میتوان به Notepad اشاره کرد، که میتوانید از آن برای نوشتن کدها استفاده کنید. البته همان گونه که در جلسه قبلی ذکر شد، می توانید از سایر نرم افزارهای دیگر که پیشرفته تر هستند استفاده کنید. برخی از این نرم افزارها عبارت اند از :
- Adobe dreamweaver
- visual studio code
- vs code
برای شروع از کدام برنامه استفاده کنیم ؟
بهتر است برای شروع کدنویسی در محیطی ساده شروع به کار کنید. از این رو ما به شما نرم افزار notepad را پیشنهاد می دهیم. اگرچه سایر نرم افزار بسیار به سرعت شما در کد نویسی می افزایند، اما در نظر داشته باشید که برای شروع بهتر است خودتان کد ها را به صورت کامل یادداشت کنید تا به خوبی آن ها را در حافظه بلند مدت خود ثبت کنید.
فوت کوزه گری در نوشتن کد های html
همواره پیش از شروع یک پروژه طراحی وب، باید ابتدا یک پوشه جدید ایجاد کنید. این کار به این دلیل ضروری است که در فرآیند طراحی وب، باید فایلهای مختلفی را ایجاد کنید؛ به عنوان مثال، فایل برای صفحه اصلی، فایلهای دیگر برای صفحات مختلف سایت، و همچنین پوشههای مختلف برای تصاویر، ویدیوها و غیره. لازم است که همه این فایلها و پوشهها را در یک پوشه اصلی قرار دهیم.
پس اولین کاری که باید انجام دهید، ایجاد یک پوشه است. سپس به سمت باز کردن یک فایل در Notepad میرویم. برای انجام این کار، ابتدا به منوی “Start” سیستمعامل خود بروید، سپس در قسمت جستجو کلمه “Notepad” را جستجو کنید و برنامه Notepad را اجرا کنید. حالا به سمت نوشتن تگهای HTML حرکت میکنیم.
معرفی مهم ترین تگ های HTML
تگهای مهم در HTML ابتدا مهمترین تگ یعنی <html></html> را مینویسیم و درون آن تگهای HTML را قرار میدهیم. اولین تگی که درون تگ <html> قرار میگیرد، تگ <head></head> است که برای سرصفحه استفاده میشود. درون این تگ هم تگهای دیگری قرار میگیرند که در حال حاضر به آن اشاره نمیکنیم. دومین تگی که درون تگ <html> قرار میدهیم، تگ <body></body> است که محتوای اصلی صفحه را تعریف میکند.
تا به اینجا، سه تگ را نوشتهایم؛ حالا به سمت هدف اصلیمان یعنی ذخیره و اجرای کدهایمان حرکت میکنیم تا خروجی کارمان را مشاهده کنیم. در این مرحله، باید کدهایی که نوشتهایم را ذخیره کنیم؛ میتوانیم با فشردن همزمان کلیدهای “Ctrl” و “S” این کار را انجام دهیم. همچنین میتوانیم از منوی “File” در نوار بالای پنجره استفاده کرده و گزینه “Save as” را انتخاب کنیم. با انجام این کار، پنجرهای باز میشود و محل ذخیره فایل را انتخاب میکنیم. شما کجا را انتخاب میکنید؟ پاسخ واضح است، همان پوشهای که برای پروژهمان ایجاد کردهایم.
حالا باید یک نام و پسوند برای فایلمان انتخاب کنیم. در ابتدا، باید به خاطر داشته باشیم که باید از پسوند HTML یا HTM استفاده کنیم. هر کدام را که ترجیح میدهید میتوانید انتخاب کنید. برای نام فایل نیز باید از “index” استفاده کنیم.
معرفی سایت آموزشی منبع HTML
سایت w3schools از سایت های معتبر در زمینه آموزش زبان های برنامه نویسی مختلف است که می توانید از آن استفاده کنید. از ویژگی های منحصربه فرد سایت W3CHOOLS می توان به بروزرسانی مداوم آن اشاره کرد. در نظر داشته باشید که با گذشت زمان برخی از کدها منسوخ و برخی اضافه می شوند. برای اینکه همیشه بتوانید اطلاعات روز را داشته باشید می توانید به این سایت مراجعه کنید.
معرفی تگ های HEAD
معرفی تگ <TITLE>
یکی از مهم ترین تگ های hTML تگ تاتیل است که در این آموزش در قسمت HEAD استفاده می شود. اصلی ترین نقش TITLE، مشخص نمودن عنوان صفحه است. این تگ، یک تک زوج است که نیاز به شروع و پایان دارد.
معرفی تگ های BODY
معرفی تگ تیتر <H>
از مهم ترین تگ های HTML، تگ تیترها است که آن ها را با حروف H نمایش می دهیم. تیتر ها به ترتیب اولیت از H1 شروع و تا H6 ادامه دارد. به عنوان مثال این تک را به این شکل می نویسند. <H2></H2>
در صورتی که با سئو و تولید محتوا آشنایی داشته باشید، از اهمیت تیتر ها اطلاع خواهید داشت. اهمیت تیتر ها از H1 شروع می شود و کم اهمیت ترین آن ها H6 خواهد بود.
به صورت کلی در یک صفحه تنها یک تگ H1 خواهیم داشت. از طرفی تگ های H2 به بعد می توانند به دفعات در صفحه فراخوانی و استفاده شوند.
معرفی تک پاراگراف <P>
از دیگر مهم ترین تگ های HTML می توان به تگ پاراگراف اشاره کرد. در واقع برای نوشتن متن های یک صفحه از تگ پاراگراف استفاده می کنیم. این تگ را به صورت P نمایش می دهیم. این تگ نیز همانند تگ تیتر، زوج است. <P></P>
سخن پایانی
در آموزش جلسه دوم به محیط نرم افزار برنامه نویسی و مهم ترین تگ های HTML اشاره کردیم. بهتر است قبل از شروع جلسه سوم، تمامی مراحل فوق را به عنوان تمرین انجام دهید تا به خوبی مسلط شوید. در صورت هرگونه ابهام، می توانید سوالات خود را در قسمت نظرات وارد کنید.
برای مشاهده کل دوره آموزش مقدماتی HTML و CSS کلیک کنید.