پیش بارگیری

طراحی سایت ساده با html

طراحی سایت ساده با html

طراحی سایت ساده با html

اگر با زبان های برنامه نویسی آشنایی ندارید ممکن است, یادگیری آنها برای طراحی سایت ساده با HTML سخت باشد. طراحی سایت ساده با HTML, ساده ترین راه برای کدگذاری یک وب سایت است. طراحی سایت ساده با HTML امکان طراحی یک وب سایت حرفه ای را در کوتاهترین زمان فراهم می کند. وب سایت هایی که از ابتدا تا انتها کدنویسی می شوند, از جمله پروژه های طراحی سایت اختصاصی به شمار می آیند.

شروع طراحی سایت ساده با HTML

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

HTML: زبان نشانه گذاری ابر متن است, که صفحات وب را سازماندهی می کند. متن ها و پیوند ها را در این بخش مورد استفاده قرار می دهیم.

TAGs: برچسب ها, نحوه عملکرد کد های HTML را تعیین می کنند. تگ ها با براکت های زاویه دار مشخص می شوند, مانند: تگ باز <title> و تگ بسته <title/> که محتوای متنی داخل آنها قرار می گیرند.

PHP: یک زبان برنامه نویسی سمت سرور است, که بیشتر در طراحی سایت ساده با HTML کاربرد دارد. این زبان, بیشتر برای جمع آوری داده استفاده می شود. تقریبا, همه فرم های تماس با زبان PHP کار می کنند.

Comments: نظرات یادداشت هایی هستند, که توسط برنامه نویس نوشته می شوند. نظرات هیچ عملکردی در صفحه ایجاد نمی کنند, فقط اطلاعاتی درباره عملکرد کدها به شما می دهند.

طراحی سایت ساده با html

هدر یا سرصفحه

راه اندازی وب سایت با HTML یک طراحی ساده است, که برنامه نویسان مبتدی با آن کار می کنند. یک قالب HTML/CSS, را دانلود و سفارشی سازی نمایید. پروژه خود را در یک ویرایشگر متن مانند: PHPTORM, VS CODE و… باز کنید, سپس صفحات HTML را در مرورگر اجرا کنید. کدهای نوشته شده را ذخیره کنید, و مرورگر خود را بازیابی نمایید تا تغییرات ایجاد شده را ببینید.

عنوان: برای تغییر نام برگه به نام دلخواه, قطعه کد زیر را به کدنویسی خود اضافه کنید.

<–Title–!>

<title/>نام دلخواه<title>

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

<–logo–!>

<a class=”logo-class” href=”index.html”>

<“img class=”logo logo-img” src=”assests/img/logo.png>

<a/>

برای اینکه طراحی سایت ساده با HTML درست و زیبا انجام شود, از تصاویر با فرمت PNG استفاده نمایید. تصاویر با فرمت PNG دارای پس زمینه شفاف هستند, و به خوبی روی قالب بارگذاری می شوند. ویژگی alt را برای تمام تصاویر تنظیم کنید, چرا که در صورت عدم بارگذاری تصویر ویژگی alt به کاربر نمایش داده می شود.

نمایش نام و کاربرد وب سایت

برای نمایش نام و کاربرد وب سایت, از تگ های h1 و h2 داخل اسلایدر استفاده کنید.

<h1/>نام سایت<“h1 class=”style-home-page>

<h2/>توصیفات وب سایت<“h2 class=”style-description>

نمایش منو و زیر منو

برای نمایش منو و زیرمنو, از تگ های ul و li به شکل زیر استفاده می کنیم.

<ul/>نام منو<“ul class=”style-ul>

<li/>نام زیرمنو<li>

<li/>نام زیرمنو<li>

<li/>نام زیرمنو<li>

<ul/>

پاورقی وب سایت

برای ویرایش فوتر (پاورقی) در طراحی سایت ساده با HTML از قطعه کد های زیر استفاده می کنیم.

 <div class=”col-lg-8 col-md-9 col-sm-12 col-xs-12 display-none”>
                <div class=”header-contact-info”>
                    <ul>
                        <li>
                            <div class=”link_btn float_left”>
                       <a/>رزرو نوبت ملاقات<a href=”contact-us.html” class=”thm-btn bg-c>
                           </div>
                        </li>
                        <li>
                            <div class=”iocn-holder float_right”>
                                <span class=”icon-technology-1″></span>
                            </div>
                            <div class=”text-holder textalign-right”>
                                <h6>تماس با ما</h6>
                                <p>021-12345678</p>
                            </div>
                        </li>
                        <li>
                            <div class=”iocn-holder float_right”>
                                <span class=”icon-email-filled-closed-envelope”></span>
                            </div>
                            <div class=”text-holder mail-holder textalign-right”>
                                <h6>ارتباط با ما</h6>
                                <a href=”mailto:info@mail-example.ir”><p>info@mail-example.ir</p></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

ویرایش آدرس ایمیل:

<a href=”mailto:info@mail-example.ir”><p>info@mail-example.ir</p></a>

لینک دهی به تماس با ما:

     <a/>رزرو نوبت ملاقات<a href=”contact-us.html” class=”thm-btn bg-c>

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

 

 

 

پست مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *