Scribd
Upload
4K views11 pages

لغة HTML PDF

Uploaded by

Ali Altabeb
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4K views11 pages

لغة HTML PDF

Uploaded by

Ali Altabeb
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

‫‪440900914440900‬‬ ‫‪[email protected]‬‬ ‫م‪.

‬امحد تكليف احلساني‬

‫لغة ال ‪ HTML‬هً اختصار لكلمة ‪ Hyper Text Markup Language‬و كان الهدف من‬
‫بنائها اٌجاد لغة ٌستطٌع ان ٌفهمها االنسان‪ ،‬بحٌث ٌتمكن من كتابتها فً ملفات نص عادٌة ‪ ،‬و اٌجاد‬
‫برنامج و اسمه متصفح الوٌب ‪ ،‬بحٌث ٌقوم هذا البرنامج بقرائة هذه الملفات و عرضها بالشكل‬
‫المطلوب‪.‬‬

‫لغة بناء صفحات الوٌب ‪ HTML‬هً لغة ال تترجم الى لغة ابسط منها مثلما ٌحدث مع لغات البرمجة‬
‫االخرى‪ ،‬حٌث تترجم لغات البرمجة برامجهم الى لغة االلة او لغة قرٌبة منها‪ ،‬و هذا بالمناسبة ٌؤدي‬
‫الى عدم استغالل موارد الجهاز بالصورة المطلوبة‪ ،‬بل الى هدرها فً بعض االحٌا‪ ،‬ولكن نظرا الن‬
‫‪HTML‬الٌوم تعتبر من مواصفات االنترنت القٌاسٌة فال تستطٌع اٌة شركة ان تقوم بتعدٌالت جذرٌة‬
‫فٌها حتى تجلب الرئً العام فً انترنت ضدها‪.‬‬

‫ما هً االدوات الالزمة إلنشاء صفحة على االنترنت؟‬

‫‪1-‬محرر نص مثل‪word bad or not bad .‬‬


‫‪2-‬متصفح إنترنت مثل‪internet explorer or netscape.‬‬
‫‪3-‬مودم أو فاكس أتـصال النة بدون الفاكس لن نستطٌع االشتراك فً االنترنت وبذلك لن نستطٌع‬
‫إدخال الصفحة‪.‬‬

‫كٌف نقوم بإنشاء صفحة على االنترنت؟‬

‫‪1-‬اوال نقوم بفتح محرر نصوص وهو إما ‪ word bad or not bad‬لكتابة االكواد فٌة ومن‬
‫المعروف ان محررات النصوص تحفظ الملفات بإمتداد ‪ txt‬ولذلك عند كتابة االكواد نقوم بحفظ الملف‬
‫بإمتداد ‪ htm‬عن طرٌق االتً‪:‬‬
‫الذهاب الى قائمة ‪ file‬ثم إختٌار‪save as‬‬
‫سٌظهر لنا مربع حوار نقوم بكتابة أسم الملف فٌة ولنفرض ان نسمٌة االتً‬
‫‪My frist page.htm‬ونالحظ هنا وضع االمتداد ‪ htm‬بعد كتابة االسم‬
‫وهذا حتً ٌمكننا عند فتح الملف فتحة على متصفح لالنترنت النها تتعامل مع االمتداد‪htm .‬‬
‫‪2-‬ثانٌا نقوم بكتابة االكواد والكود الذي ٌكتب فً محرر النصوص ٌكون لة قاعدة اساسٌة تكتب فً‬
‫جمٌع الصفحات وهً كاالتً‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>my home page</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫‪My home page‬‬
‫>‪</body‬‬

‫>‪</html‬‬
‫‪440900914440900‬‬ ‫‪[email protected]‬‬ ‫م‪.‬امحد تكليف احلساني‬

‫نالحظ هنا بداٌة الصفحة بـــ >‪<html‬ونهاٌتها بــ >‪</html‬‬


