مايو 31, 2022قوالب تعليميه للمواقع html css

بعض من استخدامات لغتا البرمجة HTML وCSS
السلام عليكم ورحمة الله وبركاته، من أكثر لغات البرمجة شيوعًا في مجال تطوير الويب هما لغتي البرمجة HTML وCSS. ولكن لا يقتصر استخدامهم في مجال تطوير الويب فقط، بل يمكن استخدامهم في عدة مجالات أخرى؛ لذلك سنعرض لكم في هذا الموضوع بعضا من استخدامات لغتي البرمجة HTML وCSS.

ما هي لغة HTML؟
لغة HTML هي أكثر اللغات شيوعًا خَاصًّا في مجال تطوير الويب. وهي اختصار لـ HyperText Markup Language، وتعني لغة توصيف النص الفائق. تصف لغة HTML هيكلية الصفحة وتبني أساسها.
بعض استخدامات لغة HTML
تطوير صفحات الويب (Web Pages Development)
تُستخدم لغة HTML بكثرة لإنشاء الصفحات التي يتم عرضها على شبكة الإنترنت العالمية. كل المواقع التي تشاهدها على الإنترنت جميعها بلا استثناء مكتوبة باستخدام نسخة من كود HTML.
إنشاء مستندات ويب (Web Document Creation)
تهيمن لغة HTML على مجال إنشاء مستندات ويب ومفهومها الأساسي من خلال الوسم وDOM. يتم إدراج علامات HTML قبل وبعد ذلك أو العبارات لتحديد تنسيقها وموقعها على الصفحة. يتكون مستند الويب (Web Document) من ثلاثة أقسام: العنوان والرأس والجسم. يتضمن الرأس معلومات المستند، بما في ذلك العنوان وأي كلمة رئيسية مهمة أخرى. يمكن رؤية عنوان المستند على شريط المتصفح، وقسم النص هو الجزء الرئيسي من موقع الويب المرئي للمشاهد. يتم تصميم الأجزاء الثلاثة وإنشائها باستخدام وسوم HTML. يحتوي كل قسم على مجموعة الوسوم الخاصة به، والتي يتم تقديمها بشكل مخصص، مع الحفاظ على مفاهيم العنوان والرأس والجسم.
التنقل على الإنترنت (Internet Navigation)
تعتبر الملاحة على الإنترنت من أهم استخدامات HTML. هذا التنقل ممكن من خلال استخدام مفهوم النص الشعبي. وهذا النص في الأساس يشير إلى صفحات ويب أو نصوص أخرى، وعندما ينقر المستخدم عليه، ينتقل إلى النص أو الصفحة المشار إليها. يستخدمن HTML بكثرة لتضمين الارتباط الشعبي داخل صفحات الويب. يمكن للمستخدم التنقل بسهولة بين صفحات الويب وبين مواقع الويب أيضًا الموجودة على خوادم مختلفة.
تخزين جانب العميل (Client-Side Storage)
سابقًا، لم يتمكن المستخدم من حفظ بيانات المتصفح الذي يستخدمه. لتلبية هذا المطلب، يجب بناء البنية التحتية من جانب الخادم، أو يمكن استخدام ملفات تعريف الارتباط الخاصة بالمستخدم. ولكن مع إصدار HTML الأحدث HTML5، يكون التخزين من جانب العميل ممكنًا باستخدام (localStorage) و(IndexDB). هاتان الإستراتيجيتان لهما معاييرهما وخصائصهما. توفر خاصية (localStorage) في الأساس تخزين جدول التجزئة المستند إلى السلسلة. واجهة برمجة التطبيقات الخاصة به بسيطة للغاية وتوفر للمطور طرق (removeItem, getltem, setltem). من ناحية أخرى، فإن (IndexDB) عبارة عن مخزن بيانات أكبر وأفضل من جانب العميل. يمكنك توسيع قاعدة بيانات (IndexDB).

ما هي لغة CSS؟
CSS هي اختصار لـ Cascading Style Sheets، وتعني أوراق الأنماط المتتالية. وتتحكم لغة CSS في كيفية عرض عناصر HTML في الصفحة من حيث الشكل والتنسيق. ولغة CSS هي لغة تنسيق وترتيب عناصر الصفحة وجعل شكل الصفحة أكثر جمالًا وليس إنشاء عناصر جديدة.

