بخشی از مقاله
منظور از وب چيست؟
• وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها.
• اينترنت، وب، WWW ، web يا World Wide Web همگی يک چيزند.
• تمامی کامپيوترهای وب مي توانند با هم ارتباط داشته باشند.
• کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل HTTP با هم ارتباط برقرار مي کنند .
نحوه کارکرد وب چگونه است؟
• اطلاعات وب داخل فايلهائی به نام Web Pages و يا صفحات وب قرار دارند.
• اين فايلها يا صفحات روی Web Server يا کامپيوترهای سرويس دهنده وب ذخيره شده اند.
• برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web Browser استفاده مي شود.
• دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب مي شوند.
• مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ مي باشد.
مرورگرها چگونه به خواندن صفحات وب مي پردازند؟
• يک مرورگر با کمک يک Request درخواستی برای خواندن يک صفحه از وب سرور مي کند.
• اين Request يا درخواست بر اساس استاندارد ارتباطی يا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر مي باشد.
• آدرس يک صفحه وب چيزی شبيه http://www.khaterat.com/faq.html است. بخش //:http نوع پروتوکل و يا استاندارد ارتباطی را تعيين مي کند، www.khaterat.com نام دومين يا Domain است و faq.html نام صفحه ای است که بايد خوانده شود.
مرورگرها چگونه صفحات وب را نمايش مي دهند؟
• چگونگی نمايش يک صفحه وب بصورت مستتر در آن وجود دارد.
• مرورگرها از روی دستورالعملهای داخل صفحات وب و با کمک تگ ها به نمايش صفحات مي پردازند.
• وظيفه اصلی تگ های اچتمل ( HTML tags ) بيان چگونگی نمايش اطلاعات مي باشد.
• يک تگ اچتمل چيزی شبيه <p> اين تگ پاراگراف است! </p> است.
چه کسانی استاندارد های وب را تعيين مي کند؟
• تعيين استاندارد های وب ربطی به شرکتهای مايکروسافت و يا نت اسکيپ ندارد.
• World Wide Web Consortium يا W3C متولی تعيين استانداردهای وب است.
• HTML, CSS and XML از مهمترين استانداردهای تصويب شده وب مي باشند.
• آخرين استاندارد HTML استاندارد XHTML 1.0 مي باشد .
يک فايل HTML چيست؟
• HTML را "اچ تی ام ال" و يا اچتمل بخوانيد.
• HTML برگرفته از حروف اول Hyper Text Markup Language مي باشد.
• يک فايل HTML فايلی از نوع text مي باشد که متشکل از markup tag ها مي باشد.
• مرورگر يا Browser از روی markup tag ها می فهمد که چگونه بايد صفحه را نمايش بدهد.
• يک فايل HTML بايد دارای انشعاب htm و يا html باشد.
• يک فايل HTML فايلی از نوع text مي باشد که با هر اديتور ساده ای قابل ايجاد است.
• وظيفه اصلی تگ های اچتمل ( markup tags ) بيان چگونگی نمايش اطلاعات مي باشد.
قصد داشتم این آموزش در وبلاگ باشد , ولی از آنجا که پست مطالب در وبلاگ با محدودیت هایی همراه است در گروه مطرح کردم.
آموزش کدنويسي HTML
بخش 1
امیدوارم مطلبی که در وبلاگ تحت عنوان HTML نوشته شده بود را خوانده باشید. با آن مقدمه به سراغ آموزش می رویم.
Notepad را اجرا كرده و جملات زير را بنويسيد:
<HTML>
</HTML>
هر كدام از اين جملات تگ (Tag) ناميده مي شوند.
اينها تگهاي آغازين وپاياني هستند. براي ایجاد تگ پاياني كافيست يك / به تگ آغازين اضافه كنيم. ولي همه تگها داراي تگ پاياني نیستند . اينطور فكر كنيد كه تگ ها با مرورگر صحبت مي كنند يا به مرورگر دستور مي دهند.
<HTML> يعني آغاز سند html و </HTML> يعني پايان سند. حال بعضي دستورات رابين اينها قرار مي دهيم. هر سند html يك جفت تگ بنام HEAD دارد :
<HTML>
<HEAD>
</HEAD>
</HTML>
تنها چيزي كه فعلاً باید در مورد تگهای HEAD بدان توجه کنیم تگهای TITLE هستند . تگ TITLE به شكل زير داخل HEAD قرار ميگيرد عنوان سند را مشخص مي كند : ( صفحه شما با این نام باز می شود. )
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
و حجم اصلي صفحه داخل تگ BODY قرار ميگيرد :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
و در نهايت مي توانيد يك عنوان به سند خود بدهيد و مطالبی داخل بدنه صفحه بنويسيد. بعلاوه می توانید نوشته های شخصی خود را در یک سند Html , بدون اینکه مرورگر آنها را تفسیر نماید , قرار دهید . برای این امر کافی است متن خود را بین علامتهای <!—و --> بنویسید. ( دقت کنید که فاصله ای بین این علائم نباشد )
<HTML>
<HEAD>
<TITLE>My Page</TITLE>
</HEAD>
<BODY>
This is my first web page !
<!-- First lesson -->
</BODY>
</HTML>
حالا سند را ذخيره كنيد ولی نه به شكل يك document بلکه به شکل سند html .
براي اينكار فرمان Save As را از منوي File انتخاب كنيد. در پنجره اي كه باز مي شود فولدر مورد نظر را انتخاب كنيد يا بسازيد و سپس نام Page1.htm را در بخش File Name بنويسيد ( یا هر نامی که خودتان می خواهید , فقط .HTM را فراموش نکنید. )
ضمناً در بخش Save as type : ، اطمینان حاصل کنید که All Files (*.*) را انتخاب کرده اید و سپس Ok را بزنيد.
با عرض تبريك ، شما مفتخر به خلق يك صفحة وب كاملاً عملیاتی شديد و مي توانيد آنرا به سرور وب Upload كنيد تا تمام دنيا ساخته شما را ببينند.
مي توانيد بر روي آيكون فايلي كه ايجاد كرده ايد دوبار كليك كنيد تا نتيجه كارتان را ببينيد
قبل از شروع درس بعدی به دو نكته اشاره مي كنيم ، اول اینکه آنچه شما ساخته اید اسكلت اصلي يك سند html است که حداقل اطلاعات لازم برای یک سند وب مي باشد و کلیه اسناد وب باید شامل این عناصر اصلی باشند . دوم اينكه عنوان سند چيزي است كه در نوار عنوان پنجره مرورگر مشاهده مي شود. با راست کلیک کردن بر روی صفحات وب و انتخاب View source نحوه قرارگیری و کاربرد این دستورات را ملاحظه کنید.
آموزش کدنويسي HTML
بخش 2
قبل از اینکه به ادامه بحث بپردازم , نکته ای رو می خواستم بگم . به دلیل پاره ای از مسائل گاهی کدهایی که نوشته می شن در وبلاگ تغییراتی می کنند و برخی از علائم جا به جا می شن , مثل آموزش اول HTML 1 . لطف کنید کل مطلب رو Select کنید و بعد در یک صفحه Word کپی کنید تا این تغییرات از بین بره. ( Ctrl+c = Copy , Ctrl+v = Paste ) موفق باشید.
ادامه بحث :
تیترهای رده 1 تا 7 :
ما می توانیم سایز نوشته های خود را تغییر دهیم . برای این کار روشهای مختلفی امکان دارد , در این جا یکی از این روش ها را توضیح می دهیم.
شش رده در Html در نظر گرفته شده است که رده اول از همه بزرگتر می باشد.
<H1> </H1>
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> </H6>
<H7> </H7>
نوشته های خود را باید بین این تگ ها قرار داد. این کار را در متن جلسه قبل امتحان کنید.
ایجاد پاراگراف :
ممکن است تصور شود اگر متن خود را پاراگراف بندی کنید و در بین خطوط قرار دهید در مرورگر هم همان طور نشان داده می شود. اما این طور نیست !
مرورگر خط های کوتاه را در کنار هم قرار می دهد و خط جدیدی ایجاد می کند . ولی اگر نمی خواهید پیرو مرورگر باشید , این چنین عمل کنید.
بوسیله دو دستور <P> و </P> می توان شروع و پایان یک پاراگراف را تعیین کرد.
برای تعیین خطوط جدید , دستور <BR> در نظر گرفته شده است.
<HTML>
<HEAD>
<TITLE>My Page</TITLE>
</HEAD>
<BODY>
<H1>This is my first web page ! </H1>
<H2> This is my first web page ! </H2>
<H3> This is my first web page ! </H3>
<H4> This is my first web page ! </H4>
<P><H5> This is my first web page ! </H5></P>
<H6> This is my first web page ! <BR> New Line </H6>
<H7> This is my first web page ! </H7>
<!-- First lesson -->
</BODY>
</HTML>
آراینده های منطقی Bold . Italic . UnderLine
جهت آرایش کردن متن به صورتی که متفاوت نمایش داده شود , می توان از دستورات زیر استفاده کرد.
BOLD <B></B> یا <STRONG></STRONG>
<BODY>
Qom Computer <B>SoftWare</B>
</BODY>
ITALIC <I></I> یا <EM></EM>
<BODY>
Qom <I> Computer </I> <B>SoftWare</B>
</BODY>
UNDERLINE
<BODY>
<U>Qom</U><I> Computer</I><B>SoftWare</B>
</BODY>
ميتوانيم تگهای فوق را به صورت ترکيبی نيز استفاده کنيم:
<BODY>
Qom Computer<I><B>SoftWare</B></I>
</BODY>
اين مثالی از تگهای تو در تو است.
اگر به اين صورت از تگها استفاده مي کنيد ، مرورگر را دچار سردگمی نکنيد ، اين تگها بايد تو در تو باشند نه اينکه با هم تداخل کنند
اجازه دهيد با مثالی توضيح دهم
تگهای متداخل بد :<THIS><THAT> </THIS></THAT>
تگهای متداخل خوب : <<THIS><THAT> </THAT></THIS
آموزش کدنويسي HTML
بخش 3
سایر آراینده های منطقی :
1 - اگر می خواهید در پایان نوشته خود از کسی تشگر کنید , بهتر است از تگ مقابل استفاده کنید :
<CITE></CITE>
2 - برای نوشتن آدرس پستی یا الکترونیکی افراد از دستور ADDRESS استفاده شود.
<ADDRESS>qom_computer_software@yahoo.com</ADDRESS>
3 - به منظور نوشتن کد در صفحات خود از دستور زیر استفاده کنید.
<CODE> for ( int I = 0 ; I < 3 ; I++ ) <BR> cout<<"Visual C++"; </CODE>
4 - اگر می خواهید درباره مطلبی بیش از چند سطر توضیح دهید , بهتر است از بقیه متن ها جدایش کنید . برای این امر از دستور <BLOCKQUOTE></BLOCKQUOTE> استفاده کنید.
5 - جهت به نمایش گذاشتن متن خود به صورت ماشین تایپ یا کامپیوترهای قدیمی از <TT></TT> استفاده کنید.
آراینده های فیزیکی
این نوع آراینده ها شامل رنگ , نوع فونت , سایز و مواردی از این قبیل می باشد
انتخاب Font
<FONT FACE =" نام فونت " >
می توانید 3 فونت را انتخاب کنید , تا در صورت عدم وجود یکی از فونت ها به سراغ دیگری برود.
<FONT FACE =" نام فونت , نام فونت , نام فونت " >
نام برخی از فونت ها :
Arial
Arial Black
Comic Sans MS
Courier New
Impact
Times New Roman
Trebuchet MS
Tahoma
Verdana
انتخاب Size
<FONT SIZE = "یک عدد می باشد" >
انتخاب رنگ متن
<FONT COLOR = "نام رنگ " >
در HTML علاوه بر نام رنگ می توان از یک سیسنم دیگر که در مبنای 16 می باشد و Hexadecimal نام دارد استفاده کرد ( از فتوشاپ می توان کمک گرفت ) ( نمونه : DE883B# , 3BDE6D# , #ffffff , #000000 , ... )
در ضمن 00 به معنای هیچ مقدار از آن رنگ و ff به معنای تمام یک رنگ می باشد.
رنگ زمینه
در همان قسمت <BODY> قرار می گیرد
<BODY bgcolor="نام رنگ یا عدد متناظر با آن " > </BODY>
یادتان باشد که مطالب شما بین دو دستور BODY می باشد.
رسم خطوط افقی
برای این کار از دستور <HR></HR> استفاده می شود و دو ویژگی SIZE و WIDTH دارد ( ضخامت و طول خط )
<HR WIDTH = "عدد" SIZE = "عدد " >
می توانید اندازه طول خط را بر اساس درصدی از عرض صفحه وب خود قرار دهید.
<HR WIDTH="60%" SIZE = 3>
آموزش کدنويسي HTML
بخش 4
ایجاد Link در صفحه وب
1 – پیوندی به صفحات دیگر وب
از چپ به راست بخوانید
<A HREF = "URL آدرس صفحه ای که می خواهیم با کلیک کردن به آن برویم "> متنی که می خواهیم با کلیک بر روی آن به آدرس صفحه دیگر برویم </A>
<A HREF = " http://computerunion.blogfa.com"> وبلاگ انجمن علمی مهندسی کامپیوتر </A>
شما می توانید جهت تمرین آدرش را بر اساس وینذوز خود بدهید. محلی که در آن یکی از صفحاتی که ساخته اید ذخیره کرده اید. نام فایل فراموش نشود ( name.HTM)
2 – پیوندی به یک قسمت از صفحخ وب موجود
ابتدا باید برای آن قسمت نامی را قرار داد و سپس به آن لینک کنیم.
<A NAME="نام"></A>
<H1>متن مورد نظر</H1>
<A HREF ="#نام">متن مورد نظر </A>
3 – پیوندی به یک قسمت خاص از یک صفحه وب دیگر
<A HREF="URL#نام">متن مورد نظر</A>
نام# نامی است که شما به عنوان مثال در صفحه 1 برای متنی قرار داده اید.
URL آدرس صفحه 1 است.
متن مورد نظر در صفحه فرضی 2 است.