‫وٌاتً بعد االمر >‪<html‬االمر >‪<head‬وٌنتهً أٌضا بـ>‪</head‬‬
‫واالوامر التً تكتب بٌن هذا االمر تكون متعلقة بــ ‪ title bar‬وهو الشرٌط االزرق بأعلً الصفحة‬
‫ففى المثال السابق تم كتابة ‪ my home page‬وعند حفظ هذة الصفحة بالطرٌقة السابق ذكرها‬
‫وفتحها ثانً سنالحظ ظهور جملة ‪ my home page‬فً الركن االٌسر من الشرٌط االزرق باعلى‬
‫الصفحة وهو‪title bar.‬‬
‫ونالحظ هنا ان كل أمر ٌوضع بٌن ><وٌنتهً بــــ >‪</‬وهذة العالمة تسمى‪tag .‬‬
‫اما االمر >‪<body> </body‬فإن كل مابكتب بٌنة ٌظهر فً جسم الصفحة اي ٌظهر فً الصفحة‬
‫نفسها فند تطبٌقك المثال السابق سوف تالحظ ظهور كلمة ‪ my Home Page‬فً الصفحة نفسها‬
‫واالن سوف نقوم بشرح االوامر التً تكتب داخل االمر >‪<body> </body‬وكل أمر سوف ٌكون‬
‫لة مجموعة من الخصائص وهذة االوامر تكون هً المسئولة عن ظهور الكلمات والصور واالصوات‬
‫بالطرٌقة التً نرٌدها‪.‬‬

‫‪-----------------------------------------------------------------------------------------------‬‬

‫‪body and font‬‬


‫االمر>‪<body‬‬
‫خواص األمر‬
‫‪Bgcolor‬‬
‫‪Background‬‬
‫‪Text‬‬
‫‪Alink‬‬
‫‪Vlink‬‬
‫لتغٌٌر لون ارضٌةالصفحة ‪ BGCOLOR‬تستخدم خاصٌة‬
‫مثال‬

‫>"‪<BODY BGCOLOR="RED‬‬
‫أو‬
‫>"‪<BODY BGCOLOR="#FF0000‬‬
‫ومال االٍزيِ يؤدي ىتغييز ىىُ خيفيت اىصفحتهى‪ FF0000‬ىيىُ االحَز حيث أُ اىنىد ‪ html‬فً‬
‫ىغت ‪ RED‬اىَنافًء اىيىًّ ىيىُ‬

‫لتحدٌد صورة كخلفٌة للصفحة ‪ BACKGROUND‬تستخدم خاصٌة‬


‫مثال‬

‫أكتب بٌدٌك االمر التالى والحظ النتٌجة‬


‫>"‪<BODY BACKGROUND="graphics/uni.jpg‬‬
‫مع مالحظة ان المسار بعد العالمة = ٌتغٌر حسب مكان الصورة على الجهاز‬
‫‪440900914440900‬‬ ‫‪[email protected]‬‬ ‫م‪.‬امحد تكليف احلساني‬

‫لتحدٌد اللون العام للنص المكتوب‪ TEXT‬تستخدم خاصٌة‬

‫لتحدٌد لون كلمات الربط النشطة‪ ALINK‬تستخدم خاصٌة‬

‫لتحدٌد لون كلمات الربط غٌر النشطة‪VLINK:‬تستخدم خاصٌة‬


‫‪Font‬االمر‬
‫الخواص‬
‫‪Size‬‬
‫‪Color‬‬
‫‪face‬‬

‫ً‬
‫بداٌةمن‪ 1‬وحتى ‪ SIZE 7‬تستخدم خاصٌة‬ ‫لتحدٌد مقاس النص‬

‫لتحدٌد لون النص فى الصفحة ‪ COLOR‬تستخدم خاصٌة‬

‫لتحدٌد شكل الخط مثل خطوط ـ ‪ FACE‬خاصٌةتستخدم‬


‫‪ARIAL, COURIER, ANDALUS ,kofi ,................‬‬

‫‪:‬هى على سبٌل التمثٌل‬


‫>"‪<FONT SIZE=3 COLOR= RED FACE="kofi‬‬

‫‪------------------------------------------------------------------------------------ -----------‬‬
‫‪----------------‬‬

‫مجموعة من االوامر‬
‫>‪<HR‬االمر‬

‫الخواص‪:‬‬

