طراحی سایت کافی شاپ با HTML یک پروژه عالی برای یادگیری HTML و CSS است. این پروژه به شما کمک می کند تا اصول اولیه طراحی وب را بیاموزید و مهارت های خود را در ایجاد یک سایت زیبا و کاربردی بهبود ببخشید.
در این پروژه، شما یک سایت ساده برای یک کافی شاپ ایجاد خواهید کرد. این سایت شامل موارد زیر خواهد بود:
- یک صفحه اصلی که اطلاعات کلی در مورد کافی شاپ ارائه می دهد، مانند نام، آدرس، ساعات کاری و منو
- یک صفحه تماس که به بازدیدکنندگان امکان می دهد با کافی شاپ تماس بگیرند یا ایمیل ارسال کنند
- یک صفحه وبلاگ که اخبار و اطلاعات جدید در مورد کافی شاپ را ارائه می دهد
برای شروع این پروژه، باید یک IDE یا ویرایشگر متن مانند Visual Studio Code یا Notepad++ را دانلود کنید. سپس، یک پوشه جدید ایجاد کنید و فایل index.html را در آن ذخیره کنید.
در فایل index.html، شما باید کد HTML اولیه برای سایت خود را اضافه کنید. این کد شامل موارد زیر خواهد بود:
- تگ و برای تعیین شروع و پایان صفحه HTML
- تگ برای مشخص کردن عنوان صفحه</li>
<li data-sourcepos="15:1-16:0">تگ <body> برای تعیین محتوای صفحه</li>
</ul>
<p data-sourcepos="17:1-17:193">پس از افزودن کد HTML اولیه، می توانید شروع به طراحی سایت خود کنید. برای این کار، می توانید از CSS استفاده کنید. CSS یک زبان سبک است که به شما امکان می دهد ظاهر و احساس یک صفحه وب را کنترل کنید.</p>
<p data-sourcepos="19:1-19:162">برای شروع، می توانید از CSS برای تنظیم رنگ، اندازه و فونت متن استفاده کنید. همچنین می توانید از CSS برای افزودن تصاویر و سایر عناصر بصری به سایت خود استفاده کنید.</p>
<p data-sourcepos="21:1-21:121">پس از طراحی سایت خود، می توانید آن را در مرورگر خود مشاهده کنید. برای این کار، فایل index.html را در مرورگر خود باز کنید.</p>
<p data-sourcepos="23:1-23:65">در اینجا چند نکته برای طراحی سایت کافی شاپ با HTML آورده شده است:</p>
<ul data-sourcepos="25:1-29:0">
<li data-sourcepos="25:1-25:67">از تصاویر و سایر عناصر بصری برای ایجاد یک سایت جذاب استفاده کنید.</li>
<li data-sourcepos="26:1-26:59">از رنگ ها و فونت هایی استفاده کنید که خوانا و جذاب باشند.</li>
<li data-sourcepos="27:1-27:70">از یک طرح کلی سازمان یافته برای مرتب نگه داشتن اطلاعات استفاده کنید.</li>
<li data-sourcepos="28:1-29:0">از پیوندهای داخلی برای هدایت بازدیدکنندگان به سایر قسمت های سایت خود استفاده کنید.</li>
</ul>
<p data-sourcepos="30:1-30:75">با پیروی از این نکات، می توانید یک سایت کافی شاپ زیبا و کاربردی ایجاد کنید.</p> | صفحه قابل مشاهده: <a href="https://porprozhe.ir/Detailsproduct.aspx?id=1011">دانلود پرژه طراحی سایت کافی شاپ با HTML</a> می‌باشد
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product details -->
</div>
<!-- contact area END -->
</div>
</div>
</form>
<footer class="site-footer">
<!-- newsletter part -->
<div class="bg-primary dez-newsletter">
<div class="container equal-wraper">
<form class="dzSubscribe" action="script/mailchamp.php" method="post">
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="icon-bx-wraper equal-col p-t30 p-b20 left">
<div class="icon-lg text-primary radius"> <a href="#" class="icon-cell"><i class="fa fa-envelope-o"></i></a> </div>
<div class="icon-content"> <strong class="text-black text-uppercase font-18">عضویت</strong>
<h2 class="dez-tilte text-uppercase">خبرنامه جدید ما</h2>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="dzSubscribeMsg"></div>
<div class="input-group equal-col p-t40 p-b20">
<input name="dzEmail" required placeholder="ایمیل" required="required" class="form-control" type="email">
</div>
</div>
<div class="col-md-3 col-lg-3 offset-lg-1 offset-md-1">
<div class="equal-col p-t40 p-b20 skew-subscribe">
<button name="submit" value="Submit" type="submit" class="site-button-secondry button-skew z-index1">
<span>عضویت</span><i class="fa fa-angle-right"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- footer top part -->
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 footer-col-4">
<div class="widget widget_about">
<div class="logo-footer">
<img src='upload/info/020722-135941-1-Picsart_23-10-14_13-50-25-506-removebg-preview.png' alt=""></div>
<p><br />
<div>هدف ما در این سایت فروش پروژه نیست ما میخواهیم به شما کمک کنیم که خودتان به راحتی بتوانید پروژه خودتان را درست کنید بنابراین تک تک پروژه های داخل سایت را در صورت دلخواه می توانید آموزش ببینید<br />
تمامی وب سایتت هایی که در وب سایت مشاهده می کنید کاملا برنامه نویسی شده می باشند <br />
شماره های تماس 09050394455 ; 09017372148</div> </p>
<ul class="dez-social-icon dez-border">
<li><a href="https://www.google.com/ " >
<img src='upload/info/010901-64418-1-whats.png' " alt="واتساپ" style="height:40px ; width:40px">
</a></li>
<li><a href="https://www.aparat.com/htmlforest " >
<img src='upload/info/010901-6442-1-aparat.png' " alt="آپارات" style="height:40px ; width:40px">
</a></li>
<li><a href="https://www.google.com/ " >
<img src='upload/info/010901-64343-1-insta.png' " alt="iینستا" style="height:40px ; width:40px">
</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 footer-col-4">
<div class="widget recent-posts-entry">
<div class="widget recent-posts-entry">
<h4 class="widget-title">پست های اخیر</h4>
<div class="widget-post-bx">
<div class="widget-post clearfix">
<div class="dez-post-media"> <img src="upload/info/020528-172255-1-34.jpg" width="200" height="143" alt=""> </div>
<div class="dez-post-info">
<div class="dez-post-header">
<h6 class="post-title"><a href="Detailsinfo.aspx?id=10663">تاثیر گوگل مپ بر seo سایت </a></h6>
</div>
</div>
</div>
<div class="widget-post clearfix">
<div class="dez-post-media"> <img src="upload/info/020528-173725-1-32324.png" width="200" height="143" alt=""> </div>
<div class="dez-post-info">
<div class="dez-post-header">
<h6 class="post-title"><a href="Detailsinfo.aspx?id=10664">میزان محبوبیت گوگل مپ در بین کاربران</a></h6>
</div>
</div>
</div>
<div class="widget-post clearfix">
<div class="dez-post-media"> <img src="upload/info/020528-174343-1-90900.jpg" width="200" height="143" alt=""> </div>
<div class="dez-post-info">
<div class="dez-post-header">
<h6 class="post-title"><a href="Detailsinfo.aspx?id=10665">تفاوت گوگل مپ و نقشه گوگل</a></h6>
</div>
</div>
</div>
<div class="widget-post clearfix">
<div class="dez-post-media"> <img src="upload/info/020528-17506-1-43535.png" width="200" height="143" alt=""> </div>
<div class="dez-post-info">
<div class="dez-post-header">
<h6 class="post-title"><a href="Detailsinfo.aspx?id=10666">چگونه امتیاز شغل خود را در گوگل مپ افزایش دهیم</a></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 footer-col-4">
<div class="widget widget_services">
<h4 class="m-b15 text-uppercase">خدمات ما</h4>
<div class="dez-separator-outer m-b10">
<div class="dez-separator bg-white style-skew"></div>
</div>
<ul>
<li >
<a href="Default.aspx">صفحه اصلی</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 footer-col-4">
<div class="widget widget_getintuch">
<h4 class="m-b15 text-uppercase">ارتباط با ما</h4>
<div class="dez-separator-outer m-b10">
<div class="dez-separator bg-white style-skew"></div>
</div>
<a referrerpolicy='origin' target='_blank' href='https://trustseal.enamad.ir/?id=418797&Code=XW1pPKlEa2STwNjhIzfm3bdYnMae0jO7'><img referrerpolicy='origin' src='https://trustseal.enamad.ir/logo.aspx?id=418797&Code=XW1pPKlEa2STwNjhIzfm3bdYnMae0jO7' alt='' style='cursor:pointer' Code='XW1pPKlEa2STwNjhIzfm3bdYnMae0jO7'></a>
<ul>
<span>
شماره تماس : 09050394455 , 09017372148<br />
<br />
ایمیل :info@porprozhe.ir<br />
<br />
<br type="_moz" />
</span>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- footer bottom part -->
<div class="footer-bottom footer-line">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 text-left">
<span>
کلیه حقوق این سایت متعلق به پر پروژه می باشد
</span>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer END-->
<!-- scroll top button -->
<button class="scroltop fa fa-arrow-up style5" ></button>
<div class="deskContent">
<div class="btn btn-dark btn-block text-white py-2 radius25" style=" height :50px ; width:100% ; position:fixed ; left:0px;bottom:0px;z-index:10 ; background-color:firebrick" >
<a href="default.aspx">
<button type="submit" class="btn btn-dark btn-block text-white py-2 radius25" style=" height :50px ; width:25% ; position:fixed ; left:0px;bottom:0px;z-index:10 ; background-color:firebrick ">
<a href="about.aspx" style="color:white">تماس با ما
</a>
</button>
</a>
<a href="default.aspx">
<button type="submit" class="btn btn-dark btn-block text-white py-2 radius25" style=" height :50px ; width:25% ; position:fixed ; left:25%;bottom:0px;z-index:10 ; background-color:firebrick ">
<a href="learn.aspx" style="color:white">آموزش
</a>
</button>
</a>
<a href="default.aspx">
<button type="submit" class="btn btn-dark btn-block text-white py-2 radius25" style=" height :50px ; width:25% ; position:fixed ; left:50%;bottom:0px;z-index:10 ; background-color:firebrick ">
<a href="category.aspx?type=product" style="color:white">محصولات
</a>
</button>
</a>
<a href="default.aspx">
<button type="submit" class="btn btn-dark btn-block text-white py-2 radius25" style=" height :50px ; width:25% ; position:fixed ; left:75%;bottom:0px;z-index:10 ; background-color:firebrick ">
<a href="default.aspx" style="color:white">خانه
</a>
</button>
</a>
</div>
</div>
</div>
<!---start GOFTINO code--->
<script type="text/javascript">
!function(){var i="GkTLbW",a=window,d=document;function g(){var g=d.createElement("script"),s="https://www.goftino.com/widget/"+i,l=localStorage.getItem("goftino_"+i);g.async=!0,g.src=l?s+"?o="+l:s;d.getElementsByTagName("head")[0].appendChild(g);}"complete"===d.readyState?g():a.attachEvent?a.attachEvent("onload",g):a.addEventListener("load",g,!1);}();
</script>
<!---end GOFTINO code--->
<!-- JavaScript files ========================================= -->
<script src="js/jquery.min.js"></script><!-- JQUERY.MIN JS -->
<script src="plugins/bootstrap/js/popper.min.js"></script><!-- BOOTSTRAP.MIN JS -->
<script src="plugins/bootstrap/js/bootstrap.min.js"></script><!-- BOOTSTRAP.MIN JS -->
<script src="plugins/bootstrap-select/bootstrap-select.min.js"></script><!-- FORM JS -->
<script src="plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.js"></script><!-- FORM JS -->
<script src="plugins/magnific-popup/magnific-popup.js"></script><!-- MAGNIFIC POPUP JS -->
<script src="plugins/counter/waypoints-min.js"></script><!-- WAYPOINTS JS -->
<script src="plugins/counter/counterup.min.js"></script><!-- COUNTERUP JS -->
<script src="plugins/imagesloaded/imagesloaded.js"></script><!-- IMAGESLOADED -->
<script src="plugins/masonry/isotope.pkgd.min.js"></script><!-- MASONRY -->
<script src="js/custom.min.js"></script><!-- CUSTOM FUCTIONS -->
<script src="plugins/switcher/js/switcher.js"></script>
<script src="js/dz.carousel.min.js"></script><!-- SORTCODE FUCTIONS -->
</body>
</html>
