ایران سرفراز- نرم افزار وپروژهای دانشجویی


نرم افزار وپروژهای دانشجویی

درس نخست – زبان- HTML -World Wide Web -Web Browser

<!-- /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"Times New Roman";} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} -->

Mo-mah.persianblog.ir

Mohsen_mahyar@yahoo.com

 

HTML کتابچه نخست آموزش

 

فهرست کتابچه اول

مقدمه

روش استفاده از کتابچه های این دوره

HTML درس نخست – زبان

اینترنت چست؟

چیست؟ World Wide Web • وب جهان پهن یا

(Web Browser) • مرورگر وب

چیست ؟ HTML •

به چه چیزهای نیاز داریم؟ HTML • برای فراگیری

خود را بسازید HTML • اولین صفحه

مقدمه

این دوره آموزشی شامل مجموعه از مقالات دوره ای و مرتبط به هم و چندین مثال عملی مختلف است که

آشنا کنم. بعد از به پایان رساندن HTML من در آنها تلاش کردم با زبانی ساده و از کوتاه ترین راه شما را با

HTML این دوره شما میتوانید با این زبان ساده , وب سایت خودتان را به راحتی ایجاد کنید. فراگیری زبان

بسیار آسان است به شرط آنکه مقالات این دوره آموزشی را با دقت دنبال کنید .

روش استفاده از کتابچه های این دوره

هم است.

تمام دروس این دروه شامل مثالهای عملی بسیاری است که به فرایند یادگیری شما کمک فراوانی میکنند.

با حروف کوچک تایپ شده اند. به غیر از اینکه متن هر مثال بطور HTML برای هماهنگی بین مثالها , کد های

کامل آورده شده , فایل مربوط به هر یک از آنها نیز به همراه کتابچه ارائه میشود.توجه کنید که مثالهای این

کتابچه های را نمیتوانید کپی و به ویرایشگر خود منتقل کنید . برای همین اگر بخواهید که کد مثالها را بدون

تایپ کردن آنها , به ویرایشگر متن خود انتقال دهید, میتوانید از فایل مثالها استفاده کنید. برای دسترسی به

که بالا, سمت چپ کادر کد هر یک از مثالها قرار دارد کیلیک کنید. در این (Code) این فایلها, برروی عبارت

نمایش داده میشود. برای دیدن خود مثالها در مرورگر وب Text صورت کد مثال مربوطه برای شما در فرمت

کیلیک کنید. (Run) نیز میتوانید برروی

نکته :

که با FrontPage XP شاید از خودتان بپرسید با وجود برنامه های پیشرفته ویرایش صفحات وب مانند

ایجاد کنید , HTML استفاده از آنها میتوانیم صفحات وب مورد نظر خود را بدون حتی فراگیری یک کد ساده

چرا باید زحمت یاد گیری این زبان را به خود بدهید؟ پاسخ به این پرسش ساده است اگر شما میخواهد یک

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

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

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

HTML درس نخست - زبان

و اینترنت آشنا شویم. HTML نخست باید با یک سری از مفاهیم مرتبط با

اینترنت چست؟

اینترنت یک شبکه جهانی و گسترده از کامپیوتر های متصل به هم می باشد که این امکان را به میلیون ها

انسان در سرار جهان میدهد تا اطلاعات خود را در هر زمینه ای که مایل هستند عرضه کنند و با هم از راه

Internet Relay , FTP , Telnet . های مختلف چه نوشتاری , صوتی و یا حتی تصویری ارتباط برقرار کنند

قسمتهای از شبکه جهانی اینترنت را تشکیل (World Wide Web ) و وب جهان پهن e-mail , Chat

میدهند.

چیست؟ World Wide Web وب جهان پهن یا

یاد میشود زیر مجموعه از شبکه گسترده و جهانی (Web) که اغلب از آن به عنوان وب World Wide Web

اینترنت است. وب یک شبکه گسترده از کامپیوترهای متصل به هم است که آنها را قادر می سازد با

