Scribd
Upload
60 views

HTML

Uploaded by

abdelrahmanyoussry5577
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
60 views

HTML

Uploaded by

abdelrahmanyoussry5577
Copyright
© © All Rights Reserved
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