بعض استخدامات CSS
التوافق مع الأجهزة المختلفة
من أهم مميزات لغة CSS، هي أنها يمكن استخدامها لتخصيص مواقع الويب على الأجهزة المختلفة، بحيث إنها تناسب جميع أحجام الشاشات على الأجهزة الإلكترونية. ويمكن تخصيص مميزات معينة على أجهزة معينة فقط، وذلك من خلال تحديد حجم الجهاز الذي تريد تطبيق الميزة عليه. ويمكنك تصميم صفحات متجاوبة بسهولة باستخدام لغة CSS.
تقديم نفس الصفحة بشكل مختلف على أجهزة مختلفة
كما ذكرنا، أن لغة CSS متوافقة مع الأجهزة المختلفة ويمكن تصميم صفحات متجاوبة مع جميع الأجهزة، فيمكنك تخصيص شكل الصفحة بشكل مختلف على الأجهزة المختلفة، فإذا كنت تريد تصميم شكل معين للصفحة على شاشة سطح المكتب وتصميم آخر على الهاتف، فيمكنك إجراء ذلك باستخدام لغة CSS.
إنشاء تأثيرات الرسوم المتحركة والانتقالات دون استخدام JavaScript
إذا كنت تريد إجراء تأثير متحرك معين أو انتقال معين فالمتعارف عليه أن يجب أن تستخدم لغة JavaScript لإجراء هذه التأثيرات أو الانتقالات، وهذا ليس صحيحا كُلِّيًّا، لأن يمكنك استخدام لغة CSS في عمل هذه التأثيرات والانتقالات الديناميكية بدلًا من لغة JavaScript. ولكن الأفضل لإجراء تأثيرات وانتقالات معقدة وتفاعلية أكثر استخدام لغة JavaScript.
عمل عمليات حسابية دون استخدام JavaScript
إذا أردت إجراء عملية حسابية معينة لحساب حجم نص أو صورة بالنسبة لعنصر آخر يمكنك استخدام لغة CSS بدلًا من لغة JavaScript لإجراء هذه العملية الحسابية. يوجد خاصية معينة في لغة CSS لإجراء هذه العمليات الحسابية. ولكن إذا أردت أن تقوم بإجراء عمليات حسابية متقدمة فمن الأفضل استخدام لغة JavaScript بدلًا من لغة CSS.
التحكم في عناصر المتصفح نفسه
يمكنك التحكم في عناصر المتصفح من خلال لغة CSS. حيث يمكنك التحكم في لون تحديد عناصر الصفحة مثلًا أو التحكم في العناصر الأساسية لـ HTML مثل (body, header, footer). ويمكنك إجراء تعديلات على جميع العناصر الموجودة في المتصفح من حيث الشكل والتنسيق.
 

 

 

لكي تتعلم خليك معانا خطوه بخطوه

  افتح برنامج نوت

واكتب الكود html التالي

 

 <!DOCTYPE html>
<html dir="rtl" lang="ar">
<body>
  <header>
    <h1> بسم الله </h1>
    <p> لا الة الا الله </p>
    <p> محمد رسول الله </p>
  </header>
  <p> الحمد الله </p>
</body>
</html>

 

شاهد الصوره

 

واحفظ الملف على سطح المكتب بصيغه index.html

كما هو واضح في الصوره

 

انقر الان على هذه الايقونه لكي يفتح عندك في المتصفح

ماذا تلاحظ ؟ ان الكلام اليه كتبته قد ظهر لديك في 

منصفح الانترنت في حهة اليمين على اساس البرمجه باللعه

العربيه وهي كالتالي <html dir="rtl" lang="ar"> 

كما تلاحظ في الصوره 

اضغط على الصوره للتوضيح اكثر

  مبرووك لقد اصبحت الان في بداية الطريق مبرمج مواقع ويب

شاهد فيديو

 

شاهد بعض المواضيع اخرى وتعلم منهااا 

----------------------------------------------------------------------

اكتب هذا الكود وشاهد النتيجه

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<title>اسم الموقع</title>
</head>
<body>
<h1>بسم الله الرحمن الرحيم</h1>
<p>الحمد الله رب العالمين</p>
</body>
</html>

