HTML شرح الدرس الثاني

هنتكلم في درس اليوم عن HTML Headings

هي نصوص يطلق عليها عناوين وهي عبارة عن tags تكتب داخل جسم الصفحة body وهي مرئية تدرج بالحجم من <h1> الي <h6/>

هنفهم بعد المثال ده

افتح notepad واكتب فيه
--------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

<h4>This is heading 4</h4>
<h5>This is heading 2</h5>
<h6>This is heading 3</h6>

</body>

</html>
-------------------------------------------------

ثم احفظه باطريقة السابقة باي اسم وفي الاخر .html

هيظهرلك كدا. وبتالي نستنتج أن
ان اكبر خط h1 واصغر خط h6
واللي تفتح بيه التاج تقفله بزيادة /
مثال <h1>Start And End Tag</h1>

وسوم البداية	قيمة	وسوم النهاية	ماذا يحدث لهذه القيمة بعد تشغيله علي المتصفح
<h1>	Heading 1	</h1>	يصبح الخط كبير جداً
<h2>	Heading 2	</h2>	يصبح الخط كبير ولكنه أقل مما سبق
<h3>	Heading 3	</h3>	يصبح الخط متوسط
<h4>	Heading 4	</h4>	يصبح الخط أقل من متوسط
<h5>	Heading 5	</h5>	يصبح الخط صغير
<h6>	Heading 6	</h6>	يصبح الخط صغير جداً

ملاحظة فيما بعد ستعرف كيفية تعيين حجم الخط واللون والخ...
اكيد لاحظت أني حذفت رأس الصفحة Head صح
لان انا معملتش معلومات خفية للصفحة فمكنش ضروري أني أضعها
ولكن انت حطها في الصفحة مش تأثر (لكن في حالة أنك عايز تضيف عنوان للصفحة أو معلومات اليها يجب وضعه)

HTML Paragraphs

ماذا يحدث للقيمة عن فتح المتصفح	وسم النهاية	القيمة	وسم البداية
ستعرف كنص عادي	</p>	paragraph	<p>

وكما قولنا عند تشغيل المتصفح لن تظهر الوسوم

بيتكتب في

<body>

و تضيف

<p/>وهنا الكلمة<p>

يعني هيكون كدا الكود

<body>

<p/>وهنا الكلمة<p>

<body>
وبإضافة ل اساس الصفحة وتعريفها هيبقي كدا
______________________________

<DOCTYPE html!>
<html>

<body>

<p/>وهنا الكلمة<p>

<body>

<html/>
________________________________________
مكتبناش head لإننا لا نريد ان نضيف أي معلومة للصفحة

هتتحول الكلمة اللي هتكتبها بينهم الي نص عادي

**وطبعا <p> </p> ده تاج

بيبدأ <p> ويسمي وسم البداية

وينتهي <p/> ويسمي وسم النهاية
وعند كتبتك لكلمة ما داخله لتعريفها كنص عادي بتكتبها بين الوسوم

<p>هنا</p>

HTML Links

وطبعاً باين معناها من اسمها روابط تشعبية ولو انت مش فاهم كمل

تركيبتها :

قبل ان نشرح التركيب يجب أن نراها عملياً

فكر في السؤال ده : الروابط دي بتظهر داخل الصفحة يبقي بتتكتب فين

؟Head , Body

طبعاً body

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

هسمي الصفحة HTML Links

السؤال هو عنوان الصفحة بيبقي فين؟

headالاجابة:-في
وعنوان الصفحة بيبقي بين
<title>هنا إسم الصفحة</title>

يبقي الكود كدا

<!DOCTYPE html>

<html>

<head>

<title>HTML Links</title>

</head>

<body>

</body>

</html>

دلوقتي أنا عايز اعمل رابط في الصفحة فهعمل التركيبة دي وهنشرح تحت

<a href="www.google.com">Google</a>

الرابط شئ ظاهر في الصفحة هيتكتب في body

هيبقي الكود كدا

<!DOCTYPE html>

<html>

<head>

<title>HTML Links</title>

</head>

<body>

<a href="www.google.com">Google</a>

</body>

</html>

اكتبه في notepad

واحفظ

html.بأي أسم

وافتح الملف

طبعاً هيظهرلك كدا

لو ضغط عليه هيفتحلك جوجل

انت دلوقتي قربت تفهم التركيبة

ده وسم البداية

href

أو سمة attribute صفة أو

وتستخدم في تحديد موقع

href="www.google.com"حيث يكتبه هكذا

