/HTML #BeBsata

HTML #BeBsata

لو حد عنده رغبه فى إنشاء موقع مفيش طريق غير انه يتعلم لغة ال 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 مالهاش قيمه .. يعنى مهما تعمل مسافات بيحسبها مسافه واحده فقط .. لكن لو عاوز تعمل مسافه بتكتب الآمر ده &nbsp;

هنبدأ نتعلم مع بعض أول حاجه لازم تتكتب فى صفحة ال 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 عندك .

مبروك …. عملت أول ويب سايت 🙂

html basic tags

 

هنبدأ أولا نتعرف على بعض ال tags المهمه فى لغة ال HTML

 

<body>

** بيحتوى على مجموعة خصائص “attributes”

bgcolor : لتغيير خلفية الصفحة

background : لوضع صورة للصفحة كخلفيه

text : بنحط فيها الون الاساسى و الافتراضى لأى text هنكتبه

link : لون اللينكات الهتكون موجوده ف الصفحه

alink : لون اللينك عند النقر عليه

vlink : لون اللينك اللى تم زيارته

مثال :-

<“BODY TEXT=”white” LINK=”red” VLINK=”yellow” ALINK=”green” BGCOLOR=”black>

body tag and attributes

او بإستخدام صورة للخلفية <body background=url >


<img>

بيحتوى على مجموعة خصائص attributes :-

src : بنكتب فيه path الصوره اللى موجوده ع الجهاز – أو url إذا كانت الصوره مرفعوعه على سرفر .

alt : بنكتب فيه وصف بسيط عن الصورة

align : بيحدد لنا محاذاة الصورة سواء يمين او شمال او فوق او تحت او ف المنتصف

width & height : بيحدد حجم الصورة من خلال طولها و عرضها و طبعا عباره عن قيم عددية .

border : بيرسم حدود للصورة من خلال قيمة عددية  بياخدها

مثال :-

<“img src=”photo.jpg” alt=”colourful photo ”  width =”100″ height =”100 >

img tag and attributes

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

link tag and attributes

 

<br>

هو عباره عن النزول لسطر جديد . و هو أحد الtags اللى بدون تاج قفل .

<hr>

هو عباره عن رسم  خط ” مسطره “

بيحتوى على خصائص :-

align : محاذاة الخط  ( يمين – شمال – فى المنتصف )

size : حجم “سُمك ” الخط المرسوم .

width : عرض الخط ف الصفحة .

height:عباره عن أرتفاعه بالنسبه للصفحة .

مثال :-

<hr align = “center” width =”100″ height = “100”>

horizontal line

<font>

بيحتوى على خصائص منها :-

face : و هو نوع الخط المستخدم .. مثلا arial

size : حجم الخط  المستخدم

color : تخصيص لون معين  لل text المكتوب بين ال tag ده

مثال :-
<font face=”arial” size=”80″ color=”pink” >Catazine</font>

font tag

 

<p> 

هو عباره عن تاج للبراجراف paragraph

خصائصه :-

align : و هى محاذاة البراجراف فى المنتصف او يمين او شمال .

مثال : –

<p align = “center” > Hi , This is our test for the  Paragraph tag  </p>

paragraph tag

و هنا تقريبا نكون خلصنا جزء كبير من ال html .. نكمل المرة القادمة ان شاء الله .