2015 - مدرسة الويب web school

الصفحات

▼

Types of database files

—Microsoft SQL Server uses three types of files to store databases
1.Primary data files, which have an .mdf extension . which can contain user-defined objects, such as tables and views>
2.If the database becomes too large and you run out of room on your first hard disk, you can create secondary data files, which have an .ndf extension,
— transaction log file. Transaction log files use an .ldf extension

—Microsoft database server can have default instance or several named instance of sql server.

الوسم span

الوسم <span>
هو من عناصر لغة html وهو Inline element
ويستخدم عادة لتنسيق جزء محدد من النص وليس له خصائص attributes
ويتم استخدامه عادة مع style  باعطائه class or id
ويستخدم له وسم بداية ووسم نهاية
<span></span>
مثال:
<style>
     span{
         color:#00f;
         font-size:28px;
         font-weight:bold;
     }
  </style>
</head>
<body >
    <p> my name is <span>khaled</span> , I was born in egypt</p>
</body>
ناتج المثال فى المستعرض:
الوسم span

الوسم div فى لغة html

الوسم <div>

هو عنصر من عناصر block
مثال:
<div>office</div>
<div>word</div>
<div>excel</div>
نلاحظ أن كل كلمة ظهرت فى سطر بمفردها مما يؤكد أنه عنصر block  وليس Inline
ناتج المثال:
الوسم div فى لغة html

والاستخدام الرئيس للوسم div هو احتوائه العديد من عناصر لغة html فتقريبا جميع عناصر لغة html يمكن ادراجها داخل الوسم div مثل العناويين، الفقرات، الصور، الارتباطات التشعبية...الخ  <h1>-<h6>  & <p> & <img> & <a>
مثال:

<div>
 <h1> web course</h1>
 <p> html short for Hyper text markup language</p>
 <img src="1.jpg" alt="html5 logo"  width="100px" height="100px">
 </div>
نلاحظ ناتج المثال:
الوسم div فى لغة html
نلاحظ أن div احتوى بداخله العديد من عناصر لغة Html ولكن حتى الأن لم تظهر فائدة div
فا ئدة div تكمن فى قدرته على تنسيق جزء معين من الصفحة بتنسيق معين ..فنقوم بتنسيق div من خلال style
مثال:
<style>
  div{
       width:500px;
       background-color:#ddd;
       padding:10px;
       margin:10px;
       border-radius:4px 4px 4px 4px;
     }
   </style>
</head>
<body >
    <div>
         <h1> web course</h1>
         <p> html short for Hyper text markup language</p>
         <img src="1.jpg" alt="html5 logo"  width="100px"         height="100px">
 </div>
ناتج المثال:
الوسم div فى لغة html

وبعد إجراء بعض التنسيقات الأخرى ويمكن بالطبع إضافة أكثر من بلوك فى الصفحة 
مثال:
<style>
  div{
       width:500px;
       background-color:#ddd;
       padding:10px;
       margin:10px;
       border-radius:4px 4px 4px 4px;
       border: 1px solid  #000;
       display: inline-block;
     }
   </style>
</head>
<body >
    <div>
         <h1> web course</h1>
         <p> html short for Hyper text markup language</p>
         <img src="lion.jpg" alt="lion"  width="100px" height="100px">
     </div>
    <div>
         <h1> web course</h1>
         <p> html short for Hyper text markup language</p>
         <img src="lion.jpg" alt="lion"  width="100px" height="100px">
     </div>
ناتج المثال:
الوسم div فى لغة html

block and inline elements in html عناصر البلوك والعناصر السطرية فى لغة Html

جميع عناصر لغة Html لها طريقة عرض افتراضية ..وهذه الطريقة تعتمد على نوع العنصر وطريقة العرض الافتراضية هذه إما أن تكون block or inline

block elements

عناصر لغة Html التى تظهر بطريقة البلوك تبدأ من سطر جديد وتترك بعدها سطر جديد بمعنى لا يستطيع أى عنصر آخر ان يكون معها فى نفس السطر مثل العناصر التالية:-
<p> - <h1> -<h6> - <div>
ففى المثال التالي : قمنا باستخدام مجموعة عناصر بلوك :
<h1>office</h1>
 <h2>word</h2>
 <p>application used in work manipulation</p>
 <h2>excel</h2>
 <p>application used in electronic sheets</p>
وكما نلاحظ  هذا هو الناتج:
block and inline elements in html عناصر البلوك والعناصر السطرية فى لغة Html

نلاحظ ان كل عنصر من عناصر البلوك ظهر فى سطر منفصل بمفرده ..ولم يتداخل أى عنصر مع عنصر أخر فى نفس السطر فالعناوين ظهرت فى سطر بمفردها والفقرات ظهرت فى أسطر بمفردها

