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


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

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

#1
با سلام خدمت دوستان عزیز
این آموزش توسط خودم نوشته می شود و کپی پیست نشده.
در صورت داشتن سوال از من و دیگر دوستان پرس و جو نمایید.
با تشکر
------------------------------------------------------------------------------
[font]فهرست:[/font]
بخش اول: توانایی درک مفهوم وب
بخش دوم: توانایی کار با ابزار مفید و فرمتهای شناخته شده در وب
بخش سوم: طراحی صفحات ساده وب به کمک Notead
بخش چهارم: توانایی کار بامتن و قالب بندی
بخش پنجم: توانایی اضافه کردن تصویر به صفحات
بخش ششم: لینک ها در صفحات وب
بخش هفتم: توانایی طرح بندی کامل صفحه وب
بخش هشتم: موضوعات چند رسانه ای (Multimedia Object)
بخش نهم: توانایی کار با نرم افزار Microsoft FrontPage
بخش دهم: ایجاد وب سایت با استفاده از Wisard و template در Frontpage
بخش یازدهم: توانایی طراحی صفحه وب به کمک منوی Insert و امکانات دیگر Frontpage
بخش دوازدهم: انتشار وب سایت
------------------------------------------------------------------------------
[font]بخش اول[/font]
------------------------------------------------------------------------------
[font]آشنایی با تاریخچه طراحی صفحات وب[/font]
طراحی صفحات وب به صورت های مختلفی شروع شد اما عاقبت در سال 1994 کنسرسیوم جهان گستر وب (World Wide Web Consortiom: WBC) تشکیل شد تا آینده وب را استاندارد سازی نماید. این کنسر سیوم توسط کمپانیهایی نظیر Digital Equipment crop ، HP ، IBM ، Microsoft ، Netscape communication ، Sun microsystem و بسیاری دیگر از شرکت ها پشتیبانی شد.
در طول سال 1995 تگ های تازه Html و در آگوست 1995 نگارش اول Internet Explorer میکروسافت ظاهر شدند و اینترنت اکسپلورر به سرعت در نوامبر 1995 به نگارش 2 ارتقاء یافت. در این ایام شرکت Netscape و میکرو سافت در اجرای تگ های جدید به رقابت پرداختند و در سپتامبر 1995 ، Netscape ایده فریم ها در صفحات وب را معرفی کرد .
همچنین در سال 1995 پیشنهاد استاندارد سازی Html داده شد و در ژوئن 1997 نگارش 3.2 از Html نگارش 4.0 در 24 آپریل سال 1998 پیشنهاد شد.

------------------------------------------------------------------------------
[font]اصول مهم در طراحی صفحات وب[/font]
در طراحی وب باید چندین جنبه را در نظر داشت و بطور کلی می توان طراحی وب را به عنوان یک حرفه بصورت زیر تعریف نمود:
طراحی وب یک حرفه چند جانبی است که به تصمیم گیری و تولید وبسایت های وب می انجامد این جنبه ها می تواند شامل توسعه فنی ، ساختار اطلاعاتی ، طراحی بصری و... باشد.
  • کاربران وب و طراحان یکی نیستند ؛ طراح وبسایت همیشه باید سعی کند تا از دید کاربر به سایت نگاه کند اما کاربران نیز یکی نیستند سایت هایی که برای یک کاربر «معمولی ساخته می شود» ممکن است برای یک کاربر ماهر دارای محدودیت باشد. با این همه گفته ها وب سایت بهتر است برای کاربران معمولی طراحی شود اما تفاوتهای کاربران را نیز در نظر داشته باشد.
  • ارتباط شکل بصری یک سایت با رفتارش: در هنگام طراحی صفحات وب باید در نظر داشت که شکل سایت مستقیما با هدف آن در ارتباط باشد.
  • سایت باید بدون نقص اجرا شود: طراحان وب باید محیط ها را بشناسند و محدودیت و مشخصات آنها را در نظر بگیرند به عبارت دیگر همه چیز را از مرورگر ها و پهنای باند تا برنامه نویسی و پروتکل را بشناسند.

سایر مشخصات طراحی صفحات وب را در هنگام مطالعه فصل های آتی یاد خواهید گرفت که بعنوان یک طراح حرفه ای بهتر است همه آنها را رعایت نمایید.
------------------------------------------------------------------------------
[font]مقدمه ای بر Html[/font]
Html ، مخفف (HyperText Markup Lanquage) رایج ترین زبان مورد استفاده در سند های وب می باشد. Html یک زبان نشانه گزار تعمیم یافته استاندارد به صورت زیر می باشد:
Html زا SGML مخفف (Satandard Generalized Markup Lannquage) مشتق شده می باشد. SGML زبان مخصوصی است که برای قالب بندی سند استاندارد پایه گزاری شده است و امکان به اشتراک گذاشتن سند بر روی اینترنت را فراهم می سازد. شما می توانید از Html برای ایجاد اسناد وب که شامل قالب بندی ، لینک ها ، تصاویر و عناصر چند رسانه ای می باشند ، استفاده کنید.
فایلهای Html اسناد متنی ساده Plain Text هستند که دارای پسوند .htm و یا .html می باشند. اگر چه شما می توانید برای مشاهده و ویرایش کد منبع اچ تی ام ال (Html Source Code) از یک ویرایشگر متنی ساده استفاده کنید ، ولی شما برای مشاهده اسناد قالب بندی شده دارای تصاویر و لینک ها و غیره به یک مرور گر وب نیاز خواهید داشت.
کنسر سیوم صفحه جهان گستر وب World Wide Web Consortiom: W3C تکنولوژی های متعاملی (مشخصات ، دستورالعمل ها و رهنمود ها ، نرم افزار ها و ابزار ها) را تولید می کند تا پتانسیلهای بالقوه صفحه وب (مجموعه اطلاعات ، تجارت ارتباطات و مجموعه مفاهیم) را به سرمنزل خود هدایت کند.
وب سایت کنسر سیوم صفحه جهان گستر وب (www.w3.org) می باشد.
هر دو مرورگر Internet Explorer و Netscape Navigator از مشخصات و ویژگیهای Html یعنی (specification) پشتیبانی می کنند.
------------------------------------------------------------------------------
[font]قانونهای گرامری Html[/font]
  • Elements and tags (عناصر و دستورات)

اسناد Html از عناصر مختلفی مانند Head ، Title ، Body ، Table ، P و... تشکیل شده است .
هر عنصر Html، شامل یک تگ شروع (Openning Tag) ، محتوا (Contenet) و یک تگ پایان (Closing Tag)می باشد.
تگ شروع به وسیله نام عنصر که درون براکت های گوشه دار (angleg brackets) قرار داده شده ، مشخص می شود که به صورت <Head> می باشد.
تگ خاتمه به وسیله یک اسلش (/) و نام عنصر که درون براکت های گوشه دار قرار گرفته اند مشخص می شود.که به صورت <Head/> می باشد و محتوا نیز بین تگ های شروع و خاتمه قرار می گیرد تا عنصر را ایجاد کند.کد:
کد پی‌اچ‌پی:
<p>this is my content.</p
هر عنصر می تواند توسط ویژگی های خودش سفارشی شود. ویژگیهای (attributes) مورد نظر در داخل تگ شروع قرار داده می شوند. در مثال زیر، پاراگراف شامل ویژگی تراز بندی (align) است.کد:
کد پی‌اچ‌پی:
<p align="center">this is my content.</p
------------------------------------------------------------------------------
[font]عناصر تو در تو(Nesting Elements)[/font]
عناصر می توانند به صورت تو در تو قرار داده شوند تا جلوه های مورد نظر شما را تامین کنند. در مثال زیر ما عنصر<B> را درون عنصر پاراگراف <p> قرار دادیم در این صورت اثر bold بر روی محتویات بین تگ شروع و خاتمه پیاده خواهد شد.کد:
کد پی‌اچ‌پی:
<p>you can <b>bold</b>your Text.</p
نکته:برای قرار دادن صحیح یک عنصر درون عنصر دیگر ، شما باید مطمئن شوید که عنصر داخلی قبل از تمام شدن عنصر خارجی تمام شود. در مثال زیر ، عنصر داخلی <b> بعد از عنصر خارجی <p> تمام شده است. بنابراین این مثال نادرست است.کد:
کد پی‌اچ‌پی:
<p>you can <b>bold your Text.</p></b
------------------------------------------------------------------------------
[font]خواندن یک سند Html پایه[/font]
هر سند Html به عناصر <Head> (سرآیند یا تیتر) و Body (بدنه) تقسیم می شود. عنصر Head شامل محتوای صفحه Html می باشد.
یک سند Html پایه شامل عناصر زیر می باشد.
<Html>
تگ های Html آغاز و پایان یک سند Html را مشخص می کند.
<head>
تگ های Head آغاز و پایان قسمت سرآیند سند Html را مشخص می کنند.
<Title>
تگ Title درون Head قرار می گیرند و عنوان صفحه Html را مشخص می کنند.
<Body>
تگ های Body آغاز و پایان قسمت بدنه سند Html را مشخص می کنند.
مثال زیر یک سند Html پایه می باشد.کد:
کد پی‌اچ‌پی:
<html>
<
head>
    <
title>Welcome</title>
</
head>
<
body>
<
h1>Welcome to the my home page</h1>
<
p>This is the body of my home page</p>
</
body>
</
html
------------------------------------------------------------------------------
[font]اطلاعات مربوط به version (نگارش) سند Html[/font]
یک سند Html صحیح و معتبر شامل اطلاعات Version می باشد. اطلاعات Version نوع نگارش Html را که در تهیه سند بکار رفته معین می کند.
عنصر Doctype شامل اطلاعات Version ها می باشد و اولین عنصر یک سند Html می باشد. معمولا این عنصر به صورت اتوماتیک توسط ویرایشگر Html تولید می شود. مثال زیر یک سند معتبر Html 4 را نشان می دهد.کد:
کد پی‌اچ‌پی:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional>
<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<BODY>
<H1>Welcome to My Home Page</H1>
<P>This is the body of my home page.</P>
</BODY>
</HTML> 
------------------------------------------------------------------------------
[font]ویرایشگر های Html[/font]
شما می توانید از یک ویرایشگر متن ساده (Plain Text Editor) مانند Notepad برای نوشتن و ویرایش اسناد Html خود استفاده کنید که کار شما را ساده تر کنند.
به طور کلی دو نوع ویرایشگر Html وجود دارد:
1- ویرایشگر های W Y SI W Y G که مخفف (What-you-see-Is-What-you-Get)
این ویرایشگر ها به کاربران تازه کار امکان می دهند تا به طور سریع اسناد Html را ایجاد کرده و آنها را ویرایش کنند. در این ویرایشگرها شما بجای اینکه با کد مرجع Html کار کنید با لی آت (Layout) صفحه کار می کنید.
بعضی از ویرایشگر ها تمپلیت هایی (الگوهایی) را تدارک دیده اند که شما بتوانید به راحتی صفحه مورد نظر خود را ایجاد کنید.
زمانیکه ویرایشگر های WYSIWYG کد مرجع Html را برای شما ایجاد می کنند ، این کد ها ممکن است مشکلاتی را برای سند Html شما ایجاد کنند. به همین دلیل ویرایشگر های معروف و رایج به شما امکان می دهند مستقیما کد مرجع Html را ویرایش کنید.
مشهور ترین ویرایشگر های WYSIWYG عبارتند از:
Adobe Golive ، Adobe Pagemill ، Macromedia Dreamwaver ، Microsoft Front Page و Netobjects Fusion.
2- ویرایشگر های Tag-based
یکی از هدف های عمده ویرایشگر های Tag-based کمک به شما در نوشتن و ویرایش کد مرجع Html می باشد. توسط ویرایشگر های Tag-based شما با کد مرجع Html کار می کنید. بر خلاف ویرایشگر های متن ساده ، ویرایشگر های Tag- based کد های رنگی تدارک دیده اند که به خواناتر شدن سند شما کمک می کند.
برای استفاده از این ویرایشگر ها شما باید از طریق لی آت یک صفحه را توسط Html بلد باشید و کد های Html را نیز درک کنید.
ویرایشگر های Tag-based دارای ابزارهایی می باشند که به شما کمک می کنند تا تگ را سریعا وارد کنید. برای مثال تگ هایی که غالبا استفاده می شوند دارای آیکونهایی می باشند که شما می توانید با کلیک کردن آنها را اضافه کنید.همچنین برای تگ های پیچیده و مشکل ، ویزارد ها و کادر های محاوره ای وجود دارند که به شما در اضافه کردن این تگ با ویژگی های مورد نظرتان کمک می می کنند.
مشهور ترین ویرایشگر Tag-based ویرایشگر های Macromedia Homesite ، HotDog Professional و Web Editor می باشند.
[font]با تشکر های خود ما را در ادامه یاری کنید.[/font]
پاسخ
 سپاس شده توسط admin

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

