طراحی وب سایت
درباره سایت
امکانات وب
داک تايپ DocType : Document Type Definition
اولين آيتم صفحه است بدون فاصله. اين يک قانون است.
همانطوري که فايل word 2007 در نمايش در 2000 دچار مشکل مي شود HTML ها با داک تايپ هاي متفاوت هم نمايش متفاوت در مرورگرها خواهند داشت.
در واقع اين داک تايپ است که به مرورگر مي گويد اين سند از چه نوعي است و بايد به چه ترتيب Render شود . نحوه رندر شدن و تفاوت هاي آنها بايد در سطح حرفه اي تري مطرح شود.
داک تايپ ها هم در طول زمان به وجود مي آيند يعني مانند word نوع هاي جديدي روي قبلي ها عرضه مي شوند مانند HTML5 که به تازگي مطرح شده است.
براي ديدن داک تايپ هاي موجود به اين آدرس بريد http://reference.sitepoint.com/html/doctypes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
به کدهاي داک تايپ دقت نماييد: ما در اين خط مي گوييم نوع سند چيست و آدرسي که بايد به اين نوع سند در وب سايت کنسرسيوم جهاني وب World Wide Web Consortium يا W3C ، اشاره کند کدام است.
در حال حاضر دو نوع داکتايپ هستند که استفاده بيشتري دارند Transitional و Strict
همانطوري که گفتم فعلا دنبال تفاوت اين داک تايپ ها نباشيد به آن هم خواهيم رسيد .
تاکيد ميکنم : اولين آيتم صفحه است بدون فاصله. اين يک قانون است.
عناصر HTML :
قبل از اين که عناصر HTML را شرح دهم بايد با مفهوم تگ (tag) آشناشويد. تگ يعني اسمي که ميان اين دو <> قرار گيرد و نام تگ همان متني است که بين اين دو <> قرار مي گيرد
تگ HTML <html>
تگ HEAD <head>
تگ ها مي توانند شامل چند attribute (ويژگي) باشند:
<html xmlns="http://www.w3.org/1999/xhtml " dir="rtl" >
dir يک نام attribute است و rtl ، value (مقدار) آن است که بين " " قرار گرفته است.
design-web-09.gif
تگ ها به دودسته container و empty تقسيم مي شوند.تگ هاي container شامل يک تگ بازشونده و يک تگ بسته شونده هستند به مثال بالا دقت نماييد HTML باز شده و بسته شده است. تگهاي empty متفاوت هستند مانند مثال زير
<img src="images/test.jpg" alt="test" />
<br/>
تگ هاي empty را مي توان به صورت container استفاده کرد ولي در داک تايپ هاي xhtml توصيه شده است که تگ هاي empty را به همان شکل empty بنويسيم
در استفاده از تگ ها بايد دانيد که از چه نوعي هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty بنويسيم دچار error مي شويم.
نگران نباشيد کم کم همه آنها را خواهيد آموخت . بياييد همين الان تو اينترنت عبارت روبرو را جستجو کنيم :
empty tag in html
بسيار عالي شما هم اين نتايج را پيدا کرديد :
• <br/>
• <hr/>
• <meta/>
• <base/>
• <link/>
• <meta/>
• <img/>
• <embed/>
• <area/>
• <input/>
•
اين را گفتم که هيچ وقت دنياي وب و جستجو را فراموش نکنيد.
غير از داک تايپ ها تمامي عناصر صفحه داخل تگ HTML است که شامل 2 بخش مي شود head و body
عنصر HAED
اين يک تگ container است و در بالاي سند قبل از body قرار مي گيرد و شامل اطلاعاتي در باره صفحه است مانند title, meta, css و .....
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
عنصر title :
يک تگ container است که متن وسط آن در عنوان (Title) بالاي صفحه قرار ميگيرد :
به تايتل درسايت بنده توجه کنيد :
design-web-10.gif
موارد استفاده ديگر:
• اين تايتل در زمان مينيمايز کردن پنجره در taskbar windows قابل مشاهده است
• در زمان بوکمارک کردن صفحه با اين عنوان در ليست ما ذخيره مي شود
• براي معرفي آن صفحه است
• براي موتورهاي جستجو هم حائز اهميت مي باشد چيزي که در بهينه سازي وب سايت وب اسکالا هم استفاده شده است
عنصر meta :
متا تگ يک تگ empty است و براي دلايل متفاوتي استفاده مي شوند اطلاعات اضافي که در مرورگر نمايش پيدا نمي کند . به طور مثال براي نام نويسنده ويا حق کپي رايت و يا نوع کاراکتر و ....
Css و javascript هم در head قرار ميگيرند که بنا به نياز استفاده ميشوند البته براي جاوااسکريپت ميتوان يک تفاوتهايي در طراحي هاي حرفه اي قائل شد. به طور مثال سورسي که در طراحي سايت فوق استفاده شده است را مشاهده نماييد. جاوا اسکريپت در پايين صفحه درج شده است.
عناصر body :
هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد: تيترها، پاراگراف ها, تصاوير و .......
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: shabnam