‫‪Width‬‬
‫‪Align‬‬
‫‪Size‬‬
‫‪noshade‬‬

‫ً‬
‫مقارنة بعرض ‪ WIDTH‬تستخدم خاصٌة‬ ‫لتحدٌد عرض الخط‬
‫الصفحة الكلى‬
‫‪440900914440900‬‬ ‫‪[email protected]‬‬ ‫م‪.‬امحد تكليف احلساني‬

‫لتحدٌد محاذاة الخط االفقً ‪ ALIGN‬تستخدم خاصٌة‬


‫بالنسبة للصفحة‬

‫لتحدٌد سمك الخط بالملٌمترات ‪ SIZE‬تستخدم خاصٌة‬

‫لجعل لون الخط داكنا ‪NOSHADE‬تستخدم خاصٌة‬

‫مثال‬

‫قم بكتابة االمر التالى والحظناتج التنفٌذ ــ‬


‫>‪< HR WIDTH=50% ALIGN=CENTER‬‬

‫االمر>‪<B> </B‬‬

‫ٌستخدم هذا االمر لجعل النص ٌظهر بخط سمٌك‬


‫مثال‪:‬‬
‫>‪<B>my best site</B‬‬

‫االمر>‪<I‬‬
‫‪ٌitalic‬ستخدمإلظهار حروف الكلمة بشكل مائل‬
‫>‪<I‬النص ‪ </I> :‬الصٌغة العامة‬

‫االمر>‪<br‬‬

‫ٌستخدم لعمل سطر خالى خالل سطور النص‬


‫>‪<BR‬النص ‪ </BR> :‬الصٌغة العامة‬

‫العنصر>‪<center‬‬

‫ٌستخدم لتوسٌط أى عنصر فى الصفحة‬


‫سواء كان جدول أونص أوصورة أو غٌره ــ الصٌغة العامة‬
‫>‪<CENTER‬النص>‪</CENTER‬‬

‫االمر>‪<H1‬‬
‫‪440900914440900‬‬ ‫‪[email protected]‬‬ ‫م‪.‬امحد تكليف احلساني‬

‫ٌستخدم لعمل العناوٌن الرئٌسٌة للصفحة‬


‫وذلك بتكبٌر كلمة العنوان‬
‫>‪<H1‬النص ‪ </H1> :‬الصٌغة العامة‬
‫حٌث الرقم التالى لألمرٌتراوح من ‪1‬إلى ‪7‬‬
‫حسب نسبة التكبٌروكلما زاد الرقم‬
‫كلما قل حجم الخطالمطلوبة للعنوان‬

‫مجموعة من االوامر‬

‫>‪<div‬‬
‫الخواص‬
‫>‪<DIV ALIGN=RIGHT‬‬
‫لجعل محاذاة الفقرة الى الٌمٌن‬

‫>‪<DIV ALIGN=LEFT‬‬
‫محاذاة الفقرة الى الٌسار‬

‫>‪<DIV ALIGN=CENTER‬‬
‫محاذاة الفقرة الى المنتصف‬
‫االمر>‪<p‬‬
‫ٌستخدم هذا االمر لتقسٌم النص الى فقرات‬
‫االمر>‪<SUP‬‬
‫ٌستخدم هذا االمر لجعل النص ٌظهر ببنط صغٌر فوق النص المكتوب‬
‫مثل االس فً المعادالت الرٌاضٌة‬
‫الصٌغة العامة >‪ </SUP‬النص>‪<SUP‬‬
‫االمر>‪<SUB‬‬
‫ٌستخدم لجعل النص ٌظهر ببنط صغٌر‬
‫أسفل الكلمة أوالرقم‬
‫مثل األسس فى المعادالت الرٌاضٌة‬
‫الصٌغة العامة‬
‫>‪<SUB‬النص>‪</SUB‬‬
‫االمر>‪<marquee‬‬
‫ٌستخدم لجعل النص ٌتحرك على‬
‫الشاشة فى مساحةمحددة‬
‫الصٌغة العامة‬
‫>‪<MARQUEE‬النص>‪</MARQUEE‬‬
‫االمر>******‬
‫ٌستخدم لتقدٌم معلومات عن المستند ومحتواه‬
‫تفٌدلفهرسة هذا المستند على الشبكة وتسهٌل‬
‫التعرف علٌه وفهم محتواه عند البحث عنه‬
‫الصٌغة العامة‬
‫>وصف الصفحة ومحتوٌاتها=‪****** name‬‬
‫‪440900914440900‬‬ ‫‪[email protected]‬‬ ‫م‪.‬امحد تكليف احلساني‬