#2
[font]بخش دوم[/font]
------------------------------------------------------------------------------
[font]طراحی وبسایت [/font]
در طراحی صفحات وب باید موارد زیر را در نظر داشته باشید:
  • شناسایی دیدار کنندگان از وب سایت


یکی از اولین چیزهایی که شما در موقع طراحی یک وب سایت نیاز دارید شناسایی دیدار کنندگان می باشد.
شناسایی دیدار کنندگان به شما کمک می کند تا محتوای وب سایت و نیاز های فنی (techniCal requirements) را تعیین کنید. برای مثال، اگر شما در حال ساخت یک وب سایت برای کارکنان یک شرکت می باشید تا به زمان کار آنها دست یابید باید محتوایی در ارتباط با کار در شرکت تهیه کنید.همچنین نیاز های فنی مورد نیاز را برای ساخت این وب سایت بررسی کنید.
اگر شما در حال ساخت یک وبسایت برای اینترنت می باشید، باید نیاز های فنی مورد نظرتان را پیش بینی کنید تا طیف گسترده ای از کاربران را داشته باشید.
  • بررسی اتصال به اینترنت و اثر آن در صفحات وب


سرعتی که یک کاربر با آن به اینترنت متصل می شود بستگی به نوع دسترسی به اینترنت (مانند Dial up - ADSL - کابل) و ISP دارد.
موقعی که فایلهای Html فقط فایلهای متنی هستند ، می توانند صرفنظر از نوع اتصال به اینترنت به سرعت دانلود شوند، ولی فایهایی که دارای تصاویر و دیگر عناصر چند رسانه ای (Multimedia) می باشند با سرعت خیلی کمی دانلود می شوند. بنابر این باید در اندازه و تعداد عناصری که به صفحات اضافه می کنید دقت نمایید.
اندازه فایلها موقعی کم اهمیت خواهد بود که شما بخواهید وب سایت خود را برای کاربران دارای اتصال اینتر نت پر سرعت طراحی کنید.
شما می توانید تصمیم بگیرید که آیا اکثریت کاربران شما دارای سرعت اینتر نت بالایی هستند و نیازی ندارند که برای دانلود فایلهای بزرگ شما منتظر بمانند و یا اینکه کاربران شما دارای سرعت اینتر نت پایینی مانند Dial up هستند و بسته به سرعت اینتر نت آنها وب سایت را طراحی کنید.
البته شما می توانید نگارش های مختلفی از وبسایتتان را طراحی کنید تا هم کاربران پر سرعت و هم کاربران کم سرعت بتوانند وب سایت شما را مرور کنند.
نرم افزار های گرافیکی مانند Adobe Image Ready و Makromedia Flash دارای ابزار هایی هستند که به شما کمک می کنند تا زمان دانلود تصاویر را با توجه به سرعت اتصال اینتر نت محاسبه کنید.
  • رزولوشن نمایش (Display resplutions)

