البرمجة في 7 أيام

لغة HTML

ستتعلم في هذا اليوم أساسيات لغة HTML والتي بدورها اللغة الأساسية لبناء صفحات الانترنت وهيكلتها

كيف أبدأ

قم بمشاهدة الفيديوهات مع متابعة الخطوات بالأسفل خطوة بخطوة
ابدأ من هنا

خطوة رقم 1

التعريف بلغة HTML

خطوة رقم 2

قم بتثبيت برنامج ++notepad
من خلال الرابط التالي
https://notepad-plus-plus.org/download/v7.5.6.html

أو تثيبت برنامج visual studio code
من خلال الرابط التالي
https://code.visualstudio.com/

خطوة رقم 3

أنشئ مجلد جديد وقم بتسميته : البرمجة في 7 أيام ، ثم بداخله
أنشئ مجلد جديد وقم بتسميته : اليوم الأول html
ثم بداخل هذا المجلد
أنشئ ملف جديد بواسطة برنامج ++notepad وقم بتسميته بأي اسم
وتكون صيغة الملف html. كما في المثال التالي

موقعي.html

ثم حدد مسار الملف ليتم حفظه داخل مجلد اليوم الأول

خطوة رقم 4

tags HTML الأساسية
انسخ الكود التالي وألصقه داخل الملف

<html>
	<head>
	</head>
	
	<body>
	</body>
</html>

خطوة رقم 5

اكتب «بسم الله الرحمن الرحيم» داخل تاق الـ body
كما في المثال التالي

<html>
	<head>
	</head>
	
	<body>
		بسم الله الرحمن الرحيم
	</body>
</html>

قم بالضغط على ( حفظ )
ثم افتح الملف من خلال المتصفح لديك بالنقر عليه مرتين

خطوة رقم 6

قم بفتح الملف باستخدام برنامج ++notepad
بالضغط على الملف بالزر الأيمن ثم فتح باستخدام

خطوة رقم 7

لحل مشكلة ظهور الرموز بدل الأحرف العربية
اكتب الكود التالي داخل الـ head

<meta charset="UTF-8">

ليصبح الكود كاملا بهذا الشكل

<html>
	<head>
		<meta charset="UTF-8">
	</head>
	
	<body>
		بسم الله الرحمن الرحيم
	</body>
</html>

قم بالضغط على ( حفظ )
ثم افتح الملف من خلال المتصفح لديك بالنقر عليه مرتين

خطوة رقم 8

لتنسيق تباعد المسافات داخل الكود
قم بالضغط على زر TAP الموجود في أعلى اليسار من لوحة المفاتيح غالبا
ولإعادة التنسيق قم بالضغط على SHIFT + TAP

خطوة رقم 9

جميع الأكواد التالية تكتب داخل الـ body

خطوة رقم 10

لإضافة زر

<button> اضغط هنا </button>

خطوة رقم 11

لإضافة عنوان

<h1> عنوان 1 كبير جدا </h1>
<h2> عنوان 2 كبير </h2>
<h3> عنوان 3 متوسط الحجم </h3>
<h4> عنوان 4 أصغر من المتوسط </h4>
<h5> عنوان 5 صغير </h5>
<h5> عنوان 6 صغير جدا </h5>

خطوة رقم 12

لإضافة سطر جديد

<br>

خطوة رقم 13

لإضافة خط فاصل

<hr>

خطوة رقم 14

لإضافة جدول

<table>
	<tr>
		<td> محرم </td>
		<td> 1 </td>
	</tr>

	<tr>
		<td> صفر </td>
		<td> 2 </td>
	</tr>
</table>

خطوة رقم 15

لإضافة حقل نصي

<input type="text"/>

خطوة رقم 16

لإضافة رابط إلى موقع أو صفحة

<a href="https://www.google.com"> محرك البحث قوقل </a>

<a href="page2.html"> صفحة اتصل بنا </a>

خطوة رقم 17

لإضافة صورة من مجلد أو من موقع على الانترنت

<img src="http://images.all-free-download.com/images/graphicmedium/html_logo_55909.jpg"/>

<img src="اسم الصورة + الصيغة"/>

خطوة رقم 18

دمج عناصر html داخل بعضها

<a href="https://www.google.com">
     GOOGLE
</a>
<button> GOOGLE </button>
<img src="http://images.all-free-download.com/images/graphicmedium/html_logo_55909.jpg"/>

خطوة رقم 19

لإضافة قائمة

<ul>
	 <li> قهوة </li>
	 <li> حليب </li>
	 <li> عصير </li>
</ul>

خطوة رقم 20

لإضافة قسم جديد

<div>
		
</div>

خطوة رقم 21

مراجعة لغة html

خطوة رقم 22

تمرين على لغة html
المطلوب:

1- إنشاء ملف html
2- إضافة أكواد html الأساسية
3- إضافة الأمر الذي يقوم بحل مشكلة ظهور الرموز بدل الأحرف العربية
4- إضافة زر
5- إضافة رابط إلى موقع w3schools.com
6- إضافة سطر جديد
7- إضافة خط فاصل
8- إضافة عنوان
9- إضافة صورة مرفوعة على الانترنت وأخرى من ملفات المشروع
10- إضافة جدول مكون من 4 صفوف وأربعة أعمدة
11- إضافة حقل نصي
12- إضافة قائمة
13- إضافة قسم جديد وبداخله صورة
14- تنسيق تباعد الأكواد بالشكل الصحيح

الخطوة الأخيرة

الاطلاع على المراجع المهمة
موقع w3schools
موقع رواق
دورات HTML من اليوتيوب
ضع سؤالك هنا في مجموعة : فون جاب - كوردوفا - آيونك