جواد مهدی‌نیا 291 2 کامنت 1400/11/18

شروع طراحی سایت با یادگیری html

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

 html چیست؟

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

برای یادگیری html چه چیز نیاز است؟

اگر بخواهید بدانید که برای یادگیری html چه چیزی نیاز است؟ باید گفت که برای ساخت یک صفحه html نیاز به برنامه‌های پیچیده ای ندارید و حتی این صفحه را با یک فایل notepad هم می‌توانید بسازی و در نهایت، پسوند فایل را از .txt به .html تغییر دهید و با کلیک بر روی آن نتیجه را در مرورگر ببینید. اما برای اینکه کمی راحت‌تر و حرفه‌ای‌تر کار کنید، لازم است تا یک ادیتور یا ویرایشگر html را ابتدا نصب کنید. با یک سرچ اولیه متوجه می شودید که ویرایشگرهای متعددی در بستر اینترنت به این منظور فراهم شده‌اند که دو نمونه از معروف‌ترین آنها Atom و Visual Studio Code هستند. در اینجا ما قصد نداریم تا مقایسه‌ای بین این دو بکنیم و تنها به معرفی آنها پرداختیم؛ اما ما برای آموزش از Visual Studio Code (ویژوال استودیو کد) استفاده می کنیم.

اتم و ویژوال استودیو کد

چگونه Visual Studio Code را نصب کنیم؟

اگر بخواهید Visual Studio Code را نصب کنید، باید ابتدا به وبسایت دانلود فایل نصب ویژوال استودیو کد مراجعه کنید، سپس یکی از سیستم‌عامل‌های ویندوز، لینوکس یا مک و سایر جزئیات مانند نسخه 32 یا 64 بیت و … را انتخاب کنید و شروع به دانلود کنید و سپس با کلیک روی آن مراحل نصب را سپری کنید تا روی سیستم شما نصب گردد.

ویژوال استودیو کد

چگونه اولین کد html بنویسیم؟

بسیاری از دوستان که یک ویرایشگر html را نصب می‌کنند، بلافاصله دنبال این هستند که اولین کد html خود را بنویسند؛ اما چگونه؟ برای نوشتن اولین کد html با ویژوال استودیو کد لازم است ابتدا یک فولدر در جایی که می‌خواهید پروژه‌های خود را ثبت کنید، ایجاد کنید. نام آن را مثلا 001 بگذارید، چرا که این اولین پروژه شما است. وارد ویژوال استودیو کد شوید، از منوی بالا روی File و سپس گزینه Open Folder کلیک کنید. فولدری که با نام 001 ساخته بودید را انتخاب کنید. حالا هر عملیاتی که انجام دهید در همین فولدر انجام می‌شود. از بخش سمت چپ ویرایشگر، روی Explorer کلیک کنید تا چنانچه آن را نمایش نمی‌دهد، ظاهر شود؛ حالا در همین پنجره Explorer و از قسمت بالای آن، روی گزینه New File که یک علامت بعلاوه (+) هم در کنار خود دارد کلیک کنید. در باکس ظاهر شده نام فایل را قرار دهید (مثلا Index.html). به این ترتیب یک فایل html با نام Index در فولدر 001 ایجاد می‌شود که محتوای داخل آن در پنجره سمت راستی مشاهده می‌شود. به دلیل اینکه هنوز چیزی در آن ننوشته اید، خالی است اما نگران نباشید چرا که می‌خواهیم آن را با کدهای ساده و اولیه پر کنیم.

در اینجا لازم به توضیح است که یک فایل استاندارد html بخش‌های مشخصی با ترتیب مشخص باسد داشته باشد. برای مثال ابتدا نوع فایل را که به صورت html است به مرورگر اعلام می‌کنند که با DOCTYPE مشخص می‌شود؛ سپس خود تگ اصلی <html> نوشته شده و آنگاه بخش <head> و سپس <body> هم آورده می‌شود. البته دقت کنید که همه این تگ‌ها باید بسته شوند که این کار با یک اسلش (/) قبل از پایان محل بسته شدن تگ نشانه گذاری می‌شود و به این ترتیب محدوده هر تگ مشخص می‌شود. اگر بخواهید بدانید که تاکنون چه چیزهایی را گفته ایم به پنل زیر دقت کنید:

<!DOCTYPE html>
<html>

   <head>   

   </head>   

   <body>   
    
   </body>   

</html>

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

آموزش html در ویژوال استودیو کد

بله دوستان به همین سادگی؛ ورود اولین گامتان را به دنیای طراحی وب و سایت تبریک می‌گوییم؛ با نیوسان‌وب همراه باشید تا در آینده درخصوص تگ‌های دیگر، کاربردها و روش کار با هر یک توضیحات لازم را ارائه نماییم.

اگر بخواهید یک مثال به صورت فیلم آموزشی از مطالب گفته شده را ببینید، می‌توانید ویدئوی زیر را مشاهده بفرمایید.

جمع‌بندی

اگر بخواهیم مطالب را جمع‌بندی کنیم باید بگوییم که در این مقاله در خصوص چیستی html نکاتی را ارائه کردیم؛ گفتیم که باید از یک ویرایشگر به منظور کار با فایل های html استفاده کنیم که به این منظور ما visual studio code را نصب کردیم. طریقه پیکر بندی اولیه یک فایل html را گفتیم و در نهایت توصیه‌هایی را برای افزایش خوانایی کدهای شما انجام دادیم که در آینده و با مقالات تکمیلی، شما را با تگ‌های بیشتر و همینطور کاربردهای آنها آشنا خواهیم کرد.

لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.

دیدگاه خود را ثبت کنید

دیدگـاه مخاطبــان
نام: نسیم | 1401/3/24

عالی بود دست شما درد نکنه

پاسخ

نام: جواد | چهارشنبه، 1401/3/25

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

نام: عاطفه | 1401/4/24

مطالب سایت بی نظیره.ممنون که رایگان در اختیار همه قرار میدید.

پاسخ

نام: جواد | جمعه، 1401/4/24

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