Fichier PDF

Partage, hébergement, conversion et archivage facile de documents au format PDF

Partager un fichier Mes fichiers Boite à outils PDF Recherche Aide Contact



projet .pdf



Nom original: projet.pdf
Auteur: haddi-m

Ce document au format PDF 1.5 a été généré par Microsoft® Word 2013, et a été envoyé sur fichier-pdf.fr le 07/04/2019 à 23:13, depuis l'adresse IP 105.235.x.x. La présente page de téléchargement du fichier a été vue 1527 fois.
Taille du document: 3.5 Mo (12 pages).
Confidentialité: fichier public




Télécharger le fichier (PDF)









Aperçu du document


‫إجناز موقع للثانوية‬
‫باالعتماد على لغة‬

‫‪- HTML5‬‬

‫‪-‬‬

‫‪www.w3schools.com‬‬

‫وباستخدام أي حمرر نصوص اضغط هنا للتحميل ‪-‬‬
‫‪Brackets ; SubLime Text ; Notepad++‬‬

‫‪-Brackets‬‬

‫مقدمة في تطوير المواقع‬
‫يظن الكثير أن إنشاء المواقع عملية معقدة‪ ،‬وهذا ليس بصحيح‪ ،‬ستجد في هذا الملف‬
‫بعض األساسيات التي تساعدك على انجاز موقع في أقل من ساعة‪.‬‬
‫األمر ال يتطلب منك معرفة مسبقة بالبرمجة لكن عود نفسك على التجارب ومالحظة‬
‫النتائج ثم غير بعض األشياء والحظ الفرق ‪ ....‬وهكذا بالممارسة حتى تصبح مصمما محترفا‬
‫تعريف لغة ‪:html‬‬
‫هي لغة تستخدم لوصف محتوى صفحة ويب ‪Describes the structure of Web pages‬‬
‫–محتوى الصفحة إما أن يكون‪ :‬عنوانا‪ ،‬فقرة‪ ،‬صورة‪ ،‬مقطع فيديو‪ ،‬مقطع صوتي‪ ،‬جدول‪،‬‬
‫استمارة تسجيل ‪ ...‬الخ‪ -‬وهذا عن طريق رموز خاصة تسمى الوسوم ‪.Tags‬‬
‫كيف تكتب الوسوم؟؟‬

‫>وسم النهاية‪ </‬المحتوى ‪> ...‬وسم البداية<‬

‫الرمز ‪ /‬يفرق بين وسم البداية ووسم النهاية‪ ،‬بعض الوسوم ال تحتاج إلى وسم النهاية‪.‬‬
‫مثال بسيط‪ :‬لو أردنا تصميم هذه الصفحة التي تحتوي على عنوان وفقرة نكتب‪:‬‬
‫النتيجة‬

‫‪‬‬

‫‪‬‬

‫‪Code html‬‬

‫أين نكتب كود ‪html‬؟ باستخدام محرر نصوص ‪ Notepad++‬مثال ثم حفظ العمل بأي اسم‬
‫‪index.html‬‬

‫‪ .html‬وكل الوسوم تكتب داخل الوسم >‪ <body‬كما هو موضح‪.‬‬
‫>‪<body‬‬

‫‪html‬‬

