جزئیات محصول

دانلود پرژه طراحی سایت دفتر مهندسی عمران با HTML

دانلود پرژه طراحی سایت دفتر مهندسی عمران با HTML

قیمت: 0 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

 پروژه طراحی سایت دفتر مهندسی عمران با HTML

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

مراحل پروژه

  1. ایجاد یک فایل HTML جدید
  2. افزودن تگ های HTML برای ایجاد طرح کلی صفحه وب
  3. افزودن متن و تصاویر به صفحه وب
  4. قالب بندی صفحه وب با CSS
  5. آزمایش صفحه وب در مرورگرها مختلف

ایجاد یک فایل 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> می‌باشد شما در حال مشاهده محصول "دانلود پرژه طراحی سایت دفتر مهندسی عمران با HTML" با شناسه 690 هستید که تاکنون 129 بار مشاهده شده و در تاریخ Aug 16 2023 2:26PM طراحی و تولید شده است. این محصول با دقت و خلاقیت توسط تیم حرفه‌ای پرپروژه آماده شده است. قیمت این محصول 0 تومان می‌باشد و در دسته‌بندی با شناسه 5474 قرار دارد. </p> </div> </div> </div> </div> </div> </div> <!-- Product details --> </div> <!-- contact area END --> </div> <div class="section-full bg-img-fix content-inner-2 overlay-black-middle" style="background-image:url(images/background/bg1.jpg);"> <div class="container"> <div class="section-head text-center text-white"> <h2 class="text-uppercase" style="color:white!important">محصولات تصادفی </h2> <div class="dez-separator-outer "> <div class="dez-separator bg-white style-skew"></div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=2777"><img src="upload/product/020620-111524-1-020619-13811-1-999.png" alt="دانلود درایور پرینتر اچ پی HP LaserJet M141w driver" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=2777"> <h4 style="color:white">دانلود درایور پرینتر اچ پی HP LaserJet M141w driver</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=3485"><img src="upload/product/020623-72540-1-6.png" alt="دانلود درایور پرینتر اچ پی HP LaserJet M111w driver" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=3485"> <h4 style="color:white">دانلود درایور پرینتر اچ پی HP LaserJet M111w driver</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=8246"><img src="upload/product/030303-02438-1-Untitled.png" alt="دانلود درایور پرینتر لکسمارک مدلLexmark MS317 " ></a> </div> <br /> <a href="Detailsproduct.aspx?id=8246"> <h4 style="color:white">دانلود درایور پرینتر لکسمارک مدلLexmark MS317 </h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=691"><img src="upload/product/020525-162148-1-ASP.NET.jpg" alt="دانلود پرژه طراحی سایت دفتر مهندسی عمران به زبان ASP.NET" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=691"> <h4 style="color:white">دانلود پرژه طراحی سایت دفتر مهندسی عمران به زبان ASP.NET</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=692"><img src="upload/product/020525-162345-1-PHP.jpg" alt="دانلود پرژه طراحی سایت دفتر مهندسی عمران به زبان PHP" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=692"> <h4 style="color:white">دانلود پرژه طراحی سایت دفتر مهندسی عمران به زبان PHP</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=693"><img src="upload/product/020525-162523-1-WORDPRESS.jpg" alt="دانلود پرژه طراحی سایتدفتر مهندسی عمران به زبان WORDPRESS" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=693"> <h4 style="color:white">دانلود پرژه طراحی سایتدفتر مهندسی عمران به زبان WORDPRESS</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=694"><img src="upload/product/020525-163032-1-HTML.jpg" alt="دانلود پرژه طراحی سایت دفتر وکالت با HTML" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=694"> <h4 style="color:white">دانلود پرژه طراحی سایت دفتر وکالت با HTML</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=695"><img src="upload/product/020525-163251-1-ASP.NET.jpg" alt="دانلود پرژه طراحی سایت دفتر وکالت به زبان ASP.NET" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=695"> <h4 style="color:white">دانلود پرژه طراحی سایت دفتر وکالت به زبان ASP.NET</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=696"><img src="upload/product/020525-16358-1-PHP.jpg" alt="دانلود پرژه طراحی سایت دفتر وکالت به زبانPHP" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=696"> <h4 style="color:white">دانلود پرژه طراحی سایت دفتر وکالت به زبانPHP</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=697"><img src="upload/product/020525-16373-1-WORDPRESS.jpg" alt="دانلود پرژه طراحی سایت دفتر وکالت به زبان WORDPRESS" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=697"> <h4 style="color:white">دانلود پرژه طراحی سایت دفتر وکالت به زبان WORDPRESS</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=698"><img src="upload/product/020525-165846-1-HTML.jpg" alt="دانلود پرژه طراحی سایت مهندسی کامپیوتر با HTML" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=698"> <h4 style="color:white">دانلود پرژه طراحی سایت مهندسی کامپیوتر با HTML</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=699"><img src="upload/product/020525-17123-1-ASP.NET.jpg" alt="دانلود پرژه طراحی سایت مهندسی کامپیوتر به زبان ASP.NET" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=699"> <h4 style="color:white">دانلود پرژه طراحی سایت مهندسی کامپیوتر به زبان ASP.NET</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=700"><img src="upload/product/020525-171337-1-PHP.jpg" alt="دانلود پرژه طراحی سایت مهندسی کامپیوتر به زبان PHP" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=700"> <h4 style="color:white">دانلود پرژه طراحی سایت مهندسی کامپیوتر به زبان PHP</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=701"><img src="upload/product/020525-171827-1-WORDPRESS.jpg" alt="دانلود پرژه طراحی سایت دفترمهندسی کامپیوتر به زبان WORDPRESS" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=701"> <h4 style="color:white">دانلود پرژه طراحی سایت دفترمهندسی کامپیوتر به زبان WORDPRESS</h4></a> </div> </div> <div class="col-md-4 col-lg-4 col-sm-6 m-b30"> <div class="dez-box p-a20 border-1"> <div class="dez-media"> <a href="Detailsproduct.aspx?id=702"><img src="upload/product/020525-172519-1-HTML.jpg" alt="دانلود پرژه طراحی سایت دندانپزکشی با HTML" ></a> </div> <br /> <a href="Detailsproduct.aspx?id=702"> <h4 style="color:white">دانلود پرژه طراحی سایت دندانپزکشی با HTML</h4></a> </div> </div> </div> </div> </div> </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="video.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>