قديم 23-08-2004, 05:01 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan
درس شامل فى لغة Html



درس شامل فى لغة Html


بكل بساطة لغة ال Html تتكون من اوامر الاساسيه مثل


كود PHP:

<HTMLتبدأ بها الصفحة
<HEADوتسمى الهدنج وهى راس الصفحه
<TITLE>وتضع اسم الصفحه </TITLE>
</
HEADوهذه لاغلاق الهدنج 

ونلاحظ هنا باننا نبدا بالامر وننهيه بنفس الامر بزياده السلاش /

والامر Body يعنى جسم الصفحه من الكلام ولون الكلام ولون الروابط ولون الروابط التى تم زيارتها
مثال

كود PHP:

<BODY BGCOLOR=aqua TEXT=black LINK=red VLINK=orange ALINK=pink>
وتغلق امر Body بهذا </BODY>
</
HTMLوهذه لاغلاق امر Html 
هذه صفحة Html بسيطة وبها الاوامر الاساسيه التى لاتستغنى عنها بكل صفحة

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

ملاحظه الرجاء عدم المشاركة حتى الانتهاء من الدروس جميعها وشكرا

إسطوانتين من النوع الفاخر لتعلم لغة HTML
و
اسطوانة لتعلم لغة البرمجة HTML انتاج شركة داتا لاين باللغة العربية
و
اصغر اسطوانة لتعليم HTML بالفيديو حتي الاحتراف - بروابط شبه دائمة

كتاب
اقوى الكتب لتعلم Html & Css فى 24 ساعه Sams Teach Yourself HTML and CSS in 24 Hours



6 إعجابات تلقاها qarqeaan على هذه المشاركة
المواضيع المشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
كورس تحويل ملف التصميم PSD الى HTML بالفوتوشوب PSD to HTML The Responsive Portfolio Bui ld Demscio كورسات انجليزية 17 16-11-2017 05:36 PM
كورس تحويل تصميم PSD الى صفحة HTML جاهزة TutsPlus - PSD to HTML - Corporate Design Build سعد الدين كورسات انجليزية 5 13-06-2017 04:33 PM
اقوى الكتب لتعلم Html & Css فى 24 ساعه Sams Teach Yourself HTML and CSS in 24 Hours bloodyelf كتب تعليم البرامج والتقنية 0 15-03-2016 04:16 AM
Easy PDF to HTML Converter لتحويل ملفات الBDF إلى HTML بسهوله elkoopra برامج الكتب والمستندات والبوربوينت PDF Editor & PowrPoint software 5 09-07-2008 09:14 PM
برنامج Bash HTML من أفضل محررات الـ HTML للمحترفين والهواة على حد سواء Enough برامج 3 18-05-2004 09:40 PM
 
قديم 23-08-2004, 05:17 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



الحروف

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

الحروف الميلانه
<i>sample text</i>

الحروف الغامقه
<b>sample text</b>

الحروف التى تحتها خط
<u>sample text</u>

الحروف المشطوبه
<s>sample text</s>

لترفيع او تنزيل حرف ولاحظ حرف pb العصا لاعلى ولاسفل
<sub>sample text</sub>
<sup>sample text</sup>
وعادة تستعمل هذه الميزه فى الاس التربيعى فى المعادله الرياضيه

ولتلوين الحروف
<font color=red>sample text</font>

لتوسيط الحروف فى نصف الصفحه
<center>sample text</center>

ولاختيار نوع الحرف
<font face="Arial">sample text</font>
وفى هذا المثال قمنا باختيار نوع الحرف Arial
مع ملاحظة ان الحروف التى تشاهدها على شاشة كمبيوترك قد لايشاهدها اخرون اذا لم يكن لديهم نفس الحروف
ولذلك عندما تختار خط غير متوفر مع الوندوز عليك بوضعه للتحميل مع اخبار الذى يشاهد صفحتك بهذه الامور
والا لن يشاهد الحروف بالشكل الذى وضعته انت وانما الكمبيوتر سوف يختار الحروف الافتراضيه

حجم الحرف
<font size=3>sample text</font>

