آموزش جامع html-xhtml

[Rozhin Karimi]

با سلام
دوستان محترم همونطوری که قبلا به بعضی از دوستان قول دادم و از عنوان مشخصه در این تاپیک آموزش html-xhtml که بیشتر برای آماده سازی جهت طراحی وب سایت طبق استانداردها رو دارم که با یاری همکاران برای اوایل سال آینده (94) آموزشی تصویری در کنار آموزش مکتوب حاضر میشه که دقیقا با زمانی مصادف میشه که ما آموزشهای لازم جهت طراحی سایت رو در اینجا تکمیل کرده باشیم.
اما مشخصا باید آموزش ها با زبان ساده بیان بشه و همچنین قدم به قدم پیش بریم
قبل از آموزش و یادگیری کدها باید مفاهیمی که از اون مطالب باید درک بشه الزاما گفته بشه و همچنین این آموزش یک مزیت خیلی بزرگ البته از نظر شخصی خودم داره روی زبان انگلیسی و مخفف عبارتها بصورت جدی و مکمل کار میشه.
اما چندتا نکته در مورد تاپیک :
-ما هر شب رو یک بخش از آموزش میزاریم
-در بین آموزشهای هر بخش دوستان میتونن سوالاتشون رو بپرسن و وقتی که زمان رسیدن بخش بعد رسید دوستان باید لطف کنند سوالاتشون رو پاک کنند چون در این بین پاسخها کاملا داده میشن
-دوستانی که میخوان روی پروژه های کدنویسیشون که میخوان کد بشن آموزش ببین آموزش اختصاصیش در این تاپیک نمیگنجه و فقط روی یک پروژه طراحی کدنویسی تمرکز میشه نه مال هر کدوم از کاربران عزیز و آموزش بصورت تخصصی رو چندین قالب واسه کدنویسی آموزش چت و زنده میخواد که هزینه داره و در اینجا نمیگنجه.
-دوستان تا قبل از شروع شدن آموزشها که از فردا شب شروع میشه مواردی که نیازه بگن رو بگید تا مدنظر باشه و بعدش فردا شب تا ساعت 21 پستهاشون رو حذف کنند دوباره
اما باز هم یه توضیح میدم در مورد سوالات کاربرها اگر سوالی داشتین تا روز بعد قبل از ساعت 21 میتونن در تاپیک بگن هم خودم میتونم پاسخ بدم و هم همکاران عزیز و بعد هم لطفا راس ساعت 21 پست هاتون رو پاک کنید.

پیشاپیش تشکر از همه همکارانی که همکاری میکنند و با پیشنهادتشون فضای انجمن رو یه طراوت میدن.
مواردی که نیازه بگید که در پست اصلی بگم یا اصلاح کنم

دوستان 28 بهمن 1393 ساعت 20 یا نهایتا 24 اولین آموزش قرار داده شده و هر شب بصورت منظم به همین رواله

لطفا دوستان پستها رو پاک کنید تا آموزش رو ادامه بدم

[sor]

بسیار عالی هست
منتظر ما

[taksis]

خانوم اجازه؟:69:

[nexinel]

صرفا به عنوان یک پیشنهاد عرض می کنم... با توجه به اینکه دوره html 4.0 و xhtml 1.0 یا همون html 4.1 سر اومده و تقریبا از رده خارج شده اند، بهتر است تمرکز خود را تماما بر روی نسخه جدید یعنی html 5 قرار دهید و بصورت اصولی و استاندارد اقدام به آموزش آن بنمایید و در این حین تمام موارد افزوده شده، تغییر کرده و یا حذف شده را نیز مد نظر قرار دهید.

موفق باشید

[mamalak]

با سلام

امید واریم مثله بعضی از تایپیک ها نباشه بعد از یک هفته دیگه بررسی نشه انشالله آموزش ها تا پایان ادامه داشته باشه

موفق باشید

[Rozhin Karimi]

بخش اول آموزش

شرح مفاهیم زبان های HTML-XHTML

