css
فرمت دهی در HTML
فرمت دهی متن در HTML
This text is boldخودتان امتحان کنید »
This text is big
This text is italicThis is computer output
This is subscript and superscriptتگ های فرمت دهی در HTML
HTML از تگ های <b> و <i> برای bold و italic کردن متن ها استفاده می کند.
این تگ ها به تگ های فرمت دهی معروف هستند. (برای دیدن لیستی از این تگ ها به پایین این صفحه نگاه کنید.)
اغلب <strong> نتیجه ای شبیه <b> و <em> نتیجه ای شبیه <i> بر می گرداند.
البته، تفاوتی در معنی این تگ ها وجود دارد.
<b> یا <i> به معنی متن bold یا italic می باشند.
<strong> یا <em> به این معنی است که می خواهید متن طوری نمایش داده شود که کاربر بفهمد متن مهم است.امروزه تمام مرورگرهای اصلی، متن strong شده را به صورت bold و متن با فرمت em را به صورت italic نمایش می دهند.
با این وجود، اگر مرورگری بخواهد متون با فرمت strong را highlight کند متون bold شده را highlight نمی کند.
Text formatting
چگونه در یک سند HTML متنی را فرمت دهی کنیم.Preformatted text
نحوه تنظیم فاصله ها و خط های جدید با استفاده از تگ pre."Computer output" tags
تگ های computer output به چه صورت هایی نمایش داده می شوند.Address
چگونه اطلاعات تماس مالک یا نویسنده یک سند HTML را تعریف کنیم.Abbreviations and acronyms
چگونه کلمات مخفف را بکار ببریم. (زمانی که اشاره گر موس روی سرنام یا مخفف عبارت مذکور قرار می گرد, عبارت به صورت کامل نمایش داده می شود)Text direction
نحوه تغییر جهت متن (از آخر به اول).Quotations
نحوه نوشتن نقل قول های کوتاه و بلند.Deleted and inserted text
نحوه علامت گذاری متن های زیر خط دار یا حذف شده (روی آن خط کشیده می شود). برای خط زدن یک لغت و درج لغت جایگزین به گونه ای که هر دو کنار هم قرار گیرند استفاده می شود.تگ های مربوط به قالب بندی متن در HTML
تگ توضیحات <b> متن را به صورت ضخیم یا bold نمایش می دهد. <strong> متن را به صورت ضخیم یا strong نمایش می دهد. <em> متن را به صورت مورب یا emphasized (تأکید شده) نمایش می دهد. <i> متن را به صورت مورب یا italic نمایش می دهد. <small> متن را به صورت small نمایش می دهد. <big> متن را به صورت big نمایش می دهد. <sub> متن را به صورت subscripted نمایش می دهد. <sup> متن را به صورت superscripted نمایش می دهد. <ins> متن را به صورت inserted (زیر خط دار) نمایش می دهد. <del> متن را به صورت deleted (روی آن خط کشیده شده) نمایش می دهد. تگ های "computer output" در HTML
تگ توضیحات <code> متن را به صورت computer code نمایش می دهد. <kbd> متن را به صورت keyboard نمایش می دهد. <samp> متن را به صورت sample computer code نمایش می دهد. <tt> متن را به صورت teletype نمایش می دهد. <var> متن را به صورت variable نمایش می دهد. <pre> متن را به صورت preformatted نمایش می دهد. (خطوط و فاصله های اضافه در نظر گرفته شده را حفظ می کند) تگ های Citations ،Quotations و Definition در HTML
تگ توضیحات <abbr> مخفف کلمه ای را تعریف می کند.
با استفاده از خصوصیت title می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد.<acronym> سر نام کلمات را تعریف می کند. (در HTML5 پشتیبانی نمی شود)
با استفاده از خصوصیت title می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد.<address> اطلاعات تماس برای نویسنده با مالک سند را مشخص می کند. <bdo> با استفاده از خصوصیت bdo می توان کلمات را برعکس کرد. (از آخر به اول یا برعکس) <blockquote> برای تعریف نقل قول های بلند استفاده می شود.
مرورگر، بصورت پیشفرض قبل و بعد از عبارت نقل قول یک فضای اضافی قرار می دهد. همچنین برای آن Margin در نظر می گیرد.<q> برای تعریف نقل قول های کوتاه استفاده می شود.
مرورگر، بصورت پیشفرض عبارت را داخل دابل کوتیشن قرار میدهد.<cite> جهت تعریف نقل قول (citation)
در HTML5 تگ <cite> عنوان یک کار را مشخص می کند اما در HTML 4.01 تگ <cite> یک نقل قول را مشخص می کند.<dfn> یک عبارت تعریفی را مشخص می کند. فونت ها در HTML
تگ <font> نباید استفاده شود
تگ <font> در HTML 4 رایج نیست و در HTML 5 حذف شده است.
کنسرسیوم World Wide Web یا (w3c) تگ <font> را از دستوراتش حذف کرده است.
در HTML 4، باید از CSS (یا style sheetها) برای تعیین خصوصیات نمایش عناصر استفاده کرد.
مثال زیر نشان می دهد که چگونه HTML با تگ <font> کار می کند.
مثال (فونت ها در HTML)
<p>خودتان امتحان کنید »
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>راه درست قالب بندی - با Style ها
Set the font of text
این مثال نحوه تنظیم فونت متن را نشان می دهد.Set the font size of text
این مثال نحوه تنظیم سایز فونت را نشان می دهد.Set the font color of text
این مثال نحوه تنظیم رنگ متن را نشان می دهد.Set the font, font size, and font color of text
این مثال نحوه تنظیم فونت، سایز و رنگ متن را نشان می دهد.کاراکترهای رزرو شده در HTML
کاراکترهای رزرو شده در HTML باید با character entity ها جایگزین شوند.
HTML Entities
بعضی کاراکترها در HTML رزرو شده هستند.
استفاده از علامت کوچکتر(<) و بزرگتر(>) در متن به دلیل اینکه مرورگر آنها را با تگ ها در هم می آمیزد امکان پذیر نیست.
برای اینکه بتوان کاراکترهای رزرو شده را نمایش داد، باید از character entity ها در کد منبع HTML استفاده کنیم.
یک character entity به این شکل می باشد:
&entity_name;
OR
&#entity_number;برای نمایش علامت کوچکتر باید بنویسیم: lt& یا 60#& (که lt مخفف less than است)
نکته: مزیت استفاده از entity name به جای entity number این است که به یاد آوردن name راحت تر است. اما عیب آن این است که مرورگرها ممکن است همه entity name ها را پشتیبانی نکنند. (پشتیبانی از entity number ها خیلی بهتر است.)
فاصله (Non-breaking Space)
یک character entity رایج در HTML کاراکتر non-breaking space (یا nbsp&) می باشد.
مرورگرها همیشه فاصله ها (space) را کوتاه می کنند. اگر 10 فاصله پشت سر هم در متن خود تایپ کنید، مرورگر 9 تای آن ها را برمی دارد. برای اینکه فاصله ها را به متن خود اضافه کنید، می توانید از کاراکتر nbsp& استفاده نمایید.
مثال
character entity ها در HTML را تجربه کنید: Try it yourself
در مثال بالا، کاراکتر X را با یک نام یا عدد (عدد+#) جایگزین نمایید.character entity های مفید در HTML
نکته: نام Entityها حساس به کوچکی و بزرگی حروف هستند.
Result Description Entity Name Entity Number non-breaking space   < less than < < > greater than > > & ampersand & & ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € § section § § © copyright © © ® registered trademark ® ® ™ trademark ™ ™ لیست ها در HTML
لیست های رایج در HTML لیست های ترتیبی و غیر ترتیبی هستند.
لیست ها در HTML
لیست های مرتب
- The first list item
- The second list item
- The third list item
لیست های نامرتب
- List item
- List item
- List item
Unordered list
نحوه ایجاد لیست نامرتب در سند HTML.Ordered list
نحوه ایجاد لیست مرتب در HTML.(شما می توانید مثال های بیشتر را در پایین این صفحه مشاهده کنید.)
لیستهای نامرتب (Unorder List)
یک لیست غیر ترتیبی یا نامرتب با تگ <ul> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند. (List Item)
آیتم های یک لیست به وسیله گلوله نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ)
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>نحوه نمایش کد بالا در مرورگر:
- Coffee
- Milk
لیست های مرتب (Order List)
یک لیست مرتب یا ترتیبی با تگ <ol> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند.
آیتم های یک لیست به وسیله اعداد نشانه گذاری می شوند.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>نحوه نمایش کد بالا در مرورگر:
- Coffee
- Milk
لیست های تعریفی (Description List)
یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد.
لیست های تعریفی با تگ <dl> نوشته می شوند.
تگ <dl> به همراه تگ <dt> (که آیتم های موجود در لیست را مشخص می کند) و تگ <dd> ( که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>نحوه نمایش کد بالا در مرورگر:
- Coffee
- - black hot drink
- Milk
- - white cold drink
نکات مهم و اساسی
نکته: درون آیتم های یک لیست، می توانید تصویر، لینک، تگ </ br>، لیستی دیگر و غیره را قرار دهید.
مثال بیشتر - خودتان امتحان کنید
Different types of ordered lists
نمایش انواع دیگر لیست های ترتیبی.Different types of unordered lists
نمایش انواع دیگر لیست های غیر ترتیبی.Nested list
نمایش لیست های تو در تو.Nested list 2
نمایش لیست های تو در توی پیچیده تر.Description list
نمایش لیست تعریفی.تگ های لیست در HTML
Tag Description <ol> یک لیست ترتیبی تعریف می کند.
<ul> یک لیست غیر ترتیبی تعریف می کند.
<li> آیتم های یک لیست را تعریف می کند.
<dl> برای ساخت یک لیست تعریفی استفاده می شود.
<dt> برای ساخت یک آیتم در لیست تعریفی استفاده می شود.
<dd> برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود.
لینک ها در HTML
لینک ها در HTML
لینک ها تقریبا در تمام صفحات وب پیدا می شوند. لینک ها به کاربران اجازه می دهند تا از صفحه ای به صفحه دیگر کلیک کنند.
مثال - خودتان امتحان کنید
HTML links
نحوه ایجاد لینک ها در سند HTMLمی توانید مثال های بیشتری را در پایین این صفحه ببیند.
Hyperlink (یا Link ها) در HTML
یک hyperlink یا link یک کلمه یا گروهی از کلمات یا عکس می باشد که شما می توانید با کلیک کردن روی آن به سند جدید یا بخشی از همان سند بروید.
هنگامی که شما موس را روی یک لینک در یک صفحه وب می برید، نشانگر به شکل یک دست کوچک در می آید.
لینک ها در HTML با تگ <a> مشخص می شوند.
تگ <a> به دو روش می تواند استفاده شود:
- برای ایجاد لینک به سندی دیگر، با استفاده از خصوصیت href
- برای ایجاد یک پیوند به دورن همان صفحه (bookmark)، با استفاده از خصوصیت name
نحوه نوشتن لینک در HTML:
<a href="/url">Link text</a>خصوصیت href مقصد یک لینک را مشخص می کند.
مثال:
<a href="http://www.beyamooz.com/">Visit beyamooz</a>که به این صورت نمایش داده می شود: Visit beyamooz
با کلیک روی لینک بالا، کاربر به صفحه اصلی سایت beyamooz ارجاع داده می شود.
نکته: Link text الزاما یک متن نیست. می تواند یک عکس یا هر عنصر دیگر HTML باشد.
خصوصیت target
خصوصیت target مشخص می کند که صفحه لینک شده، چگونه باز شود.
مثال زیر، صفحه لینک شده را در یک پنجره جدید یا در یک تب جدید باز می کند:
مثال (لینک ها در HTML)
<a href="http://www.beyamooz.com/" target="_blank">Visit beyamooz!</a>خودتان امتحان کنید »خصوصیت name یا (id)
با تنظیم یک نام منحصر به فرد برای یک عنصر با استفاده از خصوصیت name یا id، می توانید در CSS یا JavaScript به آن دسترسی داشته باشید.
البته از خصوصیت name یا id برای ایجاد یک bookmark یا پیوند به درون همان صفحه نیز می توان استفاده نمود.
نکته: استاندارد HTML5 خصوصیت id را بجای name برای تعیین اسم برای یک محل مشخص پیشنهاد می دهد. خصوصیت id برای HTML4 در تمام مرورگرهای امروزی نیز عمل می کند.مثال:تنظیم خصوصیت Name برای تگ <a> در سند HTML:
<a name="tips">Useful Tips Section</a>ایجاد یک لینک به محل مشخصی درون صفحه جاری:
<a href="#tips">Visit the Useful Tips Section</a>یا، ایجاد یک لینک به محل مشخصی در صفحه ای دیگر:
<a href="http://www.beyamooz.com/html_links.htm#tips">
Visit the Useful Tips Section</a>نکات اساسی و مفید
نکته: اگر می خواهید یک فولدر در یک سایت را آدرس دهی نمایید، همیشه یک slash به انتهای آن اضافه کنید. مانند زیر:
در غیر اینصورت، دو درخواست به سرور ارسال کرده اید، سرور ابتدا یک slash به انتهای آدرس اضافه می کند و سپس آدرس را بارگذاری می کند.
An image as a link
نحوه ایجاد یک عکس به عنوان یک لینکLink to a location on the same page
نحوه ایجاد یک پیوند درون همان صفحه. (این روش برای سندهایی که فهرست بندی شده اند کاربرد زیادی دارد)Break out of a frame
چگونه از یک فریم بیرون بیاییم. (اگر سایت شما در یک فریم محصور است)Create a mailto link 1
چگونه با یک لینک، متنی را ایمیل کنیم. (تنها زمانی کار می کند که نرم افزار مدیریت ایمیل مثل outlook نصب شده باشد)Create a mailto link 2
مثالی دیگر از ارسال متن توسط لینکتگ های لینک در HTML:
تگ توضیح <a> یک ancher را تعریف می کند.
مقدمه آموزش HTML
آموزش HTML (اچ تی ام ال) - مقدمه HTML (اچ تی ام ال)
با استفاده از این آموزش، می توانید وب سایتتان را خودتان طراحی کنید.
در این خود آموز، مطالبی را در مورد HTML (اچ تی ام ال) آموزش خواهید دید.
یاد گیری HTML (اچ تی ام ال) کار آسانی است و از آموزش آن لذت خواهید برد.
آموزش HTML (اچ تی ام ال) همراه با صدها مثال
در این خودآموز، برای آموزش HTML از صدها مثال استفاده شده است.
به کمک ویرایشگری که در اختیارتان است، می توانید سند HTML را ویرایش کنید و با کلیک روی یک دکمه، نتیجه را مشاهده کنید.
مثال (مقدمه آموزش HTML)
<html>خودتان امتحان کنید »
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>برای مشاهده نتیجه کد بالا روی دکمه "خودتان امتحان کنید" کلیک کنید.
HTML چیست؟
HTML یک زبان برای توصیف صفحات وب است.
- HTML بترتیب سرنام واژگان Hyper Text Markup Language بحساب می آید. (زبان علامت گذاری ابر متن)
- HTML یک زبان برنامه نویسی نیست بلکه زبان علامت گذاری است.
- یک زبان علامت گذاری مجموعه ای از تگ ها می باشد.
- HTML از تگ ها برای توصیف صفحات وب استفاده می کند.
آموزش تگ های HTML
- تگ های HTML، کلید واژه هایی هستند که داخل علامت کوچکتر بزرگتر هستند. مثل <HTML>
- تگ های HTML معمولا به صورت جفت می آیند.
- تگ اول همان تگ شروع می باشد و تگ دوم نیز همان تگ پایان است.
- تگ های شروع و پایان، تگ باز و بسته نیز نامیده می شود.
سند HTML = صفحات وب
- سندهای HTML صفحات وب را توصیف می کنند.
- سندهای HTML شامل تگ های HTML (اچ تی ام ال) و متن ساده می باشد.
- سندهای HTML صفحات وب نیز نامیده می شود.
هدف یک مرورگر وب (مانند internet explorer یا firefox) این است که سندهای HTML را خوانده و آنها را به صورت صفحات وب نمایش دهد. مرورگر، تگ های HTML را نمایش نمی دهد، اما از تگ های HTML استفاده می کند تا محتوای صفحه را تفسیر کند.
مثال:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>توضیح مثال:
- متن بین <html> و <html/> صفحه وب را توضیح می دهد.
- متن بین <body> و <body/> محتوای قابل نمایش صفحه است.
- متن بین <h1> و <h1/> برای نمایش یک عنوان استفاده می شود.
- متن بین <p> و <p/> برای نمایش یک پاراگراف استفاده می شود.
آموزش تصویری مطلب بالا (فیلم آموزش HTML)
درس شماره 1 (مقدمه آموزش HTML) زمان فیلم: 11:48 خرید و دانلود مستقیم فیلم آموزش HTML - حجم دانلود 766 مگابایت (کلیک کنید +)
میزبانی وب سایت چیست؟
برای اینکه وب سایت خود را به جهانیان ارائه کنید، باید آنرا روی یک سرور وب قرار دهید.
میزبانی وب سایت (Hosting)
یکی از انتخاب های شما برای میزبانی این است که وب سایتتان را روی سروری که متعلق به خودتان است قرار دهید. در اینجا چند نکته وجود دارد که باید در نظر بگیرید:
1- هزینه های سخت افزاری
برای اینکه یک وب سایت "واقعی" را راه اندازی کنید، باید مقداری از تجهیزات سروری قدرتمند را خریداری کنید. انتظار هزینه کمی را نداشته باشید. همچنین به یک ارتباط همیشگی (24 ساعته) و با سرعت بالا نیاز دارید.
2- هزینه های نرم افزاری
به یاد داشته باشید که server-licenses اغلب بالاتر از client-licenses می باشد. همچنین توجه داشته باشید که server-licenses ممکن است به چند کاربر محدود شوند.
3- هزینه نیروی کار
هزینه کمی را برای نیروی کار توقع نداشته باشید. شما باید سخت افزار و نرم افزارتان را نصب کنید. همچنین با ویروس ها و باگ ها نیز سروکار دارید. و باید سرورتان را همیشه در محیطی در حال کار نگه دارید که "هر چیزی ممکن است اتفاق بیفتد".
استفاده از یک تامین کننده سرویس اینترنتی(Internet Service Provider)
اجاره کردن سرور از یک (Internet Service Provider (ISP گزینه ای متداول است.
بیشتر شرکت های کوچک وب سایت خود را بر روی سروری که توسط یک ISP ارائه می گردد ذخیره می کنند. این کار مزایایی دارد:
1- سرعت اتصال
بیشتر ISPها سرعت خوبی در اتصال به اینترنت دارند.
2- سخت افزار قوی
ISPها اغلب سرور های قدرتمندی دارند که می توان آنها را با چندین شرکت به اشتراک گذاشت. همچنین می توان توقع داشت که load balancing و سرور بک آپ گیری کارآمدی داشته باشند.
3- امنیت و پایداری
ISP ها مخصوص میزبانی از وب هستند. انتظار داشته باشید که سرورهای آن ها 99% زمان up باشند، جدیدترین بسته های نرم افزاری و بهترین امنیت در مقابل ویروس ها را داشته باشند.
مواردی که در کار با ISP باید در نظر بگیرید
1- پشتیبانی 24 ساعته
مطمئن شوید که ISP، پشتیبانی 24 ساعته داشته باشد. خود را در شرایطی قرار ندهید که برای حل مشکلات بحرانی، منتظر رسیدن روز کاری بعد شوید.
2- بک آپ گیری روزانه
مطمئن شوید که ISP به صورت روزانه، بک آپ گیری می کند در غیر این صورت ممکن است داده های با ارزشی را از دست بدهید.
3- حجم ترافیکی
محدودیت حجم ترافیکی ISP را مورد مطالعه قرار دهید. مطمئن شوید که اگر سایت شما محبوب و پربیننده شد نباید هزینه اضافی بایت حجم ترافیکی بالا پرداخت کنید.
4- پهنای باند یا محدودیت های محتوا
پهنای باند و محدودیت های محتوایی ISP را مورد بررسی قرار دهید. اگر طرحی برای انتشار مجموعه ای از عکس ها و یا فایل های ویدئویی یا صوتی را دارید مطمئن شوید که محدودیتی در این زمینه وجود ندارد.
5- قابلیت های E-mail
مطمئن شوید ISP مورد نظرتان قابلیت های ایمیلی که نیاز دارید را پشتیبانی کند.
6- دسترسی به پایگاه داده
اگر قصد دارید از پایگاه داده ها در وب سایت خود استفاده کنید، مطمئن شوید که ISP مورد نظر، امکان دسترسی به پایگاه داده را پشتیبانی می کند.
