آموزش طراحی سایت
نحوه ذخیره فایل در Notepad++ :
ابتدا نرم افزار notpad++ را باز میکنیم از طریق آدرس روبه رو-->> ++start-->allprograms-->Notpad++
نحوه ایجاد یک صفحه وب ساده:
برای ساخت یک صفحه اینترنتی روی تب File در نود پد++ کلیک کرده و بعد در زیر منو گزینه Save As را انتخاب نموده و در کادری که باز میشود مانند تصویر زیر در قسمت File name : (یک نام برای سند مشخص نموده) سپس بعد از نام .html یا .htm (پسوند قدیمی) تایپ می کنیم تا فرمت فایل ما مشخص شود ، سپس مسیر ذخیره آن را مشخص میکنیم و بر روی گزینه Save کلیک میکنیم .
حالا شما یک صفحه اینترنتی دارید که خودتان ساختید?
برای مشاهده،به مسیری که فایلمان را ذخیره کردیم می رویم و سپس روی فایل Index.html که ساخته ایم کلیک میکنیم همانطور که در عکس پایین و مرورگرتون مشاهده میکنید یک صفحه سفید است.
ساختار تگ ها در HTML یا اسکلت بندی :
محتویات htmlبرحسب مکانیزمی به نام تگ نوشته میشود . تگ به زبان فارسی به معنایه برچسب میباشد وما باید دستورات خود را داخل تگ بنویسیم .
ساختار تگها
در ابتدا باید بدانید Html یک زبان نشانه گذاری است که به تنهایی برای ساخت صفحات ثابت و بدون پویایی میباشد که ساختار آن از طریق نشانه گذاری مشخص میشود
یک تگ htmlتشکیل شده ازیک علامت کوچکتر> ، ویک علامت بزرگ تر< ، می باشد مثلا برای ساخت پاراگراف تگی داریم به نام <p> یا برای نمایش عکس در صفحه وب مان تگی به نام <img> داریم .
اما،ساختار کلی یک فایل html از آغاز به این شکل میباشد که مرورگر برای این که صفحه شمارا اجرا کنه انتظار داره که یکسری تگها یا المنتهای بخصوصی را ببیند اولین تگی که انتظار دیدن آن را دارد تگی به نام<html> است اگر طراحی سایت را ساخت یک خونه در نظر بگیریم با در نظر گرفتن این که زمینو داریم... تگ ها همان ابزار ساخت ساختمانمان است. که اولین کار در ساختمان سازی پیکر بندی هست.برای پیکر بندی نیاز به اسکلت سازی داریم.اسکلت همه وب سایت ها به صورت زیر تشکیل میشود.
<html>
<head></head>
<body>
</body>
</html>
تگ HTML برای شروع کار هست.با هدر به کار فرما یا مسئول اجراییمان که همان مرورگر میباشد میگوییم که از چه مصالحی میخواهیم استفاده کنیم .
تگی بعدی با نام <body>این تگ قسمت بدنه را تشکیل می دهد.بعد از استخوان بندی هرچیزی که داریم(متن،عکس،لینک ها)را یا به عبارتی هرچیزی را که کاربر بعد از باز کردن صفحه وب ما میتواند ببیند در آن ساخته میشود.
کنسرسیوم جهانی وب یا مرجع فقه های وب w3c قوانین حکم فرما بر وب را مشخص میکنندبرای تطابق بیشتر مرورگرهابا نسخه های مختلف html، اواخر سال1999 و اوایل سال2000 ، فقهای وب ، اومدن 7 تا قانون گذاشتن که این 7 قانون xhtmlشد .
اولین قانون : تگها در htmlنیازدارند که بسته شوند یعنی باید بعد از تگ شروع و محتوایش، تگ پایانی را اعلام کنیم.
به استفاده کردن از تگ شروع ومحتوایه درونش و درآخربستن تگ در کنار هم یک المنت میگوند .
مثال:
با المنت زیر مشخص میکنیم که میخواهیم htmlبنویسیم :
<html> //تگ شروع
</html> //تگ پایانی
تگ head :
از این تگ درست بعد از تگ باز <html>استفاده میشود این تگ کارهایی برای مرورگرانجام میدهد و بیشتر آن از دید کاربر به مخفی است ولی عنوان سایت که در این قسمت مشخص میشود که مشخص کردن یک عنوان مناسب برای سایت در واقعیت برمحبوبیت سایت شما می افزاید . برای عنوان صفحه ازتگ <title> استفاده میشود .
اچ تی ام ال
تگ body :
از این تگ برای بدنه سایت استفاده میشود هرچیزی که میخواهید به کاربر نمایش داده شود باید بین این المنت بنویسید این محتویات شامل متن ، تصاویر، فایلهای مولتی مدیا ، لینکها و... میباشد. که عناصر متن میتواند شامل سرتیترها (heading) ، پاراگرافها ، لیست ها باشد.
مثال :
<html>
<body>
Hello world!
<p>test my web site</p>
</body>
</html>
با نوشتن تکه کد بالا دربرنامه نودپد ++ وذخیره آن و اجرای آن یک صفحه ی وب با نوشته های زیر مشاهده مینمایید.
Hello world!
test my web site
بهتون تبریک میگم چون اولین برنامه اچ تی ام ال خودتونو نوشتید!:)