inline elements

وهى عناصر لغة Html ولا تظهر فى سطر جديد وانما تظهر متجاورة مع بعضها فى نفس السطر مثل العناصر التالية
<a> - <img> - <span>
مثال:
<a href="#">link1</a>
 <a href="#">link2</a>
 <a href="#">link3</a>
نلاحظ أننا قمنا بعمل ثلاثة روابط تشعبية ونلاحظ النتيجة أن هذه الروابط تظهر فى سطر واحد وليس فى ثلاثة أسطر وذلك لأنها inline elements
block and inline elements in html عناصر البلوك والعناصر السطرية فى لغة Html
مثال آخر : قمنا بإضافة ثلاثة صور أخرى  فنلاحظ أن الصور والارتباطات التشعبية ظهرت فى نفس السطر 
 <a href="#">link1</a>
 <a href="#">link2</a>
 <a href="#">link3</a>
 <img src="lion.jpg" alt="lion" title="lion" width="100px" height="100px">
 <img src="lion.jpg" alt="lion" title="lion" width="100px" height="100px">
 <img src="lion.jpg" alt="lion" title="lion" width="100px" height="100px">
ناتج المثال:
block and inline elements in html عناصر البلوك والعناصر السطرية فى لغة Html

تنسيق القوائم باستخدام css

يمكن اجراء العديد من التنسيقات على القوائم من خلال css وذلك بجعل القوائم الرأسية تظهر أفقيا
وذلك من خلال css
<style>
ul{
display: inline
}
</style>
مثال:
<style>
                ul li{
                    display: inline;
                }
            </style>
        </head>
        <body>
            <h2>office applications</h2>
            <ul>
                <li>word</li>
                <li>excel</li>
                <li>power point</li>
                <li>access</li>
            </ul>
ناتج المثال:
وبمزيد من التنسيقات باستخدام css يمكن جعل القوائم تظهر كما يلى:-
<style>
  #list{padding:0;}
#list li{
   display: inline;
  }
 #list  a {
   background-color:black;
   color:white;
   padding:10px;
   text-decoration: none;
   border-radius: 6px 6px 6px 6px;
  }
  #list  a:hover{background-color: #dd0}
 </style>
</head>
<body >
 <h2>office</h2>
 <ul id="list">
 <li> <a href="#">word</li></a>
 <li> <a href="#">excel</li></a>
<li><a href="#">  access</li></a>
   </ul>
فيظهر ناتج المثال:
وعند الوقوف بالماوس على الارتباطات تظهر كما يلى:-



القوائم الوصفية description list في لغة html

القوائم الوصفية : هى قائمة من العناصر تصف كل عنصر فيها 

وهى تحتوى على الوسوم التالية:

<dl> وسم لتعريف القائمة الوصفية
<dt> وسم لتعريف العنصر الذى سيتم وصفه
<dd> وسم الوصف للعنصر

مثال:
 <dl>
      <dt>laser</dt>
          <dd>fast high quality </dd>
      <dt>inkjet</dt>
          <dd>slower than laser printers</dd>
 </dl>
ناتج المثال
القوائم الوصفية description list

القوائم المتداخلة فى لغة Html

كنا قد تحدثنا سابقا عن القوائم فى لغة Html وتكلمنا عن القوائم المرتبة والقوائم غير المرتبة
ويمكن للقوائم المرتبة أن نبدأها بعدد معين فمثلا لو كنا نريد القوائم المرتبة أن تبدأ بعدد 10 نقوم باستخدام الخاصية start=""
 <h2>Microsoft office product</h2>
 <ol start="10">
      <li>windows</li>
      <li>office</li>
      <li>visual basic</li>
   </ol>
</ul>
ناتج الصورة:
القوائم المتداخلة فى لغة Html

كما يمكن عكس ترتيب القائمة وذلك من خلال استخدام الخاصية reversed
مثال:
<h2>Microsoft office product</h2>
 <ol reversed>
  <li>windows</li>
  <li>office</li>
  <li>visual basic</li>
   </ol>
</ul>
ناتج المثال: 
ويمكن دمج اكثر من قائمة بداخل بعضها البعض nested list فلو أردنا دمج قائمة غير مرتبة فى قائمة مرتبة نقوم بالآتى
1- داخل العنصر li نقوم بوضع <ul> ثم نقوم بوضع عناصر القائمة غير المرتبة ثم نغلق القائمة غير المرتبة أولا وبعدها نقوم بإغلاق العنصر Li
مثال:
<h2>Microsoft office product</h2>
 <ol>
      <li>windows
      <ul>
          <li>windows 95</li>
          <li>windows 98</li>
          <li>windows xp</li>
          <li>windows 7</li>
      </ul>
      </li>
      <li>office</li>
      <li>visual basic</li>
   </ol>

