برای این آموزش پیشنهاد میکنم فقط از ساده ترین ابزارها استفاده کنید. به عنوان مثال ، notepad (تحت ویندوز) ، TextEdit (در مک) یا KEdit (تحت KDE) عملکرد خوبی خواهند داشت. پس از درک اصول ، ممکن است بخواهید به ابزارهای پیشرفته تر یا حتی به برنامه های تجاری مانند Style Master ، Dreamweaver یا GoLive بروید. اما برای اولین نكته در مورد CSS شما ، خوب است که بیش از حد، به سمت ویژگی های پیشرفته منحرف نشوید.
از پردازنده وردپرس مانند Microsoft Word یا OpenOffice استفاده نکنید. آنها معمولاً پرونده هایی را ایجاد می کنند که یک مرورگر وب قادر به خواندن آنها نیست. برای HTML و CSS ، ما فایلهای متنی ساده را می خواهیم.
مرحله 1 باز کردن ویرایشگر متن است (notepad ، TextEdit ، KEdit یا هر آنچه مورد علاقه شماست) ، با یک پنجره خالی شروع کنید و موارد زیر را تایپ کنید:
<html>
<head><title> اولین صفحه طراحی شده من </title>
</head>
<<head>>
<! – منوی پیمایش سایت ->
<ul class = “navbar”>
<“<<a href=”index.html”> صفحه اصلی </a>
<li> <a href=”musings.html “> پیمایش </a>
<li> <a href=”town.html”> شهر من </a>
<li> <a href=”links.html“> پیوندها </a>
</ul>
<! – محتوای اصلی ->
<h1> اولین صفحه طراحی شده من <“h1>
به صفحه استایل من خوش آمدید!
<p> فاقد تصاویر است ، اما حداقل style دارد.
و پیوندهایی دارد ، حتی اگر آنها هم نروند
به هر نقطه اي
<p> باید در اینجا متن بیشتري باشد ، اما من هنوز نمی دانم
چه چیزی
<! – صفحه را امضا و تاریخ کنید ، این فقط مودبانه است! ->
<address> ساخته شده در 5 آوریل 2004 <br>
توسط خودم. </address>
</body>
</html>
در حقیقت ، لازم نیست آن را تایپ کنید: می توانید آن را از این صفحه وب در ویرایشگر کپی کرده و بچسبانید.
(اگر از MediaEdit در Mac استفاده می کنید ، فراموش نکنید که با رفتن به منوی Format و انتخاب “ساخت متن ساده” ، به TextEdit بگویید که متن واقعا متن ساده است.)
هشدار! Advanced: خط اول پرونده HTML فوق به مرورگر می گوید نوع HTML این (مرورگر DOCTYPE به معنی DOCument TYPE) است. در این حالت ، نسخه HTML 4.01 است.
کلمات درون <و> تگها خوانده می شوند و همانطور که می بینید ، این سند در برچسب های <html> و </html> موجود است. بین <head> و </head> جایی برای انواع مختلفی از اطلاعات وجود دارد که روی صفحه نمایش داده نمی شود. تاکنون عنوان سند را در بر می گیرد ، اما بعداً به آن می خواهیم برگه سبک CSS را نیز اضافه کنیم.
<body> جایی است که متن واقعی سند می رود. در اصل ، همه چیز در آنجا نمایش داده می شود ، به جز متن داخل <! – و -> که به عنوان نظر برای خودمان ارائه می شود. مرورگر آن را نادیده می گیرد.
از میان برچسب های موجود در مثال ، <ul> لیستی را ارائه می دهد ، “لیست نامحدود” ، یعنی لیستی که در آن موارد شماره گذاری نشده اند. <li> شروع یک “مورد فهرست” است. <p> یک “پاراگراف” است. و <a> “لنگر” است ، و این همان چیزی است که پیوندی را ایجاد می کند.
منبع HTML نشان داده شده در KEdit
ویرایشگر KEdit منبع HTML را نشان می دهد.
هشدار! پیشرفته: اگر می خواهید بدانید که نام ها در <…> چیست ، یک مکان خوب برای شروع کار شروع به کار با HTML است. اما فقط چند کلمه در مورد ساختار صفحه مثال HTML ما.
“ul” لیستی است که در هر مورد یک لینک به لینک وجود دارد. این به عنوان “منوی پیمایش سایت” ما ، که به صفحات دیگر وب سایت (فرضی) ما پیوند می زند ، خدمت می کند. احتمالاً همه صفحات در سایت ما دارای منوی مشابه هستند.
عناصر “h1” و “p” محتوای منحصر به فرد این صفحه را تشکیل می دهند ، در حالی که امضای در پایین (“آدرس”) دوباره در تمام صفحات سایت مشابه خواهد بود.
توجه داشته باشید که من عناصر “li” و “p” را نمی بندم. در HTML (اما نه در XHTML) ، مجاز به حذف برچسب های </li> و </p> است که من در اینجا انجام دادم ، تا خواندن متن کمی ساده شود. اما اگر ترجیح می دهید آنها را اضافه کنید.
فرض کنید که این یک صفحه از یک وب سایت با چندین صفحه مشابه باشد. همانطور که برای صفحات وب فعلی رایج است ، این یک منوی دارد که به صفحات دیگر در سایت فرضی ، برخی از مطالب منحصر به فرد و یک امضا پیوند می زند.
اکنون گزینه “Save As …” را از فهرست File انتخاب کنید ، به پوشه ای بروید که می خواهید آن را تنظیم کنید (دسک تاپ خوب است) و پرونده را به عنوان “mypage.html” ذخیره کنید. ویرایشگر را هنوز ببندید ، ما دوباره به آن احتیاج خواهیم داشت.
(اگر قبل از نسخه 10.4 از TextEdit در Mac OS X استفاده می کنید ، گزینه ای را اضافه نکنید. پسوند .txt را در گفتگوی ذخیره به عنوان اضافه کنید. آن گزینه را انتخاب کنید ، زیرا نام “mypage.html” قبلاً شامل پسوند است. نسخه های جدیدتر TextEdit به طور خودکار متوجه پسوند .html می شوند.)
بعد ، پرونده را در یک مرورگر باز کنید. می توانید این کار را به صورت زیر انجام دهید: پرونده را با مدیر پرونده خود (Windows Explorer ، Finder یا Konqueror) پیدا کنید و روی پرونده “mypage.html” کلیک کنید یا دوبار کلیک کنید. باید در مرورگر وب پیش فرض شما باز شود. (در صورت عدم استفاده ، مرورگر خود را باز کرده و پرونده را به سمت آن بکشید.)
همانطور که مشاهده می کنید ، صفحه به نظر می رسد خسته کننده است …