HTML

HTML 5
www.riseupskill.com
HTML 5 - Introduction
‫؟‬HTML ‫• ماهي لغة‬
‫ هي اللغة األساسية لبناء هيكل الموقع و هي إختصار‬-
‫ و تتكون من‬HyberText Markup Language
:‫ مثل‬Tags ‫مجموعة من‬
<html>,<h1>,<p>,<title>,<body>
www.riseupskill.com
‫‪HTML 5 – Main Tags‬‬
‫• تبدأ اي صفحة ‪ HTML5‬بالرمز >‪<!DOCTYPE html‬‬
‫الذي يخبر المتصفح بأن هذه الصفحة مكتوبه بلغة ‪HTML‬‬
‫‪ ,5‬يتبعها ‪body <- Head <- html‬‬
‫>‪<!DOCTYPE html‬‬ ‫• ‪ Html‬هي ‪ Tag‬الرئيسية التى تندرج‬
‫>‪<html‬‬
‫>‪<head‬‬ ‫تحتها جميع الرموز داخل الملف‬
‫>‪</head‬‬
‫>‪<body‬‬
‫• ‪ Head‬يحتوي على مجموعة من‬
‫>‪</body‬‬
‫>‪</html‬‬
‫لكنها‬ ‫للمستخدم‬ ‫تظهر‬ ‫ال‬ ‫ً‬ ‫المعلومات عادة‬
‫مهمة للمتصفح‬
‫‪www.riseupskill.com‬‬
HTML 5 – Main Tags
‫ يحتوي على جميع محتويات الصفحة‬Body •
<!DOCTYPE html>
‫للمستخدم‬ ‫تظهر‬ ‫التى‬
<html>
<head>
</head>
<body>
</body>
</html>
‫ مفتوحة‬Tag ‫ ال تنسى غلق أي‬:‫✓ مالحظة‬
www.riseupskill.com
HTML 5 - Introduction
‫؟‬HTML ‫• ماذا تحتاج لكتابة كود‬
‫ داخل أي برنامج لتحرير‬html ‫ تستطيع كتابة كود‬-
.html )extension( ‫النصوص وحفظه بإمتداد‬
‫ و قم بكتابة هذا الكود‬Notepad ‫ إفتح برنامج‬:1‫• تدريب‬
<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
</head>
<body>
Welcome to Our web site
</body>
</html>
www.riseupskill.com
‫‪HTML 5 – Formatting Tags‬‬
‫• أمثله للرموز (‪ )Tags‬الخاصة بتسيق النصوص ‪text‬‬
‫‪:formatting‬‬
‫>‪ <p‬لتحديد الفقرة‬
‫>‪ <h1><h2><h3‬تستخدم في كتابة عناوين المواضيع‬
‫>‪ <br‬إلدخال سطر جديد‬
‫>‪ <strong‬للكتابة بخط عريض ‪bold‬‬
‫>‪ <u‬لوضع خط تحت الكلمة‬
‫>‪ <i‬للكتابه بخط مائل‬
‫>‪ <strike‬لوضع خط وسط الكلمة‬
HTML 5 – Important tags
:‫ أخرى‬Tags •
‫< تستخدم لتحديد عنوان الصفحة‬title> •
Attribute ‫ خاصية‬:‫ مثال‬,‫< لربط الصفحات ببعضها‬a> •
<a href=“http://google.com"> Google </a>
‫< لتحديد‬li> ‫ و يندرج تحتها‬,lists ‫< لعمل قوائم‬ul> •

</ul> :‫ مثال‬, items ‫العناصر‬
<li> Tea </li>
• Tea
<li>Coffee</li> • Coffee
</ul>
www.riseupskill.com
‫‪HTML 5 – Important tags‬‬
‫• ‪ Img‬تستخدم إلضافة صورة للصفحة و تحتوي على خاصية‬

‫بإسم ‪ sec‬لتحديد مسار الصورة بداخلها‪.‬‬
‫• مثال‪:‬‬
‫>”‪<img src=“img/instagram.gif" alt=”instagram‬‬
‫لتحديد مسار الصورة‬ ‫في حالة عدم ظهور الصورة‬

‫تظهر كلمة ‪instagram‬‬
HTML 5 – <div>
‫< هو العنصر األساسي لتقسيم الصفحة و بناء‬div> •

:‫ مثال‬,(blocks) ‫كتل من األكواد‬
<div>
<p> this my first page</p>
<img sec="img/Instagram.png"alt=”instagram”>
</div>
‫ كما يمكن كتابة‬,‫ داخل الصفحة‬div ‫• يمكن كتابة أي عدد من‬

(nested div) div ‫ داخل‬div
www.riseupskill.com
HTML 5 – <div>
:attributes ‫ على خاصيتين مهمتين‬div ‫• يحتوى رمز‬
class ‫ و‬Id ‫و هم‬
div ‫• تستخدم هاتين الخاصيتين لتحديد إسم فريد لكل‬
ID ‫ و لكن اليمكن تكرار‬class ‫• يمكن تكرار اإلسم الخاص بـ‬
<div id=”content”> :‫مثال‬
<div class=”leftColumn”>
</div>
<div class=”rightColumn”>
</div>
</div>
www.riseupskill.com

HTML

Uploaded by

Copyright:

Available Formats

You might also like

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML 5

‫ مفتوحة‬Tag ‫ ال تنسى غلق أي‬:‫✓ مالحظة‬

<a href=“http://google.com"> Google </a>

‫< لتحديد‬li> ‫ و يندرج تحتها‬,lists ‫< لعمل قوائم‬ul> •

‫• ‪ Img‬تستخدم إلضافة صورة للصفحة و تحتوي على خاصية‬

‫لتحديد مسار الصورة‬ ‫في حالة عدم ظهور الصورة‬

‫< هو العنصر األساسي لتقسيم الصفحة و بناء‬div> •

‫ كما يمكن كتابة‬,‫ داخل الصفحة‬div ‫• يمكن كتابة أي عدد من‬

You might also like