‫خواص االمر‬
‫‪Keywords‬‬
‫‪Description‬‬
‫‪Generator‬‬
‫‪Auther‬‬
‫‪Copyright‬‬
‫‪Expire‬‬

‫=‪****** NAME="KEYWORDS" CONTENT‬‬


‫"توضع كلمات مفتاحٌة ومصطلحات من واقع موضوعالصفحة ٌفصل بٌنها بفاصلة" <‬

‫"=‪****** NAME=" DESCRIPTION" CONTENT‬‬


‫ٌوضع وصف موضوعى مختصر لموضوع الوثٌقة " <‬

‫"=‪****** NAME="GENERATOR" CONTENT‬‬


‫ٌكتب إسم اللغةأو البرنامج المستخدم فى تحرٌر الوثٌقة " <‬

‫"=‪****** NAME="AUTHOR" CONTENT‬‬


‫ٌكتب إسم مصممالوثٌقة المعروضة " <‬

‫"=‪****** NAME="COPY RIGHT" CONTENT‬‬


‫تكتب حقوق التألٌف والنشر والنسخ ـ ـ ـ " <‬

‫"=‪****** NAME="EXPIRE" CONTENT‬‬


‫ٌكتب التارٌخ الذىبمقتضاه ٌتم إستبعاد الوثٌقة‬
‫من أرشٌف البحث على الشبكة لتقادمها" <‬

‫‪-----------------------------------------------------------------------------------------------‬‬
‫‪----‬‬
‫مجموعة من االوامر‬
‫االمر>‪<Img‬‬
‫خواص االمر‬
‫‪Src‬‬
‫‪Align‬‬
‫‪Width‬‬
‫‪Height‬‬
‫‪Vspace‬‬
‫‪Hspace‬‬
‫‪Alt‬‬
‫‪Border‬‬
440900914440900 [email protected] ‫امحد تكليف احلساني‬.‫م‬

‫ فً تحدٌد مكان الصورة مثل‬src ‫تفٌد خاصٌة‬


<img src="c:\windows\mo'men.gif">

‫لضبط موقع الصورة بالنسبة‬ALIGN ‫تستخدم خاصٌة‬


:‫للصفحةمثل‬
<img src="c:\windows\mo'men.gif" align=center>

‫لتحدٌد عرض الصورة‬WIDTH‫تستخدمخاصٌة‬


<img src="c:\windows\mo'men.gif" align=center width=230>
HEIGHT ‫تستخدم خاصٌة‬
‫لتحدٌد ارتفاع الصورة مثل‬
<img src="c:\windows\mo'men.gif" align=center width=230
height=100>

VSPACE‫لتحدٌد البعد الرأسى للصورة بالنسبة للصفحةتستخدم خاصٌة‬


<img src="c:\windows\mo'men.gif" align=center width=230
height=100 vspace=200>

HSPACE‫لتحدٌد البعد األفقى للصورةبالنسبةللصفحةتستخدم خاصٌة‬


<img src="c:\windows\mo'men.gif" align=center width=230
height=100 vspace=200 hspace=400>

‫لوضع تعلٌق على الصورة ٌظهر‬


ALT ‫عنداإلشارة إلٌها بالماوس تستخدم خاصٌة‬
<img src="c:\windows\mo'men.gif" align=center width=230
height=100 vspace=200 alt="my picture">

‫ لعمل إطار حول الصورة‬BORDER‫تستخدمخاصٌة‬


