Scribd
Upload
60 views10 pages

HTML

Uploaded by

abdelrahmanyoussry5577
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
60 views10 pages

HTML

Uploaded by

abdelrahmanyoussry5577
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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‬لوضع خط وسط الكلمة‬

‫‪www.riseupskill.com‬‬
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‬‬

‫‪www.riseupskill.com‬‬
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

You might also like