دنیای کامپیوتر

1- تگ های HTML

bahar-zendegy62 — Mon, 19 Dec 2005 06:06:53 GMT

بعد از خواندن این درس توانائیهای زیر را در ساخت صفحات وب بدست می آورید:
1- آشنایی و درک تگهای HTML
2- باز کردن محیط کاری متناسب برای ایجاد یک سند HTML
3- استفاده از یک Editor (ویرایشگر متنی )
4- وارد کردن مطالبی به عنوان توصیه بطوریکه در صفحه نشان داده نشود
5- باز کردن سند در Browser برای نمایش آن تحت وب

1- تگ های HTML

وقتی یک مرورگر وب صفحه ای مانند صفحه فوق که شما مطالعه می کنید را نشان می دهد، صفحه از یک فایل متنی خوانده میشود.
کدهای ویژه اي بکار برده شده اند که با علامات <> نشانه گذاری شده اند. قالب عمومی تگ های HTML بصورت فوق می باشد :
< نام تگ / >رشته کاراکتری < نام تگ >
(البته بعضی تگها بصورت فرد عمل می کنند )
مانند:

این تگ بیان می کند که مرورگر وب متنی را بصورت زیر نمایش می دهد :
What are HTML tags
- بعدا در مورد تگهای < Hn > توضیح بیشتری خواهیم داد.

تذکر :

مرورگر وب نسبت به استفاده از حروف بزرگ یا کوچک حساسیت ندارد.بر خلاف برنامه های کامپیوتر ، اگر شما ایرادی در HTML داشته باشید ، کامپیوتر شما دچار هنگ نمی شود و ایراد بسادگی با رفتن در داخل سند HTML بر طرف میشود. مرورگر شما ، دارای یک سند لغات کوچک می باشد . یکی از جنبه های جذاب HTML ، این است که اگر Browser شما نداند که تگی که در آن نوشته شده چیست ، آن را نادیده می گیرد. برای مثال :

مثلا تگ < H3 > < /H3 > مورد حمایت مرورگر قرار می گیرند . ولی با مرورگرهای فعلی < wiggle /> و < wiggle > حمایت نمی شوند . اگر ما برنامه نویس یک مرورگر وب بودیم عملکردی برای تگ < wiggle > در نظر می گرفتیم .

2- باز کردن محیط کاری

برای کامل کردن این بحث ، از ابتدا بهتر است که یک پنجره جدید ایجاد کنید. برای اینکه به شما اجازه می دهد که ضمن نگهداری پنجره فعلی ، پنجره ای جدید برای کار خودداشته باشید. شما خیلی راحت می توانید بین پنجره ها و اطلاعات مختلف گردش داشته باشید . مراحل ایجاد محیط کاری را در اینجا بیان می کنیم :
1- از منوی File مرورگر خود ، گزینه New Window را انتخاب کنید . پنجره دوم ظاهر می شود . اولین پنجره کتاب شماست و پنجره دوم محیط کاری برای تکمیل دروس HTML
2- فایل متنی خود را باز کنید
3- ایجاد سند HTMl
یک سند HTML شامل دو قسمت می باشد ( قسمت های تیتر و بدنه )
- قسمت تیتر ، شامل اطلاعاتی در مورد سندی که نشان داده می شود است .
- بدنه ، شامل کلیه مواردی می باشد که در یک صفحه وب نشان داده می شود .

نمونه یک سند HTML

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

هر آنچه در صفحه نشان داده می شود
این تگ توضیحاتی دارد مبنی بر اینکه برای نوشتن این صفحه از کدام ورژن HTML استفاده شده است . تمامی مندرجات صفحه بین 2 دو تگ < HTML> و < html /> نوشته می شود . ابتدا < Head > و < head / > و سپس < body > و < body / > < ! …… > متنی که ما بین تگ فوق نوشته می شود ، در صفحه وب نمایش داده نمی شود، ولی این اطلاعات در اختیار کسی قرار می گیرد که Source یک صفحه وب را که در پشت صفحه وب قرار دارد می بیند .
وقتی صفحه وب شما دچار پیچیدگی می شود، این مطالب و کدها می تواند برای به روز کردن صفحه وب شما مفید باشد . اینجا به ذکر مراحل ایجاد سند HTML می پردازیم :
1- Editor متنی خود را باز کنید
2- و مطالب زیر را در آن وارد کنید :