النتيجه
بسم الله الرحمن الرحيم
الحمد الله رب العالمين

---------------------------------------------------------------

واكتب كود الالوان وشاهد النتيجه

 

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<body>
  <header>
<p>انا عادي</p>
<p style="color:red;">لوني احمر</p>
<p style="color:blue;">لوني ازرق</p>
<p style="font-size:50px;">خطي كبير</p>
</body>
</html>
 

النتيجه كما تشاهد في الصوره

 

تحميل الدرس 

 

-------------------------------------------------------------------------

الدرس الثاني

 

تصميم راس الصفحه

اكتب هذا الكود تحميل اسفل الدرس واحفظه في نوت بصيخة html

 

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <title>اسم الموقع</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Tajawal&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"> 
 </head>
  <body>
    <header>
      <div class="inner-width">
        <h1 class="logo"> إسم <span style="color:#273b91;"> الموقع </span> هنا </h1>
        <i class="menu-toggle-btn fas fa-bars"></i>
        <nav class="navigation-menu">
          <a href="#"><i class="fas fa-home home"></i> الرئيسية</a>
          <a href="#"></i> من نحن</a>
          <a href="#"></i> الخدمات</a>
          <a href="#"></i> المهارات</a>
          <a href="#"></i> الاتصال بنا</a>
          <a href="#" class="aj_btn"> <i class="fas fa-lock" aria-hidden="true"></i>
            تسجيل الدخول</a>
        </nav>
      </div>
    </header>
    <script src="script.js"></script>
  </body>
</html>

-------------------------------------------------------------------------

واكتب هذا الكود تحميل اسفل الدرس واحفظه في نوت بصيغة css

 

 @import url('https://fonts.googleapis.com/css2?family=Tajawal&display=swap');
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: 'Tajawal', sans-serif;
}
header{
  height: 90px;
  background: #546FE7;
}
.inner-width{
  max-width: 1000px;
  padding: 0 10px;
  margin: auto;
}
.logo{
  float: right;
  padding: 27px 0;
  color: #fff;
}
.logo img{
  height: 50px;
}
.navigation-menu{
  float: left;
  display: flex;
  align-items: center;
  min-height: 90px;
}
.navigation-menu a{
  margin-right: 10px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 4px;
  transition: .3s linear;
}
.navigation-menu a:hover{
  background: #273b91;
  color: #fff;
  transform: scale(1.1);
}
.navigation-menu i{
  margin-left: 8px;
  font-size: 16px;
}
.home{
  color: #fff;
}
a.aj_btn {
  background: #273b91;
  color: #fff;
  font-weight: 500;
}
a.aj_btn:hover{
  background: #fff;
  color: #273b91;
  font-weight: 500; 
}
.menu-toggle-btn{
  float: left;
  height: 90px;
  line-height: 90px !important;
  color: #fff;
  font-size: 26px;
  display: none !important;
  cursor: pointer;
}
@media screen and (max-width:900px) {
  .menu-toggle-btn{
    display: block !important;
  }
  .navigation-menu{
    position: fixed;
    width: 100%;
    max-width: 400px;
    background: #172b4d;
    top: 90px;
    left: 0;
    display: none;
    padding: 20px 40px;
    box-sizing: border-box;
  }
  .navigation-menu::before{
    content: "";
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #172b4d;
    position: absolute;
    top: -10px;
    left: 10px;
  }
  .navigation-menu a{
    display: block;
    margin: 10px 0;
  }
  .navigation-menu.active{
    display: block;
  }
}

------------------------------------------------------------------------------

واكتب هذا الكود  تحميل اسفل الدرس واحفظه في نوت بصيخة جافا هاكذا  script

 

$(".menu-toggle-btn").click(function(){
  $(this).toggleClass("fa-times");
  $(".navigation-menu").toggleClass("active");
});

---------------------------------------------------------------------------

والان شاهد الدرس تصميم راس الصفحه

مبرووك لقد صممت راس الصفحه

حمل الدرس الثاني من هنا وجربه في جهازك

 

تحميل الدرس الثاني

 --------------------------------------------------------------------------------