‫أهم الوسوم المستخدمة في لغة ‪Html‬‬
‫‪ .1‬وسم العنوان‪ </hx> :‬عنوان >‪ <hx‬حيث ]‪ 𝑥 ∈ [1; 6‬نختار 𝑥 حسب نوع العنوان‪ :‬رئيسي‪ ،‬ثانوي‪ ،‬فرعي‪...‬إلخ‬
‫‪ .2‬وسم الفقرة‪ </p> :‬نكتب فقرة هنا >‪ <p‬للرجوع إلى السطر نستخدم الوسم >‪ <br‬وإلدراج خط أفقي >‪<hr‬‬

‫‪ .3‬وسم القوائم ‪List‬‬

‫‪ .2‬قوائم غير مرتبة ‪Unordred List‬‬

‫‪ .1‬قوائم مرتبة ‪Ordred List‬‬

‫>‪<ul‬‬

‫>‪<ol‬‬

‫>‪ </Li‬عنصر ‪<Li> 1‬‬
‫‪….....‬‬
‫>‪ </Li‬عنصر ‪<Li> n‬‬

‫>‪ </Li‬عنصر ‪<Li> 1‬‬
‫‪….....‬‬

‫>‪ </Li‬عنصر ‪<Li> n‬‬

‫>‪</ol‬‬

‫‪ .4‬وسم الروابط التشعبية‪Lien HyperText :‬‬

‫>‪</ul‬‬
‫يسمح الرابط التشعبي باالنتقال بين مختلف صفحات الويب‬

‫عند الضغط عليه مباشرة‪ </a> :‬اضغط هنا > "الرابط" =‪ <a href‬الرابط ‪ url‬نكتب فيه الوجهة التي‬

‫نريد التنقل إليها‪ ،‬فمثال لالنتقال إلى صفحة التسجيل نكتب اسم هذه الصفحة في ‪href‬‬

‫>‪ </a‬اضغط هنا للتسجيل > "‪<a href= "inscription.html‬‬
‫يمكن التنقل عبر القوائم بالطريقة التالية‪:‬‬

‫>‪ </a> </Li‬التسجيل >"‪<Li> <a href="inscription.html‬‬

‫‪ .5‬وسم الصور‪" > :‬اسم الصورة" =‪ <img src‬نكتب اسم الصورة ‪ +‬اإلمتداد مثال ‪image.png‬‬
‫يمكن للصورة أن تكون رابط مثال‪:‬‬

‫>‪<a href=" inscription.html"> <img src="image.png"> </a‬‬

‫يمكن التحكم في حجم الصورة ‪ -‬اإلرتفاع والعرض‪ -‬عبر الخاصيتين ‪ height, whidth‬كما سيأتي‪.‬‬

‫‪ .6‬الوسم ‪ :div‬من أهم الوسوم بل قد ال تكاد تجد عنصر في موقع إال وهو داخل الوسم >‪ <div‬مثال‬
‫>‪<div style= "background-color: yellow ; width: 800px ; height: 50px ; border: 1px solid black">...</div‬‬
‫النتيجة‬

‫‪ .7‬وسم النماذج ‪ :form‬تستخدم في عمليات التسجيل وذلك بملء استمارة والضغط على زر التأكيد‪.‬‬
‫نستخدم الوسم >‪ <form‬وإلنشاء خانة نضع الوسم >‪ <input‬نحدد نوع المدخالت عبر الخاصية ‪ type‬مثال‪:‬‬
‫>‪<form‬‬

‫>"‬

‫>‪type = "text" > <br‬‬

‫‪< input‬‬

‫‪:‬‬

‫>‪type = "text" > <br‬‬

‫‪< input‬‬

‫‪:‬‬

‫" = ‪type = "submit" value‬‬

‫‪< input‬‬
‫>‪</form‬‬

‫مقدمة في لغة ‪CSS‬‬
‫بعد أن قمنا بتصميم الصفحة بالـ ‪ html‬يأتي الدور على لغة ‪ css‬التي تهتم بتنسيق وجمالية الصفحة‪.‬‬
‫> "‪<p style ="color : blue‬‬

‫هناك ثالث طرقـ إلضافة الـ ‪ css‬للصفحة‪ ،‬األولى داخل الوسم‬

‫الثانية داخل الوسم >‪ <head‬بهذه الطريقة الثالثة نكتب كود ‪ css‬في ملف مستقل ونقوم بحفظ‬
‫>‪ <head‬العمل ‪ style.css‬ثم نقوم بربطه مع ملف ‪ html‬مثال‬
‫……‬

‫>‪<style‬‬
‫};‪P { color : blue‬‬
‫>‪</style‬‬

‫>‪<head‬‬
‫……‬

‫>"‪<link rel="stylesheet" href="style.css‬‬
‫……‬

‫……‬

‫>‪</head‬‬

‫>‪</head‬‬

‫أهم الخاصيات المستعملة بالـ ‪ css‬باستخدام الطريقة الثالثة أي كتابة ‪ code css‬في ملف مستقل‪.‬‬
‫{ ‪body‬‬

‫; ‪background-color : lavender‬‬

‫} ; )‪background-image : url(a.png‬‬

‫; ‪img { width: 800px‬‬

‫; ‪height: 400px‬‬

‫} ;‪border-radius: 12px‬‬

‫; ‪p { color : blue‬‬

‫; ‪text-align : center‬‬

‫} ;‪font-size : 20px‬‬

‫الـ ‪ class‬والـ ‪ :id‬إذا كتبت في ‪ h2 { Color : red ;}  css‬ستتلون كل العناوين ‪ h2‬في الصفحة باألحمر‬

‫لو أردنا جعل عنوان واحد باألزرق فإننا نحتاج إلى ‪ id‬الذي يسمح لنا بتغيير هذا العنوان فقط دون البقية‬

‫في كود ‪ html‬نضع > "‪ <h2 id= "hblue‬في كود ‪ css‬نضع }‪ #hblue {color : blue‬أظن أن الفكرة وصلت !‬
‫الـ ‪ id‬يطبق على عنصر وحيد أما الـ ‪ class‬يمكن تطبيقه على عدة عناصر ونغير في ‪ css‬الرمز ‪ #‬بـ ‪ .‬نقطة‬

