|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
با آموزش HTML شما یاد خواهید گرفت چگونه از HTML در ساخت صفحات وب خودتان استفاده کنید. یک فایل HTML چیست؟
آیا می خواهید یکبار امتحان کنید؟ اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.
فایل را تحت عنوان "mypage.htm"ذخیره کنید. مثال تشریح شده اولین برچسب در فایل HTML شما ، است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است. پسوند htm. یا html. ? هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود. به ویرایشگر های HTML توجه کنید: شما می توانید به سادگی با استفاده از یک ویرایشگر WYSIWY("what you see is what you get") فایل های HTML را ویرایش کنید ، مثل FRONT PAGE,Claris Home Page یا Adob PageMill. پرسش و پاسخ: س: پس از اینکه فایل HTML را ویرایش می کنم نمی توانم نتیجه را در مرورگر مشاهده کنم. چرا؟
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
برچسب ها |
توضیحات | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
یک پرونده HTML را معرفی می کند | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
بدنه پرونده را معرفی می کند | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
سر تیتر 1 تا 6 را معرفی می کند | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
یک پاراگراف را معرفی می کند | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
یک خط خالی را معرفی می کند | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
یک خط افقی را معرفی می کند | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
توضیحات را معرفی می کند | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
قالب بندی متن HTML
Html، برچسبهای زیادی برای قالب بندی متن، مانند برچسب نمایش برجسته و یا برچسب مورب، دارد. در زیر مثالهای زیادی برای شما وجود دارد:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
برچسب ها |
توضیحات |
|
متن را برجسته معرفی می کند | |
|
متن را بزرگ معرفی می کند | |
|
متن را مورب معرفی می کند | |
|
متن را مورب معرفی می کند | |
|
متن را کوچک معرفی می کند | |
|
متن را برجسته معرفی می کند | |
|
متن را زیرنویس دار معرفی می کند | |
|
متن را بالانویس دار معرفی می کند | |
|
قطعه متنی را که در متن اصلی جا داده شده معرفی می کند | |
|
قطعه متنی را که از متن اصلی حذف شده نشان می دهد | |
|
توصیه نمی گردد. به جای آن از | |
|
توصیه نمی گردد. به جای آن از | |
|
توصیه نمی گردد.به جای آن از خواص Style استفاده کنید |
|
برچسب ها |
توضیحات |
|
متن کد کامپیوتری را معرفی می کند | |
|
متن صفحه کلید را معرفی می کند | |
|
متن نمونه مثال های کامپیوتری را معرفی می کند | |
|
متن را بصورت ماشین نویس معرفی می کند | |
|
یک مقدار را معرفی می کند | |
|
متن از پیش قالب بندی شده را معرفی می کند | |
|
|
توصیه نمی گردد. به جای آن از |
|
|
توصیه نمی گردد. به جای آن از |
|
|
توصیه نمی گردد. به جای آن از |
|
برچسب ها |
توضیحات |
|
یک کلمه مخفف را معرفی می کند | |
|
یک سرنام را معرفی می کند | |
|
یک عنصر آدرس را معرفی می کند | |
|
جهت متن را معرفی می کند | |
|
یک کتیشن بلند را معرفی می کند | |
|
یک کتیشن کوتاه را معرفی می کند | |
|
نقل قول را معرفی می کند | |
|
یک عبارت توضیحی را معرفی می کند |
تعدادی از کاراکترها یک معنی خاص در HTML دارند.مثل علامت کوچکتر از ">" که شروع یک برچسب HTML را معرفی می کند.اگر ما بخواهیم که مرورگر عملا این کاراکتر ها را نشان بدهد باید در منبع کد HTML موجودیت های کاراکتر را وارد کنیم.
یک موجودیت کاراکتر سه بخش دارد: یک علامت "&" ، یک موجودیت اسم یا یک علامت "#" و یک موجودیت عددو در نهایت یک ";".
برای نمایش یک علامت کوچکتر از در یک پرونده HTML ما باید بنویسیم: ;lt& یا ;60#& .
فایده استفاده از یک نام بجای یک عدد این است که به خاطر سپردن یک نام آسان تر است و اشکال آن این است که همه مرورگر ها موجودیت کاراکترها را پشتیبانی نمی کنند در حالی که تقریبا همه مرورگرها خیلی خوب از موجودیت عددها پشتیبانی می کنند.
توجه کنید که موجودیت ها حساس به حروف کوچک و بزرگ هستند.
یکی از موجودیت کاراکترهای پر استفاده در HTML فاصله بدون شکست است. بطور عادی HTML فاصله ها را در متن شما کوتاه خواهد کرد ، اگر شما ده فاصله در متن خود بگذارید HTML 9 تای آن را از بین خواهد برد. برای اضافه کردن فاصله در متنتان ، از موجودیت کاراکتر ;nbsp& استفاده کنید.
|
نتیجه |
توضیحات |
نام موجودیت |
شماره موجودیت |
|
|
فاصله بدون شکست |
|
|
|
< |
کوچکتر از |
< |
< |
|
> |
بزرگتر از |
> |
> |
|
& |
ampersand |
& |
& |
|
" |
علامت کتیشن |
" |
" |
|
' |
آپاستروف |
'(در IE کاربرد ندارد) |
' |
ایجاد فراپیوند
این مثال نشان می دهد که چگونه می توان، در متن نوشته شده، فراپیوندی ایجاد کرد.
عکس، به عنوان فراپیوند
این مثال عکسی را به یک فراپیوند تبدیل می کند.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و ... .
دستورالعمل ساخت یک Anchor
در هنگام ساختن یک Anchor باید مکانی که پیوند به آن پرونده اشاره میکند را مشخص کرد. برای نمایش آدرس پرونده از موجودیت href استفاده می شود.کلمات بین بر چسب آغازو پایان Anchor به عنوان فرا پیوند نمایش داده می شود.
این Anchor یک پیوند به html.ir را معرفی می کند:
html.ir را ملاقات کنید
خط بالا شبیه این نشان داده خواهد شد :
با موجودیت هدف شما می توانید معرفی کنید که پرونده های پیوند داده شده کجا باز شوند. خط زیر پرونده ای را در یک پنجره مرورگر جدید باز خواهد کرد.
html.ir را ملاقات کنید
موجودیت نام برای ساخت یک Anchor نام دار استفاده می شود. هنگامی که ما از یک Anchor نام دار استفاده می کنیم، می توانیم پیوندهایی بسازیم که مستقیما بتواندبه یک بخش خاص در صفحه برود. در ست به جای آنکه بگذاریم کاربر در صفحه بگردد. در پایین طریقه نوشتن یک Anchor نام دار آمده است.
از موجودیت نام برای ساخت یک Anchor نام دار استفاده می شود. نام یک Anchor می تواند هر متنی که شما بخواهید باشد.خط زیر یک Anchor نام دار را معرفی می کند.
شما باید توجه کنید که یک Anchor نام دار، در یک حالت خاص نشان داده نمی شود. برای پیوند مستقیم به بخش "Tips" یک علامت "#" و نام آن Anchor را به انتهای آن url اضافه کنید:
یک فرا پیوند به بخش نکات مفید از میان فایل "Links.html" شبیه به این خواهد بود
همیشه یک علامت "/" به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این درست کنید
href="http://www.html.ir/links.html"
شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت "/" به انتهای آدرس اضافه کرده و یک تقاضای جدید درست می کند. مثل این:
href="http://www.html.ir/links.html/"
از Anchor نام دار معمولا برای ساخت یک جدول از محتویات در ابتدای یک پرونده بزرگ استفاده می شود. به هر بخش در میان پرونده یک Anchor نام دار داده شده و پیوند به هرکدام از این Anchor ها در بالای پرونده قرار داده شده است. اگر یک مرورگر نتواند Anchor نام داری را که مشخص شده است را پیدا کند به ابتدای آن پرونده رفته و هیچ خطایی اتفاق نمی افتد.
ارجاع به فراپیوند، در پنجره جدید
در این مثال، روش ساخت فراپیوندی نشان داده می شود، که در آن، کاربر پس از کلیک روی فراپیوند، صفحه فعلی را از دست نداده و پنجره جدیدی برای نمایش صفحه پیوندی، برای او، باز می شود.
پیوند به محلی در همین متن
فرض کنید در ابتدای متن، فهرستی از محتوای متن نوشته اید. اگر بخواهیم با کلیک روی هر یک از سرفصلها، به آن سرفصل مراجعه کنیم، چگونه عمل می کنیم؟ فراپیندهای این مثال، چگونگی این کار را نشان می دهند.
شکستن حصار قاب
اگر صفحه شما، داخل یک قاب نمایش داده می شود، فرا پیوندهای آن، محتوای قاب را تغییر می دهند. برای شکستن این محدودیت و تغییر محتوای کل پنجره مانند این مثال عمل کنید.
فراپیوند Email
در صورتیکه آدرس فراپیوند شما، از شماهای دیگری غیر از http، مانند mailto و یا ftp استفاده کند، چه می شود. این مثال نمونه ای را نمایش می دهد.
فراپیوند Email (نوعی دیگر)
در این مثال نمونه دیگری از فراپیوند نوع mailto را می بینید.