شما باید در طراحی وب سایت چگونگی نمایش آن را در کامپیوتر های کاربران در نظر داشته باشید. بسته به اندازه مانیتور و سلیقه کاربر ، رزولوشن می تواند از 640*480 تا 1600*1280 به بالا باشد. اگر شما در نظر دارید که وب سایت خود را با رزولوشن 640*480 طراحی کنید بهتر است بدانید که نمایش آن در رزولوشن بزرگتر بسیار کوچکتر دیده خواهد شد و بالعکس اگر شما بخواهید وب سایت خود را با رزو لوشن 1600*1280 طراحی کنید شما فقط یک قسمت کوچک از صفحه را در هر لحظه ملاحظه خواهید کرد و برای دیدن قسمتهای دیگر صفحه باید با استفاده از نوار های مرورگر عمودی و افقی جا به جا شوید.
مناسب ترین رزولوشن برای طراحی وب سایت 800*600 می باشد. شما باید بخاطر داشته باشید که صفحه شما توسط یک Browser نمایش داده می شود و ناحیه قابل نمایش به ناحیه میانی Browser محدود می شود. بهترین روش برای دیدن چگونگی نمایش صفحه وب سایت در رزولوشن های مختلف ، تغییر رزولوشن صفحه نمایش کامپیوترتان باشد. برای تغییر دادن رزولوشن نمایش به طریق زیر عمل کنید.
1- همه پنجره های باز را Minimize نمایید.پ
2- بر روی ناحیه خالی از دسکتاپ کلیک راست کرده و از منوی میان بر ظاهر شده گزینه Properties را انتخاب کنید.
3- در این صورت کادر محاوره ای Properties ظاهر می شود.
4- تب Setting را انتخاب نمایید.
5- در قسمت Screen Resolution با استفاده از اهرم کشویی موجود رزو لوشن را کاهش یا افزایش دهید.
6- Apply را کلیک کنید.
7- بر روی OK کلیک کنید تا رزو لوشن را آزمایش کنید.
8- بر روی Yes کلیک کنید تا تغییر رزولوشن را قبول کنید.
  • web browser (مرورگر های وب)

Html توسط مرورگر های مختلفی پشتیبانی می شود. ولی هر کدام از این مرور گر ها دارای یک سری عناصر اختصاصی Html مخصوص به خود می باشند. بنابراین شما باید در موقع استفاده از این عناصر دقت کنید زیرا ممکن است آن عناصر اختصاصی در مرورگر های مختلف تاثیرات مختلفی را ایجاد کنند.
بنابراین بهتر است که شما وبسایت خود را در مرور گر های مختلفی تست کنید تا از درستی کار آن مطمئن شوید. در حال حاضر Microsoft Internet Explorer و Netscape Navigator از رایج ترین مرورگر های وب می باشند.
با تشکر هایتان ما را در ادامه راه یاری دهید.
------------------------------------------------------------------------------
[font]انواع فایلها و ساختار فایل [/font]
  • فایلهای Html

برای ایجاد صفحات وب برای وب سایت، شما نیاز دارید که فایلهای Html ایجاد کنید.
مرور گر های وب فایلهای Html را پردازش می کنند تا سند قالب بندی شده را به همراه تصاویر ، عناصر چند رسانه ای و لینک ها نمایش دهند. این فایلها دارای پسوند .htm و .html می باشند.
  • فایلهای تصویری

شما می توانید فایلهای تصویری jpeg و gif را به صفحه وب و با استفاده از عنصر img اضافه کنید. فایلهای تصویری jpeg دارای پسوند .jpeg و .jpg می باشند و فایلهای تصویری gif دارای پسوند .gif می باشند.
  • فایلهای چند رسانه ای (Multimedia Files)