HTML چیست و چه کاربردی دارد؟ به زبان ساده، یک صفحه وب با استفاده از چند زبان کدنویسی ساخته شده است که محور تمامی این زبان های کدنویسی و برنامه نویسی، زبانی به اسم HTML است. خود این زبان که به اسم HTML شناخته شده است مخفف کلمه Hyper Text Markup Language است که معادل فارسی آن "زبان علامت گذاری فرامتنی" است. حال مقداری بیشتر در مورد مفهوم این کلمه می پردازیم :

Hypertext : این کلمه نشانه فرامتنی بودن این زبان است که مشخصا به پیوندها (لینکها) و یا به بیان مشخص تر به ابرپیوندها اشاره دارد. شما اگر وارد یک صفحه وب شده باشید و اساس آن HTML باشد، متوجه خواهید شد که این صفحه علاوه بر محتویات، یکسری پیوندها (لینکها) شما را با دنیای بسیار وسیع خارج از محدوده این سایت میبرد. که علت نام گذاری "فرامتنی" وجود همین خاصیت میباشد.
Markup : معنای علامت گذاری میدهید که بصورت جزئی تر علامت گذاری با برچسب زدن متن ایجاد میشود برچسب گذاری در زبان HTML بسیار پرکاربرد است. کلمه برچسب گذاری را نیز تگ (Tag) نیز میگویند که برای ورود به دنیای HTML و کدنویسی بسیار فراوان با این کلمه (تگ) سروکار خواهیم داشت.
Language : نشان دهنده این است که زبان کدنویسی HTML به عنوان یک زبان برنامه نویسی در نظر گرفته می شود.

XHTML چیست و چه کاربردهایی دارد؟ زمانی که نسخه های زبان HTML شروع به پیشرفت کرد و به نسخه 4.01 رسید، سازندگان و توسعه دهندگان از یک ابتکار و خلاقیت جالب استفاده کردن و زبان HTML را با زبان xml ترکیب کردند و زبان XHTML اینگونه شکل گرفت، اما تفاوت زیادی با HTML ندارد و تفاوت عمده بر روی قوانین تگ نویسی تمرکز دارد. پس می توان گفت زبان XHTML همان زبان HTML است اما با مقدار ناچیزی تفاوت در قوانین تگ نویسی است. در این آموزش مبنای آموزش بر حسب زبان XHTML است زیرا کاربرد این زبان استاندارد بودن آن است و نسبتا با تمامی مرورگرها سازگار است.
اما تفاوت ها را در یک لیست آماده کرده ایم که جزئیات آنها را در این لیست شرح نداده زیرا در حین آموزش بر اساس همین قوانین آموزش داده می شود و نیازی به شرح دادن جزئیات بیشتر در این لیست نیست. تمایزهای زبان HTML و XHTML بصورت زیر است :




در XHTML بستن تمامی تگ ها الزامی است.
در XHTML باید تقدم و تاخر باز و بسته شدن تگ ها رعایت شود.
در XHTML نام تگ ها و خاصیت های آنها باید با حروف کوچک نوشته شود.
فایل XHTML باید حاوی یک عنصر ریشه <html> باشد.
کلیه تصاویر باید دارای توضیح باشند.


تمامی آموزشهای HTML در این آموزش براساس استانداردهای XHTML است.

اما براش شروع آموزش به چه پیش نیازهایی احتیاج است ؟
حداقل سیستم مورد نیاز :
می توانیم با برنامه notepad ویندوز، کدنویسی را شروع کنیم. در آخر برای ذخیره سازی سند به آخر اسم فایل .html می افزاییم. و همچنین برای پشتیبانی از زبان فارسی در صفحه وب قسمت encoding را برابر utf-8 قرار می دهیم.
در مورد قدرت سیستم هم نیازی به توضیح نیست چون تقریبا با تمام سیستم ها قابل اجرا است اما برای اجرای درست نتایج کدنویسی چون محور آموزش ما بر اساس HTML 5 است بهتر است از نسخه 9 اینترنت اکسپلورر استفاده کنیم که تمامی تگ ها را پشتیبانی کند. اما در حین آموزش نحوه کدنویسی استاندارد برای تمامی مرورگرها آموزش داده می شود.

