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

[Milad-Ku]

مقدمه : آشنایی با مفاهیم و اصطلاحات پایه ای


آشنایی با HTML-XHTML
​HTML مخفف Hyper Text Markup Language است. یعنی، زبان نشانه گذاری فرا متنی.
HTML در خلال دهه 90 میلادی شکوفا شد و تابحال چندین نسخه مختلف از HTML معرفی شده است که هر نسخه ضعف های نسخه قبلی را برطرف یا بهبود بخشیده و همچنین امکانات جدیدی را به خود اضافه کرده است. در حال حاضر آخرین نسخه از HTML نسخه 5 است که در تاریخ 22 ژانویه 2008 معرفی شد. که بهترین و محبوب ترین نسخه ی این زبان است.
در این آموزش HTML5 را بر اساس استانداردهای XHTML خواهید آموخت.

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


سخت افزار و نرم افزارهای مورد نیاز
خوشبختانه HTML لزوما نیازی به سخت افزار و یا نرم افزارهای خاصی ندارد و شما می توانید با حداقل مشخصات سخت افزاری و همچنین به وسیله برنامه notepad ویندوز، کدنویسی را شروع کنید.!
اما بسیاری بخاطر امکانات و گرافیک بهتر، از نرم افزارهایی نظیر ++notepad و Dreamwaver استفاده می کنند. پیشنهاد بنده برای شروع آموزش استفاده از برنامه نوت پد ویندوز یا نرم افزار ++notepad است.

+نرم افزار مورد نظر خود را باز کنید و ادامه آموزش را دنبال کنید.

مفاهیم و اصطلاحات پایه ای
این زبان مبتنی بر دو نوع داده است :

1. محتویات : ساده ترین و البته مهم ترین نوع داده در صفحات وب، content یا همان محتویات است. که معمولا شامل مطالب نوشتاری (متن - text) و گرافیک ها میشه. که البته در مطالب پیش رو بیشتر به نحوه کار کردن روی محتویات خواهیم پرداخت.
2. دستورالعمل ها (برچسب ها - Tags) : این بخش حساس ترین و بحث اصلی در زبان کد نویسی است. شما با استفاده از دستورالعمل ها که در HTML معمولا به نام Tag یا همان برچسب شناخته می شود، به محتویات سایت، فرمت و ساختار می دهید. که در این بخش و بخش های پیش رو کار اصلی، قالب بندی و کار کردن روی محتویات با استفاده از دستورالعمل ها (برچسب ها - Tags) صورت میگیرد.

برچسب ها دو نوع هستند :

1. یکسری از برچسب ها مشخصا روی بخش خاصی از محتویات، ساختار یا عملی را اعمال میکنند. به عنوان مثال می توان، فرمت های مختلفی را روی متن ها اعمال کرد نظیر : پر رنگ کردن، زیر خط دار کردن و..... . همچنین می توان به یک بخش از متن لینک داد. که در اینجا مشخصا دستورالعمل از یک جای مشخص تا یک جایی که مد نظر داریم اعمال می شود. هدف این نوع برچسب ها (دستورالعمل ها) اعمال ساختار یا فرمت خاصی روی محتویات است
2. اما برچسب نوع دوم به یک بخش خاص از محتویات وابسته نیست. یعنی مشخصا نیازی به بخشی از محتویات نیست که برچسب ها ساختار خاصی را روی آن اعمال یا آن را تغییر فرمت دهند. به عنوان مثال می توان یک شکست سطر انجام داد یا یکسری کلمات کلیدی به صفحه اضافه کرد و.... .

• برچسب های نوع اول را که حتما باید دو طرف محتویاتی که نیاز به تغییر فرمت یا اعمال ساختار دارند را مشخص کرد، برچسب های دو طرفه (tow sided) می نامند.
• برچسب های نوع دوم که که وابسته به محتویات نیستند و نیازی به مشخص کردن محدوده اعمال دستورالعمل نیست، را برچسب های یک طرفه (one sided) می نامند.

به مثال های زیر توجه کنید :

مثال (1) :

<strong> Milad-Ku </strong>

این برچسب فرمت توپر را بروی کلمه Milad-Ku اعمال میکند و از آنجا که ممکن است پس از این کلمه، کلمات دیگری نیز وجود داشته باشند، نیاز است که کلمه مورد نظر را مشخص کرد. یعنی در یک جا برچسب (دستورالعمل) باز شود و در جایی دیگر نیز بسته شود.

مثال (2) :

<br />

همانطور که میبینید این برچسب هم از لحاظ باز و بسته بودن و هم از لحاظ ساختار با برچسب مثال قبل متفاوت است.
زیرا این برچسب صرفا یک عمل شکست سطر را انجام می دهد. و به محتوا وابسته نیست. در واقع به شما امکان می دهد ادامه متن را از سطر بعدی شروع کنید. و معادل همان Enter در برنامه های واژه پرداز است.