Hyper-Text Transfer یا HTTP. با هم ارتباط بر قرار کنند HTTP ( استفاده از توافق نامه (پروتکل

یک استاندار ارتباطی است که برای تعیین نحوه ارتباط بین کامپیوترها متصل به وب ایجاد شده . Protocol

شروع میشود برای مثلا Http:// اگر دقت کرده باشد برای همین است که آدرس وب سایتها با عبارت

www.arpc.ir

می نامند ذخیره میشوند. این (Web Page) اطلاعات و داده های وب درون اسنادی که آنها را صفحات وب

خوانده میشوند قرار (Web Server) صفحات وب برروی کامپیوترهای متصل به شبکه که خدمات دهنده وب

میگیرند. حالا کامپیوترهای دیگری که به شبکه متصل هستند میتوانند با ارتباط به خدمات دهنده وب به

اطلاعات و دادهای درون صفحات وب که در این خدمات دهنده ها قرار گرفتند , دسترسی پیدا

می نامند. (Web Client) کنند.کامپیوترهای که از این صفحات وب بهره میگیرند را خدمات گیرنده

(Web Browser) مرورگر وب

صفحات وب را در کامپیوتر , (Web Browser) کاربران میتوانند با استفاده از برنامه ای به نام مرورگر وب

Internet خود ببینند.در حال حاضر مرورگرهای مختلفی وجود دارند که رایجترین آنها عبارت اند از

محصول شرکت Opera و Netscape محصول شرکت Netscape , Microsoft محصول شرکت Explorer

بهره میگیرند. این مرورگر نسبت به Internet Explorer امروزه بیشتر از 90 درصد کاربران اینترنت از . Opera

به همراه سیستم عامل Internet Explorer . دیگر مرورگرها دارای امکانات و ویژگیهای بیشتری است

ارائه میشود همچنین میتوان آخرین نسخه این مرورگرها را بطور رایگان از وب سایت Windows

دو مرورگر دیگر را نیز میتوانید بصورت رایگان از اینترنت Internet Explorer مایکروسافت دریافت کرد.به غیر از

دریافت کنید. البته حجم این برنامه ها زیاد است و با توجه به این که بیشتر کاربران در کشورمان از طریق خط

خریداری کرد. CD تلفن به اینترنت دسترسی دارند , بهتر آن است که آخرین نسخه این مرورگرها را برروی

چیست ؟ HTML

یک زبان ساده آرایش دهنده متنی است که برای توزیع اسناد Hyper-Text Markup Language یا HTML

مبتنی بر متن برروی شبکه های کامپیوتری طراحی شده و مجموعه ای از فرمانهای از پیش تعریف شده

قالب (Browser) تگ) که میتوان با استفاده از آنها, اسناد متنی را برای نمایش در مرورگرها Tag) است

اسناد مختلف متنی که در میلیونها ,( Hyperlinking) بندی کرد و با استفاده از امکان فراپیوند سازی

برای ایجاد صفحات HTML خدمات دهنده وب در سراسر دنیا وجود دارند را به هم مرتبط کرد. بطور کلی از

وب بهره گرفته میشود.

خوب حالا که بطور کلی با یک سری از مفاهیم پایه ای اینترنت و وب آشنا شدیم نوبت به فراگیری خود زبان

رسیده و از این قسمت به بعد کار خود را آغاز میکنیم. HTML

به چه چیزهای نیاز داریم؟ HTML برای فراگیری

که حتما در اختیار دارید وگرنه نمی توانستید این کتاب Apple چه PC به غیر از یک دستگاه کامپیوتر چه

NotePad دریافت کنید,به یک ویرایشگر ساده متن مثل RastiSoft الکترونیکی آموزشی را از روی سایت

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

و ... استفاده کنید ولی ما اینجا قصد آموزش کار با یک ویرایشگر را نداریم MSWord xp پیشرفته تر مثل

است .به غیر از یک ویرایشگر ساده متن, شما نیاز به یک مرورگر وب مانند HTML بلکه اینجا قصد فقط آموش

و NotePad که ایجاد کرده اید دارید. هم HTML برای مشاهده صفحات Netscape یا Internet Explorer

وجود دارند و شما اگر از این سیستم عامل بهره Windows در نسخه های مختلف Internet Explorer

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

بهره بگیرند. SimpleText

خود را بسازید. HTML اولین صفحه

را اجرا کنید. NotePad برای شروع کار ابتدا ویرایشگر متن

windows 95/ در 98 Notepad • برای اجرای

را انتخاب کنید. Notpad و سپس Accessories < Programs < Star از منو

windows XP در Notepad • برای اجرای

را انتخاب کنید. Notpad و سپس Accessories < All Programs < Star از منو

: HTML در زبان (Tag) تگ ها

است. تگ ها دستورات ساده ای (Tag) اولین چیزی که شما در این مرحله باید با آن آشنا شویم مفهوم تگ

بین علائم > و < HTML هستند که به مرورگر وب شما می گویند که چه عملی انجام دهد. تمامی تگهای

یک بخش آغازین و پایانی دارند. HTML قرار میگیرند تا از متون ساده درون صفحه تفکیک شوند. بیشتر تگهای

HTML بخش پایانی تگ همانند بخش آغازین آن است که فقط در ابتدای آن کاراکتر / قرار میگیرد.در زبان

و <HTML> فرقی نمیکند که تگها را با حروف کوچک تایپ کنید یا حروف بزرگ. مثلا هیچ فرقی بین

از نظر عملکرد وجود ندارد. البته برای هماهنگی بین مثلهای آورده شده در این دوره آموزشی <html>

,تمام تگها با حروف کوچک تایپ شده اند.

: HTML تگ

است. کد <html> باید بکار ببرید تگ Html نخستین تگ یا دستوری که شما برای ایجاد یک صفحه ساده

وارد کنید. NotePad زیر را در

<html>

</html>

</html> ابتدا و <html> . است HTML این کد ساده به مرورگر شما میگوید که فایل حاضر یک صفحه

انتهای این صفحه را مشخص میکنند.

: HEAD تگ

اضافه کنید . اطلاعاتی که معمولا در این HTML را بین تگهای <head> برای کامل شدن صفحه وب خود تگ

قرار میگیرند از دید کاربر مخفی است و فقط مورد استفاده مرورگر وب و موتورهای HTML ناحیه از صفحه

جستجو قرار میگیرند. در بخشهای بعدی بیشتر در مورد این تگ صحبت خواهیم کرد.

<html>

< head>

</head>

</html>

: TITLE تگ

مرورگر وب ,بالا Title Bar حالا میخواهیم که یک عنوان برای صفحه خودمان تعیین کنیم. این عنوان در بخش

بهره میگیریم. این تگ <title> از تگ HTML سمت چپ آن ظاهر میشود. برای تعیین عنوان برای یک صفحه

اضافه کنید.عنوانی که برای صفحه خود انتخاب کرده اید بین تگ <head> را بین تگهای آغازین و پایانی

را برگزیده ام.) ( My first HTML Page) وارد کنید. (در این بخش من عنوان < title > آغازین و پایانی

<html>

<head>

<title>My first HTML Page</title>

</head>

</html>

: BODY تگ

بخش HTML خود را تعیین کنیم . بدنه یک صفحه HTML خوب حالا در این مرحله ما باید بدنه اصلی صفحه

اصلی آن است که ما مطالب و اطلاعاتی که میخواهیم در مرورگر نمایش داده شود را در آن قرار

دارای ویژگیهای BODY استفاده میکنیم.( تگ <BODY> از تگ HTML میدهیم.برای تعیین بدنه صفحه

فراوان است بنابراین یک درس کامل را به این تگ اختصاص دادم و در آن درس بطور کامل با این تگ آشنا

خواهید شد.)

Code / Run

<html>

<head>

< title>My first HTML Page</ title>

</head>

<body>

This is my first HTML page!

</body>

</html>

بالا این کادر کیلیک کنید) , Code و برای مشاهد کد برروی Run (برای اجرای این مثال میتواند برروی

قرارگرفته , در مرورگر وب نمایش BODY که در بین تگ آغازین و پایانی (This is my first HTML page) جمله

داده میشود.

شما کامل شده است حال برای اینکه نتیجه کار خود را ببینید باید این صفحه را با HTML صفحه ساده

استفاده میکنید NotePad ذخیره کنید و آن را با مرورگر وب خود امتحان کنید. اگر از HTM و یا HTML پسوند

برروی MyFirstPage.html انتخاب کنید و آن را با نام File را از منو Save As… برای ذخیره این فایل

دیسک سخت کامپیوتر خود ذخیره کنید.

خود را با مرورگر وب امتحان کنیم. برای این کار مرورگر وب را( که HTML حالا موقع آن رسیده تا اولین صفحه

که قبلا ذخیره MyFirstPage.html فایل Open ... است)اجرا کنید و از منو Internet Explorer در اینجا

در دایرکتوری که آن را ذخیره کردید دوبار MyFirstPage.html کرده اید را باز کنید. همچنین میتوانید بروی فایل

شما در آن نمایش داده میشود.اگر مراحل HTML کیلیک کنید و در این حالت مرورگر وب اجرا میشود و صفحه

قبل را درست انجام داده باشید نتیجه کار همانند تصویر زیر خواهد بود:

خود را ساختید! این صفحه وب گرچه ساده HTML اگر چنین است , به شما تبریک میگویم چون اولین صفحه

ترین صفحه است که میتوان ایجاد کرد ولی پایه تمام صفحات وب پیچیده موجود برروی اینترنت است. شما

HTML در کتابچه و دروس بعدی با تگهای بشتر آشنا خواهد شد و روش بکار گیری آنها, برای ساخت صفحات

را فرا خواهید گرقت.

یک نکته:

بکار رفته درون صفحات وب را ببینید در صورتی که از مرورگر HTML با استفاده از مرورگر وب میتوانید کد

درون صفحه وب به یکی از صورتهای زیر عمل کنید: HTML بهره میگیرید برای مشاهد کد Internet Explorer

را انتخاب View Source • برروی قسمت خالی صفحه درون مرورگر خود کیلیک راست کنید و آیتم

کنید.

را انتخاب کنید . Source خود آیتم (Menu Bar در بالای مرورگر وب (قسمت View • از منو

صفحه وب موجود برای شما نمایش داده میشود. HTML در هر یک ار دو حالت بالا , کد

آشنا شدید. همچنین اولین صفحه وب خود را با HTML شما در این درس با مفاهیم اصلی اینترنت و زبان

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

بکار ببرید آشنا خواهید شد.کتابچه بعدی را حتما مطالعه کنید. HTML با اطلاعات نوشتاری برروی صفحات

نوشته : داود راستی

Mo-mah.persianblog.ir

Mohsen_mahyar@yahoo.com

   + MOHSEN GHASEMI - ٩:۱٥ ‎ق.ظ ; ۱۳۸٩/٦/٧