بخشی از مقاله
HTML : Hyper TEXT markup language
1973 ARPANET چهار كامپيوتر را بهم وصل مي كند
Tim Berners lee CERN
ARPANET
markup printer
<H1> ...جمله....<H2>
براي اينكه دو چيز بتوانند ارتباط داشته باشند بايد يك زبان يا قواعد مشترك داشته باشيم كه به آن پروتكل مي گويند .
پروتكل انتقال علامت : HTTP
(Hyper TEXT Transferpertocol)
HTML در واقع مجموعه اي از علامتها (tag) براي نشانگذاري متن ها مي باشد كه البته اين تعريف اوليه آن است . دستورات يا Tag هاي HTML مي تواند شكل متن را به نحو دلخواه نمديريت كنند با اين حالت HTML يك زبان برنامه نويسي نيست بلكه يك زبان علامت گذاري متن به شمار مي رود . مزيت اين موضوع در اين است كه HTML يك زبان ساده است و عيب آن در نداشتن توانايي هاي يك زبان برنامه نويسي است . براي رفع اين نقيصه از زبانهاي برنامه نويسي در HTML استفاده
مي شود . مانند زبان JAVA و Script هايي نظير - JAVA Script . SCRIPT خلاصه شده يك زبان است دستورات در هر دو يكي است .
نحوه ايجاد فايل HTML :
در ساده ترين شكل يك فايل HTML در محيط Note pad ايجاد مي شود براي اين كار از نرم افزار wordpad نمي شود استفاده كرد زيرا word pad متن ورودي را تغيير داده و فرمت مي نمايد و درواقع يك سري اطلاعات اضافي به فايل اضافه مي كند (از محيط Editذ در Dos هم مي توانيم استفاده كنيم )سپس به كمك يك نرم افزار مرورگر با Browser مي توان HTML را ديد .
وظايف Browser ازديدگاه اين مبحث :
1-پرش (jump) از يك فايل HTML به يك فايل HTML ديگر .
2-نمايش فايل HTML
شكل كلي يك فايل HTML به صورت زير است :
< HTML>
<Head>
<title>
</Title>
</Head>
</Body>
</Body>
</Html>
نبايد stagement ها همديگر را قطع كنند و بايد مثل حلقه هاي for تو در تو باشند .
هر علامت <....> معرف يك Tag ، Html مي باشد . هر تك Html معمولاً بصورت زوج مي باشند بجز Tag هاي منفرد و Tag . علامت </ > انتها يا scafe رانشان
مي دهد .
Tag هايي كه در داخل يك Tag ديگر وجود دارند Tag هاي فرزند نام دارند و هركدام از آنها با هم خواهر و برادر مي باشند و Tag اصلي Tag پذير است . يك فايل Html با < Html> شروع مي شود و با < Html> به پايان مي رسد .
نكته : Tag مفروض X با علامت>× < شروع مي شود و با Tag >×/< به پايان
مي رسد . يك تگ Html تا زماني فعال است كه >×/< را نديده باشد . يك فايل Html از دو قسمت <Head> و <body> تشكيل شده ، اطلاعات درون <Head> معمولاً توضيحاتي در مورد صفحه Html است مانند تيتر يا Title صفحه Html و يا اينكه نام مولف يا نويسنده Html چيست و keyword هاي آن صفحه چه مي باشد ؟ اطلاعات درون Head معمولاً در
Browser نمايش داده نمي شوند به استثناي قسمت Title . body اصلي ترين قسمت Html بوده و اطلاعات درون آن معمولاً به طور ك/امل نمايش داده مي شود . (به كمك Browser) Browser ها نمايش صفحه Html را بعهده دارند ولي ديدن Source صفحه Html بايد به طريق زير عمل كنيم : بر روي صفحه كليك راست نموده و گزينه Source View را انتخاب مي كنيم ، يا در Internet explorer در گزينه View ، Source را انتخاب مي كنيم . Note pad يك محيط ساده است يعني ممكن است هر چقدر بنويسيم ادامه يابد و به خط بعد
نمي رود . ضمناً اگر مثلاً سه تا بلنك بگذاريم اجازه نمي دهد و فاصله را يك بلنك ميكند . ما بعد از نوشتن هر برنامه آن را save مي كنيم در Save as پسوند TXT است و اشكال نمي گيرد ولي بهتر است براي ذخيره صفحات وب از پسوند Html يا Htm استفاده كنسم براي اين كار all files را انتخاب مي كنيم و نام فايل و پسوند آن را عوض مي كنيم .
صفحه اي كه ما درست كرديم در Document My نشان داده مي شود .
Title در برنامه اجباري نيست . اگر در قسمت Document در View ، Source را بزنيم دوباره قسمتي كه براي طراحي نوشتيم نشان مي دهد . به كمك Source View در Internet explorer مي توان علاوه بر مشاهده محتويات فايل را نيز تغيير داد .
Tag هاي Html :
زيان علامتگذاري Html نسبت به حروف كوچك و بزرگ حساس نمي باشد ولي بهتر است Tag ها را با حروف بزرگ نوشت .
1-strong : براي اينكه بتوانيم يك عبارت را ضخيمتر از حالت معمولي نسان دهيم از <strong> استفاده مي كنيم .
2-B : معادل قديمي تر تگ strong تگ <B> است . تگ Strong به صورت نسبي (يعني نسبت به بزرگي صفحه نمايش ) متن راضخيم تر نشان مي دهد و در واقع درشتنمايي آن يك درشت نمايي منطقي است در صورتي كه تگ <B> ضخامت را به صورت مطلق تعريف كرده و در واقع يك روش فيزيكي است .
نكته : تمامي اين tag ها را در قسمت <Body> قرار مي دهيم .
3-EM : تگ بعدي تگ <EM> است (emphasis) به معناي تاكيد كردن و براي خميده نشان دادن يك متن بكار مي رود . اين Tag يك Tag تغيير حالت متن به صورت نسبي است و بنابراين منطقي مي باشد .
4-I : متن قديمي تر EM است . اين Tag مخفف Italic است و متن را به صورت فيزيكي به حالت خميده يا مطلق در مي آورده .
در فايل Html هيچ اندازه فيزيكي مطلقي تعريف نمي شود چون كه اگر مثلاً اندازه يك تصوير را پنج در پنج معرفي كنيد براي اندازه مانيتور ما مناسب است و در سيستم مشتري Client ممكن است اين ميزان مناسب نباشد .
5-P : <p> (پاراگراف) براي پاراگراف بندي كردن يك متن Html مي توان از اين Tag استفاده كرد . هر چند بين <P> و </P> قرار گيرد يك پاراگراف خواهد بود كه يك سطر خالي بعد از پاراگراف رد خواهد شد .
نكته : هر تغييري كه در source برنامه صورت مي دهيم مي توانيم تغييرات را جواب با استفاده از refresh ببينيم .
6-H1tH6 : از آنجايي كه براي Html اندازه خاصي تعيين نمي شود . براي ايجاد سلسله مراتب ضخامت متن ها از تگهاي H6tH1 استفاده مي شود ، به اين ترتيب كه H1 ضخيم ترين فونت را ايجاد مي كند و به ترتيب H2 و ... H6 ضخامت كمتري دارند .
<H1>
Test H # (H:Head)
</H1>
Tag body :
قسمت اصلي Html بوده و كل متن فايل Html داخل آن قرار مي گيرد . از طرفي بعضي از Tag ها مانند تگ body داراي يك سري attribute ، مي باشد . اين attribute ها در واقع يك نوع پارامتر براي اين تگها است . در داخل body مي توان از attribute ها استفاده كرد يا نكرد . هر attribute يك شماره منحصر بفرد دارد كه باعث مي شود ترتيب استفاده از attribute ها را اهميتي نداشته باشد .
attribute background
فرم كلي استفاده از attribute :
<body>
<×att1= “value1” att2= “value2”>
<body Background = “*.jpg” >
jpg پسوند فايلهاي تصويري است با اين پسوند فايلهاي تصويري را پيدا مي كنيم چنانچه تصوير مورد نظر در دايركتوري جاي باشد نيازي به دادن آدرس آن نمي باشد در صورتيكه اگر در دايركتوري ديگري از سيستم قرار داشته باشد بايد مسير كامل آن داده شود ، يا مي توانيم آن فايل را به صورت My Document انتقال (كپي) دهيم . چنانچه تصوير كوچكتر از صفحه مانيتور client باشد آن را Tile (به صورت كاشي كاري) نمايش مي دهد . فايل Background بايد يك تايل تصويري شامل هر يك از فرمتهاي استاندارد باشد كه Browser گيرنده آن را support مي كند .
by color : (Background color)
براي تعيين رنگ پس زمينه متن از اين
attribute استفاده مي شود .
Red green blue
R G B
00 ~ ~
01 ~ ~
10 ~ ~
11 ~ ~
:
ff ~ ~
سيستم رنگ در Html به صورت RGB مي باشد .
(رنگهاي روز ) كه هر رنگ مي تواند يك عدد هگزاد سيمال را به خود بگيرد كه اين عدد دو رقمي است .
R G B
10 f1 ff رقم 6=2×3
2^×2^×2^=2 ميليون رنگ
00 تا بب كلاً 256 t است يعني بنابراين براي هر رنگ حالت وجود دارد .
فرم كلي Bycolor به صورت زير خواهد بود :
معادل يك عدد هگزاد سيمان ××
هر ×× معادل يك نور را نشان مي دهد .
attribute Text :
يكي از attribute هاي body مي باشد .
براي تعيين رنگ متن صفحه استفاده مي شود . سيستم رنگ در آن كاملاً شبيه به Bgcolor مي باشد .
<body by color = ~ ~ Text = ~ ~ >
attribute هاي body :
1.Bg color : رنگ متن پس زمينه
2.Background : يك تصوير بصورت پس زمينه
3.TEXT : رنگ متن صفحه
4.link
اين att براي تعيين رنگ hyper link ها استفاده مي شود .
5.A link
براي تعيين رنگ لينگ ها در زماني كه بصورت فعال در مي آيند استفاده مي شود .
(Active link)
6.V link
براي تعيين رنگ link هاي مرور شده استفاده مي شود .
*<body link = “sky Blue”>
<A href = “\.Html”>click < /A>
دو خط بالا click را ايجاد مي كند و آن را به رنگ آبي آسماني نشان مي دهد . (اگر كليك كنيم روي خودش ) رنگ پيش فرض آبي است .
ff=آبي
*<body Link = “Red” Alink = “PINK” >
click را به رنگ قرمز نشان مي دهد و اگر رويش كليك كنيم صورتي مي شود
ايجاد ليستها :
براي ايجاد ليستها روش كلي وجود دارد :
الف-ليست هاي غيرمرتب ياunordered lists
ب-ليست هاي مرتب يا ordered lists
ج-ليست هاي تعريفي Difinition lists
الف - ساختار كلي ليست هاي غر مرتب به صورت زير است :
<UL>
<LI>Item 1
<LI>Item
:
</UL>
مثال :
my Books
<UL>
<LI>operating system
<LI>pascal
<LI>Java
</UL>
تگ LI جزء تگهاي منفرد يا تك مي باشد . LI مخفف Item List مي باشد . UL مخفف unordered list مي باشد .
جواب : Click my Book
. operation system
. pascal
. java
ب-ليست هاي مرتب شده از لحاظ ساختار مثل UL ها هستند با اين تفاوت كه براي هر يك از Item ها شماره اي را منظور مي كند .