ويمكن لصق اكثر من احر للحروف فى امر واحد كهذا
<font face="Arial" color="white" size=3>


وكما ذكرنا فى الدرس الاول عند وضع الامر يجب اغلاقه والا تشوهت الصفحه بسبب خطأ عدم اغلاق الامر
 
قديم 23-08-2004, 05:35 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



تقسيم الصفحه

عادة يستعمل هذا الامر Hair Line
<HR> وتعنى السطر الشعره لتشابة السطر بالشعرة وهو سطر خفيف جدا كالشعره

ولكن يمكننا زيادة حجم هذه الشعرة بهذا الامر وسوف يضع ظلا بهذا السطر
<HR SIZE=8>

او زيادة طول السطر بهذا الامر
<HR WIDTH=25>

وهذا الامر بدون ظلا
<HR NOSHADE>

وبامكانك الاستغناء عن هذا الامر بوضع فواصل اخرى كالزهور وخلافه


لفصل الكلام ووضع البقيه فى السطر اللى تحته نستعمل هذا الامر Line Break
<BR>
وهذا الامر كأنك ضغطت على Enter Key فى النوتباد مثلا

وفى حالة ان تود بوضع سطر كلام ولاتريد الوندوز ان يكسره ويضع البقيه فى السطر اللى تحت تستعمل هذا الامر No Break
<NOBR>text</NOBR>
وهذا يجعل السطر كاملا فى الصفحة

لاحظ هذا الامر يحتاج الى اغلاق

هذا الامر تنهى به الجمله او السطر ويعطيك سطرا اضافيا Paragraph
<p>


علما بان هذه الاوامر لايحتاج الى اغلاق حسب الدروس السابقه ماعدا امر واحد وقد تم ايضاحه
 
قديم 23-08-2004, 05:59 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



الروابط

عند وضع روابط فى الصفحه يجب وضعها بهذا الامر <a href>
مثال
<a href="http://www.cnn.com/">Cnn Link</a>
وتذكر دائما اغلاق الامر به </a>
هذا الامر سوف يفتح لك الموقع بنفس الصفحه التى انت بها

ولكى تفتح الموقع بصفحه جديده تستعمل هذا الامر Target
مثال
<a href="http://www.cnn.com/" target="_new">Cnn Link</a>

ولفتح موقع او بالاحرى لانستطيع تسمية موقع وانما نسميه صفحه موجوده بجهازك
فلامر سوف يكون مباشر بدون لنك كهذا
<a href="index.html">Sample Link</a>

ويوجد امر ل Target
ولكن مفعوله يختلف عن الامر السابق
وهو ان توجه مستخدم الصفحه الى موضوع معين فى الصفحه قد يكون اولها او بالنص او بالاخر
مثال
<a href="#car">Target Link</A>
<a href="#house">Target Link</A>
<a href="#office">Target Link</A>


وتضع فى الصفحه
Car
وتضع معلومات هنا

House
وتضع معلومات هنا

Office
وتضع معلومات هنا

وهكذا
 
قديم 23-08-2004, 06:00 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



الصور

للتعامل مع الصور فى صفحة ال Html يوجد اكثر من طريقه اهمها
<IMG SRC="damas_gate.gif">

تضبيط الصورة باستعمال ALIGN
يمكنك بهذا الامر من تضبيط الصوره لليمين واليسار هكذا
<IMG SRC="damas_gate.gif" ALIGN=RIGHT>

ووضع ارشادات او شرح بمجرد مرور الماوس عليها بهذا الامر ALT
<IMG SRC="damas_gate.gif" ALT="Hello damas_gate!">

ويمكنك تحديد حجم الصوره عرضها وطولها بهذا الامر WIDTH و height
<IMG SRC="damas_gate.gif" WIDTH=69 height=40>

ووضع برواز او اطار لها بهذا الامر BORDER
<IMG SRC="damas_gate.gif" BORDER=2>

ووضع اطار خفى ليتم تضبيط الصوره بحيث لايؤثر على تنسيقها الكلام الموضوع فى الصفحه استعمل هذا الامر VSPACE و HSPACE
<IMG SRC="damas_gate.gif" HSPACE=5 VSPACE=5>


