آموزش HTML بخش ۱
- صفحات تولید شده با زبان HTML با پسوند .htm یا .html ذخیره می‌شوند.
- در این زبان کوچک یا بزرگ بودن حروف مهم نمی‌باشد.
- کلید‌هایی که در این زبان مورد استفاده قرار می‌گیرد، تگ نامیده شده و با <> مشخص می‌شود.
- تگ‌ها به سه دستهٔ کلی تقسیم می‌شوند:
- تگ‌هایی مانند که می‌تواند در هر کجای صفحه به صورت انفرادی مورد استفاده قرار می‌گیرد.
- . تگ‌هایی که ابتدا و انتهای مشخصی دارند. مانند تگ که برای نمایش نام صفحه مورد استفاده قرار می‌گیرد. در این نوع تگ‌ها کلمات یا عناصری که قرار است در صفحه به نمایش در آید، بینشان نوشته می‌شود.
- دستهٔ سوم تگ‌هایی هستند که علاوه بر مشخص کردن ابتدا و انتهایشان، باید پارامتر‌هایی برایشان تعیین شود. مانند:. در رابطه با این تگ در ادامه بیشتر توضیح خواهم داد.
برای شروع کار، سعی می‌کنیم که یک صفحهٔ سادهٔ html ایجاد کنیم. پس ویرایشگر خود را باز کنید و با ادامهٔ مطلب همراه باشید.
همانطور که در ابتدای بخش گفتم، یک صفحهٔ HTML متشکل از تگ‌های متفاوتی است. برای شروع می‌خواهیم ابتدا و انتهای تگ‌هایمان را تعیین کنیم:
<html>
.
.
.
</html>
این تگ‌ها محدودهٔ کد‌های یک صفحهٔ HTML را تعیین می‌کنند. به طور کلی یک صفحهٔ HTML از دو بخشه Head و Body تشکیل شده است. بخش Head مربوط به ابزار‌ها و شناسنامهٔ صفحهٔ وب ما می‌باشد. عموما تگ‌های استفاده شده در این بخش در صفحه نمایش داده نمی‌شود. از این تگ برای تعیین نام صفحه، کلمات کلیدی صفحه و یا بار گذاری ابزار‌های Javascript و یا دیگر ابزار‌ها مورد استفاده در صفحات HTML استفاده می‌شود. حال این بخش را به صفحهٔ ساخته شده‌مان اضافه می‌کنیم.
<html>
<head>
.
.
</head>
,
,
</html>
همانطور که می‌بینید برای خوانایی بیشتر سعی می‌شود در نوشتن کد‌ها به صورت والد و فرزند، تو رفتگی‌هایی ایجاد شود. این کار کاملاً سلیقه‌ایست. حال به ادامهٔ کار بر می‌گردیم. می‌خواهیم برای صفحه‌ای که داریم می‌سازیم، نامی تعیین کنیم که در میلهٔ نام مرورگر نمایش داده شود. برای این کار از تگبه صورت زیر استفاده می‌کنیم:
<html>
<head>
<title>First HTML!</title>
</head>
</html>
نتیجهٔ کار در مرورگر به صورت زیر نمایش داده می‌شود:
حالا می‌خواهیم، بخش دوم صفحه، یعنی بدنهٔ آن را تعیین کنیم. برای این کار به صورت زیر عمل می‌کنیم:
<html>
<head>
<title>First HTML!</title>
</head>
<body>
Hello World
</body>
</html>
همانطور که می‌بینید تگ Body به سند HTMLمان افزوده شد. بر اساس گفته‌های گذشتهٔ من می‌دانیم که هر عنصر یا نوشته‌ای که بین این تگ قرار گیرد، در صفحهٔ نهایی نمایش داده می‌شود. ما در اینجا پیغام Hello World را چاپ می‌کنیم.
همچنین باید اضافه کنم که تگ Body از نوع سوم تگ‌هایی است که در ابتدا معرفی کردم. یعنی می‌توان به پارامتر‌های آن مقدار دهی کرد. البته، در این کار اجباری نیست، ولی برای شروع کار بد نیست که این کار را انجام دهیم.
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
Hello World
</body>
</html>
نتیجهٔ کار به صورت زیر است:
در اینجا ما به دو پارامتر text و bgcolor مقدار دهی کردیم. پارامتر text که رنگ زرد را در این کد به آن افزودیم، تعیین کنند رنگ متن موجود در تگ body می‌باشد. و تگ bgcolor نیز، که با رنگ قهوه‌ای تعیین شده، پس‌زمینه را برایمان رنگ‌آمیزی می‌کند! همچنین می‌توان برای تعیین رنگ در صفحات HTML از کد هگز به صورت #ff88ff نیز استفاده کرد. خوبی استفاده از این نوع کد این است که انتخاب بیشتری برای تعیین نوع رنگ‌ها در دستمان است.
نکته: لازم به ذکر است که برای دیدن نتیجهٔ کار، متن نوشته شده در ویرایشگر را با یک نام دلخواه برای مثال به صورت: test۱. html ذخیره کنید و با یک مرورگر نظیر Firefox فایل ساخته شده را باز کنید.
بخش اول آموزش در اینجا به پایان رسید. منتظر ادامه آن باشید.