سلام خدمت دوستان و همراهان عزیز هولوسن

این دوره برنامه نویسی فرانت اند (front-end) تحت وب، با زبان های HTML و CSS را شامل میشود.

در جلسه اول با معرفی آموزش فرانت اند رایگان در خدمتتان بودیم. و در جلسات گذشته با زبان HTML آشنا شدیم و همینطور با ساخت اولین صفحه HTML ، اکستنشن‌های VSCode و Chrome و لینک‌ها و تصاویر در خدمتتان بودیم . در این جلسه که آشنایی با استایل‌ها، کامنت، جداول، لیست‌ها و تگ div میباشد در خدمتتان هستیم.

پس با ما همراه باشید. ?‍?
مارو هم از نظرات خوب خودتون بی بهره نذارید. ❤?

جهت دانلود فایل‌های این جلسه اینجا کلیک کنید

یکی از خصوصیاتی که می‌توانیم برای استایل‌دهی روی تگ‌های HTML از آن استفاده کنیم، خصوصیت style است. مقادیری که در این خصوصیت می‌توانیم استفاده کنیم، همان استایل‌های cssای است. برای همین بهتر است تا این بخش را کامل به جلساتی که به CSS مسلط شدیم موکول کنیم.

 

 

زمانی که می‌خواهیم برای کدهایمان توضیحاتی اضافه کنیم که برنامه‌نویسان دیگر هم بتوانند راحت‌تر متوجه کاری که آن کد می‌کند شوند، میتوانیم از کامنت‌ها استفاده کنیم. یک برنامه‌نویس خوب، همیشه در کدهای خود کامنت‌های مرتبط و مناسب می‌نویسد.

 

 

تگ دیگری که در این جلسه با آن آشنا شدیم، تگ table برای ساخت جدول است. به کمک این تگ می‌توانیم جدول ایجاد کنیم. این جداول می‌توانند جداول اطلاعاتی باشند، یا می‌توانند فقط برای مرتب سازی المنت‌ها در کنار و زیر هم مورد استفاده قرار گیرند.

 

 

این تگ به تنهایی ظاهر مناسبی برای ما نخواهد داشت. برای همین بهتر است که از CSS کمک بگیریم تا بتوانیم جداول زیبایی را داشته باشیم.

 

 

بعد از تگ table به سراغ تگ‌های مربوط به لیست رفتیم. لیست‌ها به دو دسته کلی تقسیم میشوند.

• لیست‌هایی که ترتیب در آن‌ها مهم است (ordered lists)
• لیست‌هایی که ترتیب در آن‌ها مهم نیست (unordered lists)

 

 

برای لیست‌های با ترتیب از تگ ol و برای لیست‌های بدون ترتیب از ul استفاده می‌کنیم.

بعد از این‌که یکی از لیست‌ها را انتخاب کردیم و تگ مورد‌نظر را نوشتیم، از تگ li به معنی list item برای موارد داخل لیست استفاده می‌کنیم.

 

 

و در انتها تگ مهمی به نام div را داریم. از این تگ برای مرزبندی و جداسازی ناحیه‌ها استفاده می‌کنیم. این تگ بدون استفاده از CSS ظاهر خاصی ندارد و صرفا برای جداسازی استفاده می‌شود. اما زمانی که از استایل‌ها استفاده کنیم، خیلی شرایط بهتر خواهد شد. مثلا برای نگهداری دو ناحیه کنار هم، آن‌ها را داخل دو تگ div قرار می‌دهیم و با استایل‌های display:inline-block و تنظیم کردن عرض موردنظر، آن‌ها را کنار هم قرار می‌دهیم. در جلسات آینده با این مورد آشنا خواهیم شد.

 

ترتیب پیشنهادی برای یادگیری طراحی سایت

پیشنهاد میکنیم از دیگر آموزش های هولوسن هم دیدن فرمایید