ناتج المثال:
القوائم المتداخلة فى لغة Html

كما يمكن دمج قائمة غير مرتبة فى قائمة مرتبة
نقوم أولا بوضع القائمة غير المرتبة 
<h2>Microsoft office product</h2>
 <ul>
      <li>windows
          <ol>
              <li>windows 95</li>
              <li>windows 98</li>
              <li>windows xp</li>
              <li>windows 7</li>
      </ol>
  </li>
  <li>office</li>
  <li>visual basic</li>
   </ul>

ناتج المثال:
القوائم المتداخلة فى لغة Html

القوائم غير المرتبة unordered list فى لغة html

القوائم غير المرتبة  underscored list 

سبق  وتحدثنا عن النوع الأول من القوائم فى لغة html وهى القوائم المرتبة والآن نتحدث عن القوائم غير المرتبة 
والقوائم غير المرتبة تحتاج إلى وسم  <ul>
مثال:
<ul>
    <li>word</li>
    <li>excel</li>
    <li>power point</li>
    <li>access</li>
</ul>
ناتج المثال:

القوائم غير المرتبة unordered list فى لغة html
ويمكن تغيير نمط القوائم إلى أكثر من شكل وذلك من خلال الخاصية :list-style-type وهذه الخاصية للوسم ul وهى الخاصية تستخدم داخل style

نسق الدائرة المجوفة : list-style-type:circle

مثال:
<p> mircorsoft office applications</p>
<ul style="list-style-type:circle">
    <li>word</li>
    <li>excel</li>
    <li>power point</li>
    <li>access</li>
</ul>
ناتج المثال:
القوائم غير المرتبة unordered list فى لغة html

نسق المربع style="list-style-type:square 

<ul style="list-style-type:square">
    <li>word</li>
    <li>excel</li>
    <li>power point</li>
    <li>access</li>
</ul>
ناتج المثال:
القوائم غير المرتبة unordered list فى لغة html


نسق الدائرة المصمتة وهو النسق الافتراضي style="list-style-type:disc"

مثال:
<p> mircorsoft office applications</p>
<ul style="list-style-type:disc">
    <li>word</li>
    <li>excel</li>
    <li>power point</li>
    <li>access</li>
</ul>
ناتج المثال:

وفى حالة الرغبة فى عدم إظهار أى أشكال بجوار القوائم غير المرتبة نختار none    

style="list-style-type:none"
مثال:
<p> mircorsoft office applications</p>
<ul style="list-style-type:none">
    <li>word</li>
    <li>excel</li>
    <li>power point</li>
    <li>access</li>
</ul>
ناتج المثال:
القوائم غير المرتبة unordered list فى لغة html

القوائم المرتبة ordered list فى لغة html

تنقسم القوائم lists إلى قسمين :-
1- قوائم مرتبة ordered list
2- قوائم غير مرتبة unordered list 

والعديد من صفحات الانترنت تحتاج إلى نوع على الأقل من هذه القوائم لعرض البيانات الخاصة بها.

أولا: القوائم المرتبة ordered list

وسم إنشاء القوائم المرتبة هو <ol>  وهى اختصار لـordered list
وكل عنصر داخل القائمة يسبق بوسم <li> وهو اختصار لكلمة List أي قائمة باللغة الانجليزية.
مثال:

     <p> mircorsoft office applications</p>
    <ol>
        <li>word</li>
        <li>excel</li>
        <li>power point</li>
        <li>access</li>
</ol>

ناتج المثال:
القوائم المرتبة ordered list فى لغة html

ويمكن تغيير نوع الترقيم فى القوائم المرتبة بحيث يكون الترقيم أحرف هجائية  وذلك باستخدام الخاصية "type ="A 

مثال:
<ol type="A">
    <li>word</li>
    <li>excel</li>
    <li>power point</li>
    <li>access</li>
</ol>
ناتج المثال:
القوائم المرتبة ordered list فى لغة html

ويمكن أيضا تغيير نوع الترقيم إلى أحرف صغيرة small من خلال الخاصية "type="a

مثال:
<ol type="a">
<li>word</li>
<li>excel</li>
<li>power point</li>
<li>access</li>
</ol>
ناتج المثال:
القوائم المرتبة ordered list فى لغة html

كما يمكن تغيير نوع الترقيم إلى أحرف رومانية كبيرة من خلال الخاصية "type = "I


