تبلیغات تبلیغات کار با متن:
بولد نوشتن:
برای بولد نوشتن کافی است که متن مورد نظر خود را در تگ <b> قرار دهیم. استفاده از تگ پایانی <b/> الزامی می باشد.
مثال:
| <html> <head> <title>عنوان صفحه</title> </head> <body> <b> این متن به صورت بولد در مرورگر نشان داده می شود</b> </body> </html> |
| این متن به صورت بولد در مرورگر نشان داده می شود |
زیر خط دار نوشتن:
برای این منظور از تگ <u> استفاده می کنیم. استفاده از تگ پایانی <u/> الزامی است. از این به بعد برای راحتی کار، در مثال ها از نوشتن بدنه کلی html خود داری می کنم . مثال:
| <u>این متن به صورت زیر خط دار نشان داده می شود</u> |
| این متن به صورت زیر خط دار نشان داده می شود |
ایتالیک نوشتن:
از تگ <i> همراه با تگ پایانی <i/> استفاده می کنیم. مثال:
| <i>این متن به صورت ایتالیک نشان داده می شود</i> |
| این متن به صورت ایتالیک نشان داده می شود |
خط خورده نوشتن:
از تگ <strike> همراه با تگ پایانی <strike/> استفاده می کنیم. مثال:
<strike>این متن به صورت خط خورده نشان داده می شود</strike>
نتسجه این کد در مرورگر:
این متن به صورت خط خورده نشان داده می شود
فاصله دار نوشتن:
از تگ <tt>همراه با تگ پایانی <tt/> استفاده می کنیم.مثال:
| <tt>این متن به صورت فاصله دار نشان داده می شود</tt> |
| این متن به صورت فاصله دار نشان داده می شود |
چشمک زن نوشتن:
این خصوصیت فقط در مرور گر های opera و firfox قابل رویت می باشد. برای این منظور از تگ <blink> همراه با تگ پایانی <blink/> استفاده می کنیم.مثال:
| <blink>این متن به صورت چشمک زن نشان داده می شود</blink> |
| این متن به صورت چشمک زن نشان داده می شود |
نوشتن سر فصل:
از تگ <hn> همراه با تگ پایانی <hn/> استفاده می کنیم که n عددی است از 1 تا 6 که عدد 1 متنی به ما می دهد که از همه بزرگتر و عدد 6 از همه کوچکتر می باشد. مثال:
| <h1>نوشته شده است h1 این متن با تگ</h1> <h2>نوشته شده است h2 این متن با تگ</h2> <h3>نوشته شده است h3 این متن با تگ</h3> <h4>نوشته شده است h4 این متن با تگ</h4> <h5>نوشته شده است h5 این متن با تگ</h5> <h6>نوشته شده است h6 این متن با تگ</h6> |
نوشته شده است h1 این متن با تگنوشته شده است h2 این متن با تگنوشته شده است h3 این متن با تگنوشته شده است h4 این متن با تگنوشته شده است h5 این متن با تگنوشته شده است h6 این متن با تگ |
رفتن به خط بعد:
همان طور که قبلا اشاره شد، شما اگر متنی را در فایل html خود به هر صورتی که بنویسید، آن متن در مرور گر به صورت پشت هم نشان داده می شود و وجود فاصله در فایل html تاثیری در خروجی ما در مرور گر ندارد.
اگر بخواهیم متنی که در مرورگر نشان داده می شود در جایی که ما می خواهیم به خط بعد برود، هرجا که لازم بود از تگ <br> استفاده می کنیم. این تگ، تگ پایانی ندارد.مثال:
| من<br>دیروز<br>به مدرسه <br><br> رفتم |
| من دیروز به مدرسه رفتم |
پاراگراف:
بهتر است پاراگراف های خود را بین تگ<p> و تگ پایانی <p/> قرار دهیم. بین یک پاراگراف تا پاراگراف بعدی به اندازه دو بار استفاده از تگ<br> فاصله ایجاد می شود.
کاراکتر های ویژه:
نتیجه به این صورت خواهد بود:
کلمه اول کلمه دومفاصله اول بین کلمات با فشار دادن دکمه Space ایجاد می شود. مرورگر فاصله اول را تشخیص می دهد اما بعد از آن هر تعداد فاصله که باشد تفاوتی نمی کند و شما فقط یک فاصله را در مرورگر می بینید. افزودن کد ;nbsp& مرورگر را مجبور می کند تا بین دو کلمه فاصله اضافی بگذارد. شما با تکرار این کد می توانید به هر تعداد که بخواهید فاصله خالی ایجاد کنید.مانند زیر:
نتیجه:
کلمه اول کلمه دوم
این فرمان چهار فضای خالی اضافی بین دو کلمه ایجاد می کند. و در مجموع پنج فضای خالی داریم.
بحث بعدی ما علامت کپی رایت است. شما می توانید به همان روشی که برای فضای خالی اضافی ایجاد کردیم این علامت را نیز به وجود بیاورید. یعنی با استفاده از کد آن. کد علامت کپی رایت این است: ;copy& به این مثال توجه کنید:
متن نتیجه:
this page Copyright © 2007 by me
روش کار برای تمامی کاراکترهای ویژه به همین صورت است فقط کد آنها را در متن HTML قرار دهید.
در جدول زیر می توانید تعدادی از این کاراکترهای ویژه را به همراه کد سازنده آنها ببینید:
| نام کاراکتر | شکل ظاهری کاراکتر | کد سازنده کاراکتر |
| امپرسند | & | & |
| علامت کپی رایت | © | © |
| علامت ثبت شده | ® | ® |
| علامت تجاری | ™ | ™ |
| علامت کوچکتر از | < | < |
| علامت بزرگتر از | > | > |
| علامت خنجر | † | † |
| -------------------- | » | » |
| -------------------- | « | « |
| خط فاصله ام | — | — |
| علامت درجه | ° | ° |
| یک چهارم | ¼ | ¼ |
| یک دوم | ½ | ½ |
| سه چهارم | ¾ | ¾ |
| نقطه میانی | · | · |
| علامت تعجب وارونه | ¡ | ¡ |
| علامت یورو | € | € |
| علامت پوند انگلیس | £ | £ |
| علامت تقسیم | ÷ | ÷ |
| علامت رادیکال | √ | √ |
البته اگر شما از front page استفاده می کنید از طریق منوی insert--->symbol به کاراکتر های متنوع تری دسترسی خواهید داشت.
تگ <pre>
شما اگر متنی را در بین تگ <pre> و تگ پایانی آن یعنی <pre/> بنویسد، آن را به هر صورتی که ینویسید در مرور گر هم همان طور نشان داده می شود و دیگر نیازی به استفاده از تگ <br> نیست. مثال:
<pre>
این متن
به همان صورت که
در فایل
html
نوشته شود در مرور گر نشان داده می شود
</pre>
این متن |
نوشتن اندیس و توان: متن ادامه دار در یک خط: وسط چین نوشتن: من دیروز به مدرسه رفتم. خصوصیات قلم متن: تذکر:تمام
تگ هایی که تا اینجا به شما یاد دادیم میتوانند به صورت تو در تو با
یکدیگر به کار روند تا به نتیجه دلخواه برسیم. باید دقت کنیم تگ پایانی
را در جای مناسب قرار دهیم. با مثال زیر بهتر متوجه می شوید: این متن با رنگ آبی و سایز2 و به صورت بولد و ایتالیک خواهد بود رسم خط: نتیجه در مرور گر:
هر متنی که در بین تگ <sub> و تگ پایانی آن نوشته شود، مقداری پایین تر از بقیه متن قرار می گیرد که از این خصوصیت برای نوشتن اندیس استفاده می شود.
و نیز هر متنی که در بین تگ <sup> و تگ پایانی آن نوشته شود، مقداری بالاتر از بقیه متن قرار می گیرد که از این خصوصیت برای نوشتن توان استفاده می شود. مثال:
y<sup>1</sup><br>
y<sub>2</sub>
نتیجه در مرورگر:
y1
y2
وقتی ما متنی را بدون استفاده از تگ <br>
بنویسیم، هرجا که عرض متن ما به اندازه عرض مرور گر یا عرض لایه (بعدا
در مورد لایه ها توضیح داده می شود) شود، ادامه متن به طور خود کار در
مرور گر در خط بعد نشان داده می شود. ولی اگر ما بخواهیم تا وقتی ما
نخواسته ایم مرورگر به خط بعد نرود، متن خود را در تگ<nobr> همراه با تگ پایانی <nobr/> قرار می دهیم. مثال:
<nobr>مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال </nobr>
نتیجه در مرور گر را خودتون تست کنید. چون نمی خوام ظاهر سایتم را خراب کنم.!!!!!!!!
هرگاه خواستیم که متن ما در وسط صفحه نمایش نوشته شود، از تگ <center> و تگ پایانی آن استفاده می کنیم. مثلا من جمله زیر را با استفاده از این تگ نوشتم:
فرض کنید بخواهید متنی را را با یک قلم دیگر بنویسید و یا اینکه متنی
را با رنگ آبی بنویسید و یا متنی را کوچکتر یا بزرگتر از بقیه متن
بنویسید. برای این کار ما از تگ <font> همراه با تگ پایانی آن یعنی <font\>
استفاده می کنیم. البته این تگ به تنهایی کاری انجام نمی دهد و مهم
شناسه هایی هستند که در این تگ به کار می روند. ما برخی از این شناسه
ها را به شما معرفی می کنیم(همان طور که قبلا گفتیم ترتیب قرار گیری
این شناسه ها مهم نیست):
از این شناسه برای اندازه قلم استفاده می شود و n عددی دلخواه می باشد. اگر از علامت منفی استفاده کنیم، متن ما کوچکتر می شود.
از این شناسه برای رنگ قلم استفاده می شود. مقدار این شناسه رنگ مورد نظر به زبان انگلیسی می باشد . مثلا برای رنگ قرمز مقدار این شناسه را red قرار می دهیم. رنگ مورد نظر می تواند کد هگزا دسیمال نیز باشد.بعدا راجع به کد هگزا دسیمال صحبت می کنم..
از این شناسه برای تعیین قلم نوشتن استفاده می شود. مقدار این شناسه نام قلم مورد
نظر می باشد. باید دقت کنیم که قلمی را انتخاب کنیم که عمومیت داشته و
در کامپیوتر کاربر سایت ما وجود داشته باشد. تعدادی از قلم هایی که
معمولا در همه کامپیوتر ها وجود دارد به شرح زیر می باشد:
arial - tahoma - times new roman - modern
<font color="blue" size="+2"> <b> <i>این متن با رنگ آبی و سایز 2 و به صورت بولد و ایتالیک خواهد بود</i></b></font><br>
<center><strike><b>این متن در مرکز و به صورت خط خورده و بولد خواهد بود</b></strike></center>
نتیجه در مرورگر:
این متن در مرکز و به صورت خط خورده و بولد خواهد بود
برای رسم خط از تگ <hr> استفاده می کنیم، این تگ،تگ پایانی ندارد. برخی از شناسه های این تگ عبارتند از:
مقدار آن عددی است در واحد پیکسل که عرض خط افقی ما می باشد.
مقدار این شناسه نیز عددی به پیکسل است که ضخامت خط ما می باشد
مقدار این شناسه رنگ خط می باشد که مقدار آن می تواند معادل هگزا دسیمال رنگ یا رنگ به زبان انگلیسی باشد.
مقدار این شناسه یکی از مقادیر right,center,left می باشد که محل قرار گیری خط در عرض صفحه نمایش را مشخص می کند. مثال:
<hr width="400" align="left" color="red" size="2">
<hr width="200" align="center" color="blue" size="4">
شناسه های مربوط به متن در تگ body
مقدار آن رنگ زمینه متن ما می باشد.
مقدار آن رنگ خود متن می باشد.
ساختار کلی:
تعریف تگ:
در زبان html هرچه بین دو علامت < > قرار گیرد یک تگ نام دارد.
مثلا ما هر جا از تگ <hr> استفاده کنیم، یک خط افقی در مرور گر چاپ می شود.
البته بیشتر تگ ها ، به یک تگ پایانی به نشانه اتمام وظیفه آن تگ احتیاج دارند. در تگ پایانی، قبل از نام تگ، علامت / را قرار می دهیم.
مثلا اگر ما متنی را بین <i>...</i> قرار دهیم، متن به صورت ایتالک در مرورگر نشان داده می شود.
بدنه html:
بدنه یک برنامه html به صورت زیر می باشد و همواره باید آن را رعایت کنیم:
| <html> <head> <title>عنوان صفحه</title> </head> <body> هرچه اینجا نوشته شود در مرورگر نشان داده می شود </body> </html> |
اگر متن بالا را در notepad یا frontpage نوشته و با پسوند htm. ذخیره کنید و سپس آن را اجرا کنید، نتیجه در مرورگر به صورت زیر خواهد بود:
| هرچه اینجا نوشته شود در مرورگرنشان داده می شود |
حال به توضیح کد بالا می پردازیم:
تگ <html> نشان دهنده استفاده از زبان html می باشد و کلیه دستورات و تگ ها باید بعد از این تگ قرار گیرند و در آخر نیز باید از تگ پایانی <html/> به نشانه پایان دستورات html استفاده کرد.
در تگ <head> دستوراتی قرار می گیرند که در مرورگر نشان داده نمی شوند که این دستورات میتواند شامل فرمان های java script, css و ... باشند که بعدا در مورد آن ها بحث می کنیم. یکی از تگ هایی که که در داخل تگ <head> قرار می گیرد، تگ <title> می باشد که در این تگ عنوان صفحه را می نویسیم تا مورد استفاده موتور های جستجو قرار گیرد. باید دقت کنیم که از تگ پایانی <title/> و <head/> حتما استفاده کنیم.
هرچه که در تگ <body> قرار گیرد، در مرور گر نشان داده می شود.
کار اصلی ما نیز در این تگ می باشد و بیشتر دستورات را در این تگ قرار
می دهیم. حتما سوال می کنید چرا با اینکه در نوشتن متن ما چندین بار
به خط بعد رفته ایم،ولی در مرور گر متن در یک خط نشان داده می شود؟
جواب واضح است. شما در html دستورات و غیره را هر جوری که بنویسید، آنها به صورت ترتیبی و پشت هم اجرا شده و وجود فاصله بین آنها تاثیری ندارد.
تعریف شناسه:
شناسه ها دستوراتی هستند که در درون خود تگ و بعد نام تگ آمده و برخی خصوصیات تگ را توصیف می کنند.
برای مقدار دهی به شناسه ها از علامت = استفاده کرده و مقدار را بین " " قرار می دهیم.
برخی شناسه ها اختیاری بوده و بر خی دیگر اجباری بوده و حتما در تعریف تگ باید آورده شوند. مثلا شناسه src در تگ img که برای قرار دادن عکس استفاده می شود، یک شناسه اجباری است. و یا شناسه bgcolor یک شناسه اختیاری بوده که در تگ body به کار می رود و برای تعریف رنگ پس زمینه می باشد:
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body bgcolor="red">
<img src="c:\pictures\a.jpg">
</body>
</html>
به این نکته توجه داشته باشید که اگر ما در html
نویسی اشتباهی داشته باشیم، فایل ما در مرورگر اجرا خواهد شد و هر جا
که مشکلی مجود داشته باشد(مثلا اشتباهات تایپی) مرور گر آن را نادیده
می گیرد و به سراغ تگ بعدی می رود.
حال ما آماده ایم که شروع به نوشتن فایل های html بکنیم.
مقدمه:
قبل از شروع کار، ابتدا بررسی می کنیم که برای نوشتن فایل های html به چه چیز هایی نیاز داریم:
برای نوشتن فایل های html فقط به برنامه Notepad نیاز دازیم که همراه با ویندوز نصب می شود.
پس از نوشتن فایل html در Notepad، آن را با پسوندhtm. ذخیره می کنیم.
برای مشاهده فایلی که ایجاد کرده ایم، از مرورگر اینترنت خود(مانند Internet Explorer) استفاده می کنیم.
اما من به شما توصیه می کنم که برای نوشتن فایل های html خود حتما برنامه Front page و ترجیحا جدید ترین ورژن آن را نصب کنید. زیرا این برنامه عملیات نوشتن فایل html را بسیار ساده تر کرده و شما می توانید همان لحظه که فایل خود را ایجاد می کنید ،آن را مشاهده کرده و نسبت به اصلاح آن اقدام کنید.
در تصویر زیر، نمایی از برنامه Front page را مشاهده می کنید. اگر محل فلش قرمز(split) را کلیک کنید، صفحه به دوقسمت تبدیل می شود، قسمت بالا برای ویرایش کد html و قسمت پایین برای مشاهده نتیجه کار و نیز همچنین بسیاری از کار های طراحی را می توانید در همان قسمت پایین انجام دهید.
ما در این سری آموزشی، آنچه از Front page نیز که به شما کمک می کند، به شما آموزش می دهیم.
در Front page، پس از پایان کار، برای ذخیره فایل، از منوی File گزینه Save as را انتخاب کرده و فایل را با پسوند htm ذخیره می کنیم.