محدوده گسترده ای از فایلهای چند رسانه ای می توانند با استفاده از عناصر مناسب به صفحات وب شما اضافه شوند. این فایلها در قسمت های بعدی به طور کامل توضیح داده خواهند شد.
------------------------------------------------------------------------------
[font]نامگزاری فایلها[/font]
فایلهای Html در نهایت بر روی یک سرور وب قرار می گیرند تا کاربران بتوانند به صفحات شما از طریق اینترنت دسترسی پیدا کنند. اگرچه هر پایگاه سرور وب دارای قرار داد های مختلف برای فایلها می باشد ولی شما می توانید از قوانین پایه زیر برای نامگزاری فایلها استفاده کنید:
1- فقط از کاراکتر های A تا Z و a تا z و 0 تا 9 و - (خط ربط یا Hyphen) و - (خط زیری یا Under scrore) استفاده کنید.
2- از فضای خالی (Space) ، اسلش ، بک اسلش ، کولن ، سمی کالن ، علامت سوال ، & و " استفاده نکنید
3- زمانیکه سرور وب شما به حروف بزرگ و حروف کوچک حساس است (Case-sensitive) از یک روش ثابت برای نوشتن نام های درایا حروف بزرگ و کوچک استفاده کنید.
------------------------------------------------------------------------------
[font]URL آدرس (Uniform Resource Locator)[/font]
یو آر ال ها (Urlها) آدرس های وب منحصر به فردی هستند که برای صفحات وب ، تصاویر ، فیلم ها ، و یا هر فایل قابل دسترسی بر روی اینترنت اختصاص می یابند. برای مثال ، شما می توانید با وارد کردن صفحه وب مورد نظر در بخش آدرس ، از مرورگر به آن صفحه دسترسی پیدا کنید.کد:
کد پی‌اچ‌پی:
http://www.msn.com/Mspress/prodncts/1459.htm 
آدرس بالا صفحه منحصر به فرد این تاپیک است.
یک Url دارای عناصر مختلفی می باشد. برای شناختن این عنصر از آدرس بالا استفاده می کنیم.
http:// (پروتکل)(Protocol):
نوع پروتکل بکار رفته در باز کردن فایل مورد را تعیین می کند.
www (نام سرور) (Setvername):
سروری که فایل درخواست شده در آن قرار دارد را معرفی می کند. در بیشتر موارد حوزه ها (Domains) فقط یک سرور دارند. در این مثال ، نام سرور www می باشد.
msn.com (نام حوزه)(Domain name):
حوزه ای که فایل درخواست شده در آن قرار دارد را تعیین می کند. برای مثال msn.com
Mspress/prodncts(مسیر پوشه)(Directory):
دایرکتوری و زیر دایرکتوری که فایل در خواست شده در آن قرار دارد را تعیین می کند. اگر فایل مورد نظر در دایرکتوری اصلی (Root Directory) قرار داشته باشد این عنصر از Url لازم نیست که نوشته شود.
1459 (نام فایل)(File Name):
نام فایل درخواست شده را معرفی می کند.
.htm (پسوند فایل)(File Extension):
پسوند فایل درخواست شده را تعیین می کند.
------------------------------------------------------------------------------
[font]ساختار فایل (File structure)[/font]
فرصتی که شما یک سند Html می نویسید، تصاویر ، لینک ها ، و دیگر عناصر را توسط Url آدرس دهی خواهید کرد. در بیشتر موارد ، شما باید از Url های مرتبط به هم استفاده کنید تا وب سایت شما قابل انتقال تر باشد این کار به شما امکان خواهد داد که وب سایت خود را بدون شکستن لینک ها انتقال دهید.
Url های مرتبط (Relative URLS) آدرس دهی کنید در همان دایرکتوری قرار داشته باشد که سند Html وجود دارد، Url مرتبط از ترکیب نام فایل و پسوند فایل مورد نظر تشکیل می شود. به طور مثال، اگر شما در حال کار کردن با صفحه Index.html باشید و بخواهید این صفحه را به Feedback.html لینک دهید Url مرتبط عبارت خواهد بود از:کد:
کد پی‌اچ‌پی:
Feedback.html 
[عکس: 137648620916371_0Capture.PNG]
مطابق شکل اگر فایلی را می خواهید آدرس دهی کنید در یک زیر دایرکتوری از همان دایرکتوری که سند Html وجود دارد، قرار داشته باشد، Url مرتبط از ترکیب نام دایرکتوری به اضافه نام فایل و پسوند فایل مورد نظر تشکیل می شود. برای مثال اگر شما در حال کارکردن بر روی صفحه Index.html می باشید و می خواهید آن را به فایل Canyon.html در پوشه adventures لینک دهید لینک مرتبط عبارت است از:کد:
کد پی‌اچ‌پی:
adventures/Canyon.html 
اگر فایلی را می خواهید آدرس دهی کنید در همان دایرکتوری که سند Html در آن است، قرار نداشته باشد شما می توانید از /.. برای رفتن به دایرکتوری دیگر در Url مرتبط استفاده می کنید.برای مثال اگر شما بر روی صفحه Canyon.html کار می کنید که در پوشه adventures است و می خواهید آن را به فایل Canyon.gif که در پوشه Media قرار دارد لینک دهید Url مرتبط عبارت است از:کد:
کد پی‌اچ‌پی:
../media/canyon.gif 

[font]با تشکر های خود ما را در ادامه یاری کنید.[/font]
 
پاسخ
 سپاس شده توسط admin

آموزش جامع 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


پرش به انجمن:


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