1973 ARPANET چهار کامپیوتر را بهم وصل می کند
Tim Berners lee CERN
ARPANET
markup printer
...جمله....
برای اینکه دو چیز بتوانند ارتباط داشته باشند باید یک زبان یا قواعد مشترک داشته باشیم که به آن پروتکل می گویند .
پروتکل انتقال علامت : 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 به صورت زیر است : نباید stagement ها همدیگر را قطع کنند و باید مثل حلقه های for تو در تو باشند .
هر علامت معرف یک Tag ، Html می باشد .
هر تک Html معمولاً بصورت زوج می باشند بجز Tag های منفرد و Tag .
علامت انتها یا scafe رانشان می دهد .
Tag هایی که در داخل یک Tag دیگر وجود دارند Tag های فرزند نام دارند و هرکدام از آنها با هم خواهر و برادر می باشند و Tag اصلی Tag پذیر است .
یک فایل Html با شروع می شود و با به پایان می رسد .
نکته : Tag مفروض X با علامت>× ×/×/ و تشکیل شده ، اطلاعات درون معمولاً توضیحاتی در مورد صفحه 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 : برای اینکه بتوانیم یک عبارت را ضخیمتر از حالت معمولی نسان دهیم از استفاده می کنیم .
2-B : معادل قدیمی تر تگ strong تگ است .
تگ Strong به صورت نسبی (یعنی نسبت به بزرگی صفحه نمایش ) متن راضخیم تر نشان می دهد و در واقع درشتنمایی آن یک درشت نمایی منطقی است در صورتی که تگ ضخامت را به صورت مطلق تعریف کرده و در واقع یک روش فیزیکی است .
نکته : تمامی این tag ها را در قسمت قرار می دهیم .
3-EM : تگ بعدی تگ است (emphasis) به معنای تاکید کردن و برای خمیده نشان دادن یک متن بکار می رود .
این Tag یک Tag تغییر حالت متن به صورت نسبی است و بنابراین منطقی می باشد .
4-I : متن قدیمی تر EM است .
این Tag مخفف Italic است و متن را به صورت فیزیکی به حالت خمیده یا مطلق در می آورده .
در فایل Html هیچ اندازه فیزیکی مطلقی تعریف نمی شود چون که اگر مثلاً اندازه یک تصویر را پنج در پنج معرفی کنید برای اندازه مانیتور ما مناسب است و در سیستم مشتری Client ممکن است این میزان مناسب نباشد .
5-P : (پاراگراف) برای پاراگراف بندی کردن یک متن Html می توان از این Tag استفاده کرد .
هر چند بین و قرار گیرد یک پاراگراف خواهد بود که یک سطر خالی بعد از پاراگراف رد خواهد شد .
نکته : هر تغییری که در source برنامه صورت می دهیم می توانیم تغییرات را جواب با استفاده از refresh ببینیم .
6-H1tH6 : از آنجایی که برای Html اندازه خاصی تعیین نمی شود .
برای ایجاد سلسله مراتب ضخامت متن ها از تگهای H6tH1 استفاده می شود ، به این ترتیب که H1 ضخیم ترین فونت را ایجاد می کند و به ترتیب H2 و ...
H6 ضخامت کمتری دارند .
Test H # (H:Head) Tag body : قسمت اصلی Html بوده و کل متن فایل Html داخل آن قرار می گیرد .
از طرفی بعضی از Tag ها مانند تگ body دارای یک سری attribute ، می باشد .
این attribute ها در واقع یک نوع پارامتر برای این تگها است .
در داخل body می توان از attribute ها استفاده کرد یا نکرد .
هر attribute یک شماره منحصر بفرد دارد که باعث می شود ترتیب استفاده از attribute ها را اهمیتی نداشته باشد .
attribute background فرم کلی استفاده از attribute : 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 می باشد .
attribute های body : 1.Bg color : رنگ متن پس زمینه 2.Background : یک تصویر بصورت پس زمینه 3.TEXT : رنگ متن صفحه 4.link این att برای تعیین رنگ hyper link ها استفاده می شود .
5.A link برای تعیین رنگ لینگ ها در زمانی که بصورت فعال در می آیند استفاده می شود .
(Active link) 6.V link برای تعیین رنگ link های مرور شده استفاده می شود .
* click دو خط بالا click را ایجاد می کند و آن را به رنگ آبی آسمانی نشان می دهد .
(اگر کلیک کنیم روی خودش ) رنگ پیش فرض آبی است .
ff=آبی * click را به رنگ قرمز نشان می دهد و اگر رویش کلیک کنیم صورتی می شود ایجاد لیستها : برای ایجاد لیستها روش کلی وجود دارد : الف-لیست های غیرمرتب یاunordered lists ب-لیست های مرتب یا ordered lists ج-لیست های تعریفی Difinition lists الف - ساختار کلی لیست های غر مرتب به صورت زیر است : Item 1 Item : مثال : my Books operating system pascal Java تگ LI جزء تگهای منفرد یا تک می باشد .
LI مخفف Item List می باشد .
UL مخفف unordered list می باشد .
جواب : Click my Book .
operation system .
pascal .
java ب-لیست های مرتب شده از لحاظ ساختار مثل UL ها هستند با این تفاوت که برای هر یک از Item ها شماره ای را منظور می کند .
ج-برای این که بتوان یک کلمه را به همراه توضیح معمولاً کوتاه راجع به آن در یک لیست قرار داد از لیست های تعریفی استفاده می شود .
فرم کلی این لیست ها به صورت زیر می باشد : ....
....
difinitionterm (DT) ....
definition Description (DD) ....
نکته : تگهای DT و DD جزء تگهای منفرد می باشند و تگ DT حاوی خود آن کلمه ای است که می خواهیم در مورد آن توضیخ دهیم در صورتیکه تگ DD متن توضیحات در مورد کلمه مزبور می باشد .
توضیحات در Html : شکل کلی توصیحات در Html به صورت زیر است که به مانند بسیاری از زبانهای برنامه نویسی که compiler متن داخل Comment راکامپایل نمی کند در Html نیز متن داخل Comment توسط Browse نمایش داده نمی شود .
متن .......!
توضیحات رانشان نمی دهد .
توضیحات - - - - - > خط فاصله بدون شیفت است .
تگ BR (Break) : این تگ به منزله زدن کلید Enter می باشد به این معنی که خط جاری با وارد کردن این تگ به پایان رسیده و محتویات در خط جدید نوشته خواهند شد .
این تگ نیز یک تگ منفردی می باشد .
مثال : This is a test Hello This is a test رادر خط اول و Hello را در خط بعد نشان می دهد .
تگ HR : برای ایجاد یک خط افقی بکار می رود و جزء تگهای تک می باشد .
attribute های آن عبارتند از : 1-align 2-width attribute ، align مربوط به نحوه قرارگیری خط افقی در صفحه می باشد .
مقادیری که این attri می تواند بگیرد عبارتند از : right ، lift و Center .
مثال : att ، width برای تعیین عرض افقی یا پهنا استفاده می شود .
مثلاً چنانچه width یاعرض افقی را 30% و align را left انتخاب می کنیم نتیجه به صورت زیر خواهد : نکته : HR رادر هر کجا قرار دهیم بین خط قبل و بعدی یک خط می کشد .
اگر فقط Align=left باشد و width نباشد فرض می کند که align ، left یا right یا Center باشد زیرا عرض خود به خود 100 % و یک خط به اندازه عرض صفحه کشیده می شود ولی اگر width راهم در نظر بگیریم با توجه به اندازه Align هم فرق می کند .
مقداردهی بهattribute ، width می تواند به شکل درصدی یابه شکل پیکسلها باشد .
مثلاً : width = “200” تگ IMG : یک تگ منفرد بوده و attribute ، Src در آن یک attribute اجباری است .
تگ برای قرار دادن یک تصویر در صفحه Html به صورتی که بتوان آن را از جهات گوناگون مدیریت کرد استفاده می شود .
فرم کلی تگ Image یا به صورت زیر است : سایر att ها مانند width , height و غیره .
در Background تصویر می توانست فقط تمام صفحه را بگیرد یا Tile شود ولی در Image می توانیم تصویر را کوچک یا بزرگ کنیم و یا به جهات مختلف ببریم .
width : برای تعیین عرض تصویر یا پهنای تصویر در صفحه استفاده می