برنامه نویسی
دفعات بازدید ۷۲جلسه اول آموزش برنامه نویسی با زبان html آشنایی با تگ ها
۱
آموزش برنامه نویسی جلسه اول
در این سری آموزش ها هدف آموزش طراحی سایت با محوریت یادگیری زبان های Html ,css , js است.
در قسمت اول با تعریف تگ ها شروع می کنیم.
برای ساخت یک سایت و نوشتن آن باید از زبان html استفاده کنیم. این زبان بر پایه یک سری از تگ ها نوشته می شود.
تگ ها عبارت هایی هستند که به محتواهای مربوط به خود معنا می بخشند. مانند پرانتز و براکت این تگ ها دو حالت باز و بسته را دارند. و محتواها داخل این بخش های باز یا بسته قرار میگرد.
در زیر تعدادی از این تگ ها را می بینیم
همان طور که می بینید الگوی تگ های باز و بسته مشابه یکدیگر هستند و صرفا اسم تگ متفاوت است.
بعضی تگ ها به دلیل اینکه محتوایی در داخل خود نمی پذیرند نیازی به نسخه باز و بسته ندارند. در زیر مثال هایی از این موارد را می بینیم.
زبان html یک زبان درختی است ، به این معنی که در این زبان شما یک تگ والد دارید که تمامی تگ ها فرزند مستقیم یا غیر مستقیم این تگ هستند. این تگ همان تگ html است.
فرزندان یا محتوای یگ تگ در بین المان آغازین و پایانی آن تگ نوشته می شود مانند زیر .
برای شروع کار ابتدا لازم است یک محیط کد نویسی برای خود آماده کنید.
ما توصیه می کنیم از نرم افزار vscode استفاه کنید. این نرم افزار به شما امکان برنامه نویسی و مدیریت پروژه خود را می دهد.
می توانید این برنامه را به صورت رایگان از لینک زیر دانلود کنید.
https://soft98.ir/software/programming/53-visual-studio-code-1.html
پس از دانلود و نصب برنامه آن را اجرا کنید و یک فایل جدید با هر نامی که دوست دارید بسازید. فقط پسوند آن را از نوع html قرار دهید.
این کار باعث می شود که شما بتوانید این فایل را در مرور گر ها اجرا کنید.
سپس می توانید برای اجرای این فایل آن را روی مرورگر خود بکشید تا آن را اجرا کند یا از محیط vscode از منوی run گزینه start without debuging را انتخاب کنید. با این کار یک مروگر را می توانید انتخاب کنید و با آن فایل نوشته شده را اجرا کنید.
هر فایل html در ابتدا بهتر است که با عبارت
شروع شود. این عبارت به مرورگر می فهماند که زبان این فایل از چه نوعی است .
سپس در ادامه برای ایجاد تگ والد اصلی از تگ استفاده می کنیم.
همیشه به یاد داشته باشید که هنگام باز کردن یک تگ حتما تگ پایانی را نیز ایجاد کنید تا بعدا به مشکل نخورید.
مهم ترین فرزندان تگ html دو تگ body و head هستند.
تگ بادی تمام محتوای درون خود را به بازدید کننده نشان می دهد. در حالی که تگ head برای اضافه کردن یک سری ویژگی ها و وابستگی ها به فایل هستند.
پس فعلا درون تگ html خود یک تگ body ایجاد می کنیم. حالا نتیجه باید به این شکل باشد.
با ذخیره و اجرای این فایل در مرورگر با یک صفحه ی سفید و خالی مواجه می شوید. این عادی است چرا که شما محتوایی ننوشته اید و صرفا جایگاه هایی تعریف کرده اید.
حالا بهتر است یک محتوای قابل مشاهده ایجاد کنیم.
یک عبارت در داخل body بنویسید سپس فایل را ذخیره کنید و دوباره مرورگر را رفرش کنید.تا نتیجه را ببینید.
برای مثال عبارت زیر را در نظر بگیرید.
hello world!!!
نکته ای که ممکن است با آن مواجه شوید این است که هر چقدر در فایل از enter و یا فاصله استفاده کنید تنها یک فاصله در مرورگر دیده می شود.علت این است که زبان html نسبت به فاصله و خط جدید حساس نیست.
برای ایجاد خط جدید باید از تگ
استفاده کنید.
برای ایجاد سر فصل و تیتر ها می توانید از تگ های h1 تا h6 استفاده کنید.
به این ترتیب که h1 بزرگترین فونت و مهم ترین تیتر است تا h6 که بسیار ریز و کم اهمیت است.
```
hello world!!!
hello world!!!
hello world!!!
hello world!!!
hello world!!!
hello world!!!
```