لطفا صبر کنید...

آموزش فرانت اند رایگان، جلسه 6؛ عمق بیشتر در HTML

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

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

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

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

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

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

استایل سی اس اس

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

کامنت در html

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

تگ table

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

جداول در html

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

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

list html

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

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

لیست ها در html

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

div html