<img src="c:\windows\mo'men.gif" align=center width=230
height=100 vspace=200 alt="my picture" border=2>
<EMBEDO>‫االمر‬
wav ; mp3‫ٌستخدم هذا االمر إلضافة ملف صوت الى الصفحة بإمتداد‬
‫مثال‬
<EMBED SRC="glide.wav" CONTROLS=CONSOLE
AUTOSTART=TRUE LOOP=11 VOLUME=15 WIDTH=35 HEIGHT=32>
‫شرح االمر السابق‬
‫وهً لتحدٌد مكان الصوت على الجهاز‬Src
Controls
‫تستخدم للتخٌٌر ما بٌن عرض مفتاح للتحكم فى عرض الصوت أو عدم عرضه‬
‫ففى حالة‬CONTROLS=CONSOLE
‫سٌتم عرض مفتاح للتحكم فى الصوت‬
‫‪440900914440900‬‬ ‫‪[email protected]‬‬ ‫م‪.‬امحد تكليف احلساني‬

‫‪CONTROLS=NONE‬أما فى حالة‬
‫لن ٌعرض مفتاح للتحكم فى الصوت‬

‫‪: AUTOSTART‬خاصٌة‬
‫تستخدم للتخٌٌر ما بٌن عرض ملف الصوت تلقائٌا ً مع بداٌة ظهور الصفحة أو عدم عرضه‬
‫‪AUTOSTART=TRUE‬ففى حالة‬
‫سٌتم عرض الصوت فور إنتهاء تحمٌل الصفحة‬

‫‪AUTOSTART=FALSE‬أما فى حالة‬
‫لن ٌعرض الصوت فور إنتهاء تحمٌل الصفحة‬
‫‪: LOOP‬خاصٌة‬
‫تستخدم لتحدٌد عدد مرات عرض ملف الصوت‬
‫واذا اردنا عرض ملف الصوت بشكل ال نهائٌنقوم بجعل‬
‫‪Loop= -1‬‬

‫‪Menu‬‬

‫"‪orderd list "ol‬اىَزتبتاىقىائٌ‬


‫تستخذً ىعَو تزتيب أو تزقيٌ ىعْاصز اىقائَت‬
‫‪<OL></OL> :‬اىصيغت اىعاٍت‬
‫ٍثاه‬

‫>‪<OL TYPE=A START=2‬‬


