أستغفر الله العظيم ... سبحان الله وبحمده



العودة   منتديات داماس > منتدى البرمجة العام > تطوير المواقع


مواضيع مميزة  


آخر عشرة مواضيع المواضيع النشطة


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

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


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



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

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

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


<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



المواضيع المشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
كورس تحويل ملف التصميم 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
Easy PDF to HTML Converter لتحويل ملفات الBDF إلى HTML بسهوله elkoopra برامج الكتب والمستندات والبوربوينت PDF Editor & PowrPoint software 5 09-07-2008 09:14 PM
Bash HTML Editor v4.1 برنامج ممتاز لتحرير الـ HTML Enough برامج 7 17-01-2005 10:03 PM
برنامج Bash HTML من أفضل محررات الـ HTML للمحترفين والهواة على حد سواء Enough برامج 3 18-05-2004 09:40 PM
23-08-2004, 05:17 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
تلقى دعوات الى: 0 موضوع
    #2  
الحروف

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

الحروف الميلانه
<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
تلقى 6 إعجاب على مشاركة واحدة
تلقى دعوات الى: 0 موضوع
    #3  
تقسيم الصفحه

عادة يستعمل هذا الامر 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
تلقى 6 إعجاب على مشاركة واحدة
تلقى دعوات الى: 0 موضوع
    #4  
الروابط

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

ولكى تفتح الموقع بصفحه جديده تستعمل هذا الامر Target
مثال
<a href="http://www.cnn.com/" rel="nofollow" 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
تلقى 6 إعجاب على مشاركة واحدة
تلقى دعوات الى: 0 موضوع
    #5  
الصور

للتعامل مع الصور فى صفحة ال 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
تلقى 190 إعجاب على 118 مشاركة
تلقى دعوات الى: 0 موضوع
    #6  
رائع أخي العزيز qarqeaan على هذه الدروس المهمة والمفيدة، أشكرك بحرارة ، تقبل تحياتي


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

عندما تريد وضع جدوله فى صفحتك عليك باستخدام هذه الاوامر <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
تلقى 6 إعجاب على مشاركة واحدة
تلقى دعوات الى: 0 موضوع
    #8  
الجدوله

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

<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
تلقى 6 إعجاب على مشاركة واحدة
تلقى دعوات الى: 0 موضوع
    #9  
الان ندخل المرحله الفعليه فى تصميم موقع ونرفعه على النت ونضع رابط له

سوف استخدم اوامر 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 وبها المعلومات

لكى تشاهد ما عملناه فى هذا المثال اذهب للموقع هذا
http://noimg.damasgate.com/qarqeaan/index.html

24-08-2004, 03:41 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
تلقى دعوات الى: 0 موضوع
    #10  
وسوف نرفع 3 ملفات html لموقع فى النت قمنا بالتسجيل فيه
والملفات الثلاثه هم

index.html
rightframe.html
leftframe.html

وسوف نقوم ببرمجة كل من
rightframe.html
leftframe.html

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

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

</body>
</html>

24-08-2004, 04:37 PM
qarqeaan غير متصل
عضو جديد
رقم العضوية: 3104
تاريخ التسجيل: Dec 2003
المشاركات: 742
إعجاب: 0
تلقى 6 إعجاب على مشاركة واحدة
تلقى دعوات الى: 0 موضوع
    #12  
وهذه صفحة 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
تلقى 6 إعجاب على مشاركة واحدة
تلقى دعوات الى: 0 موضوع
    #13  
نهاية الدروس

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

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

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

ولذا سوف اقوم بارفاق جميع الامثله لعمل موقع
http://noimg.damasgate.com/qarqeaan/index.html



موقع المثال

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


http://www.geocities.com/qarqeaan2/

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

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,009
إعجاب: 696
تلقى 560 إعجاب على 184 مشاركة
تلقى دعوات الى: 13 موضوع
    #15  
مشكور على الدروس أخي
سا ريت يكون هناك كتاب تعليم HTML


 


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



English

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.
جميع ما يُطرح من مواضيع ومشاركات تعبر عن رأي كاتبها ولا تعبر عن رأي مالك الموقع أو الإدارة بأي حال من الأحوال.