هي تكملة وسم البداية ولكنها ظهرت بهذا الشكل منفردة بعد صفة

وذلك لوجود تلك الصفة

يعني عندما كتبنا

وبعد المكلمة هيكتب نص الموضح للرابط

</a>

قفلنا الوسم النهاية

بداية الوسم	الصفة attribute وقيمتها(الموقع)	تكملة وسم البداية	توضيح الرابط	وسم النهاية	هتظهر كدا
<a	href="www.google.com"	>	google	</a>	google

<p> Para.. </p>

لاحظ لم تكن بها صفة ولذلك كتبت المكملة في وسم البداية مباشرةً

HTML buttons

باين من أسمها هي أزرار

تركيبها:-

هتظهر كدا	وسم النهاية	اسم توضيحي للموقع	تكملة وسم البداية	صفة	وسم البداية
Google	</a>	Google	>	href="www.google.com"	<a

<button> Click Me </button>

الزر شئ يظهر داخل الصفحة إذاً هيكتب في body

الكود
_________________________
<!DOCTYPE html>
<html>
<body>
<button>Click Me</button>
</body>

</html>

_________________________

انسخ السابق واكتبه في

notepad

واحفظه بامتداد .html

هيظهرلك زر هتلاحظ انك كل ما دوس عليه لا يقوم بأي عمل
صحيح فذلك من وظيفة Javascript
لا تقلقوا هشرح جافاسريبت قريباً

HTML Images

معناها صور الاتش تي ام إل

ده التركيب:-

حيث ان

src , alt , width , height

سمات أو صفات

واعبروها حالة استئنائية في الوسوم

حيث ان

بدأت بـ

<img

وانتهت بـ

للتسهيل

يعني مثال

__________________________

<!DOCTYPE html>
<html>
<body>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="صورة جوجل المفضلة" width="300" height="300">
</body>

</html>
_________________________
طبعاً انت عارف هتعمل ايه
هتنسخهم في نوتباد واحفظهم بامتداد
.html
هتظهرلك كدا

وفي حالة أنه كان الموقع الذي ادخلته للصورة خاطئ سيظهر لك النص البديل

اللي هو الموجود داخل Alt

شرح المثال

src="عنوان الموقع"

ولا تنسي = ""

width = "عرض"

ولا تنسي =""

height ="ارتفاع"

ولا تنسي =""

alt="نص بديل"

ولا تنسي =""

ولا تنسي في النهاية

ولسا هنعرف حاجات اكتر في درس مخصص للصور .

فانت ان كنت لم تفهم الجزئية ستنشرح فيما بعد

HTML Lists

باينة من العنوان تعني قوائم

هناك نوعان من القوائم

قوائم مرقمة

قوائم منقطة

_______________________________________________________________

القوائم المرقمة:-

تركيبتها

</ol>

:شرح ما سبق

<ol>

</ol>

لتعريف انها قائمة مرقمة

لعمل عنصر في القائمة

فانت لو عايز اربع عناصر

</ol>

اكيد عارفين انها بتكتب في body

وهتكون شكلها كدا عند كتابة الكود كاملاً

<!DOCTYPE html>

<html>

<body>

</ol>

</body>

</html>

اكتبها في نوتباد واحفظها بأي أسم

وامتدادها .html

وافتحه

هيظهرلك كدا

شكل توضيحي للتفهيم

<ol>

<li>Number 1 </li>

<li>Number 2 </li>

<li>Number 3 </li>

</ol>

القوائم المنقطة:-

تركيبتها

<ul>
  <li>أول</li>
  <li>ثاني</li>
  <li>ثالث</li>

</ul>

شرح ما سبق

<ul>

</ul>

لتعريف انها قائمة منقطة

<li></li>

لعمل عنصر في القائمة

فانت لو عايز اربع عناصر

<ul>
  <li>أول</li>
  <li>ثاني</li>
  <li>ثالث</li>

<li>رابع</li>

</ul>

اكيد عارفين انها بتكتب في

body

_______________

<!DOCTYPE html>

<html>

<body>

<ul>
  <li>أول</li>
  <li>ثاني</li>
  <li>ثالث</li>

<li>رابع</li>

</ul>

</body>

</html>

______________

اكتبها في نوتباد واحفظها بأي أسم

وامتدادها .html
وافتح الملف

هيظهرلك كدا

شكل توضيحي للتفهيم

<ul>

<li>Number 1 </li>

<li>Number 2 </li>

<li>Number 3 </li>

</ul>

الدرس الثالث

الدرس الأول قائمة الدروس