پروژه طراحی سایت دفتر مهندسی عمران با HTML
طراحی سایت دفتر مهندسی عمران با HTML یک پروژه عالی برای یادگیری اصول اولیه طراحی وب است. در این پروژه، شما یاد خواهید گرفت که چگونه از HTML برای ایجاد یک صفحه وب ساده استفاده کنید که شامل اطلاعاتی در مورد دفتر مهندسی عمران، خدماتی که ارائه می دهد و نحوه تماس با آنها باشد.
مراحل پروژه
- ایجاد یک فایل HTML جدید
- افزودن تگ های HTML برای ایجاد طرح کلی صفحه وب
- افزودن متن و تصاویر به صفحه وب
- قالب بندی صفحه وب با CSS
- آزمایش صفحه وب در مرورگرها مختلف
ایجاد یک فایل HTML جدید
برای شروع، باید یک فایل HTML جدید ایجاد کنید. می توانید از یک ویرایشگر متن ساده مانند Notepad یا Sublime Text برای این کار استفاده کنید. وقتی فایل جدید را ایجاد کردید، باید آن را با نام "index.html" ذخیره کنید.
افزودن تگ های HTML برای ایجاد طرح کلی صفحه وب
HTML زبانی است که برای ایجاد صفحات وب استفاده می شود. HTML از تگ ها برای مشخص کردن عناصر مختلف یک صفحه وب استفاده می کند. برای ایجاد یک صفحه وب ساده، باید از تگ های زیر استفاده کنید:
- - این تگ به مرورگر می گوید که صفحه وب با HTML نوشته شده است.
- - این تگ شروع بدنه صفحه وب را مشخص می کند.
- - این تگ بخش سر صفحه وب را مشخص می کند. بخش سر معمولاً حاوی اطلاعاتی مانند عنوان صفحه وب و متا تگ ها است.
- - این تگ عنوان صفحه وب را مشخص می کند.</li>
<li data-sourcepos="25:1-25:74"><meta charset="UTF-8"> - این تگ نوع کدگذاری صفحه وب را مشخص می کند.</li>
<li data-sourcepos="26:1-26:145"><link rel="stylesheet" href="style.css"> - این تگ لینک صفحه CSS را مشخص می کند. صفحه CSS حاوی کدی است که ظاهر صفحه وب را قالب بندی می کند.</li>
<li data-sourcepos="27:1-27:60"></head> - این تگ پایان بخش سر صفحه وب را مشخص می کند.</li>
<li data-sourcepos="28:1-28:98"><body> - این تگ شروع بدنه صفحه وب را مشخص می کند. بخش بدنه معمولاً حاوی محتوای صفحه وب است.</li>
<li data-sourcepos="29:1-29:58"></body> - این تگ پایان بدنه صفحه وب را مشخص می کند.</li>
<li data-sourcepos="30:1-31:0"></html> - این تگ پایان صفحه وب را مشخص می کند.</li>
</ul>
<p data-sourcepos="32:1-32:34">افزودن متن و تصاویر به صفحه وب</p>
<p data-sourcepos="34:1-34:312">پس از افزودن تگ های HTML برای ایجاد طرح کلی صفحه وب، می توانید متن و تصاویر را به صفحه وب اضافه کنید. برای افزودن متن به صفحه وب، باید از تگ <p> استفاده کنید. تگ <p> یک پاراگراف متن را مشخص می کند. برای افزودن تصویر به صفحه وب، باید از تگ <img> استفاده کنید. تگ <img> یک تصویر را مشخص می کند.</p>
<p data-sourcepos="36:1-36:28">قالب بندی صفحه وب با CSS</p>
<p data-sourcepos="38:1-38:339">CSS زبانی است که برای قالب بندی صفحات وب استفاده می شود. CSS از قوانینی برای تغییر ظاهر عناصر یک صفحه وب استفاده می کند. برای قالب بندی صفحه وب با CSS، باید یک فایل CSS ایجاد کنید و آن را با نام "style.css" ذخیره کنید. سپس، می توانید قوانین CSS را به فایل "style.css" اضافه کنید. برخی از قوانین CSS رایج برای قالب بندی صفحات وب عبارتند از:</p>
<ul data-sourcepos="40:1-43:0">
<li data-sourcepos="40:1-40:60">color: red; - این قانون رنگ متن را به قرمز تغییر می دهد.</li>
<li data-sourcepos="41:1-41:72">font-size: 16px; - این قانون اندازه متن را به 16 پیکسل تغییر می دهد.</li>
<li data-sourcepos="42:1-43:0">background-color: blue; - این قانون رنگ پس زمینه صفحه وب را به آبی تغییر می دهد.</li>
</ul>
<p data-sourcepos="44:1-44:37">آزمایش صفحه وب در مرورگرهای مختلف</p>
<p data-sourcepos="46:1-46:158">پس از تکمیل پروژه، باید صفحه وب را در مرورگرهای مختلف آزمایش کنید. این به شما کمک می کند تا مطمئن شوید که صفحه وب در تمام مرورگرها به درستی نمایش داده می شود.</p>
<p data-sourcepos="48:1-48:14">نتیجه گیری</p>
<p data-sourcepos="50:1-50:278">طراحی سایت دفتر مهندسی عمران با HTML یک پروژه عالی برای یادگیری اصول اولیه طراحی وب است. در این پروژه، شما یاد خواهید گرفت که چگونه از HTML و CSS برای ایجاد یک صفحه وب ساده استفاده کنید که شامل اطلاعاتی در مورد دفتر مهندسی عمران، خدماتی که ارائه می دهد و نحوه تماس با آنها باشد.</p> | صفحه قابل مشاهده: <a href="https://porprozhe.ir/Detailsproduct.aspx?id=690">دانلود پرژه طراحی سایت دفتر مهندسی عمران با 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>
