HTML

ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.

 

 

[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]

طرح کلی صفحات HTML

صفحات وب مانند صفحات روزنامه ها و مجلات، محتوای خود را در ستون ها و طرح های خاصی نمایش می دهند. با معرفی HTML5 مبحث semantics وارد دنیای طراحی وب شد و حالا عناصری را داریم که semantic هستند.(ایران گستر)

semantic در لغت به معنی «معنایی» است و وقتی می گوییم عناصرِ semantic، منظورمان عناصری است که در HTML5 دیگر تنها یک عنصر نیستند، بلکه برای موتورهای جست و جو معنی خاصی دارند.(ایران گستر)

عناصر semantic ای که برای تعریف قسمت های مختلف یک صفحه استفاده می شوند از این قرار اند:(ایران گستر)

• <header> مسئول تعریف قسمت header در سایت ها است
• <nav> مسئول تعریف منوی سایت ها (نوار navigation) است
• <section> مسئول تعریف یک قسمت در سایت ما است
• <article> مسئول تعریف قسمتی مستقل است که دارای مقاله ای از سایت ما است
• <aside> مسئول تعریف قسمت کناری و جانبی سایت است
• <footer> مسئول تعریف قسمت footer در سایت ها است
• <details> مسئول تعریف جزئیات بیشتر در صفحات وب است
• <summary> مسئول تعریف یک heading برای عنصر <details> است.(ایران گستر)

برای درک بهتر به تصویر زیر نگاه کنید:(ایران گستر)

طرح کلی HTML5

این نوع طرح، تنها طرحی نیست که شما می توانید برای سایت خود انتخاب کنید بلکه طرح های بسیار زیادی وجود دارد اما ما می خواهیم در این قسمت در مورد این طرح صحبت کنیم چرا که یکی از قدیمی ترین و اصیل ترین طرح ها برای صفحات HTML است.(ایران گستر)

برای ایجاد این نوع طرح چند ستونه 5 روش اصلی وجود دارد:(ایران گستر)

• استفاده از جداول HTML (این مورد منسوخ شده است و به هیچ عنوان پیشنهاد نمی شود.
• استفاده از خاصیت float در CSS
• استفاده از flexbox در CSS
• استفاده از framework های زبان CSS
• استفاده از grid ها در CSS (ایران گستر)

جداول HTML

در سال های قبل (بسیار قبل تر از معرفی HTML5) طراحان مجبور بودند برای طراحی سایت های چند ستونه (طرح موجود در تصویر بالا) از <table> یا همان جدول ها در HTML استفاده کنند. واضح است که جدول ها برای شکل دهی به صفحات وب ساخته نشده اند بلکه برای نمایش داده های خاص که نیاز به جدول دارند می باشند.(ایران گستر)

استفاده از <table> برای شکل دادن به صفحات وب تان کاری بسیار طاقت فرسا و غیر استاندارد است که کاملا منسوخ شده و هیچ انسان عاقلی دیگر از آن استفاده نمی کند.(ایران گستر)

فریم ورک های CSS

استفاده از framework های زبان CSS نیز یکی دیگر از این گزینه ها است اما از آنجا که نمی توان یک framework کامل CSS را در این مقاله توضیح داد، به صورت خلاصه از کنار آن عبور می کنیم چرا که شما می توانید با جست و جو در اینترنت در مورد فریم ورک های CSS اطلاعات بیشتری کسب کنید. اما به طور خلاصه چند مورد از این فریم ورک ها را به شما معرفی می کنیم.(ایران گستر)

فریم ورک Bulma

[caption id="attachment_77302" align="aligncenter" width="750"] Bulma CSS Framework[/caption]

فریم ورک Bulma یکی از محبوب ترین فریم ورک های CSS است که قبلا با نام Scotch شناخته میشد. از مزیت های اصلی این فریم ورک این است که از CSS خالص تشکیل شده است و هیچ کد جاوا اسکریپتی ندارد؛ بنابراین تنها باید یک فایل css را درون پروژه ی خود import کنید و نیازی به فایل های js نیست.(ایران گستر)

همچنین این فریم ورک بر اساس Flexbox طراحی شده است و بر پایه ی Sass می باشد بنابراین تنها از کدهایی استفاده خواهید کرد که به آن ها نیاز داشته باشید. طراحی با این فریم ورک کاملا واکنش گرا (responsive) بوده و اولویت خود را بر گوشی های موبایل قرار داده است.(ایران گستر)

فریم ورک Bootstrap

[caption id="attachment_77313" align="aligncenter" width="750"] Bootstrap Framework[/caption]