طراحی صفحه اول سایت w3school با html

سلام خدمت همراهان عزیز سایت الو تمرین در این تمرین میخواهیم طراحی صفحه اول سایت w3school با html و css را بررسی کنیم.

سوال:صفحه اول وب سایت w3school را پیاده سازی نمایید؟

سایت w3school چه کار میکند؟

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

از طریق این لینک میتوانید وب سایت را مشاهده نمایید.

نمونه خروجی کار تصویری مشابه تصویر زیر میشود.

طراحی صفحه اول سایت w3school

برای طراحی این بخش از وب سایت، باید ابتدا از بخش header شروع کنیم.

آیدی بنام head را برای بخش header در نظر میگیریم.

داخل تگ Div لینک هایی برای نمایش آیتم های منو قرار میدهیم که هر کدام جداگانه استایل خودشان را دارند.

مهم ترین نکته در بخش منو، استفاده از خصوصیت float که باعث شناور شدن عناصر و قرار گیری آنان در یک سطر میشود.

میتوانید از تمرین طراحی فرم لاگین برای ایجاد یک صفحه لاگین شبیه سایت w3school استفاده نمایید.

انجام پروژه های برنامه نویسی | آموزش برنامه نویسی 
وفایـ مقدم
0936-328-6141

کد های html بخش header به شرح زیر میباشد:

<div id="head">
      <a id="img" href="#"><img src="W3Schools_logo.svg_2.png" alt=""></a>
      <a id="tut" href="#" style="width: 116px ;">Tutorials</a>
      <a id="ref" href="#" style="width:132px ;">References</a> 
      <a id="exe" href="#" style="width:118px ;">Exercises</a>
      <a id="video" href="#">video</a>
      <a id="log" href="#">Log in</a>
      <a id="website" href="#">website</a>
      <a id="get" href="#">Get certified</a> 
      <a id="darkmode" href="" style="top:5px"><i class="fa-solid fa-circle-half-stroke"></i></a>
      <a id="world" href=""><i class="fa-solid fa-earth-americas"></i></a>
      <a id="searchbox" href=""><i class="fa-solid fa-magnifying-glass"></i></a>
  </b>
  </div>

از تگ i برای نمایش فونت آیکون های مورد نیاز استفاده شده است.

با استفاده از اسکریپت فونت آیکون، پکیج های font icon را به پروژه اضافه کرده ایم.

اسکریپت به شرح زیر میباشد:

<script src="https://kit.fontawesome.com/2dec4d93bf.js" crossorigin="anonymous"></script>

پس استفاده از fa-earth و موارد مشابه قبل از ایمپورت کردن script امکان پذیر نمیباشد.

استایل نویسی بخش header

دو آیدی head و یکی از آیدی لینک ها را در این بخش توضیح میدهیم.

#head {
  width: 100%;
  font-size: 18px;
  content: "";
  display: table;
  clear: both;
  box-sizing: inherit;
  margin: 0%;
}

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

و بقیه خصوصیات بیشتر برای تنظیم آیتم در اولین نقطه صفحه میباشد.

آیدی img

#img {
  color: #04aa6d;
  float: left;
  padding: 5px 5px;
}

از آیدی img برای درج لوگو در صفحه استفاده میشود.

با استفاده از خاصیت float این آیتم شناور میشود تا در کنار بقیه آیتم ها قرار بگیرد.

خصوصیت clear نیز این شناور بودن را خنثی میکند تا از سطر های بعدی به طور عادی استفاده کنیم.

پیشنهاد ما

تمرین طراحی سایت تک صفحه ای

طراحی بخش جستجو سایت w3school

برای طراحی بخش وسط باید آیدی جداگانه ای را در نظر بگیریم.

آیدی background برای رنگ به پس زمینه در نظر گرفته شده است.

کد html بخش جستجو

<div id="background">
    <h1 id="learn">
        Learn to code
    </h1>
    <h3 id="with">with the world's largest web developer site.
    </h3>
    <br>
    
    <!-- <form id="example" style="margin:auto;max-width:500px"> -->
        <input type="text" placeholder="Search our tutorials, e.g. HTML" id="search2" style=" position: relative; left: 40px;   border-radius: 25px; font: inherit; border: none; margin: 10px; width: 40%; height: 38px; padding: 10px; border: 1px solid #282A35;">
        <a id="searchbox2" href=""><i class="fa-solid fa-magnifying-glass"></i></a>
        <!-- <div id="listofsearchresults" style="display: none;"></div> -->
      <!-- </form> -->
    <h4><a id="begin" href="#">not sure Where To Begin?</a></h4>    
</div>

مهم ترین نکته این بخش وجود تگ input  جهت ایجاد کادر ورودی در صفحه میباشد.

با کمک inline style کادر جستجو بر روی صفحه تغییر میکند.

خصوصیت position برای تغییر موقعیت یک آیتم و جا به جایی آن استفاده میشود.

کد css بخش background

کد های آیدی background به شرح زیر میباشد.

#background {
  width: 100%;
  padding-top: 90px;
  padding-bottom: 90px;
  background-color: #282a35 !important;
  color: white !important;
  text-align: center !important;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  box-sizing: inherit;
  margin: 0px;
}

کلام آخر 

در این تمرین سعی کردیم مهم ترین نکات طراحی صفحه اول سایت w3school را مطرح کنیم.

برای پرسش سوال از بخش کامنت ها اقدام نمایید.

با ثبت نام در سایت،سورس کد کامل تمرین را دریافت نمایید.

لیست تمرین های HTML را مشاهده نمایید.