واخيرا يمكن استعمال اكثر من امر فى سطر واحد هكذا
<IMG SRC="damas_gate.gif" BORDER=0 HSPACE=0 VSPACE=0 ALT="TEXT" WIDTH=# HEIGHT=#>

ملاحظه
حاول تقليل حجم الصوره قدر الامكان حتى لاتكون ثقيله على من يحملها فانت لاتعرف سرعة اتصال الاخرون بالنت
 
قديم 23-08-2004, 08:50 PM
Enough غير متصل
عضوية الشرف
رقم العضوية: 2054
تاريخ التسجيل: Oct 2003
المشاركات: 5,476
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 190 إعجاب على 118 مشاركة
مستوى التقييم: 183
تم تعطيل التقييم
وسام التقدير والإمتنان:  - السبب: وسام التقدير والشكر على كل ما قدمه للبوابة من جهود خلال سنوات



رائع أخي العزيز qarqeaan على هذه الدروس المهمة والمفيدة، أشكرك بحرارة ، تقبل تحياتي

 
قديم 24-08-2004, 11:27 AM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



القوائم

عندما تريد وضع جدوله فى صفحتك عليك باستخدام هذه الاوامر <ul> و <li>

هكذا
<ul>
<li>محمد
<li>عبدالله
<li>يوسف
</ul>

ونلاحظ هنا انه يجب اغلاق هذا الامر بعد الانتهاء من وضع اخر اسم

للترقيم التسلسلى استعمل هذا الامر <ol> و <li>
<ol>
<li>محمد
<li>عبدالله
<li>يوسف
</ol>
 
قديم 24-08-2004, 12:54 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



الجدوله

موضوع معقد نوعا ما وسوف احاول ان اسهله قدر المستطاع

<TABLE BORDER=1>
<TR>
<TD>First Cell</TD>
<TD>Second Cell</TD>
</TR>
<TR>
<TD>Third Cell</TD>
<TD>Fourth Cell</TD>
</TR>
</TABLE>

الشرح المبسط لهذا الجدول
BORDER=1 اطار حجمه صغير
<TR> اول جدول افقى TABLE ROW
اول معلومه فى الجدول على اليسار <TD>First Cell</TD>
ثانى معلومه على اليمين <TD>Second Cell</TD>

<TR> ثانى جدول افقى TABLE ROW
اول معلومه فى السطر الثانى على اليسار <TD>Third Cell</TD>
ثانى معلومه فى السطر الثانى على اليمين <TD>Fourth Cell</TD>
مع ضرورة اغلاق جميع الاوامر بعد الانتهاء منها
</TD>
</TR>
</TABLE>

وهذا شكل الجدول السابق



الان سوف اتكلم عن مقومات الجدول

BORDER=#
اضافة اطار بحجم البرواز

WIDTH=# or %
عرض الجدول بالحجم او بالنسبه المئويه

CELLSPACING=#
CELLPADDING=#
ويستخدم هذان الامران لسماكة الخلايا الذى يكتب بها المعلومات

BGCOLOR=colour
لتلوين خلفية كل خليه من خلايا الجدول

BACKGROUND=image name
لوضع صوره فى خلفية الخليه بدلا من تلوينها


وهذا مثال لاستعمال جميع الاوامر السابقه فى جدول متقدم

<table border=2 cellspacing=4 cellpadding=3 width=100% bgcolor=aqua>
<tr>
<td bgcolor=brown colspan=4><center><font color=white size=5><b>fruits</b></font></center></td>
</tr>
<tr>
<td width=50% bgcolor=yellow align=center colspan=2><b>apples</b></td><td width=50% bgcolor=orange align=center colspan=2><b>oranges</b></td>
</tr>
<tr>
<td width=25%><i>red</i></td><td width=25%><i>green</i></td><td width=25%><i>sweet</i></td><td width=25%><i>sour</i></td>
</tr>
</table>


وهذا مثال على الجدول السابق
 
قديم 24-08-2004, 03:33 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



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

سوف استخدم اوامر FRAME فى تصميم الموقع

مثال

<html><head><title>موقع قرقيعان</title></head>