الدرس الثالث تصميم فوتر القائمه السفليه للموقع

شاهد الصوره هنا

الان مافي داعي نكتب الاكواد هنا

فقط حمل الدرس وتجد ملفين

index

css

واعمل بما تعلمت مسبقاا

 

تحميل من هنااااا

 

نموذج تسجيل

شاهد الصور

كود html

---------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ar" dir="rtl">
   <head>
      <meta charset="utf-8">
      <title>اسم الموقع</title>
      <link href="https://fonts.googleapis.com/css2?family=Tajawal&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
         <div class="wrapper">
            <div class="title">
               إنشاء حساب
               <p>انشاء حساب معنا بخطوات بسيطة</p>
            </div>
            <form action="#">
               <div class="field">
                  <input type="text" required>
                  <label for="">الاسم</label>
               </div>
               <div class="field">
                  <input type="text" required>
                  <label for="">اللقب</label>
               </div>
               <div class="field">
                  <input type="email" required>
                  <label for="">البريد الالكتروني</label>
               </div>
               <div class="field">
                  <input type="password" required>
                  <label for="">كلمة السر</label>
               </div>
               <div class="field">
                  <input type="password" required>
                  <label for="">تأكيد كلمة السر</label>
               </div>
               <div class="content">
                  <div class="checkbox">
                     <input type="checkbox" id="remember-me">
                     <label for="remember-me">تذكرني </label>
                  </div>
                  <div class="pass-link">
                     <a href="#">لقد نسيت كلمة السر</a>
                  </div>
               </div>
               <div class="field">
                  <input type="submit" value="تسجيل">
               </div>
               <div class="signup-link">
                  هل لديك حساب مسبقا ؟<a href="#">صفحة الدخول</a>
               </div>
            </form>
         </div>
  </body>
</html>
 

-----------------------------------------------------------

كود css

-----------------------------------------------------------

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Tajawal', sans-serif;
}
html, body{
    display: grid;
    height: 100%;
    width: 100%;
    place-items:center;
    background: #f2f2f2;
}
::selection{
    background: #4158d0;
    color:#fff;
}
.wrapper{
    width: 500px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}

.wrapper .title{
    font-size: 35px;
    font-weight: 600;
    text-align: right;
    color: #fff;
    user-select: none;
    border-radius: 15px 15px 0 0;
    background: #2b519a;
    padding: 32px;
}
.title p{
    font-size: 18px;
}
.wrapper form{
    padding: 10px 30px 50px 30px;
}
.wrapper form .field{
    height: 50px;
    width: 100%;
    margin-top: 20px;
    position: relative;
}
.wrapper form .field input{
    height: 100%;
    width: 100%;
    outline: none;
    font-size: 17px;
    padding-right: 20px;
    border: 1px solid lightgray;
    transition: all 0.3s ease;
}
.wrapper form .field input:focus,
form .field input:valid{
    border-color: #4158d0;
}
.wrapper form .field label{
    position: absolute;
    top: 50%;
    right: 20px;
    color: #999999;
    font-weight: 400;
    font-size: 17px;
    pointer-events: none;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

form .field input:focus ~ label,
form .field input:valid ~ label{
    top: 0%;
    font-size: 16px;
    color: #4158d0;
    background: #fff;
    transform: translateY(-50%);
}
form .content{
    display: flex;
    width: 100%;
    height: 50px;
    font-size: 16px;
    align-items: center;
    justify-content: space-around;
}
form .content .checkbox{
    display: flex;
    align-items: center;
    justify-content: center;
}
form .content input{
    width: 15px;
    height: 15px;
}
form .content label{
    color: #262626;
    user-select: none;
    padding-right: 5px;
}
form .content .pass-link{
    color: "";
}
form .field input[type="submit"]{
    color: #fff;
    border: none;
    padding-right: 0;
    margin-top: -10px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    background: #2b519a;
    transition: all 0.3s ease;
}
form .field input[type="submit"]:active{
    transform: scale(0.95);
}
form .signup-link{
    color: #262626;
    margin-top: 20px;
    text-align: center;
}

---------------------------------------------------------------------------------------- ت

الان بامكانك تحميل نموذج التسجيل

من هنااااا

ر

-

------

2.12.0.0

2.12.0.0