عاجل

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

 محمد الضبعان   تاريخ النشر2021-10-29 19:43:48.194496 14328479


دورة تعلم البرمجة 
الفصل الاول

البرمجة هي تكييف وتطويع المحتوى وتوجيهه الى المكان وبالشكل الذي يريده المبرمج وفق اوامر معينة يتم كتابتها بلغة ما مثل php او python  او غيرهما

اما لماذا نتعلم البرمجة فيتم ذلك بهدف خلق محتوى تفاعلي يخدم غرضي كمبرمج او صاحب محتوى

·         اصبحت البرمجة المتحكم الرئيسي في كافة امور الحياة من كهرباء وماء وطاقة ومحركات واقتصاد وخلافه واصبح المبرمج عملة نادرة خاصة اذا تميز بالابتكار

·         مهمة المبرمج الرئيسية ليست ان ينتج كودا لأداء مهمته بل ان يستطيع حل المشاكل المرتبطة بالكود وان يخلق كودا سهلا نظيفا

متطلبات العمل لتعلم البرمجة والعمل كمبرمج:

1-      تحميل برنامج زامب xampp   من الرابط التالي  https://www.apachefriends.org/download.html

2-      تحميل برنامج vs code  

https://code.visualstudio.com/download

 

البديل :

1-      العمل على منصة عالم واحد (محرر نصوص عالم واحد اون لاين )

https://awamp.com/your-code.php

 

لغة  HTML  :

-     هي لغة انشئت خصيصا لتنسيق صفحات الويب او بمعنى ادق عرض المحتوى على اجهزة الكمبيوتر ليتم عرضها في شكل صفوف واعمدة وفقرات وعناوين حيث كان الوضع سابقا مزري ويتم عرض المحتوى كبلوك اي كتلة واحدة ولاحقا تم ادماج لغة css في لغة  html  لإضافة المزيد من الجماليات مثل الالوان والخلفيات والتباعد ..الخ

-     ترمز HTML إلى Hyper Text Markup Language

-     خصائص لغة HTML

•     هي لغة ترميز لإنشاء صفحات الويب

•     تقوم بهيكلة صفحة الويب

•     تتكون من سلسلة من العناصر تفرض على المتصفح طريقة العرض كأن يتم العرض في شكل صفوف او اعمدة ..الخ

مثال على لغة html 

<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>

<h1>عنوان الموضوع </h1>
<p>الفقرة الاولى</p>

</body>
</html>

اكتب الكود هنا

 

 

لغة CSS

ما هو CSS؟                            

 (Cascading Style Sheets )CSS تعني التنسيق المتتابع للصفحات والمقصود صفحات HTML   والتي يتم بها بناء الموقع ..اذا فاولا نبني بلغة HTML  ثم ننسق بلغة CSS .

يصف CSS كيفية عرض عناصر HTML على الشاشة أو الورق أو في وسائط أخرى

يوفر CSS الكثير من العمل. يمكنه التحكم في تخطيط العديد من صفحات الويب دفعة واحدة

يتم حفظ التنسيقات  في ملفات CSS

 

ومن ضمن مهام اللغة :

·         تحديد الخطوط والهوامش والمسافات لعناصر الموقع .

 

·         تحديد لون وحجم العناصر .

 

·         وضع الألوان على الخلفيات .

 

·         تحريك العناصر بحرية والحصول على العديد من الحركات في الموقع .

 

نبذة عن اللغة:

كان Microsoft Internet Explorer 3 أول متصفح تم من خلاله عرض واستخدام CSS في عام 1998.

أصدرت W3C- التي تشرف على معايير الويب CSS3 والتي يأمل المطورون أن تقوم جميع المتصفحات الرئيسية بقراءة وعرض كل خاصية من خصائص لغة ال CSS بنفس العرض والطريقة .

 

كيف تعمل  CSS ؟

 

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

 

مثال :

نقوم بتنسيق مثال HTML  السابق

 

 

رابط الفيديو

 


الفصل الثاني:

بناء اول جزء في موقع بوابة صحفية : الهيدر

 

-          نقوم الان ببناء الهيدر 

 نتيجة الكود ..

- سورس كود الهيدر   


<style>
nav{
    height: 80px;
    background-color: black;
    width:100%;
    border-color: yellowgreen;
    right: 0;
    left: 0;
    border-radius: 0;
    margin-left: 0;
    top: 0;
    position: fixed;
}
.logo{
background-color: lightgreen;
color: black;
height: 50px;
width: 150px;
float: left;
margin-top: 10px;
font-size: 25px;
text-align: center;
}
.dropdown{
/* float: right; */
margin-right: 10px;
color: white;
position: relative;
display: inline-block;
font-size: 20px;
margin: 10px 25px 10px 0;
}
.spot{
    float: right;
    margin-right: 50px;

}
.dropdown a{
    color: white;
    text-decoration: none;

}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #1e3f56;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
    padding: 12px 16px;
    z-index: 1;
    box-sizing: border-box;
    float: left;
    margin-right: 50px;

}
h1{
    text-align: center;
    margin-top: 150px;
}
.login{
color: red;
text-decoration: none;
float: left;
margin-right: 50px;
}
p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    box-sizing: border-box;

}
.dropdown:hover .dropdown-content {
  display: block;
  color: red;
}
.container{
margin-top: 100px;
width: 90%;
}
.content {
    direction: rtl;
    margin-right:  20px;
    font-size: 17px;
    font-weight: bolder;
}
  style>

<nav>
<div class="logo">
<img src="" alt="لوجو">
div>

<div class="dropdown spot">
<span><a href="">رئيسيةa>span>
    <div class="dropdown-content">
        <p><a href="index.php" class="login">تسجيل دخولa>p>
    div>
div>

<div class="dropdown spot">
<span><a href="">اخبارa>span>
    <div class="dropdown-content">
        <p><a href="index.php" class="login">اخبار محليةa>p>
        <p><a href="index.php" class="login">اخبار عالميةa>p>

    div>
div>

<div class="dropdown spot">
<span><a href="">اقتصادa>span>
    <div class="dropdown-content">
        <p><a href="index.php" class="login">اسواق المالa>p>
        <p><a href="index.php" class="login"> بنوكa>p>

    div>
div>
nav>




موضوعات ذات صلة

  • نتناول في الجزء الثاني من دورة تع....

  • سنبدأ بتنفيذ المشروع وهو بوابة ص....

  • يشمل الموضوع سورس كود المحاضرة ب....

  • نتناول في الفصل الاول تعريف بالب....