موقعیت تگ < title > و < title /> داخل دو تگ < head > و < head /> می باشد و این که در صفحه نشان داده نمی شود پس کار آن چیست ؟
تگ < html > شناسه یگانه ای است برای هر سند HTML و در قسمت Title bar بار مرورگر شما نمایش داده می شود .
در درس 3 شما می آموزید که چگونه رشته کاراکتر را برای Title اضافه کنید و در صفحه وب شما ظاهر شود . ذکر این نکته ضروری است که دراین تگ توضیح اسم نویسنده و تاریخ ایجاد سند HTML ذکر می شود و شما می توانید هر نکته ای را درون این تگها نمایش دهید . ولی فقط در سند HTML قابل رویت می باشد و در صفحه وب شما قابل مشاهده نیست.
3- سند خود را به نام Lesson1.html ذخیره کنید و آن را در فولدر خاص مورد نظر خود نگهداری کنید .

تذکر ( برای استفاده کنندگان ویندوز 3.1 ) :

شما باید سند HTML خود را با نام HTM .نام فایل ذخیره کنید . بنابراین نام فایل شما در این مثال Lesson1.htm خواهد بود . نگران نباشید مرورگر شما به اندازه کافی هوشمند می باشد و می داند که آخر نام فایل شما HTM می باشد . HTM نیز یک فایل HTML می باشد .
استفاده کنندگان ویندوز 95 به بالا می توانند نام فایل را Lesson1.html قرار دهند . طبق مثال فوق با استفاده از این اسم و پسوند مرورگر فایل شما را مانند یک فایل HTML می خواند و آن را بصورت صفحه وب نشان می دهد .

نمایش سند در یک صفحه وب

1- بر گردید به مرورگر وب که برای محیط کاری از آن استفاده می کنید . از منوی File گزینه Open را انتخاب کنید .
2- از کادر محاوره ای که باز می شود ، سند مورد نظر ایجاد شده را باز کنید .
3- حال در Title bar مرورگر خواهید دید Lesson 1

چک کردن فایل

سند خود را با صفحه وبی که در پیش رو داریدمقایسه کنید، بعد از نگاه کردن نمونه از دکمه Toolbar back استفاده کنید تا مرورگر شما دوباره به این صفحه باز گردد . اگر سند شما با سند نمونه تفاوت داشت دوباره مروری بر مطالبی که وارد کردید داشته باشید . از اشتباهات معمولی که وجود دارد عدم مشاهده Titlebar می باشد . متنی که بین تگ های < title > و < title /> قرار داده شده در Title بار نشان داده نمی شود . از اشتباهات معمول دیگر برای کسانی است که از برنامه های پردازشگر لغات برای Type HTML استفاده می کنند و نمیتوانند آن را در مرورگر باز کنند .در این صورت صفحه آنها پر از کاراکترهای اضافی است .
اگر شما به دنبال یک Editor ساده و ارزان هستید پیشنهاد ما به شما Notepad می باشد

مرور عناوین

1- تگ های HTML چه هستند ؟
2- متن تگ Title در کجا قرار می گیرد؟
3- چه مراحلی را برای ایجاد یک سند HTML باید دنبال کرد ؟
4- چگونه یک تگ توضیح ایجاد می شود ؟
5- چگونه می توانید سند HTML خود را در مرورگر نمایش دهید ؟

یک تمرین :

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

آموزش HTML

bahar-zendegy62 — Tue, 13 Dec 2005 07:03:18 GMT

تاريخچه

در سال 1992 در دانشگاه مينه سوتا سيستمی به نام web به وجود آمد که دارای دو ويژگی خاص بود.

Graphic, Multi Media
Hyper Text (فقط کليک کردن و در سايت حرکت کردن )

صفحات اين سيستم توسط برنامه ای به نام HTML ساخته شد.

همچنين برای رد و بدل کردن اطلاعات:

(HTTP(Hyper Text Transfer Protocol

HTML Web page

HTML يک text عادی و در حقيقت زبانی برای مارک کردن فايلهای text به يکديگر می باشد که آن را با TAG مشخص کرده و به صورت <tag name> می نويسند.

bahar-zendegy62 — Tue, 13 Dec 2005 07:00:26 GMT

فرمت کلی يک فايل HTML:

يک فايل HTML از دو بخش Body و Head ،تشکيل می شود. شکل ساده يک فايل HTML به صورت زير است.

<HTML>

<HEAD>
<TITLE> This is the title</TITLE>
<HEAD/>

<HTML/>

نمايش صفحه ای که دارای HTML بالاست...

همان طور که می بينيد، در بالای صفحه حاصل،متن نوشته شده در قسمت Title و در بدنه اصلی صفحه متن ما نوشته شده است.

bahar-zendegy62 — Tue, 13 Dec 2005 06:59:39 GMT

Font:
با اين برچسب می توانيم مشخصات متن را به دلخواه خود درآوريم و فرمت کلی آن به صورت زير است.

اين تگ دارای Attributeهای زير می باشد:

color: رنگ متن
size: اندازه متن
face: نوع متن

مثال: می خواهيم کلمه Schoolnet را با فونت نازنين و با اندازه normal و رنگ آبی بنويسيم.

<HTML>

<BODY>
<FONT size = "3" color ="blue"> Schoolnet </FONT>
</BODY>

</HTML>

نمايش صفحه ای که دارای HTML بالاست...

همانطور که می بينيد متن ما به رنگ آبی درآمده و اندازه آن نيز 3 شده است.

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

Size = +2

BOLD:
اول و آخر متن مورد نظر قرار گرفته و آنرا Bold می کند.

<B> text … </B>

ITALIC:
اول و آخر متن مورد نظر قرار گرفته و آنرا Italic می کند.

<I> text … </I>

UNDERLINE:
اول و آخر متن مورد نظر قرار گرفته و آنرا Underline می کند.

<U> text … </U>

bahar-zendegy62 — Tue, 13 Dec 2005 06:58:06 GMT

قرار دادن يک تصوير بر روی صفحه:

Image
<IMG>: برای قرار دادن يک تصوير در web از اين تگ استفاده می کنيم.
به چند دليل نبايد از تگ image زياد استفاده کرد.

1- به علت زياد شدن تعداد عکسها صفحه دير load می شود.
2- ايجاد مشکل در Search Engine.
3- عدم قابل استفاده بودن برای همه(عدم سرعت کافی، هزينه دار بودن برای user و ... )

طرز قرار دادن عکس:

<IMG src="آدرس فايل تصوير را در اين قسمت می نويسيم"
align="left/middle/right/top/bottom"
height="ارتفاع عکس بر حسب پيکسل"
width="طول عکس بر حسب پيکسل"
alt=" "

هر چيزی که در اين قسمت بنويسيم قبل از loadشدن تصوير و يا بعد از کامل شدن صفحه اگر موس را روی عکس ببريم اين متن ديده خواهد شد.(در يک مستطيل زرد رنگ)"

border=”ضخامت جدول دور عکس را بر حسب پيکسل نشان می دهد”
hspace=”فاصله عمودی دور تصوير بر حسب پيکسل”
vspace=”فاصله افقی دور تصوير بر حسب پيکسل”>

مثال:<img border="3" src="../Zahiri/email/zahiri.jpg" width="111" height="137" align="center" hscape="10" vscape="10" alt="This is Zahiri's picture">

که نتيجه کار را ملاحظه می کنيد.

سوال: برای لينک کردن يک عکس چه کاری را بايد انجام دهيم؟
جواب:

bahar-zendegy62 — Tue, 13 Dec 2005 06:57:08 GMT

interlink(لينک داخلی)

برای درست کردن لينکهای داخلی دو روش داريم.
1- ايجاد flag با استفاده از تگ <A>
2- اسم گذاری عناصر موجود در صفحه با استفازه از headingها

مثال: می خواهيم جمله go to Hamed در بالای صفحه مقابل را به کلمه Hamed در وسط صفحه لينک کنيم.

1- روش flag:

<HTML>
<BODY>
<A href=”#2”> go to Hamed</A>
…
<A name=”2”> Hamed </A>
…
</BODY>
</HTML>

که در اينجا می توانيد نتيجه را ببينيد.

2- روش اسم گذاری

<HTML>
<BODY>
<A href="vali"> go to middle </a>
…
<H2 id="vali"> middle </H2>
</BODY>
</HTML>

در حالت اول می توانيم middle را به بالای صفحه لينک کنيم ولی در حالت دوم اين امر امکان پذير نيست برای اين کار در حالت اول:

<A name="vali" href="آدرس صفحه"> middle </A>

bahar-zendegy62 — Tue, 13 Dec 2005 06:55:50 GMT

طرز ايجاد ليست در HTML:

برای ايجاد ليست در html دو روش داريم:
1- Ordered list ليست منظم
2- Unordered list: ليست نامنظم

1- Ordered List:
برای درست کردن يک ليست منظم به روش زير عمل می کنيم.

تگ <OL> دارای سه Attribute می باشد:

a) Compact :ليست را فشرده تر نشان می دهد
b) Type:"A/a/I/i"

در حالت عادی شماره ها عدد می باشد اما می تواند حروف الفبا يا حروف يونانی باشد.
A: حروف الفبای انگليسی بزرگ
a: حروف الفبای انگليسی کوچک
I: اعداد يونانی با تايپ بزرگ
i: اعداد يونانی با تايپ کوچک
اگر اين Attribute را ننويسيم ليست را با اعداد انگليسی می نويسد.

c) start=” “

از هر عدد يا حرفی که داخل آن قرار بدهيم از همانجا شروع به شماره گذاری می کند.
2- Unordered List:
برای درست کردن يک ليست نامرتب (بدون شماره گذاری) از اين تگ استفاده می کنيم.

اين تگ دارای يک Attribute است که برای تعيين نوع شکلی که در ابتدای هر خط قرار می گيرد از آن استفاده می کنيم.

نکته: اگر بخواهيم عکس خاصی را در UL قرار دهيم:

bahar-zendegy62 — Tue, 13 Dec 2005 06:54:56 GMT

جدولها:
<table> … </table>: هر جدول از سطر و ستون تشکيل می شود.
به طور دقيقتر هد حدول n سطر دارد که هر سطر در داخل خود m سلول خواهد داشت.
سطرها را با <tr> … </tr> هر سلول را با <td> … </td> مشخص می کنيم.
مثال: يک جدول 2*2:

هر چيزی که داخل <td> بنويسيم در داخل آن خانه (سلول) جدول قرار می گيرد.
نکته مهم اين است که نبايد بين دو <td> … </td> خالی باشد.
اگر بخواهيم در داخل اين خانه جدول چيزی نباشد ولی ديده شود، بايد از يک فاصله ( ) استفاده کنيم.
Attributeهای <table> عبارتند از:

attributeهای هر cell:

width=" "
height=" "
bgcolor=" "
background=" "
border=" "
nowrap
rowspan=" "
colspan=" "

nowrap: محتويات داخل سلول همه دريک خط نوشته می شود و ديگر سلول شکسته شده و به خط بعدی نمی رود.
مثال 1:

مثال 2:

در rowspan يا colspan تعداد سلولهايی را که می خواهيم در هم ادغام کنيم را بنويسيم.
بايد توجه کنيم که به همان تعداد که سلول در هم ادغام می کنيم بايد از پائين سلولهای اضافی را حذف کنيم.
مثلا در مثال 1:

bahar-zendegy62 — Tue, 13 Dec 2005 06:51:34 GMT

فريم بندی در html:

فريم بندی صفحات html يعنی اينکه صفحه را به چند قسمت تقسيم کرده و برای هر قسمت يک صفحه html يا ASP يا PHP جايگزين می کنيم.
برای معرفی يک صفحه فريمی از <FRAMESET> … </FRAMESET> استفاده می کنيم.
مثال: می خواهيم صفحه فريمی زير را که از دو ستون تشکيل شده را طراحی کنيم.

<HTML>
<HEAD>
<TITLE> frames </TITLE>
</HEAD>
<FRAMESET cols="200,*">
<FRAME src="menu.htm">
<FRAME src="welcome.htm">
</FRAMESET>
</HTML>

cols=" " =ستونی

1- می خواهيم صفحات را به صورت ستونی در کنار يکديگر قرار دهيم.
2- درون " "=cols بايد نسبت صفحاتی را که می خواهيم درون صفحه فريمی جا بگيرد را معرفی کنيم. در مثال به صورت زير نوشته شد.

<FRAMESET cols="200,*" >

يعنی ما می خواهيم دو صفحه را در کنار هم قرار دهيم که اولی 200 پيکسل و صفحه دوم بقيه طول صفحه را در بر خواهد گرفت.
اگر بخواهيم صفحه ها به صورت مثلا مساوی قسمت شوند:

<FRAMESET cols="*, *" >
يا
<FRAMESET cols="50%,50%" >

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

<FRAMESET rows=" ">

نکته مهم:در فايلهای html يا بايد frameset داشته باشيم يا body و نمی توانيم هر دو را با هم داشته باشيم.

Attributeهای فريم:

اسم گذاری برای هر فريم و برای مراجعه به اين صفحه بايد <" "=name> حتما از اين اسم استفاده کرد.
مثال:
يک صفحه فريمی به صورت زير داريم و می خواهيم user با کليک کردن روی student صفحه ای را ببيند که به جای welcome باز می شود و همچنين برای کلمه grads:

برای ساختن اين صفحه فريمی بايد از قبل تمام صفحات را ساخته باشيم:

1- menu.htm
2- welcome.htm
3- student.htm
4- grads.htm

menu.htm
<HTML>
<BODY>
<A href="student.htm" target="reza"> student </A>
<A href="grads.htm" target="reza"> grads</A>
</BODY>
</HTML>

اين targetها همان اسم فريمها هستند برای اينکه با کليک کردن روی grads صفحه مربوطه به جای صفحه welcome.htm باز شود بايد از target استفاده کنيم.
در جلوی target اسم آن صفحه فريمی را که می خواهيم صفحه ما در آنجا باز شود را می نويسيم.

welcome.htm
<HTML>
<BODY>
Welcome to my home page
</BODY>
</HTML>
student.htm
<HTML>
<BODY>
this is student home page
</BODY>
</HTML>
grads.htm
<HTML>
<BODY>
Here is the grads home page.
</BODY>
</HTML>

بعد از ساختن اين صفحات حال بايد صفحه فريمی اصلی را بسازيم:

<HTML>
<HEAD> <TITLE> welcome to this frame page. </TITLE>
</HEAD>
<FRAMSESET cols=”200, *” >
<FRAME src=”menu.htm” name=”vali” >
<FRAME src=”welcome.htm” name=”reza”>
</FRAMESET>
</HTML>

در صفحه های فريمی اول سطرها پر می شوند بعد ستونها.
Attributeهای frameset:

1- border=" "
2- bordercolor=" "
target=" "
target="_blank"                                 : روی صفحه فريمی باز می شود new pageيک
target="_self"                                     : را نگذاشته ايم target مثل اين است که
target="_parent"                                 : صفحه بر روی فريم مادر خود باز می شود
target="_top"                                      :صفحه قبلی از بين میرود ويک صفحه بدون فريم ظاهر میشود

قرار دادن يک AVI بر روی Webpage:

<IMG dynsrc="(URL)آدرس فايل مورد نظر "
width=" " height=" " loop="تعداد دفعات تکرار">

قرار دادن موسيقی background بر روی يک web page:

قرار دادن نوشته متحرک بر روی web page:
marquee

bahar-zendegy62 — Tue, 13 Dec 2005 06:50:28 GMT

قرار دادن يک AVI بر روی Webpage:

<IMG dynsrc="(URL)آدرس فايل مورد نظر "
width=" " height=" " loop="تعداد دفعات تکرار">