در بالا توضیح داده شد که مهم ترین و پایه ای ترین مسئله در HTML تگ ها است. و برای شروع آموزش باید پایه ای ترین مسئله یعنی تگ ها شروع کنیم.
آشنایی با ساختار تگ ها :
قبل از آشنا شدن با ساختار تگ باید با مفهوم آن آشنا شده و علت وجود آن را درک کرد.!
ما اگر بخواهیم که محتوای درون یک سایت را درون یک قالب نمایش دهیم و در یک چهارچوب از قوانین خاص باشد، طبیعتا باید یکسری مفاهیم یا دستورات برای محتویات و قالب نوشته شود. حال برای اینکه این محتویات و متن با دستورات قاطی نشوند، دستورات را نیز درون یک فرمت بندی بنام تگ مینویسیم.
اما حال ساختار تگ ها : هر تگ بیانگر یک عمل است و هر عمل دارای یکسری مخلفات و خاصیت ها است. این خاصیت ها خود باید مقداری داشته باشند. شاید اندکی سردرگم شده باشید ! اما تعجب نکنید چون برای شروع عادی است.
ساختار کلی به این صورت است :

<tag attribute="value">
کلمه tag مشخصا بیانگر نوع عمل، و کلمه attribute نشانگر خاصیتی است که به تگ اضافه می شود و بیشتر از ویژگی های تگ استفاده می کند. و کلمه value مشخص کننده مقداری است که برای هر خاصیت قائل می شویم.!
با یک مثال شروع میکنیم :
برای قرار دادن یک عکس در صفحه وب از تگ img استفاده میکنیم و فراخواندن آدرس عکس را با خاصیت src و همچنین مقدار این خاصیت عبارت است از آدرس اینترنتی عکس. که بصورت زیر نوشته می شود :

<img src="http://www.exaple.com/image.jpg" />
مثال بالا مشخص میکنید یک تصویر با آدرس اینترنتی ذکر شده در صفحه وب قرار گیرد. این تگ دارای خاصیت ها و مقدارهای بیشتری است که فعلا موضوع بحث ما نیستند.!

آیا تگ ها کلا به همین صورت نوشته می شوند و یک نوع هستند؟ خیر. دو نوع تگ وجود دارد یکی تگ یک طرفه که بیانگر دستور بدون اشاره متمرکز به محتویات است مانند مثال بالا، که خود یا دستوری مجزا و یا محتوایی مجزا است. و تگ دو طرفه، که می خواهد به متن و یا محتویات یک فرمت داده شود و مشخصا تمرکز اصلی بر روی محتویات دیگر است. و استقلال این نوع تگ به محتویات دیگر وابسته است.
به عنوان مثال : شما اگر بخواهید یک متن را در یک پاراگراف چپ چین نوشته و دو خط پایین تر از آن پاراگراف نیز یک متن در قالب پاراگراف دیگر بنویسید باید بصورت زیر عمل کنید :

<p align="left">This a test paragraph 1</p>
<br /><br />
<p align="left">This a test paragraph 2</p>
در مثال بالا دو تفاوت میان دو تگ p و br وجود دارد تگ p به محتویات اشاره دارد و در اصل برای محتویات ساخته شده است، پس این محتوایتی که فرمت داده می شود، باید یک محدوده داشته باشد. برای شروع فرمت گذاری از خود تگ آغاز میکنیم که تگ آغازی گفته می شود و برای تمام کردن محدوده فرمت گذاری روی متن از تگ پایانی استفاده می شود که ساختار کلی تگ پایانی، به این صورت نوشته می شود :
</tag>
اما تگ br مشخصا به محتویات و متن اشاره ای ندارد و صرفا یک دستور است که یک سطر شکسته شود و به خط بعد برود. این نوع تگ ها را تگ یک طرفه گویند زیرا نیاز به تگ پایانی ندارد و محدوده ای جهت مشخص شدن وجود ندارد. و ساختار کلی بصورت مقابل نشان داده می شود :
<tag attribute="value" />

[Rozhin Karimi]

دوستان خواهشا پست هاتون رو پاک کنید که آموزش رو ادامه بدم

[nasrsd98]

متاسفام واقعا یکی هم داره بدون چشم داشتی میخاد کاری کنه از کردش پشیمونش میکنن عذر میخام از استاتر خواهش میکنم ادامه بدید ب نظرات اسپم و ترول توجهی نمیکنیم