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

[رضاقاسمی 1,539]

با سلام خدمت دوستان عزیز
این آموزش رو تو سایت vbiran نوشته بودم که متاسفانه استقبال نشد. حالا قسمت های اول رو از اونجا میگذارم و بقیه رو خودم کامل می کنم.
در صورت داشتن سوال از من و دیگر دوستان پرس و جو نمایید.
با تشکر
------------------------------------------------------------------------------
فهرست:
بخش اول: توانایی درک مفهوم وب
بخش دوم: توانایی کار با ابزار مفید و فرمتهای شناخته شده در وب
بخش سوم: طراحی صفحات ساده وب به کمک Notead
بخش چهارم: توانایی کار بامتن و قالب بندی
بخش پنجم: توانایی اضافه کردن تصویر به صفحات
بخش ششم: لینک ها در صفحات وب
بخش هفتم: توانایی طرح بندی کامل صفحه وب
بخش هشتم: موضوعات چند رسانه ای (Multimedia Object)
بخش نهم: توانایی کار با نرم افزار Microsoft FrontPage
بخش دهم: ایجاد وب سایت با استفاده از Wisard و template در Frontpage
بخش یازدهم: توانایی طراحی صفحه وب به کمک منوی Insert و امکانات دیگر Frontpage
بخش دوازدهم: انتشار وب سایت
------------------------------------------------------------------------------
بخش اول
------------------------------------------------------------------------------
آشنایی با تاریخچه طراحی صفحات وب
طراحی صفحات وب به صورت های مختلفی شروع شد اما عاقبت در سال 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 پیشنهاد شد.

------------------------------------------------------------------------------
اصول مهم در طراحی صفحات وب
در طراحی وب باید چندین جنبه را در نظر داشت و بطور کلی می توان طراحی وب را به عنوان یک حرفه بصورت زیر تعریف نمود:
طراحی وب یک حرفه چند جانبی است که به تصمیم گیری و تولید وبسایت های وب می انجامد این جنبه ها می تواند شامل توسعه فنی ، ساختار اطلاعاتی ، طراحی بصری و... باشد.

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

سایر مشخصات طراحی صفحات وب را در هنگام مطالعه فصل های آتی یاد خواهید گرفت که بعنوان یک طراح حرفه ای بهتر است همه آنها را رعایت نمایید.
------------------------------------------------------------------------------
مقدمه ای بر Html
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) پشتیبانی می کنند.
------------------------------------------------------------------------------
قانونهای گرامری Html

• 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>

------------------------------------------------------------------------------
عناصر تو در تو(Nesting Elements)
عناصر می توانند به صورت تو در تو قرار داده شوند تا جلوه های مورد نظر شما را تامین کنند. در مثال زیر ما عنصر<B> را درون عنصر پاراگراف <p> قرار دادیم در این صورت اثر bold بر روی محتویات بین تگ شروع و خاتمه پیاده خواهد شد.

<p>you can <b>bold</b>your Text.</p>

نکته:برای قرار دادن صحیح یک عنصر درون عنصر دیگر ، شما باید مطمئن شوید که عنصر داخلی قبل از تمام شدن عنصر خارجی تمام شود. در مثال زیر ، عنصر داخلی <b> بعد از عنصر خارجی <p> تمام شده است. بنابراین این مثال نادرست است.

<p>you can <b>bold your Text.</p></b>

------------------------------------------------------------------------------
خواندن یک سند Html پایه
هر سند 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>

------------------------------------------------------------------------------
اطلاعات مربوط به version (نگارش) سند Html
یک سند 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>

