Tag Archives: كورسات برمجة ويب

الدرس الثانى فى الاجاكس


بعد ان قمنا بشرح اكواد الاجاكس فى الدرس السابق سوف نتناول فى هذا الدرس مثال عملي كامل باستخدام الاجاكس:

مثال:

اولا صفحة (index) الخاصة بكود الاجاكس:

<html dir=”rtl”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>

<title>New Page 1</title>

<script>

function loadXMLDoc(str)

{

if(str.length==0)

{

document.getElementById(“myDiv”).innerHTML=””;

return;

}

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{

// code for IE6, IE5

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open(“GET”,”page1.php?n=”+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<form action=”page1.php” method=”get”>

<input type=”text” name=”n” onKeyUp=”loadXMLDoc(this.value)”/ >

</form>

<div id=”myDiv” ></div>

</body>

</html>

ثانيا صفحة (page1) الخاصة بالسرفر:

<?php

if(isset($_GET[‘n’]))

{

echo “Hello”.’ ‘.$_GET[‘n’];

}

else echo “please enter your name”;

?>

مع العلم ان امتداد الصفحتين (.php) لاننا نتعامل مع كود السرفر بالبى اتش بى اما فى حالة التعامل مع (asp) فيتم كتابة اكواد (asp) فى الصفحة الثانية وجعل الصفحتين بامتداد (.asp) وهذا المثال هو عبارة عن حقل نصوص ياخذ من المستخدم اى نص وليكن اسمة ويكتب لة اسفل حقل النصوص كلمة هالو بالاضافة الى الاسم الذى ادخلة وذلك دون الانتقال الى صفحة جديدة اى فى نفس الصفحة والان جرب المثال بنفسك ولكن لاحظ انة بعد ان تكتب نص داخل حقل النصوص اضغط (enter) لينتقل الى صفحة السرفر.

ملاحظة:

فى المثال السابق استخدامنا دالة (GET) حيث يمكن استبدالها بدالة (POST) والفرق بين الدالتين ان دالة (GET) اسرع من دالة (POST) لكن دالة (POST) تستخدم فى حالة ارسال كميات كبيرة من الداتا للسرفر حيث ان دالة (GET) لا تستطيع ارسال كميات كبيرة من الداتا فسعتها محدودة اما (POST) فغير محدودة كما ان دالة (POST) ذو (security) اعلى من دالة (GET) لان الداتا التى يتم ارسالها عبر دالة (GET) تظهر مع الرابط باعلى الصفحة اما فى حالة الدالة (POST) فان الداتا لا تظهر مع الرابط حيث تنتقل عبر بروتوكول (http).

الدرس الاول فى الاجاكس


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

(1)XMLHttpRequest Object or ActiveXObject Object:

وهو عبارة عن اوبجيكت يقوم بعملية استقبال طلبات المستخدم ولة نوعين الاول (XMLHttpRequest) وهذا النوع يتعامل مع الاصدارات الحديثة من المتصفحات والنوع الاخر (ActiveXObject) وهذا النوع يتعامل مع الاصدارات القديمة من المتصفحات ولا بد من استخدام النوعين لضمان تنفيذ طلبات المستخدمين مع كافة انواع المتصفحات.

مثال عملى على استخدامها:

var xmlhttp;
if (window.XMLHttpRequest)
{

// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{

// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

(2)Send a Request To a Server:

وفى هذا الجزء نقوم بتفيذ عملية ارسال طلبات المستخدم الى السرفر وذلك عن طريق الكود التالى:

xmlhttp.open(method, url,true);
xmlhttp.send();

حيث ان الدالة (open) لها ثلاث بارمترات البارمتر الاول عبارة عن نوع الميثود وهما نوعين (GET,POST) والبارمتر الثانى يتم فية تحديد موقع الملف الموجود على السرفر والبارمتر الثالث يفضل تركة (true) .ثم بعد ذلك نستخدم دالة (send) لتنفيذ عملية الارسال الى السرفر.

مثال عملى على استخدامها:

xmlhttp.open(“GET”,”firstpage.php”,true);
xmlhttp.send();

او فى حالة التعامل مع (asp)

xmlhttp.open(“GET”,”firstpage.asp”,true);
xmlhttp.send();

(3)Server Response:

بعد ان قمنا باستقبال الداتا من المستخدم وارسالها الى السرفر يكون قد حان الوقت لتلقى الرد على الداتا التى تم ارسالها الى السرفر ويتم ذلك عن طريق خاصية (responseText).

(4)onreadystatechange event:

بعد ان تم ارسال طلب المستخدم الى السرفر يتم تنفيذ بعض الاجراءات على اساس الاستجابة عن طريق حدث يسمى

(onreadystatechange) ومع هذا الحدث يتم استخدام خاصيتين هما:

(1)readyState:

وهذة الخاصية تعبر عن حالة الطلب المرسل الى السرفر ولها خمس قيم تتدرج من (0) الى (4) كالتالى:

(0)يدل على ان الطلب الذى يتم ارسالة الى السرفر لا يعمل.

(1)يدل على ان هناك وصلة تم عملها لطلب المستخدم الى السرفر.

(2)تدل على ان السرفر استلم طلب المستخدم بالفعل.

(3)تدل على ان السرفر يقوم بمعالجة طلب المستخدم المرسل الية.

(4) يدل على ان السرفر قام بمعالجة طلب المستخدم وجاهز للاستجابة.

(2)Status:

ولها قيمتين كالتالى:

(200)تدل على انة توجد صفحة على السرفر.

(404)تدل على انة لا توجد صفحة على السرفر.

مثال عملى على استخدامها:

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“tag_html”).innerHTML=xmlhttp.responseText;
}
}

مقدمة عن الاجاكس


ظهر مصطلح الاجاكس لاول مرة عام 2005 على يد كاتب امريكى والاجاكس ليست لغة برمجية مستقلة ولكنها تقنية متقدمة تتكون من عدة تقنيات وهى عبارة عن كلمة تتكون من اربعة احرف (AJAX) وهى اختصار لى:

(Asynchronous JavaScript and XML)

اى اتحاد بين لغتى (XML – JavaScript) فتقنية الاجاكس تتكون من دمج بين اكواد الجافا سكريبت والاكس ام ال.

تعتبر تقنية الاجاكس من اكثر التقنيات التى لقت رواجا فى الفترة الاخيرة خاصة على مواقع التواصل الاجتماعى فزر الليك (like) وزر الشير (share) المعروفان على موقع الفيس بوك وموقع اليوتيوب وغيرهما من المواقع قد تم عملهما عن طريقة تقنية الاجاكس فالمستخدم يمكن ان يقوم بعمل لايك لصفحة ما مثلا على الفيس بوك دون تحميل الصفحة مرة اخرى وايضا يمكن ان يقوم بعمل شير لاى صورة او فيديو من صفحتة دون الانتقال الى الصفحة مصدر الصورة و الفيديو وبالتالى فان المستخدم يمكنة من عمل مئات الايك او الشير بسهولة جدا ودون تضييع وقت طويل ومن هنا يمكن ان نلخص تقنية الاجاكس على انها تقنية تمكن مستخدم الموقع من القيام بحدث معين من صفحتة دون الحاجة الى اعادة تحميل صفحات اخرى.

الادوات اللازمة لتعلم الاجاكس:

1- الالمام بلغة HTML.

2- الالمام بلغة JavaScript.

3- الالمام بلغة XML.

css الدرس الخامس فى


Links

-سنتعلم فى هذا الجزء ضبط شكل ومظهر اللينكات واللينكات فى لغة (css) لها اربع خواص وهى:

استخدامها

property

تستخدم فى ضبط لون اللينك ويظهر تاثير اللون قبل الضغط علي اللينك بالماوس اى فى الحالة العادية لة.

a:link {color:#FF0000;}

تستخدم فى ضبط لون اللينك ويظهر تاثير اللون بعد الضغط علي اللينك بالماوس وزيارة الصفحة المرتبطة بهذا اللينك.

a:visited {color:#00FF00;}

تستخدم فى ضبط لون اللينك ويظهر تاثير اللون عند تحريك الماوس على اللينك ويختفى التاثير باختفاء الماوس.

a:hover {color:#FF00FF;}

تستخدم فى ضبط لون اللينك ويظهر تاثير اللون اثناء الضغط علي اللينك بالماوس.

a:active {color:#0000FF;}

ملاحظة: عند استخدامك للاربعة خواص السابقة راعى الترتيب الموجود بالاعلى.

– والمثال التالى يشرح الخواص السابقة:

<!DOCTYPE html>

<html>

<head>

<style>

a:link {color:#FF0000;}

a:visited {color:#00FF00;}

a:hover {color:#FF00FF;}

a:active {color:#0000FF;}

</style>

</head>

<body>

<a href=”default.php” target=”_blank”>This is a link</a>

</body>

</html>

والان جرب المثال بنفسك لتتعرف على الفرق بينهم.

– ويمكن استخدام خواص اخرى مع اللينكات كخاصية

(background-color, text-decoration) والتى درسناها سابقا وتكون كالتالى:

<!DOCTYPE html>

<html>

<head>

<style>

a:link {color:#FF0000; background-color:#B2FF99; text-decoration:underline;}

a:visited {color:#00FF00; background-color:#FFFF85; text-decoration:overline;}

a:hover {color:#FF00FF; background-color:#FF704D; text-decoration:line-through;}

a:active {color:#0000FF; background-color:#FF704D; text-decoration:underline;}

</style>

</head>

<body>

<a href=”default.php” target=”_blank”>This is a link</a>

</body>

</html>

ولاحظ ان الفرق بين(color)فى انة يضبط لون اللينك نفسة اما( background-color) فيستخدم فى ضبط لون الخلفية الموجود عليها اللينك.

.

css الدرس الرابع فى


Fonts

– سنتعلم فى هذا الجزء ضبط الخط المستخدم فى كتابة النصوص من حيث النوع حيث يوجد انواع عديدة للخطوط داخل لغة (css) وايضا ضبط حجم الخط ويمكن ان تضبط الخط بحيث يكون سميك او غير سميك والخصائص المستخدمة فى ضبط الخط هى كالتالى :

Property

شرح الخاصية

font-family

تستخدم لضبط نوع الخط المستخدم

font-size

تستخدم لضبط حجم الخط

font-style

تستخدم لضبط شكل الخط سواء كان مائل او طبيعى وغير مستخدمة بكثرة

(1)font-family:

وتستخدم هذة الخاصية فى اختيار نوع الخط وانواع الخطوط كثيرة جدا يمكنك ان تتعرف عليها من على النت او من داخل برنامج الدريم ويفر ويتم استخدامها كما فى المثال التالى :

<!DOCTYPE html>

<html>

<head>

<style>

p.serif{font-family:”Times New Roman”,Times,serif;}

p.sansserif{font-family:Arial,Helvetica,sans-serif;}

</style>

</head>

<body>

<h1>CSS font-family</h1>

<p>This is a paragraph, shown in the Times New Roman font.</p>

<p>This is a paragraph, shown in the Arial font.</p>

</body>

</html>

(2)font-size:

وعن طريق هذة الخاصية تستطيع تحديد حجم الخط المستخدم والوحدة المستخدمة فى تحديد حجم الخط هى البكسل (px) كما فى المثال التالى:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is a paragraph.</p>

</body>

</html>

وتظهر بصفحة الويب كما يلى:

This is heading 1

This is heading 2

This is a paragraph.

css الدرس الثالث فى


Text

– سنتعلم فى هذا الجزء كيفية التعامل مع النصوص بلغة (css) والخصائص المستخدمة فى ضبط النصوص هى:

Property

الاستخدام

color

تستخدم لضبط لون النص

direction

ويستخدم لتحديد طريقة كتابة النص من اليمين الى اليسار او العكس

text-align

وتستخدم لتحديد وضع النص اى فى يمين الصفحة ام فى يسارها ام فى الوسط

text-decoration

تستخدم فى عمل خط اسفل النص او اعلاة او خلال النص

text-shadow

تستخدم فى عمل ظل للنص

text-transform

تستخدم فى عمل نصوص تكون احرفها كابتل او سمول او كل كلمة فى النص يكون اول حرف فية كابتل

والان مع شرح الخصائص السابقة :

(1)Color:

وقد تم شرحها سابقا.

(2)direction:

ويتم عن طريقها تحديد اتجاة الكتابة فى النص ولها قيمتين الاولى من اليمين الى اليسار(rtl) او العكس من اليسار الى اليمين (ltr) كما بالمثال التالى:

<!DOCTYPE html>

<html>

<head>

<style>

p.text1 {direction:rtl;}

p.text1 {direction:ltr;}

</style>

</head>

<body>

<p> text1 from right to left </p>

<p >text2 from left to right</p>

</body>

</html>

وتظهر فى صفحة الويب كما يلى:

text1 from right to left

text2 from left to right

– وهنا نظرا لاننا استخدمنا تاجين متشابهين(p) فى عمل النصوص فلكى نفرق بينهم فاننا نستخدم خاصية  (class)وهى ان تعطى اسم معين للتاج من داخل خاصية (class) كما بالمثال ثم بدل استخدامها بالطريقة السابقة نزيد عليها نقطة ومعها اسم(class) كالتالى (p.text1) واستخدام خاصية (class) داخل لغة (css) لها اهمية كبيرة اذ ان غالبية مستخدمى لغة(css) يستخدمون خاصية (class).

(3)text-align:

– وتستخدم هذة الخاصية فى تحديد اتجاة النص سواء كان فى يمين الصفحة او يسارها او فى الوسط وبالتالى فان هذة الخاصية لها ثلاث قيم وهى:

1- (right) لضبط النص يمين الصفحة

2- (left) لضبط النص يسار الصفحة

3- (center) لضبط النص فى وسط الصفحة

والمثال التالى يشرح الخاصية السابقة بجميع قيمها:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {text-align:center}

h2 {text-align:left}

h3 {text-align:right}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

</body>

</html>

وتظهر بصفحة الويب كما يلى:

This is heading 1

This is heading 2

This is heading 3

(4)text-decoration:

وتستخدم هذة الخاصية فى وضع خط تحت النصوص وذلك لبيان اهميتة او وضع خط اثناء النص لبيان انها كلمة اونص محذوف او وضع خط اعلى النص وبالتالى فان لها ثلاث قيم هى:

1- (overline) لوضع خط اعلى النص

2- (line-through) لوضع خط خلال النص

3- (underline) لوضع خط تحت النصوص

والمثال التالى يشرح الخاصية بقيمها المختلفة:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

</body>

</html>

وتظهر بصفحة الويب كما يلى:

This is heading 1

This is heading 2

This is heading 3

(5)text-transform:

تستخدم فى عمل نصوص تكون احرفها كابتل او سمول او كل كلمة فى النص يكون اول حرف فية كابتل وبالتالى يكون لها ثلاث قيم هى كالتالى:

1- (uppercase)عن طريقا يكون النص كلة كابتل

2- (lowercase) عن طريقها يكون النص كلة سمول

3- (capitalize) عن طريقها يكون النص كل كلمة فية اول حرف كابتل

والمثال التالى يشرح الخاصية بقيمها الثلاثة:

<!DOCTYPE html>

<html>

<head>

<style>

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

</style>

</head>

<body>

<p>This is some text.</p>

<p>This is some text.</p>

<p>This is some text.</p>

</body>

</html>

وتظهر بصفحة الويب كالتالى:

THIS IS SOME TEXT.this is some text.

This Is Some Text.

css الدرس الثانى فى


Background

– وفى هذا الجزء سوف نتعلم ضبط كل شىء يخص الخلفية من حيث اللون او وضع صورة كخلفية لموقعك او جزء فى موقعك وخصائص الخلفية هى:

شرح الخاصية

property

تستخدم لتغير لون الخلفية

background-color

تستخدم لضبط صورة كخلفية

background-image

تستخدم لتكرار الصورة فى الخلفية عدد من المرات تحددة انت

background-repeat

تستخدم فى تحديد مكان الصورة يسار او يمين او فى المنتصف

background-position

(1)background-color:

body {background-color:#b0c4de;}

h1 {background-color:#6495ed;}
p {background-color:red;}
div {background-color:blue;}

مثال على ضبط لون الخلفية لاى جزء داخل موقعك :

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-color:#b0c4de;

}

h1

{

background-color:#6495ed;

}

p

{

background-color:#e0ffff;

}

div

{

background-color:#b0c4de;

}

</style>

</head>

<body>

<h1>CSS background-color example!</h1>

<div>

This is a text inside a div element.

<p>This paragraph has its own background color.</p>

We are still in the div element.

</div>

</body>

</html>

ولون الخلفية يمكن ان تكتبة باسم اللون فمثلا الاحمر red او بطريقة الاكواد واليك مجموعة من اكواد الالوان:

اللون

كود اللون
الاسود #000000
الاحمر #FF0000
الاخضر #00FF00
الازرق #0000FF
الاصفر #FFFF00
اللبنى #00FFFF
البنفسجى #FF00FF
الرمادى #C0C0C0
الابيض #FFFFFF

(2)background-image:

body {background-image:url(‘paper.gif’);}

وعند استخدام خاصية تحديد صورة للخلفية تحدد لة اسم الصورة والامتداد الخاص بيها كما فى المثال حيث (paper) اسم الصورة وامتدادها هو (gif) ويوجد ايضا امتدادات اخرى كال (png).

(3)background-repeat:

وموضوع تكرار الصورة لة حالتين اما تكرار افقى اى على محور (x) او تكرار راسى اى على محور (y) كالتالى:

اولا التكرار الافقى:

body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}

ثانيا التكرار الراسى:

body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-y;
}

والان مع مثال كامل لشرح الخاصية :

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-image:url(‘gradient2.png’);

background-repeat:repeat-x;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

(4)background-position:

وعن طريق هذة الخاصية يتم ضبط وضع الصورة فى يسار الصفحة او يمنها او فى الوسط كالتالى:

اولا وضع الصورة فى يمين الصفحة:

body
{
background-image:url(‘smiley.gif’);
background-position:right;
}

ثانيا وضع الصورة فى يسار الصفحة:

body
{
background-image:url(‘smiley.gif’);
background-position:left;
}

ثالثا وضع الصورة فى منتصف الصفحة:

body
{
background-image:url(‘smiley.gif’);
background-position:center;
}

css الدرس الاول فى


فى البداية لا بد ان تعرف ان لغة (css) هى ليست لغة منفصلة بل هى تربط باكواد او تاجات ال (html) حيث تعمل لغة (css) على ضبط الالوان والخطوط ومثل هذة الامور التى ترتبط بمظهر وشكل الموقع وذلك عن طريق استخدام اكواد ال (html) وضبطها باستخدام لغة(css) واكواد لغة (css) يتم وضعها بين تاج </style> <style>

وتوضع داخل تاج head والذى درسناة بلغة (html) وهذا هو مايسمى بالتضمين الداخلى والان كيف يتم استخدام لغة(css) فلنفرض اننا مثلا نريد ان نغير خلفية محتوى الموقع للون مثلا الاحمر فالمعروف ان التاج الخاص بمحتوى الصفحة فى لغة (html) هو تاج body وبالتالى يتم تغير اللون بلغة (css) كالتالى:

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-color : red;

}

</style>

</head>

<body>

</body>

</html>

وهكذا يتم استخدام لغة (css) حيث تكتب اسم التاج الخاص بلغة (html) ثم تستخدم (brackets) او الاقواس كما بالمثال وبعد ذلك تستخدم خاصية تغير لون الخلفية وهى عن طريق (background-color) وبالتالى يكون الشكل العام لاستخدام لغة (css) كالتالى:

حيث (selector) هو كود او تاج ال (html)  كما ان (property) هى الخاصية التى يتم تعديلها عن طريق (value) وتنتهى بفصلة منقوطة (semicolon) .

مثال اخر للتوضيح :

<html>

<head>

<style>

body {background-color:yellow;}

h1 {font-size:36pt;}

h2 {color:blue;}

p {margin-left:50px;}

</style>

</head>

<body>

<h1>This header is 36 pt</h1>

<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body>

</html>

شرح بعض الخصائص المهمة:

شرح الخاصية

property

يستخدم لتغير اللون

color

يستخدم لضبط لون الخلفية

background-color

يستخدم لضبط حجم الخط

font-size

يستخدم لضبط التباعد من جهة الشمال

margin-left

يستخدم فى تحديد المكان من جهة اليميم او اليسار او الوسط وتاخذ قيم (center,left,right)

text-align

يتم عن طريقها ضبط نوع الخط

font-family

وسوف يتم شرح الخصائص اكثر فى الدروس القادمة.

css مقدمة عن


هي لغة تنسيق للصفحة (لغة ستايل) تهتم بشكل وتصميم المواقع، صممت خصيصا لعزل التنسيق (الألوان, الخطوط….) عن محتوى المستند المكتوب بلغة (html) وينطبق ذلك على الألوان والخطوط والصور والخلفيات التي تستخدم في الصفحات، بمرونة وسهولة تامه.

وهذه التقنية تعني بشكل صفحات المواقع من حيث المظهر الكلي من الوان وصور وغيره.و يمكن اضافته للصفحة بعدة طرق أفضلها التضمين الخارجي بكتابة كود ال (css) في ملف منفصل او تضمينها مع اكواد  (hml) وسنتعلم الطريقتين.

– ولغة CSS هى اختصار لى :  Cascading Style Sheets

– وللغة CSS العديد من الاصدارات واليك اصدارتها وتاريخ اصدارها:

 

الاصدار

تاريخ الاصدار

CSS 1

1996

CSS 2

1998

CSS 2.1

2004

CSS 3

2012

 

الادوات اللازمة لتعليم CSS :

1-محرر نصوص كال  notepad او word او اى محرر نصوص اخر او باستخدام برنامج الدريم ويفر.

2-متصفح للانترنت كالفيرفكس او غيرة لكى ترى نتيجة الاكواد التى سنتعلمها.

3- ان يكون لديك معرفة بلغة html واكوادها.

HTML الدرس الثامن فى


Forms

-والمقصود بيها النماذج التى يتم تصممها فى صفحة الويب وهى المسئولة عن نقل الداتا من صفحة الويب عن طريق المستخدم وارسالها الى السرفر والتاج الخاص بالنماذج هو <form> </form> ويستخدم مع تاج النماذج تاج <input> ويوضع داخلة وليس لهذا التاج تاج نهاية ولهذا التاج انواع منها:

(1)Text Fields:

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

First name: <input type=”text” name=”firstname”>
Last name: <input type=”text” name=”lastname”>
</form>

وتظهر بصفحة الويب كالتالى:

First name:

Last name:

(2)Password Field:

وهى عبارة عن حقل لادخال باسورد المستخدم

<form>
Password: <input type=”password” name=”pwd”>
</form>

وتظهر بصفحة الويب كالتالى:

Password:

(3)Radio Buttons:

ويستخدم هذا النوع فى وضع خيارات للمستخدم ولة ان يختار واحدة فقط ولة مثال مشهور جدا على جميع المواقع عند التسجيل فى الموقع كمستخدم جديد فيطلب منك تحديد جنسك فهو اما ذكر او انثى اى لا بد ان تختار واحدة فقط كما فى المثال التالى:

<form>
<input type=”radio” name=”sex” value=”male”>ذكر<br>
<input type=”radio” name=”sex” value=”female”>انثى
</form>

وتظهر بصفحة الويب كالتالى:

ذكرانثى

(4)Checkboxes:

وهذا النوع يشبة النوع السابق مع الفرق اننا هنا يمكن ان نختار اكثر من خيار او لا نختار ونتركها بدون قيمة كما فى المثال التالى:

<form>
<input type=”checkbox” name=”vehicle” value=”html”>I learn html<br>
<input type=”checkbox” name=”vehicle” value=”css”>I learn css
</form>

وتظهر بصفحة الويب كالتالى:

I learn html
I learn css

(5)Submit Button:

ويستخدم هذا النوع فى ارسال داتا عن مستخدمين الموقع الى السرفر وسوف يتم دراستة وفهمة اكثر فيما بعد ويتم استخدامها كما فى المثال التالى:

<form name=”input” action=”html_page.php” method=”get”>
Username: <input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
</form>

وتظهر بصفحة الويب كالتالى:

Username:

(6)drop-down list:

وتستخدم فى الاختيار من متعدد كالتالى:

<form ><select name=”number”>
<option value=”1″>1</option><option value=”2″>2</option><option value=”3″>3</option><option value=”4″>4</option></select></form>

وتظهر بصفحة الويب كالتالى:

choose number1234

(7)Textarea:

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

<form ><textarea rows=”10″ cols=”30″>

Leave comment.

</textarea>

</form>

حيث تتحكم بحجمها عن طريق(rows) التى تزيد عدد الاسطر او(cols) والتى تزيد عدد الاعمدة وتظهر بصفحة الويب كالتالى:

Leave comment.

HTML الدرس السابع فى


Blocks

-وهى عبارة عن تاجيى <div> and <span>والمهم هو تاج </div> <div> حيث ان هذا التاج مهم جدا فى لغة (HTML) حيث تستخدمة فى تنظيم موقعك فمن المعروف ان اى موقع يكون مقسم الى اربع اجزاء وهما:
(header,footer,sidebar,content) حيث يتم وضع كل جزء من الاجزاء الاربعة فى

تاج </div> <div> منفصل والمثال التالى يشرح بالتفصيل كيفية تصميم موقع باستخدام هذا التاج.

<!DOCTYPE html>
<html>
<body>
<div id=”container” style=”width:500px”>
<“div id=”header” style=”background-color:#FFA500″>
<h1 style=”margin-bottom:0;”>Main Title of Your Web Page</h1>
</div>
<div id=”menu” style=”background-color:#FFD700;height:200px;width:100px;float:lef”>
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript<br>
</div>
<div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left”>
Content </div>
<div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”
Copyright © W3S4arb>
</div>
</div>
</body>
</html>

وتظهر بصفحة الويب كالتالى:

Main Title of Your Web Page

Content

جرب بنفسك المثال السابق ولاحظ ان هناك مجموعة من(attributes)الخاصة بتاج <div>واليك شرحها:

استخدامها

attributes

وبة تضع اسم مخصص للتاج لتمييز التاجات عن بعضها

id

وبة يتم ضبط حجم الخط والالوان وغيرة للتاج

style

لضبط العرض والطول وتقاس بوحدة البكسل(px)

width,height

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

background-color

اى عمل تباعد من الاسفل بين التاج والتاج الذى يلية وسندرسها اكثر فى كورس css

margin-bottom

HTML الدرس السادس فى


Lists

-هى عملية انشاء القوائم وتنقسم الى ثلاث انواع من القوائم هى:

(1)Unordered Lists:

وهى النوع الاول من انشاء القوائم وهذا النوع ينشا قوائم غير مرتبة ويتم انشائها بتاج يسمى <ul></ul> وهذا التاج يحتوى على تاج اخر مرتبط معة وهو المسئول عن تكوين عناصر القائمة وهو <li> </li> كما فى المثال التالى:

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

وتظهر بصفحة الويب كالتالى:

  • HTML
  • CSS
  • JavaScript

(2)Ordered Lists:

وهى النوع الثانى من انشاء القوائم حيث القوائم المرتبة وهو نفس الفكرة مع تعديل تاج <ul> </ul> بتاج <ol> </ol>كالتالى:

<ol>

<li>HTML</li>
<li>CSS</li>

<li>JavaScript</li>
</ol>

وتظهر بصفحة الويب كالتالى:

  1. HTML
  2. CSS
  3. JavaScript

(3)Description Lists:

وهذا النوع من القوائم لا يستخدم بكثرة فالمهم الحالتين السابقتين واليك مثال يشرح استخدامها:

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

وتظهر بصفحة الويب كالتالى:

Coffee

– black hot drink

Milk

– white cold drink

HTML الدرس الخامس فى


Images

-وهى عملية ادارج الصور داخل صفحات الويب والتاج الخاص بها هو <img> وهو ليس لة تاج نهاية ويحتوى هذا التاج على مجموعة من(attributes)واهمها:

الشرح

Attributes

وبة يتم تحديد مكان الصورة التى ستدرج الى صفحة الويب

src

وبة يتم تحديد عرض للصورة

width

وبة يتم تحديد طول للصورة

height

وبة يتم تحديد اطار للصورة

border

عند الوقوف على الصورة بمؤشر الفارة تظهر كلمة نصية تحددها انت بهذة الخاصية

alt

والان مع مثال يوضح لنا استخدام تاج ادراج الصور:

<!DOCTYPE html>

<html>

<body>

<img src=”images/picture.jpg” alt=”my picture” width=”99″ height=”130″>

</body>

</html>

نلاحظ انة مع خاصية (src) فاننا نحدد لة المكان الموجود بة الصورة وهو هنا اسمة(images) ثم نضيف لة اسم الصورة وامتدادها وهى هنا (picture.jpg).

Tables

– وهى عملية ادارج الجداول داخل صفحة الويب ويتكون الجدول من صفوف واعمدة ويمكن ان تضيف عنوانين للجدول حيث تاج الجدول هو </table><table> وتاج الصف هو </tr><tr> وتاج العمود هو <td> </td> كما ان تاج العنوان هو <th> </th> وللجدول مجموعة من (attributes) اهمها (width,border) لتحديد عرض الجدول واطار الجدول والان مع مثال يشرح كيفية انشاء جدول بلغة (HTML).

<!DOCTYPE html>

<html>

<body>

<table width=”200″ border=”1″>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

</body>

</html>

ويظهر الكود السابق فى صفحة الويب بالشكل التالى :

Header 1

Header 2

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

والان جرب المثال السابق السابق بنفسك.

HTML الدرس الرابع فى


Links

-اللينك هو من المواضيع المشهورة جدا على الانترنت فهو موجود فى كل مواقع الويب تقريبا حيث يستخدم فى الانتقال من صفحة لاخرى والتاج الخاص بة هو:

<a href=”url“>Link text</a>

اى ان التاج هو <a> </a> ويوضع بين بداية ونهاية التاج اى كلمة نصية وهى التى تضغط عليها ليحولك الى صفحة اخرى هذة الصفحة التى تحددها انت من خلال (href) والتى هى عبارة عن شىء يسمى(attributes) وسوف يتم شرح (attributes) بشىء من التفصيل فى نهاية الدرس والمهم الان ان تتعرف على اللينك وطريقة عملة من خلال المثال التالى:

<a href=”http://www.w3s4arb.com”>Visit w3s4arb;/a>

حيث Visit w3s4arb هى كلمة نصية عندما تضغط عليها يحولك الى موقعنا.

-وهنا ايضا(attribute) اخرى تستخدم مع اللينك وهى (target)

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

<a href=”http://www.w3s4arb.com/&#8221; target=”_blank”>Visit w3s4arb</a>

لكن جرب المثال السابق عمليا لتتعرف على الفرق.

Attributes

– وهى عبارة عن معلومات اضافية تضاف للتاجات للقيام بمهمة محددة كالتى استخدمناها فى موضوع اللينك فى المثال السابق وتاخذ الشكل العام name=”value” .

– ففى المثال السابق فان(name) يمثل(href) كما ان (value)يمثل(url) وبالمثل مع (target).

-ولاحظ ان (value)توضع بين (Double quotes) ويمكن ايضا استخدام (single quotes).

-ويوجد(attributes) مشتركة لمعظم التاجات وهى (class,id,style) وسيتم دراستها بالتفصيل فى كورس(css) لان استخدامها فى كورس (HTML) محدود.

HTML الدرس الثالث فى


Paragraphs

-يستخدم (paragraphs) فى كتابة النصوص فى صفحات الويب والوسم الخاص بها هى:

<!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

</body>

</html>

Line Breaks

-يستخدم (line breaks) فى الانتقال الى سطر جديد وتستخدم دائما مع النصوص كالتالى:

<!DOCTYPE html>

<html>

<body>

<p>This is<br>a para<br>graph with line breaks</p>

</body>

</html>

ويكون الناتج فى صفحة الويب كالتالى:

This is
a para
graph with line breaks

ولاحظ ان وسم <br> هو جزا واحد فقط اى ليس لة وسم نهاية.

Lines

-ويستخدم هذا الكود فى عمل خط افقى يمكن ان تستفاد بة فى انهاء الفقرة كالتالى:

<!DOCTYPE html>

<html>

<body>

<p>The hr tag defines a horizontal rule:</p>

<hr>

</body>

</html>

ويكون الناتج فى صفحة الويب كالتالى:

The hr tag defines a horizontal rule:

Comments

– وهى تستخدم فى كتابة تعليقات تكتبها انت لتعرف بها فيما تستخدم اكوادك ولا تظهر فى المتصفح كالتالى:

<!– This is a comment –>

Text Formatting

– وهى عبارة عن الصيغة المستخدمة فى ضبط شكل الكلمات والنصوص فمثلا

<b> bold</b> يستخدم فى عمل كلمات ونصوص سميكة الخط كما ان

<i> italic</i> يستخدم فى جعل الكلمات او النصوص ذو خط مائل كما ان

<sub> subscript</sub> وايضا <sup>superscript</sup> يستخدم فى عمل كلمات سفلية او علوية كما بالمثال التالى:

<!DOCTYPE html>

<html>

<body>

<b>This text is bold</b>

<i>This text is italic</i>

This is<sub> subscript</sub> and <sup>superscript</sup>

</body>

</html>

ويكون الناتج بصفحة الويب كما يلى:

This text is bold
This text is italic
This is subscript and superscript

HTML الدرس الثانى فى


Headings

-يستخدم (headings) فى عمل عنوان للنصوص التى تكتبها وهى عبارة عن ستة انواع لكل نوع خط وتبدا باكبرهم وهى<h1>وتنتهى باصغرهم خط وهى<h6>كما يلى:

<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

-وانواع (heading) التى تظهر بصفحة الويب كما يلى:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

HTML الدرس الاول فى


<html>

<head>

<title>………………</title>

</head>

<body>

……………………….

</body>

</html>

اى صفحة(HTML)تقوم بتصميمها لا بد ان تحتوى على الكود السابق حيث

<html/> <html> هو عبارة عن تاج بداية ونهاية صفحة(HTML) وتاجات (HTML) تبدا ب كود بداية وكود نهاية كما ترى ثم بعد ذلك نستخدم

</head> <title>………………</title><head> وهو عبارة عن تاج يستخدم لكتابة عنوان لصفحتك والتى تظهر اعلى صفحة الويب ويتم كتابة العنوان فى مكان النقط . ثم بعد ذلك تاج محتوى الصفحة والذى يكتب ما بين تاج <body>ايضا مكان النقط الثانية ولا حظ ان جميع التاجات التى سندرسها توضع ما بين تاج <body> .وبهذا نكون قد صممنا صفحة (HTML) بسيطة حيث تضع الكود السابق فى اى محرر نصوص وتحفظ الصفحة باى اسم تريدة ولكن المهم ان تجعل امتداد الصفحة (html.) فمثلا اذا سمينا الصفحة باسم (simplepage)فيتم حفظها هكذا (simplepage.html) ثم افتح هذة الصفحة باستخدام اى متصفح وسوف ترى صفحتك التى قمت بانشائها وهى فارغة لا تحتوى على شىء وسنتعلم فى الدروس القادمة كل شىء يتم عملة بهذة اللغة.

-ويطلق على اى كود لل(HTML)بال (tags) او الوسوم ويكون الشكل العام لاى(tags) كالتالى:

<tagname>content</tagname>

-The <!DOCTYPE> Declaration:

وهذا التاج يستخدم لتعريف الصفحة بنوع الاصدار فعلى سبيل المثال:

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd”&gt;

XHTML 1.0

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

ويكتب هذا التاج فى بداية الصفحة كالتالى:

<!DOCTYPE html>
<html>

<head>

<title>firstpage</title>

</head>

<body>

……………………….

</body>

</html>

ملاحظة:

لغة (HTML) ليست حساسة للحروف الكابتل او الاسمول فمثلا <body>يعادل<BODY>.

HTML مقدمة عن


هي لغة تستخدم في انشاء و تصميم صفحات الويب ، وتعتبر هذه اللّغة من أقدم اللّغات وأوسعها استخداما في تصميم صفحات الويب. وتعطي متصفّح الإنترنت وصفا لكيفيّة عرض محتوياتها، فهي تعلمه بأنّ هذا عنوان رئيسي وتلك فقرة وغير ذلك الكثير. وتستخدم لغة الـ (HTML) مايعرف بالوسوم (tags) لإصدار التعليمات إلى المتصفّح، هذه الوسوم او التاجات توضع بين علامتى أكبر من (>) وأصغر من (<) الّتي تنقسم إلى نوعين:

(<html> , <p> , <h1> , <body>) وسم البداية كـ

(<html> , </p> , </h1> , </body/>) وسم النهاية كـ

بتجميع تاج البداية وتاج النهاية نحصل على عنصر (HTML) تبدأ أكواد HTML بالتاج <html>، وتنتهى بالتاج </html> ويقوم متصفح الويب بترجمة السطور البرمجيّة بلغة(HTML) إلى محتوى مرئي سهل القراءة لزوار الموقع.كما ان لغة الـ (HTML) لغة ساكنة (static) أي غير ديناميكيّة اى ان محتوى الصفحة لا يتغيّر بتغيّر السيّاق لذا فإنّ كثيرا من أصحاب المواقع يضطرون إلى إدخالها ضمن لغة دينامكية مثل (PHP) .

– ولغة HTML هى اختصار لى:Hyper Text Markup Language

– وللغة HTML العديد من الاصدارات واليك اصدارتها وتاريخ اصدارها:

الاصدار

تاريخ الاصدار

HTML

1991

HTML+

1993

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML 1.0

2000

HTML5

2012

XHTML5

2013

%d bloggers like this: