الثلاثاء، 4 يوليو 2017

المزيد عن HTML

المزيد عن HTML

* في الدرس السابق تم شرح النماذج فى لغة HTML لمزيد من المعلومات برجاء الاطلاع على الموضوع من الرابط السابق التعامل مع النماذج فى لغة HTML - الجزء الرابع
* فى هذا الدرس سنتناول شرح المزيد من عناصرو سمات لغة HTML مثل Doctype , Comments , ID & Class Attributes , Block & Inline Elements , Iframe , Meta 

* Doctype

- يستخدم Doctype لاخبار المتصفح اي اصدار من HTML كتب الكود .

HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 5 

<!DOCTYPE html>

*Comments 

- في بعض الاحيان نحتاج الى اضافة تعليق بكود HTML و هذا التعليق لا يظهر فى المتصفح للمستخدم.

كود HTML:


<!DOCTYPE html>

<html>

<head>

<title>Comment in HTML Example</title>

</head>

<body>

<!-- This code used to File Upload Form -->

<form action="http://www.e4ws.com/upload.php" method="post">

<p> Please Upload Your Photo:

<br />

<input type="file" name="Photo" />
<input type="submit" value="Upload" />
</form>
</body>
</html>

 نتيجة الكود:

* ID Attribute

- بالامكان استخدام سمة ID مع اي من عنصر من عناصر لغة HTML لتميز هذا العنصر عن باقي عناصر الصفحة.

* Class Attribute

- بالامكان استخدام سمة Class مع مجموعة عناصر من عناصر لغة HTML مشتركة فى نفس السمات فى الصفحة.

* Block Elements

- هناك بعض عناصر لغة HTML دائما ما تظهر فى سطر جديد فى المتصفح مثل : <h1> , <p> , <ul> , <li>

* Inline Elements

- هناك بعض عناصر لغة HTML دائما ما تظهر فى نفس السطر فى المتصفح مثل : <a> , <b> , <em> , <em>

* Iframe

- يستخدم لادارج صفحة صغيرة فى نفس صفحة موقع .

كود HTML:


<!DOCTYPE html>
<html>
<head>

<title>Iframe Example</title>

</head>

<body>

<!-- This code used to add google maps to the page -->

<iframe width="450" height="350" src="http://www.e4ws.com/"

</body>

</html>

نتيجة الكود:

* Meta

-  يحتوي علي  معلومات خاصة بالصفحة من كلمات دلاليلية و وصف للصقحة و الكاتب و غيرها من المعلومات التي تستفيد منها محركات البحث .
- عنصر Meta يعتبر Empty Element .
- عنصر Meta دائما يوجد بمنطقة الـ Head فى كود الـ HTML.
-عنصر Meta لا يظهر للمستخدم فى المتصفح.

* Description

- يستخدم لوضع وصف ثابت للصفحة يمكن محركات البحث من معرفة عما تحتويه الصفحة


 <meta name="description" content="مدونة متخصصة فى شرح مختلف لغات برمجة الويب " />

*  Keywords

- تستخدم لوضع مجموعة من الكلمات الشائعة و التي من الممكن ان يبحث عنها المستخدم للوصول الي صفحتك.

<meta name="keywords" content="html , css , php , tutorials , javascript , mysql" />

* Robots 

- تستخدم لاخبار محركات البحث اذا كان يجب ان تضيف هذه الصفحة لنتائج البحث ام لا .
 noindex : تعني عدم اضافة الصفحة لنتائج البحث
nofollow : تعني اضافة الصفحة لنتائج البحث
 <meta name="robots" content="nofollow" />

 * Author

- تستخدم لتعريف بمؤلف هذه الصفحة.
<meta http-equiv="author" content="Ahmed Metwally" />

charset

- تستخدم لاخبار المتصفح عن الاحرف في هذه الصفحة .
HTML 4
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
HTML 5
<meta charset="UTF-8"> 

0 التعليقات

إرسال تعليق