------------------------------------------------------------------------------
ویرایشگر های Html
شما می توانید از یک ویرایشگر متن ساده (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 می باشند.

 

[رضاقاسمی 1,539]

بخش دوم
------------------------------------------------------------------------------
طراحی وبسایت
در طراحی صفحات وب باید موارد زیر را در نظر داشته باشید:

• شناسایی دیدار کنندگان از وب سایت

یکی از اولین چیزهایی که شما در موقع طراحی یک وب سایت نیاز دارید شناسایی دیدار کنندگان می باشد.
شناسایی دیدار کنندگان به شما کمک می کند تا محتوای وب سایت و نیاز های فنی (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 از رایج ترین مرورگر های وب می باشند.
با تشکر هایتان ما را در ادامه راه یاری دهید.
------------------------------------------------------------------------------
انواع فایلها و ساختار فایل

• فایلهای Html

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

• فایلهای تصویری

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

• فایلهای چند رسانه ای (Multimedia Files)

محدوده گسترده ای از فایلهای چند رسانه ای می توانند با استفاده از عناصر مناسب به صفحات وب شما اضافه شوند. این فایلها در قسمت های بعدی به طور کامل توضیح داده خواهند شد.
------------------------------------------------------------------------------
نامگزاری فایلها
فایلهای Html در نهایت بر روی یک سرور وب قرار می گیرند تا کاربران بتوانند به صفحات شما از طریق اینترنت دسترسی پیدا کنند. اگرچه هر پایگاه سرور وب دارای قرار داد های مختلف برای فایلها می باشد ولی شما می توانید از قوانین پایه زیر برای نامگزاری فایلها استفاده کنید:
1- فقط از کاراکتر های A تا Z و a تا z و 0 تا 9 و - (خط ربط یا Hyphen) و - (خط زیری یا Under scrore) استفاده کنید.
2- از فضای خالی (Space) ، اسلش ، بک اسلش ، کولن ، سمی کالن ، علامت سوال ، & و " استفاده نکنید
3- زمانیکه سرور وب شما به حروف بزرگ و حروف کوچک حساس است (Case-sensitive) از یک روش ثابت برای نوشتن نام های درایا حروف بزرگ و کوچک استفاده کنید.
------------------------------------------------------------------------------
URL آدرس (Uniform Resource Locator)
یو آر ال ها (Urlها) آدرس های وب منحصر به فردی هستند که برای صفحات وب ، تصاویر ، فیلم ها ، و یا هر فایل قابل دسترسی بر روی اینترنت اختصاص می یابند. برای مثال ، شما می توانید با وارد کردن صفحه وب مورد نظر در بخش آدرس ، از مرورگر به آن صفحه دسترسی پیدا کنید.

http://www.msn.com/Mspress/prodncts/1459.htm

آدرس بالا صفحه منحصر به فرد این تاپیک است.
یک Url دارای عناصر مختلفی می باشد. برای شناختن این عنصر از آدرس بالا استفاده می کنیم.

نوع پروتکل بکار رفته در باز کردن فایل مورد را تعیین می کند.
www (نام سرور) (Setvername):
سروری که فایل درخواست شده در آن قرار دارد را معرفی می کند. در بیشتر موارد حوزه ها (Domains) فقط یک سرور دارند. در این مثال ، نام سرور www می باشد.
msn.com (نام حوزه)(Domain name):
حوزه ای که فایل درخواست شده در آن قرار دارد را تعیین می کند. برای مثال msn.com
Mspress/prodncts(مسیر پوشه)(Directory):
دایرکتوری و زیر دایرکتوری که فایل در خواست شده در آن قرار دارد را تعیین می کند. اگر فایل مورد نظر در دایرکتوری اصلی (Root Directory) قرار داشته باشد این عنصر از Url لازم نیست که نوشته شود.
1459 (نام فایل)(File Name):
نام فایل درخواست شده را معرفی می کند.
.htm (پسوند فایل)(File Extension):
پسوند فایل درخواست شده را تعیین می کند.
------------------------------------------------------------------------------
ساختار فایل (File structure)
فرصتی که شما یک سند Html می نویسید، تصاویر ، لینک ها ، و دیگر عناصر را توسط Url آدرس دهی خواهید کرد. در بیشتر موارد ، شما باید از Url های مرتبط به هم استفاده کنید تا وب سایت شما قابل انتقال تر باشد این کار به شما امکان خواهد داد که وب سایت خود را بدون شکستن لینک ها انتقال دهید.
Url های مرتبط (Relative URLS) آدرس دهی کنید در همان دایرکتوری قرار داشته باشد که سند Html وجود دارد، Url مرتبط از ترکیب نام فایل و پسوند فایل مورد نظر تشکیل می شود. به طور مثال، اگر شما در حال کار کردن با صفحه Index.html باشید و بخواهید این صفحه را به Feedback.html لینک دهید Url مرتبط عبارت خواهد بود از:

Feedback.html

 

مطابق شکل اگر فایلی را می خواهید آدرس دهی کنید در یک زیر دایرکتوری از همان دایرکتوری که سند Html وجود دارد، قرار داشته باشد، Url مرتبط از ترکیب نام دایرکتوری به اضافه نام فایل و پسوند فایل مورد نظر تشکیل می شود. برای مثال اگر شما در حال کارکردن بر روی صفحه Index.html می باشید و می خواهید آن را به فایل Canyon.html در پوشه adventures لینک دهید لینک مرتبط عبارت است از:

adventures/Canyon.html

اگر فایلی را می خواهید آدرس دهی کنید در همان دایرکتوری که سند Html در آن است، قرار نداشته باشد شما می توانید از /.. برای رفتن به دایرکتوری دیگر در Url مرتبط استفاده می کنید.برای مثال اگر شما بر روی صفحه Canyon.html کار می کنید که در پوشه adventures است و می خواهید آن را به فایل Canyon.gif که در پوشه Media قرار دارد لینک دهید Url مرتبط عبارت است از:

../media/canyon.gif

 

[رضاقاسمی 1,539]

بخش سوم
------------------------------------------------------------------------------
ایجاد سند Html با استفاده از Notepad

در این فصل ما از Notepad بعنوان ویرایشگر Html استفاده خواهیم کرد.وقتی شما ایجاد اسناد Html را با استفاده از ویرایشگر های متن ساده Plain Text Editor یاد گرفتید، در آن صورت فهم و یادگیری دیگر ویرایشگر ها برای ایجاد اسنادHtml برای شما بسیار آسان خواهد بود.
در Taskbar ویندوز بر روی دکمه Start کلیک کنید و سپس All programs/Accessories/Notepad را انتخاب کنید. این کار موجب خواهد شد که نرم افزار Notepad باز شده و یک سند متنی جدید با عنوان Untitled را ایجاد کنید.
نوشتن یک سند HTML جدید
برای نوشتن یک سند 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 جدید ایجاد کنید از آن استفاده کنید.
طریقه اضافه کردن یک عنوان صفحه (Page Title)
این عقیده خوبی است که هر صفحه بهتر است دارای عنوان باشد. عنوان صفحه باید توصیف کننده محتوای صفحه باشد. این عنوان در نوار عنوان مرورگر وب ظاهر خواهد شد.
برای وارد کردن عنوان صفحه به طریق زیر عمل کنید.
1-در نقطه میانی دو تگ TITLE قرار گیرید.
2-عنوان مورد نظر خود را برای صفحه وارد نمایید.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Translational// En">
<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<BODY></BODY>
</HTML>

ذخیره سازی سند Html
سندی که در قسمتهای قبل نوشتیم یک فایل در قالب متن بود. برای ایجاد سند 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 را کلیک کنید.
اضافه کرده Meta Data
شما می توانید اطلاعاتی را درباره سند Html خودتان با استفاده از عنصر Meta اضافه کنید. برای مثال شما می توانید از دیتای meta برای مشخص کردن نویسنده ، اضافه کردن کلمات کلیدی و همچنین اضافه کردن یه توضیح درباره سند Html استفاده کنید.
به طور کلی هر اطلاعاتی را با استفاده از Meta اضافه کنید، فقط در کد مرجع Html مشاهده خواهد شد و در مرورگر وب بر روی صفحه وب دیده نخواهد شد.
عنصر Meta قسمتی از بخش Head در سند Html می باشد. برخلاف دیگر عناصر ، این عنصر به تگ خاتمه نیازی ندارد.
نکته: بیشتر موتور های جستجو از دیتای Meta در سند Html برای فهرست کردن صفحات وب استفاده می کنند.
معرفی نویسنده
شما می توانید با استفاده از یک عنصر 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>

اضافه کردن کلمات کلیدی (Keywords)

شما می توانید از عنصر Meta برای اضافه کردن کلمات کلیدی به سند Html خود که با محتوای سند مرتبط باشد، استفاده کنید. برای این کار به طریق زیر عمل کنید.
1- در سند Html پایه، در نقطه قبل از شروع تگ </head> قرار بگیرید و کلید Enter را فشار دهید تا یک خط جدید ایجاد شود.
2- در خط جدید کد زیر را وارد کنید:

<Meta name=keywords" content="insert list of keywords">

بجای کلمه insert list of keywords کلمات کلیدی خود را بنویسید.
نکته: کلمات کلیدی باید با کاما ( ; ) از هم جدا شوند.
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>

طریقه اضافه کردن یک توضیح
شما می توانیدبا استفاده از عنصر 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>

سفارشی سازی مشخصات صفحه

• تنظیم کردن رنگ پس زمینه

شما می توانید یک رنگ یکنواخت (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">

طریقه تنظیم کردن URL پایه (Base URL)
کارکردن با URL های مرتبط (Relative URLS) در وب سایت های بزرگ طاقت رسا خواهد بود. در بعضی مواقع شما می خواهید یک صفحه را از یک دایرکتوری به دایرکتوری دیگر بدون شکستن همه لینک های موجود در صفحه منتقل کنید. شما می توانید برای حل این مشکل از Base Url استفاده کنید.
Base URL یک ویژگی درون عنصر Base می باشد. Base URL به مرورگر های وب اعلام می کند که هر Url مرتبط که در سند Html استفاده شده است از Base URL شروع شده باشد.(نشأت گرفته باشد).
بطور مثال ، اگر Base URL شما www.msn.com/downloads باشد، در این صورت یک URL مرتبط از (www.msn.com/downloads/media/title.gif) آدرس: "media/title.gif" را صرفنظر از محل قرار گرفتن سند Html نتیجه خواهد داد.
برای وارد کردن یک Base Url به طریق زیر عمل کنید:
1- در سند Html پایه در نقطه قبل از تگ </head> قرار گیرید و سپس کلید Enter را فشار دهید تا یک خط جدید ایجاد شود.
2- در خط جدید کد زیر را وارد کنید:

<base url="http://www.msn.com/downloads/">

طریقه باز کردن یک سند Html در Notepad
1- در Notepad ، از منوی File گزینه Open را انتخاب کنید تا کادر محاوره ای Open باز شود.
2- از منوی مقابل File of type گزینه All File را انتخاب کنید.
3- سند Html مورد نظر خود را انتخاب کنید.
4- بر روی Open کلیک کنید.
طریقه باز کردن سند Html با استفاده از Windows Explorer
شما می توانید سند های 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 کنید.
طریقه بستن سند Html باز شده
در منوی فایل گزینه Exit را انتخاب کنید.
مشاهده یک سند Html در یک مرورگر وب
برای اینکه از چگونگی وضعیت سند Html خود اطلاع داشته باشید باید آن را در یک مرور گر باز کنید. بطور مثال برای باز کردن سند Html در Microsoft Internet Explorer به طریق زیر عمل کنید.
1- نرم افزار IE را باز کنید و از زیر منوی File گزینه Open را انتخاب کنید تا کادر محاوره ای Open باز شود.
2- اگر نام سند Html مورد نظر را می دانید آن را در کادر محاوره ای Open وارد کنید ولی اگر نام آن را نمی دانید می توانید بر روی دکمه Browse کلیک کنید تا کادر محاوره ای Microsoft Internet Explorer باز شود.
3- از طریق این کادر محاوره ای سند Html مورد نظر خود را پیدا کرده و آن را انتخاب کنید.
4- بر روی Open کلیک کنید
5- Ok کنید.
 

ویرایش شده آبان 93 توسط رضا قاسمی

[رضاقاسمی 1,539]

بخش چهارم
------------------------------------------------------------------------------
پاراگراف
شما مي توانيد از پاراگراف ها براي اضافه كردن متن به صفحه وب خود استفاده كنيد.
پاراگراف هاي Html به شما امكان مي دهند تا بلوك هايي از متن را ايجاد كنيد كه توسط خطوط خالي از هم جدا مي شوند.
پاراگراف يا عنصر P بايد درون عنصر <body> قرار داده شود.
1- در سند Html پايه در نقطه ميان دو تگ شروع و خاتمه Body قرار گيريد و دوبار كليد Enter را فشار دهيد تا يك خط خالي ايجاد شود.
2- در خط جديد كد زير را وارد كنيد:

<p>Insert Text for The first paragraph.</p>

توجه داشته باشيد كه پاراگراف خود را به جاي جمله Insert Text for The first paragraph. وارد كنيد.
3- شما مي توانيد پاراگراف هاي بيشتري را اضافه كنيد براي اين كار در نقطه بعد از تگ </p> قرار گيريد و كليد Enter را فشار دهيد تا يك خط جديد ايجاد شود و سپس مراحل بالا را مجددا انجام دهيد
در پايان سند Html بايد شبيه اين كد باشد.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Translational// En">
<html>
<head>
<title>welcome</title>
</head>
<body>
<p>Insert Text for The first paragraph.</p>
<p>Insert Text for The secound paragraph.</p>
</body>
</html>

در مرورگر وب سند Html بايد به اين صورت ديده شود:

Insert Text for The first paragraph.
Insert Text for The secound paragraph.

وارد كردن متن به وسيله Copy و Paste كردن
براي اين كار به طريق زير عمل كنيد
1- از نرم افزار ديگر متن مورد نظر خود را Copy كنيد.
2- در سند Html ، در نقطه اي كه مي خواهيد متن Copy شده در آنجا قرار گيرد كليك كنيد.
3- در Notepad ، دستور Edit/Paste را اجرا كنيد.
همچنين مي توانيد از تركيب كليد هاي Ctrl+v بدين منظور استفاده كنيد.
طريقه اضافه كردن بيش از يك جاي خالي
برخلاف ديگر نرم افزار هاي واژه پرداز مانند Word جاهاي خالي معمولي كه توسط كليد Space ايجاد مي شود در مرورگر وب فقط به عنوان يك جاي خالي تعبير مي شوند
بنابر اين براي وارد كردن بيش از يك جاي خالي شما بايد از يك كاراكتر مخصوص Html استفاده كنيد.
1- در سند Html ، در جايي كه ميخواهيد بيش از يك جاي خالي ايجاد كنيد قرار گيريد.
2- براي هر فضاي خالي كه ميخواهيد ايجاد كنيد، كد زير را وارد كنيد.

نكته: شما همچنين مي توانيد از Preformatted (از پيش قالب بندي شده) يا عنصر PRE براي اضافه كردن جاي خالي متعدد استفاده كنيد.اين عنصر براي قالب بندي يك بلوك متن مناسب تر خواهد بود.
طريقه ايجاد يك Line Break
براي ايجاد خطوط خالي در سند Html شما نميتوانيد از كليد Enter استفاده كنيد چون مرورگر وب خطوط خالي را كه توسط كليد Enter ايجاد شود شناسايي نميكند. براي اين منظور بايد از Line Break استفاده كنيد. براي ايجاد Line Break در يك متن بايد از عنصر Br استفاده كنيد
1- در سند Html در محلي كه ميخواهيد يك Line Break ايجاد كنيد قرار گيريد.
2- كد <br /> را وارد كنيد.
نكته: عنصر <br> به تگ خاتمه نياز ندارد.
طريقه وارد كردن كاراكتر هاي خاص (Special Characters)
در Html، كاراكتر هاي خاص با & شروع مي شوند و با كاراكتر سميكالن (; ) پايان مي يابند.
براي وارد كردن يك كاراكتر خاص به طريق زير عمل كنيد.
1- در ابتدا بايد كد Html مربوط به كاراكتر مورد نظر خود را پيدا كنيد.
2- در سند Html ، در نقطه اي كه مي خواهيد كاراكتر مورد نظرتان آنجا وارد شود قرار گيريد و سپس كد مربوط به آن كاراكتر را وارد كنيد.
در قسمت زير كد هاي Html كاراكتر هاي خاص رايج ليست شده است...

استفاده از charachter map براي وارد كردن كاراكترهاي خاص
شما ميتوانيد از charachter map به منظور پيدا كردن كاراكتر هاي خاص مورد نظر خود استفاده كنيد. Charachter map يك برنامه جانبي است كه درون ميكروسافت ويندوز قرارداده شده است.
براي دستيابي به اين برنامه به اين طريق اقدام كنيد.
در تسكبار ويندوز بر روي دكمه Start كليك كنيد و مسير زير را اينتخاب كنيد تا برنامه charachtermap آغاز شود
All program-> accessories-> systemtools -> charachtermap
كاراكتر مورد نظر خود را انتخاب كنيد.
حالا در قسمت پايين و سمت راست يك عدد ميبينيد
وارد سند Html خود در notepad بشويد در قسمتي كه ميخواهيد كاراكتر نمايش داده شود قرار گيريد.
كد زير را وارد كنيد.

xx;

توجه كنيد بجاي xxx بايد عدد نمايش داده شده در برنامه را وارد كنيد.
طریقه حذف کردن متن
برای پاک کردن متن تایپ شده کافی است که متن مورد نظر را انتخاب کنید و سپس کلید Delete را فشار دهید.
قالب بندی متن

• استفاده از فونت

شمامیتوانید از Font برای تعیین نوع ، سایز و ... استفاده کنید توجه داشته باشید که عنصر Font داخل عنصر Body قرار میگیرد.

طریقه استفاده از عنصر Font بدین صورت است:

1- در سند Html در نقطه قبل از متنی که میخواهید به آن جلوه بدهید کلیک کنید. برای مثال برای تعیین یک Font style برای کل صفحه شما باید در نقطه بعد از تگ <body> کلیک کنید.

2- برای تعیین کردن نوع قلم کد زیر را وارد کنید.

<font face="arial">

بجای فونت arial شما میتوانید فونت دلخواه خود را وارد کنید.

نکته: اگر شما از نوع فونتی استفاده کنید در در کامپیوتر کاربر موجود نباشد کامپیوتر او از فونت پیش فرض برای نمایش دادن متن شما استفاده خواهد کرد.

3- برای تعیین کردن یک لیست از انواع فونت ها کد زیر را وارد کنید.

<font face="Arial,Times New Roman , tahoma">

شما میتوانید بجای فونتهای نوشته شده در داخل علامت ""از فونتهای دلخواه خود استفاده کنید.

نکته:فونتهای نوشته شده در لیست باید توسط کاما از همدیگر جدا شوند.

اگر اولین فونت نوشته شده در کامپیوتر کاربر نصب نشده باشد مرورگر از فونتهای بعدی برای نمایش متن استفاده خواهد کرد.

4- برای تعیین کردن اندازه فونت کد زیر را وارد کنید:

<font size="1">

شما میتوانید به جای اندازه 1 اندازه دلخواه خود را وارد کنید.

5- برای تعیین کردن رنگ فونت کد زیر را وارد کنید:

<font color="navy">

شما می توانید به جای رنگ navy (آبی تیره) از رنگ دلخواه خود استفاده کنید.

نکته : شما میتوانید هم از رنکهای هگزادسیمال و هم از کلمات رنگی استفاده کنید.

ادامه دارد...

ویرایش شده آبان 93 توسط رضا قاسمی