در برچسب های یک طرفه ابتدا یک > باز می شود و سپس دستورالعمل نوشته می شود و پس از آن یک فاصله و بعد تگ را میبندیم. مانند :

<tag />

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

<tag> ... </tag>

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

<a href="http://google.com" target="_blank">Milad-Ku</a>

در دستور فوق پس از برچسب اصلی یعنی a ،که دستورالعمل لینک دهی است، کلمه href قرار دارد که به عنوان خاصیت آدرس لینک را مشخص میکند و مقدار آن پس از یک علامت مساوی (=) در داخل کوتیشن مارک ها یعنی همان علامت (" ") قرار می گیرد. پس از این خاصیت، خاصیت target وجود دارد که مشخص کننده نحوه باز شدن لینک است که در مقدار آن _blank قرار دارد که مشخص میکند لینک در پنجره ای جدید در مرورگر باز شود.

ساختار کلی هر نوع برچسبی همراه با خاصیت و مقدار آن به شکل زیر است :

برای برچسب های دو طرفه :

<tag attribute="value" attriubute2="value2"> content </tag>

برچسب های یک طرفه :

<tag attribute="value" attriubute2="value2" />

در تمام برچسب ها متن نخست در داخل برچسب نشان دهنده دستورالعمل اصلی برچسب و متن های بعدی نشان دهنده خاصیت ها می باشند که در هر خاصیت حداقل یک مقدار وجود دارد.
همچنین برای تعریف خاصیت جدید کافیست پس از هر دستور یا خاصیت یک فاصله (space) بزنیم و خاصیت بعد را بنویسیم. زیرا در برچسب نویسی هیچ دستوری وجود ندارد که بین کلمات آن فاصله وجود داشته باشد. درصورت وجود فاصله کلمات پس از فاصله به عنوان خاصیت آن برچسب تلقی خواهند شد.

ساختار صفحات وب
معمولا هر کدنویسی، قبل از شروع کار، در نرم افزار کدنویسی (نت پد یا....) صفحه را به سه قسمت تقسیم می کند :

1- ابتدا یک برچسب دو طرفه به نام html که مشخص کننده نوع زبان کدنویسی یا برنامه نویسی است. که تمام کدها و برچسب در داخل این برچسب نوشته می شود.

<html>
...
<html>

در مثال فوق سه نقطه (...) نشان دهنده محتویات و برچسب های احتمالی است.

2- سپس قسمت Header که می توان گفت قسمت معنوی سایت است. !
قسمتی که کلمات کلیدی و توضیحات و عنوان سایت و... در این قسمت تعریف می شود. و معمولا چیزی از این قسمت در بدنه سایت ظاهر نمی شود. همچنین این بخش در داخل برچسب دو طرفه html نوشته می شود. زیرا این برچسب جزو زبان HTML است و طبیعی است که زیر مجموعه قسمت <html>….</html> باشد.

<html>

<head>
...
</head>

</html>

در مثال فوق سه نقطه (...) نشان دهنده محتویات و برچسب های احتمالی است.

3- و نهایتا قسمت Body یا بدنه که اکثرا برچسب و تمام ساختاربندی های محتویات در این بخش انجام می شود.
این بخش پس از قسمت Header قرار دارد و زیر مجموعه برچسب <html>….</html> است یعنی بین برچسب آغازین و پایانی HTML نوشته می شود.
در نهایت خروجی مورد نظر از این بخش بندی به شکل زیر است :

<html>
 
<head>
...
</head>
 
<body>
...
</body>
 
</html>

در مثال فوق سه نقطه (...) نشان دهنده محتویات و برچسب های احتمالی است.

نحوه خروجی گرفتن از کدها
برای خروجی گرفتن از کدها، از طریق منو روی گزینه فایل و سپس روی گزینه save کلیک کنید.
حال در بخش file name اسم دلخواه فایل را نوشته و سپس پسوند فایل را نوشته که باید .html باشد.
در قسمت encoding نیز برای اینکه متن های فارسی هم پشتیبانی شوند گزینه utf-8 را انتخاب کنید.
مانند تصویر زیر :

تمرین عملی
طبق آموزش بالا، کدهای زیر را در برنامه notepad تایپ کرده و سپس از آن خروجی html بگیرید. (در بالا نحوه خروجی گرفتن از کدها توضیح داده شده است)

<html>
<head>    <title>test page</title></head>
<body>    <strong>This is a test page</strong></body>
</html>

حال فایلی را که ذخیره کرده اید را باز کنید.
باید نتیجه ای که مرورگر خود مشاهده میکنید مثل تصویر زیر باشد :