مثال: 
<ol type="I">
<li>word</li>
<li>excel</li>
<li>power point</li>
<li>access</li>
</ol>
ناتج المثال
القوائم المرتبة ordered list فى لغة html

ويمكن تغيير نوع الترقيم إلى احرف رومانية صغيرة "type="i


مثال:
<ol type="i">
<li>word</li>
<li>excel</li>
<li>power point</li>
<li>access</li>
</ol>

ناتج المثال:
القوائم المرتبة ordered list فى لغة html


تطبيق الأنماط على الجدوال في لغة Html

لتطبيق نمط معين على الجداول نقوم بإضافة Id للجدول

<table id="t1">
ثم نقوم بتطبيق التنسيقات على الجدول من خلال style
مثال:
<style>
 table,th,td{
  border:1px solid red;
  border-collapse:collapse;
 }
 table#t1{
 width:50%;
 background-color:#f1f1c1;
 text-align:right;
 }
 </style>
</head>
<body dir="rtl">
<table id="t1">
<caption>قائمة أسعار</caption>
 <tr>
  <th rowspan="2">اسم المنتج</th>
  <th colspan="2">السعر</th>
   </tr>
 <tr>
  <th>قرش</th>
  <th> جنيه</th>
  </tr>
 <tr>
  <td>لوحة مفاتيح</td>
  <td>20</td>
  <td>50</td>
 </tr>
 </table>
</body>
ناتج المثال:
تطبيق الأنماط على الجداول فى لغة Html

كما يمكن تطبيق أكثر من نسق على الجدول الواحد

كما فى المثال التالي: الذى نقوم من خلاله بتطبيق نسق معين على الصفوف الفردية للجدول ونسق أخر للصفوف الزوجية للجدول ونسق ثالث لصف العناويين فى الجدول.
<style>
 table,th,td{
  border:1px solid red;
  border-collapse:collapse;
 }
 table#t1{
 width:50%;
 background-color:#f1f1c1;
 text-align:right;
 }
 #t1 tr:nth-child(even)
 {
 background-color:#eee;
 }
 #t1 tr:nth-child(odd)
 {
 background-color:#fff;
 }
 #t1 th{
 color:white;
 background-color:black;
 }
ناتج المثال
تطبيق الأنماط على الجداول فى لغة Html

الجداول فى لغة Html الجزء الثالث


  • border spacing هذه الخاصية هى المسئولة عن المسافة بين خلايا الجدول

  • يتم التحكم في هذه الخاصية عن طريق style      border-spacing:  px
مثال:

    <style>
         table,td,th{
         border:1px solid black;
         width:50%;
         padding:25px;
         border-spacing:15px;
         }
     </style>
</head>
<body >
    <table>
         <tr>
              <th>name</th>
              <th>address</th>
              <th>telephone</th>
         </tr>
         <tr>
              <td>khalid</td>
              <td> giza</td>
              <td>235689</td>
         </tr>
         <tr>
              <td>ali</td>
              <td>cairo</td>
              <td>238692258</td>
         </tr>
</table>

الجداول فى لغة Html الجزء الثانى

  • دمج خلايا الجدول : يمكن دمج خلايا الجدول مع بعضها سواء كانت هذه الخلايا عبارة عن أعمدة أو صفوف 

  • ولدمج عمودين فى الجدول نستخدم الخاصية  colspan
  • ولدمج صفين فى الجدول نستخدم الخاصية rowspan
مثال:
<table>
         <tr>
          <th rowspan="2">اسم المنتج</th>
          <th colspan="2">السعر</th>
      </tr>
     <tr>
          <th>قرش</th>
          <th> جنيه</th>
      </tr>
     <tr>
          <td>لوحة مفاتيح</td>
          <td>20</td>
          <td>50</td>
     </tr>
</table>

فيكون الناتج كما فى الصورة :
الجداول فى لغة Html الجزء الثانى

  •  عنوان الجدول : يمكن إضافة عنوان للجدول من خلال الوسم caption والذى يوضع داخل وسم الجدول table

مثال:
table>
    <caption>قائمة أسعار</caption>
     <tr>
          <th rowspan="2">اسم المنتج</th>
          <th colspan="2">السعر</th>
       </tr>
      <tr>
          <th>قرش</th>
          <th> جنيه</th>
      </tr>
     <tr>
          <td>لوحة مفاتيح</td>
          <td>20</td>
          <td>50</td>
     </tr>
 </table>
ناتج المثال:
الجداول فى لغة Html الجزء الثانى

يتم التشغيل بواسطة Blogger.

تم الكشف عن مانع الإعلانات

الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك. شكرًا لك على الدعم ❤️

تحصل على الاضافة