‫>‪<LI‬عْصز اىقائَت االوه‬
‫>‪<LI‬عْصز اىقائَت اىثاًّ‬
‫>‪</OL‬‬
‫اىسطز األوه‬
‫قائَت ٍزتبت تزتيب حزفً ـ حيث هْاك عذة أّىاع‬
‫‪ ٍِ:‬اىتزتيب وهً‬
‫اىزقًَ ‪ :‬وفيه تستخذً االرقاً اىصحيحت ىتزتيب اىعْاصزـ اىتزتيب‬
‫)‪(1,2,3,4,..............‬‬

‫اىحزوف االبجذيت ىتزتيب اىعْاصزـ اىتزتيب اىحزفً ‪ :‬وفيه تستخذً‬


‫)‪(A,B,C,D..............‬‬

‫أو‬
‫)‪(a,b,c,d..............‬‬

‫اىزٍىس اىالتيْيت ىتزتيب اىعْاصزـ اىتزتيب اىزٍشي ‪ :‬وفيه تستخذً‬


‫)‪(i,iii,iv,v,..............‬‬
‫‪440900914440900‬‬ ‫‪[email protected]‬‬ ‫م‪.‬امحد تكليف احلساني‬

‫‪:‬خاصيتيْىفً اىسطز االوه ّجذ أيضا‬


‫وتستخذً ىتحذيذ ّىع اىتزقيٌ بتحذيذ أوه حزف فيه‪TYPE‬خاصيت‬
‫وتستخذٍيتحذيذ أوه رقٌ أو حزف سيبذأ به‪ START‬خاصيت‬
‫‪B‬اىتزقيٌ وهى فً هذا اىَثاه اىحزف‬

‫اىسطز اىثاًّ‬
‫اىقائَت ومذىل االٍز باىْسبت ىيسطز اىثاىثيستخذً ىعَو أوه عْصز فً‬
‫االخيزاىسطز‬
‫ّهايت اىقائَت‬

‫"‪unorderd list "ul‬اىقىائٌ غيز اىَزتبت‬


‫اىسابق وىنِ بإستخذاً عالٍاث ّقطيت بذال ٍِ اىتزقيَتزتب اىعْاصز بْفس اىشنو‬
‫ٍثاه‬

‫>‪<MENU‬‬
‫>‪<LI‬عْصز اىقائَت االوه‬
‫>‪<LI‬عْصزاىقائَت اىثاًّ‬
‫>‪</MENU‬‬

‫‪definition list‬قىائٌ اىتعزيفاث‬


‫شنو عْصز وتعزيفهتستخذً ىتزتيب عْاصز اىْص فً‬
‫ٍثاه‬

‫>‪<DL‬‬
‫>‪<DT‬‬
‫اىَصطيح أو اىعْصز االوه‬
‫>‪<DD‬‬
‫تعزيفه‬
‫>‪<DT‬‬
‫اىَصطيح أو اىعْصز اىثاًّ‬
‫>‪<DD‬‬
‫تعزيفه‬
‫>‪</DL‬‬

‫‪-------------------------‬‬

‫‪Link‬‬
‫‪440900914440900‬‬ ‫‪[email protected]‬‬ ‫م‪.‬امحد تكليف احلساني‬

‫االمر‪link‬‬
‫ٌستخدم للربط بٌن النصوص والصفحات‬
‫مما ٌتٌح التفرعوالتشعب داخل الشبكة‬
‫الصٌغة العامة‬
‫">‪></a‬اسم او مسار الملف=‪"<a href‬‬

‫‪link to file‬الربط من ملف آلخر‬

‫فى نفس نطاق موقعه على الشبكة وفٌها ٌتم الربط بٌن مستند وآخر‬

‫مثال‬

‫>"‪<A HREF="c_text.html‬كلمة ربط >‪</A‬‬


‫ومن الممكن أٌضا ً الربط إلى صورة‬

‫مثال‬

‫>"‪<A HREF="graphics/center.jpg‬كلمة ربط>‪</A‬‬


‫الربط من ملف لنفسة‬
‫فً هذا النوع ٌتم الربط بٌن كلمة فً بداٌة الصفحة وكلمة أخرى فً نهاٌة الصفحة‬
‫أوالً ـ ضع الكلمة الواردة فى بداٌة الصفحة داخل أمر الربط‬
‫‪:‬بالشكل اآلتى‬
‫>"‪<A HREF="#X‬الكلمة>‪></A‬‬

‫‪:‬حٌث‬
‫‪:X‬‬
‫أى مسمى إختٌارى ٌمكن إختٌاره للداللة على الربط‬

‫‪:#‬‬
‫عالمة ثابتة ٌجب وضعها بجوار مسمى الربط للداللة على الربط الداخلى‬
‫ثانٌاًـ ضع االمر التالى فى سطر خالى ٌسبق مباشر ًة الكلمة المراد الربط إلٌها‬
‫>‪<A NAME="X"> </A‬‬
‫الربط لموقع على الشبكة‬
‫وهو للربط بٌن مستند فً موقع معٌن بموقع أخر على الشبكة‬

‫‪:‬الصٌغة العامة‬
‫>‪</a‬كلمة >"‪<A HREF="http://www.arabcom.net‬‬
‫معمراعاة تغٌٌر العنوان‪. www.arabcom net‬‬
‫الىالعنوان المطلوب‬
‫الرابطة البرٌدٌة‪mailto‬‬
‫‪440900914440900‬‬ ‫‪[email protected]‬‬ ‫م‪.‬امحد تكليف احلساني‬

‫تتم بالربطالى عنوان برٌدى‬


‫وكنتٌجة لعمل هذه الرابطة ٌقوم برنامج التصفح بفنح نافذة خاصةبتحرٌر الرسائل البرٌدٌة‬
‫االلكترونٌة‬
‫‪:‬الصٌغة العامة‬
‫>‪</A‬كلمة >"‪<A HREF="mailto:[email protected]‬‬
‫معمراعاة تغٌٌر العنوان‪[email protected]‬‬
‫الً العنوان المطلوب‬

‫‪------------------------------------‬‬

You might also like