آموزش طراحی وب با زبان ساده بخش اول xhtml

[sr.majid]

بسم الله الرحمن الرحیم
سلام خدمت دوستان عزیز بنده قصد دارم آموزش طراحی وب رو از ابتدا تا جائی که دانشم اجازه بده با زبانی ساده آموزش بدم قبل از شروع کار یه سری مقدمه باید بگم من خودم تا حالا یک بار هم نشده تو عمرم مقدمه یک کتاب رو خونده باشم همیشه این سئوال برام مطرح بود که نویسنده ها مقدمه رو واسه کی مینویسن چون هیشکی نمیخونه حالا که خودم اومد شروع کنم دیدم شتریه که باید در خونه هر کسی بخوابه ، سعی میکنم زیاد از این شاخه به اون شاخه نپرم تا باعث سردرگمی نشه
برای اینکه تاپیک منحرف نشه یک تاپیک دیگه به اسم http://www.webhostingtalk.ir/f151/44639/#post409004 زده شده که همه سئوال هاتون ، نظراتتون و ... رو میتونید در اون مطرح کنید بخاطر اینکه این تاپیک شلوغ نشه چرا که اگر همینجا بپرسید و و در آخر پاک سازی بشه شاید همون سئوالی که برای شما پیش اومده ممکن هست که برای دیگری هم پیش بیاد و بعد از پاک سازی دیگه وجود نداره فقط دوستان اگر پرسشی دارن همگام با مطالب باشه و نه جلوتر که باعث سردرگمی دیگر دوستان نشه

انواع ورژن های html

1)
html0.0 : در حقیقت جنبه تجاری نداره و بیشتر برای آزمایش مرورگرها نسبت به زبان تازه تاسیس شده مورد استفاده قرار گرفت (1994)
2)
html2.0 : در این ورژن تنها می توانستند وب سایتهائی رو طراحی کنند که فقط در داخل آنها متن بوده است text-base 1995
3)
html3.2 : این ورژن به عنوان بزرگترین ورژن html تلقی می شود چرا که در آن طراحان میتوانستند از عکس ، صدا و تصویر در طراحی خود استفاده نمایند اصطلاحاً به صدا و تصویر تحت وب java applet گفته میشود در این ورژن بود که طراح می توانست از یک تکنیک طراحی برای صفحات وب خود استفاده نمایند ، در این ورژن روش طراحی table معرفی شد
table چیست؟قرار گرفتن اجزاءیک سایت در جای مناسب
4)
html4.0 و html4.01 : در این ورژن قابلیت های Table بهبود پیدا کرد و همچنین قابلیت (internationalization) جهانی سازی به صفحات وب اضافه شد ، یعنی میتوان با زبان های مختلف جهان طراحی کرد مانند زبان فارسی
5)
xhtml1.0 => extensible hypertext markup language => html4.01+xml
یعنی وقتی xhtml رو میخونید هم xml هم html رو میخونید (زبانی که در این دوره آموزش داده میشه اون هم به این دلیل هست رسمی ترین ورژن هست و تمام مرورگرها ساپورتش می کنند یکی از چالش های مهم یک طراح این است که تمام مرورگرها طراحی اون رو ساپورت کنند
6)
html5.0 : ورژن جدیدی هست که به وجود آمده که استاندارد نیست به این دلیل که هنوز تمام مرورگر ها ساپورتش نمیکنن و قابلیت های جدیدش رو ساپورت نمیکنن به اصطلاح استفاده ازش هنوز زوده

---------- Post added at 11:16 PM ---------- Previous post was at 10:37 PM ----------

تنها نرم افزاری که در این دوره برای طراحی صفحات وب مورد استفاده قرار میگیره notepad هست ، از دوستان هم خواهش میشه فقط از همین نرم افزار استفاده کنن تا این زبان رو اصولی یاد بگیرن در دوره بعدی که آموزش css هست اون رو با نرم افزار Adobe Dreamweaver CS5 آموزش میدم و کار با اون نرم افزار رو هم یاد خواهید گرفت

تعریف وب سایت : به مجموعه صفحات وبی گفته میشود که از عنصر های مختلف تشکیل شده باشه web page , image , scripte , video , sound و غیره
مجموعه یک وب سایت باید در فولدر ویژه قرار بگیره که نامش rootfolder هست که تمام آبجکت های یک وب سایت در داخل اون قرار میگیره (برای متمرکز کردن فایل های یک وب سایت)

قوانین نام گذاری فایل ها در صفحات وب:
1) هرگز از گذاشتن space و special character در نام گذاری استفاده نشه ولی میشه برای فاصله داخل کلمات از underline و underscore استفاده کنید
2)از دادن نام های فارسی جداً خودداری کنید
3)نام مورد نظر نباید بیش از 255 کارکتر باشه

نکته:اگر بخواهیم زمانی داخل صفحه وب فارسی بنویسیم درست نشون داده نمیشه و باید encoding آن رو utf-8 بذارید (فقط تا زمانی که از notepad استفاده میکنیم)

مرورگر ها کد ها را تفسیر میکنند و به ما نشان میدن ، tag ها پارامتر اصلی برای رسیدن به آن هدف طراحی هستن
تگ ها با این علامت > شروع میشوند که اسمش opening angel braket گفته میشه و با علامت < بسته میشوند که به آن closing angel braket گفته میشه = > <tag>

چند نمونه تگ:
<p> تگ پاراگراف
<img> تگ عکس

انواع تگ ها :
تگ ها به دو دسته تقسیم میشوند
1 container 2 empty
کانتینر به تگ هائی گفته میشه که علاوه بر داشتن تگ باز (opening tag) تگ بسته (closing tag) هم دارند کلوزینگ تگ دقیقاً مانند اپنینگ تگ هست به همرا یک / اضافه یعنی

<opening tag>object</closing tag>

مثال:

<b>object</b>

امپتی به تگ هائی گفته میشه که بر خلاف کانتینر ها دارا تگ کلوزینگ تگ نیستن و فقط اوپنینگ تگ دارن

<object>

مثال :

<img>

نکته ائی که باید در نظر بگیرید تفاوت زبان html و xhtml است هر دوی این زبان هابرای طراحی وب هستن و تفاوت چندانی با هم ندارن البته درسته بعضی از تگ ها حذف و یا اضافه شدن ولی تفاوت اصلی این دو زبان در این هست که ما در زبان xhtml به هیچ وجه تگ های empty نداریم و همه تگ های باید بسته بشوند گذاشتن یک / در آخر تگ های empty باعث بسته شدن تگ های xhtml میشه

مثال:

<img />