‫جعل القائمة أفقية بالـ ‪ css‬نضع القائمة في>‪ <div‬مثال >‪<div id = "menu" > <ul>........</ul> </div‬‬

‫ثانيا‪ :‬عناصر القائمة >‪ <li‬كلها روابط‪ </a> </li> :‬التسجيل في الموقع > "‪<li> <a href= "inscription.html‬‬

‫أخيرا نقوم بتنسيق القائمة بـ ‪ css‬جرب الكود التالي والحظ النتيجة وغير اللون والحجم حسب رغباتك‬
‫تنسيق الرابط الموجود داخل عناصر القائمة‬
‫;‪ul li a { padding: 12px‬‬
‫;‪text-align: center‬‬

‫تنسيق عناصر القائمة ‪ UL‬وليس ‪OL‬‬
‫{ ‪ul li‬‬

‫إعطاء خصائص للوسم >‪ <div‬بالـ ‪id‬‬
‫{ ‪#menu‬‬

‫;‪text-decoration: none‬‬

‫;‪display : inline-block‬‬

‫;‪width: 880px‬‬

‫; لون ‪border: 1px solid‬‬

‫;‪list-style-type : none‬‬
‫;‪font-size : 27px‬‬

‫;‪height: 100px‬‬

‫;‪border-radius: 8px‬‬

‫}‬

‫;‪margin-right: auto‬‬

‫} ; لون ‪background-color:‬‬

‫;‪margin-left: auto‬‬
‫} ; لون ‪background-color:‬‬

‫األفضل دائما كتابة الـ ‪ css‬في ملف مستقل وربطه مع ملف ‪ html‬كما مر معنا –الطريقة ‪ -3‬وتجنب‬

‫كتابة الـ ‪ css‬داخل الوسم ‪-‬مثل الطريقة ‪ -1‬هذه بعض التقنيات وليس كلها والتعلم يكون بالممارسة‪.‬‬

‫صور تقريبية للموقع‬
‫الصفحة الرئيسية ‪index.html‬‬

‫صورة‬
‫قائمة أفقية‬

‫صورة‬

‫بعد الضغط على "التسجيل في الموقع" ننتقل إلى صفحة التسجيل ‪inscription.html‬‬

‫نفس الصفحة‬
‫نضيف استمارة‬
‫بدل الصورة‬

‫إختيار األلوان والتنسيق حسب اختيار التلميذ المهم أن يحتوي الموقع على هذه العناصر‬
‫صورة قائمة أفقية نموذج للتسجيل في صفحة التسجيل ‪...‬‬

‫المطلوب من التالميذ‬

‫‪ .1‬قم بتصميم موقع الثانوية‪ :‬الصفحة الرئيسية ‪ + index.html‬صفحة التسجيل ‪inscription.html‬‬

‫‪ .2‬عند الضغط على "التسجيل في الموقع" يتم االنتقال إلى صفحة التسجيل‪ ،‬استعمل رابط تشعبي‪.‬‬
‫‪ .3‬يتم إرسال الصفحتين ‪ +‬ملف ‪– css‬إن وجد‪ -‬إلى البريد اإللكتروني ‪ haddi.info@gmail.com :‬أو تسليم‬
‫العمل إلى األستاذ مباشرة في القسم‪.‬‬
‫‪ .4‬آخر أجل لتسليم األعمال يكون يوم –األحد ‪ 14‬أفريل ‪-2019‬‬

‫هذه خطوتك األولى الحتراف تصميم المواقع علما أن هذا الميدان يعتبر مصدر ثروة عند الكثير‬
‫من األشخاص ‪.‬‬
‫يجب على كل التالميذ تقديم المشروع في موعده المحدد على أن نخصص حصة بحول اهلل‬
‫‪-‬إن أمكن‪ -‬مع كل فوج لمناقشة وسؤال كل تلميذ عن الموقع الذي صممه‪.‬‬

Color Name
AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenRod

Color

DarkGray
DarkGrey
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
DarkOrange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkSlateGrey
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DimGrey
DodgerBlue
FireBrick
FloralWhite
ForestGreen
Fuchsia
Gainsboro
GhostWhite

Gold
GoldenRod
Gray
Grey
Green
GreenYellow
HoneyDew
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGray
LightGrey
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue

LightSlateGray
LightSlateGrey
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab

Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
RebeccaPurple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
SlateBlue

SlateGray
SlateGrey
Snow
SpringGreen
SteelBlue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
Wheat
White
WhiteSmoke
Yellow
YellowGreen


Documents similaires


Fichier PDF style paletttejlb 28 10 2012t bloc notes
Fichier PDF cours css3
Fichier PDF codage miracle marvel
Fichier PDF codeshtmlaides
Fichier PDF legende
Fichier PDF desing pinturebleu 1


Sur le même sujet..