انجمن سایت کلیدستان


رتبه موضوع:
  • 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش جامع Html برای تازه کاران

آموزش جامع Html برای تازه کاران

#3
[font]بخش سوم[/font]
------------------------------------------------------------------------------
[font]ایجاد سند Html با استفاده از Notepad[/font]

در این فصل ما از Notepad بعنوان ویرایشگر Html استفاده خواهیم کرد.وقتی شما ایجاد اسناد Html را با استفاده از ویرایشگر های متن ساده Plain Text Editor یاد گرفتید، در آن صورت فهم و یادگیری دیگر ویرایشگر ها برای ایجاد اسنادHtml برای شما بسیار آسان خواهد بود.
در Taskbar ویندوز بر روی دکمه Start کلیک کنید و سپس All programs/Accessories/Notepad را انتخاب کنید. این کار موجب خواهد شد که نرم افزار Notepad باز شده و یک سند متنی جدید با عنوان Untitled را ایجاد کنید.
[font]نوشتن یک سند HTML جدید[/font]
برای نوشتن یک سند Html به طریق زیر عمل کنید:
1- نرم افزار Notepad را باز کنید تا یک سند متنی بدون عنوان (Untitled) باز شود.
2- اطلاعات مربوط به ورژن را تایپ کنید. بطور مثال:کد:
کد پی‌اچ‌پی:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Translational// En"
3-تگ های Html را تایپ کنید.کد:
کد پی‌اچ‌پی:
<HTML></HTML
4- در نقطه میانی دو تگ شروع و خاتمه HTML قرار گیرید و دوبار کلید ENTER را فشار دهید تا یک خط جدید وارد شود.
5- در خط جدید تگ های HEAD را وارد کنید.کد:
کد پی‌اچ‌پی:
<HEAD></HEAD
6-در نقطه میانی دو تگ شروع و خاتمه HEAD قرار گیرید و دوبار کلید ENTER را فشار دهید تا یک خط جدید وارد شود.
7- در خط جدید تگ های TITLE را وارد کنید.کد:
کد پی‌اچ‌پی:
<TITLE></TITLE
8- در نقطه پایانی تگ های HEAD قرار گیرید و کلید ENTER را فشار دهید تا یک خط جدید وارد شود.
9- در خط جدید تگ های BODY را وارد کنید.کد:
کد پی‌اچ‌پی:
<BODY></BODY
در پایان سند HTML شما به صورت کد زیر خواهد بود.کد:
کد پی‌اچ‌پی:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Translational// En">
<
HTML>
<
HEAD>
<
TITLE></TITLE>
</
HEAD>
<
BODY></BODY>
</
HTML
نکته:شما می توانید این سند HTML پایه را ذخیره کنید و سپس هر گاه بخواهید که یک سند HTML جدید ایجاد کنید از آن استفاده کنید.
[font]طریقه اضافه کردن یک عنوان صفحه (Page Title)[/font]
این عقیده خوبی است که هر صفحه بهتر است دارای عنوان باشد. عنوان صفحه باید توصیف کننده محتوای صفحه باشد. این عنوان در نوار عنوان مرورگر وب ظاهر خواهد شد.
برای وارد کردن عنوان صفحه به طریق زیر عمل کنید.
1-در نقطه میانی دو تگ TITLE قرار گیرید.
2-عنوان مورد نظر خود را برای صفحه وارد نمایید.کد:
کد پی‌اچ‌پی:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Translational// En">
<
HTML>
<
HEAD>
<
TITLE>Welcome</TITLE>
</
HEAD>
<
BODY></BODY>
</
HTML
[font]ذخیره سازی سند Html[/font]
سندی که در قسمتهای قبل نوشتیم یک فایل در قالب متن بود. برای ایجاد سند Html، شما نیاز دارید که آن را با پسوند .htm و یا .html ذخیره کنید. زمانیکه آن سند با یکی از پسوند های Html ذخیره شد، مرورگر وب فایل متنی را به عنوان یک سند Html شناخته و سپس کد نوشته شده را پردازش کرده و صفحه وب مورد نظر را نمایش خواهد داد.
برای ذخیره کردن سند Html به طریق زیر عمل کنید:
1-از منوی File گزینه Save as را انتخاب کرده تا کادر محاوره ای Save as ظاهر شود.
2- از منوی Save as type ، گزینه All File را برگزینید.
3- از منوی Encoding گزینه UTF-8 را برگزینید زیرا این Encoding تنها Encoding ی است که از فارسی پشتیبانی می کند.
4- در کادر مقابل File name نامی برای سند Html خود وارد نموده و پسوند.htm و یا .html را به آن بدهید ( به آخر آن اضافه کنید)
5-گزینه Save را کلیک کنید.
[font]اضافه کرده Meta Data[/font]
شما می توانید اطلاعاتی را درباره سند Html خودتان با استفاده از عنصر Meta اضافه کنید. برای مثال شما می توانید از دیتای meta برای مشخص کردن نویسنده ، اضافه کردن کلمات کلیدی و همچنین اضافه کردن یه توضیح درباره سند Html استفاده کنید.
به طور کلی هر اطلاعاتی را با استفاده از Meta اضافه کنید، فقط در کد مرجع Html مشاهده خواهد شد و در مرورگر وب بر روی صفحه وب دیده نخواهد شد.
عنصر Meta قسمتی از بخش Head در سند Html می باشد. برخلاف دیگر عناصر ، این عنصر به تگ خاتمه نیازی ندارد.
نکته: بیشتر موتور های جستجو از دیتای Meta در سند Html برای فهرست کردن صفحات وب استفاده می کنند.
[font]معرفی نویسنده[/font]
شما می توانید با استفاده از یک عنصر Meta نویسنده سند Html را معرفی کنید.
1- در سند Html پایه ، در نقطه قبل از تگ </head> قرار گیرید و کلید Enter را فشار دهید تا یک خط جدید ایجاد شود.
2- در خط جدید کد زیر را وارد کنید.کد:
کد پی‌اچ‌پی:
<Meta name="Author" content="inset name of Author"
بجای عبارت inset name of Author نام نویسنده را وارد کنید.
3- سند Html شما باید به شکل کد زیر باشد.کد:
کد پی‌اچ‌پی:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Translational// En">
<
HTML>
<
HEAD>
<
TITLE>Welcome</TITLE>
<
Meta name="Author" content="inset name of Author">
</
HEAD>
<
BODY></BODY>
</
HTML
[font]اضافه کردن کلمات کلیدی (Keywords)[/font]

