آموزش برنامه نویسی جلسه اول

در این سری آموزش ها هدف آموزش طراحی سایت با محوریت یادگیری زبان های Html ,css , js است.
در قسمت اول با تعریف تگ ها شروع می کنیم.
برای ساخت یک سایت و نوشتن آن باید از زبان html استفاده کنیم. این زبان بر پایه یک سری از تگ ها نوشته می شود.
تگ ها عبارت هایی هستند که به محتواهای مربوط به خود معنا می بخشند. مانند پرانتز و براکت این تگ ها دو حالت باز و بسته را دارند. و محتواها داخل این بخش های باز یا بسته قرار میگرد.
در زیر تعدادی از این تگ ها را می بینیم

<html>
</html>

<body>
</body>

<div>
</div>

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

<br/>
<hr/>
<input/>

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

<html>
    <body>
        <input/>
    </body>
</html>

برای شروع کار ابتدا لازم است یک محیط کد نویسی برای خود آماده کنید.
ما توصیه می کنیم از نرم افزار vscode استفاه کنید. این نرم افزار به شما امکان برنامه نویسی و مدیریت پروژه خود را می دهد.
می توانید این برنامه را به صورت رایگان از لینک زیر دانلود کنید.
download
پس از دانلود و نصب برنامه آن را اجرا کنید و یک فایل جدید با هر نامی که دوست دارید بسازید. فقط پسوند آن را از نوع html قرار دهید.
این کار باعث می شود که شما بتوانید این فایل را در مرور گر ها اجرا کنید.
سپس می توانید برای اجرای این فایل آن را روی مرورگر خود بکشید تا آن را اجرا کند یا از محیط vscode از منوی run گزینه start without debuging را انتخاب کنید. با این کار یک مروگر را می توانید انتخاب کنید و با آن فایل نوشته شده را اجرا کنید.
هر فایل html در ابتدا بهتر است که با عبارت
<!DOCTYPE html>
شروع شود. این عبارت به مرورگر می فهماند که زبان این فایل از چه نوعی است .
سپس در ادامه برای ایجاد تگ والد اصلی از تگ استفاده می کنیم.
همیشه به یاد داشته باشید که هنگام باز کردن یک تگ حتما تگ پایانی را نیز ایجاد کنید تا بعدا به مشکل نخورید.
مهم ترین فرزندان تگ html دو تگ body و head هستند.
تگ بادی تمام محتوای درون خود را به بازدید کننده نشان می دهد. در حالی که تگ head برای اضافه کردن یک سری ویژگی ها و وابستگی ها به فایل هستند.
پس فعلا درون تگ html خود یک تگ body ایجاد می کنیم. حالا نتیجه باید به این شکل باشد.

<!DOCTYPE html>
<html>
    <body>
    
    </body>
</html>

نتیجه

با ذخیره و اجرای این فایل در مرورگر با یک صفحه ی سفید و خالی مواجه می شوید. این عادی است چرا که شما محتوایی ننوشته اید و صرفا جایگاه هایی تعریف کرده اید.
حالا بهتر است یک محتوای قابل مشاهده ایجاد کنیم.
یک عبارت در داخل body بنویسید سپس فایل را ذخیره کنید و دوباره مرورگر را رفرش کنید.تا نتیجه را ببینید.
برای مثال عبارت زیر را در نظر بگیرید.

<!DOCTYPE html>
<html>
    <body>
        hello
        
        world!!!
    </body>
</html>

نتیجه

hello world!!!

نکته ای که ممکن است با آن مواجه شوید این است که هر چقدر در فایل از enter و یا فاصله استفاده کنید تنها یک فاصله در مرورگر دیده می شود.علت این است که زبان html نسبت به فاصله و خط جدید حساس نیست.
برای ایجاد خط جدید باید از تگ <br/> استفاده کنید.
برای ایجاد سر فصل و تیتر ها می توانید از تگ های h1 تا h6 استفاده کنید.
به این ترتیب که h1 بزرگترین فونت و مهم ترین تیتر است تا h6 که بسیار ریز و کم اهمیت است.

<!DOCTYPE html>
<html>
    <body>
        <h1>hello world!!!</h1>
        <h2>hello world!!!</h2>
        <h3>hello world!!!</h3>
        <h4>hello world!!!</h4>
        <h5>hello world!!!</h5>
        <h6>hello world!!!</h6>
    </body>
</html>

نتیجه

hello world!!!

تگ بعدی که قصد آشنایی با آن را داریم تگ button است. از این تگ برای تعامل کاربر با سایت استفاده می کنیم ، به این صورت که کاربر بتواند روی دکمه ای کلیک کند .

<button>Text</button>

خروجی

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

<input/>

خروجی

استفاده از این تگ به صورت ساده باعث ایجاد محلی برای ورود نوشته برای کاربر می شود.
در زبان html هر تگی می تواند یک یا تعدادی ویژگی نیز داشته باشد. یکی از این ویژگی ها برای تگ input است که می تواند نوع تعامل کاربر را تعیین کند.
برای مثال اگر میخواهید کاربر بتواند به جای ورود نوشته تاریخ انتخاب کند می توانید ویژگی type را برابر با date قرار دهید.

<input type="date">

خروجی

یا برای مثال اگر می خواهید کاربر زمان را انتخاب کند این مقدار را time قرار دهید.

<input type="time">

خروجی

البته توجه داشته باشید که نمایش این موارد در مرور گرهای مختلف متفاوت خواهد بود.
همچنین می توانید از تگ input برای ایجاد دکمه استفاده کنید. برای این کار ویژگی type را برابر button قرار می دهیم.
همچنین ویژگی value را برابر مقداری که می خواهیم دکمه نمایش دهد می گذاریم.

<input type="button" value="click me" />

خروجی