Category Archives: HTML

من البداية حتى الاحتراف بالصوت والصورة وباللغة العربية HTML اسطوانات لتعليم


HTML اسطوانة تعليم

HTML اسطوانات تعليم

اسطوانتين لتعليم لغة HTML من البداية حتى الاحتراف بالصوت والصورة وباللغة العربية مجانا.

المحتوى

  1. مقدمة عن لغة HTML .
  2. البيئة التى تعمل عليها لغة HTML واختيار المحرر.
  3. تعلم كتابة اكواد لغة HTML او ما يطلق عليها التاج (HTML Tags).
  4. انشاء اول صفحة بلغة HTML .
  5. شرح تفصيلى لتنسيق النصوص من حيث الالوان والخطوط والمحاذاة وغيرة.
  6. شرح تفصيلى للعناوين بانواعها الستة وعمل تنسيق لها.
  7. الفقرات وعمل تنسيق لها.
  8. القوائم والقوائم المنسدلة مع شرح لكيفية عمل التنسيق عليها.
  9. عملية اداج الصور والرسوم داخل الصفحات باستخدام تاج ادارج الصور بلغة HTML.
  10. تحديد عنوان للصور.
  11. عمل محاذاة لصورة موجودة بصفحة مع نص او فقرة.
  12. ضبط حجم الصورة من حيث الطول والعرض.
  13. اضافة نص خلف الصورة.
  14. تحديد اطار للصورة مع شرح كيفية عمل التنسيق لهذا الاطار من حيث السمك واللون والنوع.
  15. الوصلات التشعبية (HTML Hyperlinks) او ما تعرف اختصارا باللينكات (Links).
  16. الجداول(Tables).
  17. تنسيق الجداول.

 

الاسطوانة مقسمة على ثلاث اجزاء

الاسطوانة الاولى

الجزء الاول

الجزء الثانى

الجزء الثالث

الاسطوانة الثانية

الجزء الاول

الجزء الثانى

الجزء الثالث

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: