لو حد عنده رغبه فى إنشاء موقع مفيش طريق غير انه يتعلم لغة ال HTML ، حتى إذا كان بيستخدم برنامج معين لصناعة الويب ، لازم يكون عارف لغة ال HTML لأنها هتساعد كتير فى بناء ويب سايت أفضل .
بعض الناس بيظن إن تصميم أى ويب سايت شئ صعب ، و لكن من خلال سلسلة تعلم HTML هنعرف مدى سهولتها .
ما هى ال HTML ؟
هي اختصار ل .HTML is HyperText Markup Language حيث :
hyper : معناها إن لغة البرمجه دى غير خطيه ، قديما كان الكمبيوتر بيشتغل بشكل خطى و أوامر ورا بعضها ، و لكن ال HTML ممكن فى اى مكان تكتب اى حاجه و تروح لأى حاجه .
Text : هو أى كلام داخل ال HTML و هيتعرض للمستخدم
Mark up : هو عباره عن تحرير الtext اللى هيتكتب ، زى تغيير نمط و لون و شكل العناوين و غيره … .
language : و طبعا ال HTML هى عباره عن لغة توصيف .
هنكتب الكود فين !؟
ببساطه هنكتبه على notepad إذا كنت من مستخدمي الويندوز .
و إذا كنت من مستخدمى لينكس .. هنكتبه فى ” Pico “ ، و إذا كنت من مستخدمى نظام ماك .. هنكتبه فى “ TextEdit “ .
حالياً ، انت مُهيأ لتعلم أول و مبادئ لغة ال HTML .
فيه حاجات مهم نعرفها :-
HTML عباره عن مجموعة من ال Tags ..
Tag بيكون بالشكل ده <Tag> .. و أي تاج بيتكون من <element attribute = value > ..
و مش ننسى إن لكل تاج بداية <tag> و نهايه </tag> يعنى بنقفل التاج بإننا نزود عليه ال ” / ” ما عدا بعض ال Tags اللى مش ليها نهاية زى مثلا :-
<img src = url > ، <hr> ، <br>
وده لأنها مش بتحتوى على محتويات أو داتا جواها .. فلازم تقفلها في نفس التاج يعنى بالشكل ده :
</br/> , <hr/> , <img src=url>
لاحظ أن ال HTML غير حساسه للحروف سواء capital او small أو خليط بينهم و لكن يفضل استخدام ال small
المسافات فى ال HTML مالهاش قيمه .. يعنى مهما تعمل مسافات بيحسبها مسافه واحده فقط .. لكن لو عاوز تعمل مسافه بتكتب الآمر ده
هنبدأ نتعلم مع بعض أول حاجه لازم تتكتب فى صفحة ال HTML و هى أساسية لكل صفحات ال HTML
<HTML>
<head>
هنا ممكن نكتب css او اى script language زى ما هنشوف فيما بعد .
<title >
هنا بنكتب اسم الويب سايت بتاعنا
<title/ >
<head/>
<body>
هنا هنكتب كل الtags اللى هتأثر على صفحة الويب بتاعتنا
<body/>
<Html/>
** لاحظ إن أول تاج بنكتبه هو آخر تاج بنقفله و هكذا .. دلوقتى هنبدأ نعمل اول و أبسط ويب سايت 🙂
1- افتح notepad و ابدأ اكتب ال tags الأساسيه اللى قلنا عليها قبل كده .
<html>
<head>
<title>
this is my first website
</title>
</head>
<body>
<body/>
<html/>
دلوقتى هنكتب tags ما بين <body> ………….. </body>
<body>
<h1>
Al slamo 3likom ,,This is my first web site ! 😀
</h1>
</body>
بعد ما خلصنا الكود بتاعنا هنحفظ الملف بتاعنا و لكن بامتداد .html او .htm “لا تنسى “
هيظهر لك ملف قم بفتحه بإستخدام إى browser عندك .
مبروك …. عملت أول ويب سايت 🙂
هنبدأ أولا نتعرف على بعض ال tags المهمه فى لغة ال HTML
<body>
** بيحتوى على مجموعة خصائص “attributes”
bgcolor : لتغيير خلفية الصفحة
background : لوضع صورة للصفحة كخلفيه
text : بنحط فيها الون الاساسى و الافتراضى لأى text هنكتبه
link : لون اللينكات الهتكون موجوده ف الصفحه
alink : لون اللينك عند النقر عليه
vlink : لون اللينك اللى تم زيارته
مثال :-
<“BODY TEXT=”white” LINK=”red” VLINK=”yellow” ALINK=”green” BGCOLOR=”black>
او بإستخدام صورة للخلفية <body background=url >
<img>
بيحتوى على مجموعة خصائص attributes :-
src : بنكتب فيه path الصوره اللى موجوده ع الجهاز – أو url إذا كانت الصوره مرفعوعه على سرفر .
alt : بنكتب فيه وصف بسيط عن الصورة
align : بيحدد لنا محاذاة الصورة سواء يمين او شمال او فوق او تحت او ف المنتصف
width & height : بيحدد حجم الصورة من خلال طولها و عرضها و طبعا عباره عن قيم عددية .
border : بيرسم حدود للصورة من خلال قيمة عددية بياخدها
مثال :-
<“img src=”photo.jpg” alt=”colourful photo ” width =”100″ height =”100 >
<a>
بيحتوى على مجموعة خصائص :-
- href : و الخاصية دى بتاخد أكتر من قيمه url
-
<a href=“http://www.google.com” >Go To Google </a> و دى بتنقلنا لموقع آخر
-
<a href=“home.html” > Home</a> و دى بتنقلنا لصفحة و لكن فى نفس الموقع
-
<a href=“images/image.jpg” > My Image</a> و دى لينك بينقلنا لصورة
-
<a href=“http://www.google.com” ><img src = “home/image.jpg”> </a> و دى بتخلى الصورة عباره عن لينك . نقدر إننا نروح لجوجل من خلال النقر عليها .
-
<a name=“above”>Text</a> تسمية جزء ف الصفحة .
-
<a href=“#section1”>Text 2</a> لينك ف نفس الصفحه لتسهيل الحركه فى الصفحات الكبيره .
-
<a href=”mailto:someone@example.com”>send email</a> لإرسال إيميل لشخص ما .
target : ده لفتح الصفحة الناتجه من اللينك فى صفحة جديده blank_ او نفس الصفحة self_ او parent_ أو top_
<br>
هو عباره عن النزول لسطر جديد . و هو أحد الtags اللى بدون تاج قفل .
<hr>
هو عباره عن رسم خط ” مسطره “
بيحتوى على خصائص :-
align : محاذاة الخط ( يمين – شمال – فى المنتصف )
size : حجم “سُمك ” الخط المرسوم .
width : عرض الخط ف الصفحة .
height:عباره عن أرتفاعه بالنسبه للصفحة .
مثال :-
<hr align = “center” width =”100″ height = “100”>
<font>
بيحتوى على خصائص منها :-
face : و هو نوع الخط المستخدم .. مثلا arial
size : حجم الخط المستخدم
color : تخصيص لون معين لل text المكتوب بين ال tag ده
مثال :-
<font face=”arial” size=”80″ color=”pink” >Catazine</font>
<p>
هو عباره عن تاج للبراجراف paragraph
خصائصه :-
align : و هى محاذاة البراجراف فى المنتصف او يمين او شمال .
مثال : –
<p align = “center” > Hi , This is our test for the Paragraph tag </p>
و هنا تقريبا نكون خلصنا جزء كبير من ال html .. نكمل المرة القادمة ان شاء الله .
catazine 