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

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

وهذه لاغلاق الهدنج

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

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


وهذه لاغلاق امر Html



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

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

وتغلق امر

Body بهذا

هذه صفحة Html

الحروف يمكننا من تنويع الحروف فى الصفحه كالاتى الحروف الميلانه sample text sample text sample text sample text sample text sample text ولتلوين الحروف sample text sample text sample text ولذلك عندما تختار خط غير متوفر مع الوندوز عليك بوضعه للتحميل مع اخبار الذى يشاهد صفحتك بهذه الامور والا لن يشاهد الحروف بالشكل الذى وضعته انت وانما الكمبيوتر سوف يختار الحروف الافتراضيه حجم الحرف sample text الحروف التى تحتها خط الحروف المشطوبه لترفيع او تنزيل حرف ولاحظ حرف pb العصا لاعلى ولاسفل وعادة تستعمل هذه الميزه فى الاس التربيعى فى المعادله الرياضيه لتوسيط الحروف فى نصف الصفحه وفى هذا المثال قمنا باختيار نوع الحرف Arial ويمكن لصق اكثر من احر للحروف فى امر واحد كهذا وكما ذكرنا فى الدرس الاول عند وضع الامر يجب اغلاقه والا تشوهت الصفحه بسبب خطأ عدم اغلاق الامر الحروف الغامقه ولاختيار نوع الحرف مع ملاحظة ان الحروف التى تشاهدها على شاشة كمبيوترك قد لايشاهدها اخرون اذا لم يكن لديهم نفس الحروف

vbrep_register("200053")

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

تقسيم الصفحه

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

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


<HR WIDTH=25>


<HR NOSHADE>




وهذا الامر بدون ظلا

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

او زيادة طول السطر بهذا الامروخلافه


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


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


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

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



وهذا يجعل السطر كاملا فى الصفحة

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


ه

الصور

للتعامل مع الصور فى صفحة ال 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=#>

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

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

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

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

للترقيم التسلسلى استعمل هذا الامر <ol> و <li>
<ol>
<li>محمد
<li>عبدالله
<li>يوسف
</ol>

الجدوله

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

<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>


وهذا مثال على الجدول السابق

<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

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

index.html
rightframe.html
leftframe.html

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

سوف نبدأ بعمل صفحة 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

وهذه صفحة rightframe

<html>
<head>
</head>

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



</body>
</html>

نهاية الدروس

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

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

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

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

موقع المثال

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

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

A Beginner's Guide to HTML
Part One

Part Two

Part Three


The Bare Bones Guide to HTML
Bare Bones Guide

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

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

وتحياتى لكم جميعا