شما می توانید از عنصر Meta برای اضافه کردن کلمات کلیدی به سند Html خود که با محتوای سند مرتبط باشد، استفاده کنید. برای این کار به طریق زیر عمل کنید.
1- در سند Html پایه، در نقطه قبل از شروع تگ </head> قرار بگیرید و کلید Enter را فشار دهید تا یک خط جدید ایجاد شود.
2- در خط جدید کد زیر را وارد کنید:کد:
کد پی‌اچ‌پی:
<Meta name=keywords" content="insert list of keywords"> 
بجای کلمه insert list of keywords کلمات کلیدی خود را بنویسید.
نکته: کلمات کلیدی باید با کاما (Wink از هم جدا شوند.
3- سند Html شما باید به شکل کد زیر باشد.کد:
کد پی‌اچ‌پی:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Translational// En">
<
HTML>
<
HEAD>
<
TITLE>Welcome</TITLE>
<
Meta name="Author" content="inset name of Author">
<
Meta name="Keywords" content="inset ilst of keywords">
</
HEAD>
<
BODY></BODY>
</
HTML
[font]طریقه اضافه کردن یک توضیح[/font]
شما می توانیدبا استفاده از عنصر Meta توضیحی را برای سند Html خود اضافه کنید.
طریقه کار به این دو صورت است.
1- در سند Html پایه ، در نقطه قبل از تگ </head> قرار گیرید و کلید Enter را فشار دهید تا یک خط جدید ایجاد شود.
2- در خط جدید کد زیر را وارد کنید:کد:
کد پی‌اچ‌پی:
<Meta name="Description" content="inset Description"
3- سند Html شبیه کد زیر خواهد بود.کد:
کد پی‌اچ‌پی:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Translational// En">
<
HTML>
<
HEAD>
<
TITLE>Welcome</TITLE>
<
Meta name="Author" content="inset name of Author">
<
Meta name="Keywords" content="inset ilst of keywords">
<
Meta name="Description" content="inset Description">
</
HEAD>
<
BODY></BODY>
</
HTML
[font]سفارشی سازی مشخصات صفحه[/font]
  • تنظیم کردن رنگ پس زمینه

شما می توانید یک رنگ یکنواخت (Soild color) را برای پس زمینه صفحه وب خود تنظیم کنید. برای اینکار به طریق زیر عمل کنید:
1- در سند Html پایه در نقطه کناری تگ شروع Body قرار گیرید.
2- در تگ Body ، عبارتکد:
کد پی‌اچ‌پی:
bgcolor="color" 
را تایپ کنید. در این عبارت بجای کلمه color یک کلمه رنگ و یا یک مقدار هگزادسیمال ( رنگی که در فتوشاپ استفاده می شه)(مانند: #FFFFFF ) وارد کنید. فقط وقتی از یک مقدار هگزاد سیمال برای رنگ استفاده می کنید ، یک علامت پوند (#) قبل از مقدار هگزاد سیمال وارد کنید.
برای مثال، اگر می خواهید که رنگ نقره ای (Silver) برای پس زمینه وارد کنید ، از یکی از کدهای زیر برای این کار استفاده کنید.کد:
کد پی‌اچ‌پی:
<body bgcolor="Silver">
و یا
<body bgcolor="#CoCoCo"
  • طریقه تنظیم کردن رنگ متون

شما می توانید رنگ متن بدنه، لینک های عادی ، لینک های اکتیو و لینک های بازدید شده را با استفاده از ویژگی های عنصر Body تغییر دهید.
ویژگی (attribute) متن بدنه (Body text) ، رنگ پیش فرضی را برای متن صفحه شما تنظیم می کند. ولی این تنظیم رنگ می تواند توسط قالب بندی رنگ فونت که در صفحه به کار رفته است ، باطل شود.
* ویژگی لینک های معمولی (Normal links)
این ویژگی، رنگ لینک های معمولی شما را تنظیم می کند.
* ویژگی لینک های اکتیو (Active links)
این ویژگی رنگ لینک های شما را وقتی که کلیک می شوند تعیین می کند.
*ویژگی لینک های بازدید شده (Visited Links)
این ویژگی رنگ لینک های شما را بعد از بازدید شدن تنظیم می کند.
برای تنظیم کردن رنگ متون به طریق زیر عمل نمایید:
1- در سند Html پایه، در نقطه کناری تگ شروع قرار گیرید.
2- در تگ شروع ویژگی های زیر را وارد کنید:کد:
کد پی‌اچ‌پی:
<Body TEXT="navy" LINK="tomato" ALINK="Yellow" VLINK="Slategray"
[font]طریقه تنظیم کردن URL پایه (Base URL)[/font]


کارکردن با URL های مرتبط (Relative URLS) در وب سایت های بزرگ طاقت رسا خواهد بود. در بعضی مواقع شما می خواهید یک صفحه را از یک دایرکتوری به دایرکتوری دیگر بدون شکستن همه لینک های موجود در صفحه منتقل کنید. شما می توانید برای حل این مشکل از Base Url استفاده کنید.
Base URL یک ویژگی درون عنصر Base می باشد. Base URL به مرورگر های وب اعلام می کند که هر Url مرتبط که در سند Html استفاده شده است از Base URL شروع شده باشد.(نشأت گرفته باشد).
بطور مثال ، اگر Base URL شما http://www.msn.com/downloads باشد، در این صورت یک URL مرتبط از "media/title.gif" ک http://www.msn.com/downloads/media/title.gif را صرفنظر از محل قرار گرفتن سند Html نتیجه خواهد داد.
برای وارد کردن یک Base Url به طریق زیر عمل کنید:
1- در سند Html پایه در نقطه قبل از تگ </head> قرار گیرید و سپس کلید Enter را فشار دهید تا یک خط جدید ایجاد شود.
2- در خط جدید کد زیر را وارد کنید:کد:
کد پی‌اچ‌پی:
<base url="http://www.msn.com/downloads/"
[font]طریقه باز کردن یک سند Html در Notepad[/font]
1- در Notepad ، از منوی File گزینه Open را انتخاب کنید تا کادر محاوره ای Open باز شود.
2- از منوی مقابل File of type گزینه All File را انتخاب کنید.
3- سند Html مورد نظر خود را انتخاب کنید.
4- بر روی Open کلیک کنید.
[font]طریقه باز کردن سند Html با استفاده از Windows Explorer[/font]
شما می توانید سند های Html را با استفاده از Windows Explorer و یا My computer باز کنید.
برای این کار به طریق زیر عمل کنید:
1- دستور Start/All Programs/Accessories/Windows Explorer را اجرا کنید تا ساختار درختی پوشه های موجود در کامپیوترتان ظاهر شود.
2- سند Html مورد نظر خود را پیدا کرده و آن را انتخاب کنید.
3- بر روی سند مورد نظر کلیک راست کنید و از منوی میانبر ظاهر شده گزینه Open With را انتخاب کنید.
4- از منوی مقابل Open with گزینه Notepad را انتخاب کنید و یا اینکه گزینه Choose Programs را انتخاب کنید تا کادر محاوره ای Open With باز شود.
5- در قسمت Programs گزینه Notepad را انتخاب کرده و OK کنید.
[font]طریقه بستن سند Html باز شده[/font]
در منوی فایل گزینه Exit را انتخاب کنید.
[font]مشاهده یک سند Html در یک مرورگر وب[/font]
برای اینکه از چگونگی وضعیت سند Html خود اطلاع داشته باشید باید آن را در یک مرور گر باز کنید. بطور مثال برای باز کردن سند Html در Microsoft Internet Explorer به طریق زیر عمل کنید.
1- نرم افزار IE را باز کنید و از زیر منوی File گزینه Open را انتخاب کنید تا کادر محاوره ای Open باز شود.
2- اگر نام سند Html مورد نظر را می دانید آن را در کادر محاوره ای Open وارد کنید ولی اگر نام آن را نمی دانید می توانید بر روی دکمه Browse کلیک کنید تا کادر محاوره ای Microsoft Internet Explorer باز شود.
3- از طریق این کادر محاوره ای سند Html مورد نظر خود را پیدا کرده و آن را انتخاب کنید.
4- بر روی Open کلیک کنید
5- Ok کنید.


[font]با تشکر های خود ما را در ادامه یاری کنید.[/font]
 
پاسخ
 سپاس شده توسط admin ، شماره مجازی امارات ، تلگرام ضد فیلتر 2023


پیام‌های این موضوع
آموزش جامع Html برای تازه کاران - توسط ghasemy50 - ۱۳۹۳/۰۱/۰۷, ۰۶:۲۰ ق.ظ
RE: آموزش جامع Html برای تازه کاران - توسط ghasemy50 - ۱۳۹۳/۰۱/۰۷, ۰۷:۴۶ ب.ظ
RE: آموزش جامع Html برای تازه کاران - توسط ghasemy50 - ۱۳۹۳/۰۱/۰۸, ۰۹:۳۵ ق.ظ

پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان