الحكم على الوثيقة من عنوانها:
واحدة من أهم العناصر في رأس المستند هي العنوان. يتم عرض النص الوارد في العنوان الى حد كبير من قبل جميع المتصفحات في شريط عنوان المتصفح
(شريط على حدود الجزء العلوي من نافذة المتصفح، وهي أول قطعة من محتوى مستخدمي الشبكة التي سوف يقوموا برؤيتها عندما يزورون موقعك ، وبالتالي من المهم جدا، بالإضافة إلى التقنيات المساعدة لمثلث قاراءات الشاشة
استخدام عنوانا جيدا يكون قابلا للقراءه ويحتوي على الكلمات الرئيسية المناسبة يجعل المستخدم مدركا لماهيه وتعريف الموقع الإلكتروني بشكل جيد.
[html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>I am a title example</title>
</head>
<body>
</body>
</html>
[/html]
إضافة كلمات رئيسية لوصف المحتوي:
من المهم جدا أن تقوم بإضافة الوصف والكلمات الرئيسية لمحتوي صفحتك علي الموقع الخاص بك. وأضاف الحصول على كل من هذه العناصر داخل الرأس الفوقية، كما هو مبين في المثال التالي المأخوذ من موقع(headwithmeta.html) :
[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UK & Ireland Eurosport—Sports News | Live Scores | Sport</title>
<meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more.">
<meta name="keywords" content="eurosport,sports,sport,sports news,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo">
</head>
<body>
</body>
</html>
[/html]
اذا قمت بفتح المتصفح لن تشاهد أي شئ من جسم الوثيقه ولكنك اذا قمت بنشر هذا الملف فإن محركات البحث سوف تقوم بعرض النص الموجود باللينك او الوصف المشير له كناتج من نتائج البحث.
والأن ماذا عن المظهر ,اضافه اسلوب خاص:
والشيء التالي الذي يمكن أن يضاف إلى رأس الوثيقة قواعد الأسلوب الخاص ،ومعرفة أنماط الـ (CSS) المختلفه المستخدمه في الوثيقه لديك.
يمكنك تضمينذلك مباشرة في الرأس باستخدام عنصر الـ style، على سبيل المثال(headinlinestyles.html):
[html] <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Breeding Dogs—Tips about Alsatians</title>
<meta name="description" content="How to breed Alsatians, tips on proper breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
<style type="text/css">
body{
background:#000;
color:#ccc;
font-family: helvetica, arial, sans-serif;
}
</style>
</head>
<body>
<p>Test!</p>
</body>
</html>
[/html]
إذا كنت على سبيل المثال تريد تجاوز الألوان المستخدمة على الشاشة واستخدام حجم خط أكبر لجعل الصفحة أفضل للطباعة ،يمكنك إضافة نمط آخر للمستند، مع سمة وسائل الاعلام المطبوعة، كما سنرى فيما بعد ( headinlinestylesmedia.html):
[html] <pre><style type="text/css" media="print">body{
background:#fff;
color:#000;
font-family: helvetica, arial, sans-serif;
font-size:300%;
}
</style>
[/html]
إضافة ميزات ديناميكية باستخدام جافا سكريبت
إضافة جافا سكريبت لمستند باستخدام العنصر النصي.، تحتاج إلى إضافته إلى الرأس. على سبيل المثال ، يمكنك ان تعطي للزائر تحذير بوجود صلة معينة سيتم نقلهم الى خادم آخر مع النص التالي (headscript.html):
[html] <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Breeding Dogs—Tips about Alsatians</title>
<meta name="description" content="How to breed Alsatians, tips on proper breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
<style type="text/css" media="screen">
body{
background:#000;
color:#ccc;
font-family: helvetica, arial, sans-serif;
}
a {color:#fff}
</style>
<style type="text/css" media="print">
body{
background:#fff;
color:#000;
font-family: helvetica, arial, sans-serif;
font-size:300%;
}
</style>
<script>
function leave(){
return confirm("This will take you to another site,\n are you sure you want to go?")
}
</script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>
[/html]