<script LANGUAGE="JavaScript"></script>

<frameset frameborder="1" framespacing="0" border="0" cols="16%*84%">

<frame src="leftframe.html" name="indexframe">

<frame src="rightframe.html" name="mainframe">

</frameset>

</html>
ونحفظه تحت اسم index.html

لدينا هنا فى هذا المثال عمودان
الاول وهو على اليسار واسمه العمود اليسار leftframe
والثانى وهو على اليمين واسمه العمود اليمين rightframe
وسوف نضع القائمه على اليسار لكى يختار منها من يشاهد الموقع
ونضع على اليمين المعلومات التى يختارها من يشاهد الصفحة

سوف نعمل صفحه جديدة اسمها leftframe.html وبها القوائم
وصفحه جديدة اسمها rightframe.html وبها المعلومات

لكى تشاهد ما عملناه فى هذا المثال اذهب للموقع هذا
https://www.damasgate.com/vb/images/404/qarqeaan/index.html
 
قديم 24-08-2004, 03:41 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



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

index.html
rightframe.html
leftframe.html

وسوف نقوم ببرمجة كل من
rightframe.html
leftframe.html
 
قديم 24-08-2004, 04:35 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



سوف نبدأ بعمل صفحة leftframe

<html>
<head></head>
leftframe<p>
<body bgcolor=white>
<a href=rightframe.html target="mainframe">Main</a><p>
<a href=123.html target="mainframe">123</a><p>
<a href=456.html target="mainframe">456</a><p>
<a href=789.html target="mainframe">789</a><p>
<br><br>

</body>
</html>
 
قديم 24-08-2004, 04:37 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



وهذه صفحة rightframe

<html>
<head>
</head>

<body background="bg.jpg" text="#000000" link="#000000" alink="#000000" vlink="#000000">
rightframe
<br><br>



</body>
</html>
 
قديم 24-08-2004, 04:45 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



نهاية الدروس

ارجو ان اكون قد وفقت بعمل شرح سريع وبسيط لانشاء موقع

وسوف اكون على استعداد لشرح اى جزء او الاجابه على اى استفسار ان وجد

لاحظت اثناء كتابة كود html بالانجليزى وجود بعض الاخطاء وذلك بسبب لغة المنتدى وطريقته للتعامل مع اللغات الانجليزى والعربى

ولذا سوف اقوم بارفاق جميع الامثله لعمل موقع
https://www.damasgate.com/vb/images/404/qarqeaan/index.html

موقع المثال

وبهذه الطريقة قمت بتصميم موقع قرقيعان قبل 4 سنوات
ويقوم صديق لى بتحديثه
https://www.geocities.com/qarqeaan2/

https://www.geocities.com/qarqeaan2/
 
قديم 24-08-2004, 05:06 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
تلقى دعوات الى: 0 موضوع
تلقى دعوات الى: 0 موضوع
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
مستوى التقييم: 25
تم تعطيل التقييم
الصورة الرمزية qarqeaan



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

A Beginner's Guide to HTML

Part One


Part Two


Part Three


The Bare Bones Guide to HTML

Bare Bones Guide


الالاف من الصور والايكون لموقعك


الالاف من الصور لعمل خلفيه لموقعك

وتحياتى لكم جميعا
 
قديم 15-10-2004, 02:59 AM
rawhi 019 غير متصل
الوسـام الماسـي
رقم العضوية: 113
تاريخ التسجيل: Apr 2003
المشاركات: 6,008
تلقى دعوات الى: 13 موضوع
تلقى دعوات الى: 13 موضوع
إعجاب: 697
تلقى 559 إعجاب على 183 مشاركة
مستوى التقييم: 201



مشكور على الدروس أخي
سا ريت يكون هناك كتاب تعليم HTML

Powered by vBulletin® Version
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
The owner and operator of the site is not responsible for the availability of, or any content provided.
Topics that are written in the site reflect the opinion of the author.
جميع ما يُطرح من مواضيع ومشاركات تعبر عن رأي كاتبها ولا تعبر عن رأي مالك الموقع أو الإدارة بأي حال من الأحوال.
DamasGate English