اچ تی ام ال Archives - آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران https://www.sourcebaran.com/tag/اچ-تی-ام-ال یادگیری برنامه نویسی با طعم سورس باران Fri, 23 Jul 2021 15:16:46 +0000 fa-IR hourly 1 https://www.sourcebaran.com/wp-content/uploads/2021/08/cropped-logo_footer-copy-32x32.png اچ تی ام ال Archives - آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران https://www.sourcebaran.com/tag/اچ-تی-ام-ال 32 32 آموزش طراحی سایت ریسپانسیو در HTML http://www.sourcebaran.com/html_responsive.html http://www.sourcebaran.com/html_responsive.html#comments Sun, 10 Nov 2019 18:55:36 +0000 https://www.sourcebaran.com/?p=55961 در جلسه هجدهم از مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش طراحی سایت ریسپانسیو در HTML از وب سایت آموزش برنامه نویسی سورس باران. طراحی واکنش گرا یا Responsive باعث می‌شود صفحات سایت شما در تمام دستگاه‌ها (دسکتاپ، تپلت و گوشی‌های موبایل) به خوبی نمایش داده شود. طراحی وب به صورت واکنش […]

The post آموزش طراحی سایت ریسپانسیو در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش طراحی سایت ریسپانسیو در HTML

آموزش طراحی سایت ریسپانسیو در HTML

در جلسه هجدهم از مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش طراحی سایت ریسپانسیو در HTML از وب سایت آموزش برنامه نویسی سورس باران. طراحی واکنش گرا یا Responsive باعث می‌شود صفحات سایت شما در تمام دستگاه‌ها (دسکتاپ، تپلت و گوشی‌های موبایل) به خوبی نمایش داده شود. طراحی وب به صورت واکنش گرا به معنی استفاده از HTML و CSS برای تغییر اندازه، مخفی کردن، کوچک یا بزرگ کردن یا حرکت محتوا برای نمایش بهتر آن در هر صفحه نمایشی است.

طراحی وب سایت استاندارد معمولا اصول و ترفندهای خود را دارد که هرچه با این ترفند و نکات ها بیشتر آشنا شوید قطعا در این زمینه می توانید بصورت حرفه ای تر عمل نمایید. لطفا تا  انتها با ما همراه باشید…

طراحی سایت ریسپانسیو در HTML

در نظر داشته باشید جدا از اینکه طراحی واکنش گرا یا Responsive باعث می‌شود صفحات سایت شما در تمام دستگاه‌ها (دسکتاپ، تپلت و گوشی‌های موبایل) به خوبی نمایش داده شود. در سئو وب سایت شما نیز تاثیر بسیار زیادی دارد. زیرا از دیدگاه گوگل وب سایتی که ریسپانسیو باشد در نتایج جستجو بیشتر نمایش داده میشود.

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

تنظیم Viewport در Html

در زمان ایجاد صفحات وب به صورت واکنش گرا، عنصر <meta> زیر را در تمام صفحات وب‌سایت خود اضافه کنید:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

این کد viewport صفحه شما را تنظیم کرده و دستورالعمل چگونگی کنترل ابعاد و مقیاس محتوای صفحه را به مرورگر می‌دهد. در اینجا مثالی از یک صفحه بدون متا تگ viewport و همان صفحه با استفاده از متا تگ viewport آورده شده است:

 

تصاویر ریسپانسیو در Html

تصاویر واکنش گرا به تصاویری گفته می‌شود که برای انطباق با هر نوع اندازه مرورگری تغییر سایز پیدا می‌‌کنند.

 

ویژگی width در اچ تی ام ال

اگر ویژگی width را روی ۱۰۰ درصد تنظیم کنیم، تصویر به صورت واکنش گرا خواهد بود و افزایش یا کاهش اندازه خواهد یافت:

 <img src="img_girl.jpg" style="width:100%;">
پیشنمایش

 

ویژگی max-width در اچ تی ام ال

اگر ویژگی max-width را روی ۱۰۰ درصد تنظیم کنید تصویر در صورت نیاز به اندازه‌های کوچک‌تر تغییر سایز پیدا می‌کند اما هرگز بزرگ‌تر از اندازه اصلی خود نخواهد شد:

 <img src="img_girl.jpg" style="max-width:100%;height:auto;">
پیشنمایش

 

نمایش تصاویر متفاوت با توجه به عرض مرورگر در Html

عنصر <picture> در HTML به شما امکان تعریف تصاویر مختلف برای اندازه‌های مختلف پنجره مرورگر را می‌دهد. مثلا تصور کنید در حالت عادی صفحه نمایش یک گلدان پر از گل به طور کامل نمایش می‌یابد. هرچه اندازه صفحه را کوچک‌تر کنید طبق دستورالعملی که قبلا به مرورگر داده‌اید بخش‌های مختلفی از تصویر نمایش داده می‌شود. در انتها اگر صفحه را به کوچک‌ترین حالت ممکن تغییر دهید تنها یک غنچه از تصویر نمایش می‌یابد.

 

اندازه متن ریسپانسیو در Html

اندازه متن می‌تواند با یک واحد “vw” تنظیم شود که به معنی «viewport width» است. با استفاده از این روش، اندازه متن از اندازه پنجره مرورگر پیروی خواهد کرد. به این ترتیب که اگر پنجره مرورگر بزرگ‌تر یا کوچک‌تر شود، متن هم به همان نسبت تغییر اندازه پیدا می‌کند.

 <h1 style="font-size:10vw">Hello World</h1>
پیشنمایش

 

مدیا کوئری در Html

علاوه بر تغییر اندازه متن و تصویر، در بین برنامه‌نویسان استفاده از مدیا کوئری (media query) در صفحات واکنش گرای وب بسیار رایج است. شما با استفاده از مدیا کوئری می‌توانید استایل‌های کاملا متفاوتی برای اندازه‌های مختلف مرورگر تعریف کنید. در نمونه کد زیر مشخص شده است که با هر بار تغییر پنجره مرورگر، در نوار زیر چه تغییراتی ایجاد شود:

 <style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>
پیشنمایش

 

صفحه وب ریسپانسیو یا واکنشگرا در Html

یک صفحه واکنش گرا باید در صفحات بزرگ دسکتاپ و صفحات کوچک گوشی‌های موبایل ظاهر خوبی داشته باشد:

پیشنمایش

فریم پورک‌های CSS بسیاری وجود دارد که طراحی واکنش گرا ارائه می‌دهند. برخی از آن‌ها رایگان بوده و روش استفاده آسانی دارند.

 

فریمورک بوت استرپ

یکی از فریم‌ورک‌های بسیار محبوب CSS، فریم‌ورک بوت استرپ (Bootstrap) است که از HTML، CSS و جی کوئری (jQuery) برای ایجاد صفحات واکنش گرا استفاده می‌کند:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>
پیشنمایش

امیدوارم این آموزش مورد توجه دوستان قرار گرفته باشد….

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش طراحی سایت ریسپانسیو در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/html_responsive.html/feed 3 آموزش کار با عنصر Head در HTML http://www.sourcebaran.com/html_head.html http://www.sourcebaran.com/html_head.html#respond Wed, 18 Sep 2019 13:13:07 +0000 https://www.sourcebaran.com/?p=54257 در جلسه شانزدهم از مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش کار با عنصر Head در HTML از وب سایت آموزش برنامه نویسی سورس باران.طراحی وب سایت استاندارد معمولا اصول و ترفندهایخود را دارد که هرچه با این ترفند و نکات ها بیشتر آشنا شوید قطعا در این زمینه می توانید بصورت […]

The post آموزش کار با عنصر Head در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش کار با عنصر Head در HTML

آموزش کار با عنصر Head در HTML

در جلسه شانزدهم از مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش کار با عنصر Head در HTML از وب سایت آموزش برنامه نویسی سورس باران.طراحی وب سایت استاندارد معمولا اصول و ترفندهایخود را دارد که هرچه با این ترفند و نکات ها بیشتر آشنا شوید قطعا در این زمینه می توانید بصورت حرفه ای تر عمل نمایید. لطفا تا  انتها با ما همراه باشید…

عنصر Head در HTML

عنصر <head> در واقع محفظه‌ای برای متا دیتا (metadata) است و بین تگ <html> و تگ <body> قرار می‌گیرد. متا دیتا در HTML داده‌ای در مورد سند HTML است اما نمایش داده نمی‌شود. معمولا متا دیتا عنوان، مجموعه کاراکترها، استایل‌ها، لینک‌ها، اسکریپت‌ها و دیگر اطلاعات متا را تعریف می‌کند. تگ‌های <title>، <style>، <meta>، <link>، <script> و <base> اجزایی هستند که متا دیتا را توصیف می‌کنند.

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

عنصر <title> در HTML

عنصر <title> عنوان سند HTML را مشخص میکند و در تمام اسناد HTML و XHTML اجباری است.

عنصر <title> :

  • عنوانی را برای تب مرورگر تعریف میکند.
  • عنوانی را برای صفحه فراهم می آورد که در مورد علاقه ها در مرورگر ها استفاده میشود.
  • عنوانی را برای صفحه  تعریف میکند که در نتایج موتور های جستجو نمایش داده میشود.

یک سند ساده ی HTML  را در زیر مشاهده می نمایید

 <!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>
پیشنمایش

 

عنصر <style> در HTML

از عنصر <style> برای تعریف استایل یک صفحه ی HTML استفاده میشود :

 <style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
پیشنمایش

 

عنصر <link> در HTML

<link rel="stylesheet" href="mystyle.css">
پیشنمایش

 

عنصر <meta> در HTML

عنصر <meta> برای مشخص کردن نوع کارکترست، توضیح صفحه، کلمات کلیدی، نویسنده، و دیگر اطلاعات استفاده میشود. متا دیتا ها به وسیله مرورگر ها (چطور محتوا را نمایش دهند) ، موتور های جستجو (کلمات کلیدی) ، و دیگر سرویس های وب استفاده میشوند.

تعریف charset در HTML که مورد استفاده قرار میگیرد :

<meta charset="UTF-8">

تعریف متا description یا توضیحی برای صفحه در HTML

<meta name="description" content="Free Web tutorials">

تعریف متا keywords یا کلمات کلیدی برای موتور های جستجو در HTML

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

تعریف متا author یا نوسنده صفحه در HTML

<meta name="author" content="John Doe">

متا refresh یا بارگذاری دوباره سند در هر 30 ثانیه در HTML

<meta http-equiv="refresh" content="30">

مثالی از تگ های متا در HTML

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
پیشنمایش

 

تنظیم Viewport در HTML

نسخه HTML5 روشی ارائه می‌دهد که طراحان وب با استفاده از آن می‌توانند از طریق تگ <meta> روی viewport کنترل داشته باشند. viewport ناحیه قابل مشاهده از یک صفحه وب توسط کاربر است که در دستگاه‌های مختلف فرق داشته و روی گوشی‌های موبایل کوچک‌تر از صفحات کامپیوتر شخصی است. شما باید عنصر <meta> مربوط به viewport که در زیر آمده است را در تمام صفحات وب خود وارد کنید:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

یک تگ <meta> برای viewport ،دستورالعمل هایی را برای چگونگی نمایش صفحه، ابعاد و بزرگ و کوچک شدن آن در اختیار مرورگر قرار میدهد.

قسمت width=device-width مشخص میکند که طول صفحه باید از طول صفحه نمایش دستگاه پیروی کند (که بسته به نوع دستگاهی که صفحه روی آن نمایش داده میشود تغییر میکند).

قسمت initial-scale=1.0 مشخص میکند که بزرگنمایی اولیه، هنگامی که صفحه برای بار اول در مرورگر لود میشود باید مقدار 1 باشد.

به دو نمونه مثال زیر که یکی داری تگ متای Viewport بوده و دیگری فاقد آن است دقت کنید و نحوه ی نمایش آنها را در دستگاه موبایل مشاهده کنید :

نکته : لینک 1 و لینک 2 رو باز نمایید تفاوت بین دو صفحه را میتوانید در موبایل و تبلت مشاهده کنید(در صفحه کامپیوتر خانگی تفاوتی را نخواهید دید). در صورتی که به موبایل و تبلت دسترسی ندارید از شبیه ساز موبایل و تبلت در Inspect مرورگر کروم استفاده کنید.

 

عنصر <script> در HTML

از عنصر <script> برای تعریف جاوااسکریپت های سمت کاربر استفاده میشود. کد جاوا اسکریپت زیر عبارت “Hello JavaScript!” در عنصری با شناسه ی “id=”demo قرار میدهد :

 <script>
function myFunction {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
پیشنمایش

عنصر <base> در HTML

عنصر <base> ، URL و target پایه را برای تمام آدرس های نسبی در صفحات مشخص میکند(دقت کنید در صورتی که از base استفاده نکنیم URL پایه همان نام دامنه ما خواهد بود که در اینجا : www.sourcebaran.com) :

<base href="https://www.sourcebaran.com/images/" target="_blank">

در مثال بالامرورگر تصویر html5.gif در آدرس https://www.sourcebaran.com/images/ جستجو خواهد کرد.

شاید برایتان جذاب باشد : فیلم آموزش کامل Html به زبان فارسی و بصورت رایگان

حذف تگ های <html> ، <head> و <body> از صفحه HTML

طبق استاندارد html5، تگ‌های <html>، <body> و <head> می‌توانند حذف شوند. کد زیر طبق استاندار html5 معتبر است:

 <!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
پیشنمایش

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

منبع : W3Schools

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش کار با عنصر Head در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/html_head.html/feed 0 آموزش Html؛ آموزش جاوا اسکریپت در HTML http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html%d8%9b-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d8%af%d8%b1-html.html http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html%d8%9b-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d8%af%d8%b1-html.html#respond Tue, 06 Aug 2019 08:26:28 +0000 https://www.sourcebaran.com/?p=53531 در جلسه پانزدهم مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش جاوا اسکریپت در HTML از وب سایت آموزش برنامه نویسی سورس باران. آموزش جاوا اسکریپت در HTML جاوا اسکریپت صفحات HTML را پویاتر و تعاملی‌تر می‌کند. با استفاده از جاوا اسکرییپت در صفحات HTML، کاربران می‌توانند در بخش‌هایی از صفحه […]

The post آموزش Html؛ آموزش جاوا اسکریپت در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش جاوا اسکریپت در HTML

آموزش Html؛ آموزش جاوا اسکریپت در HTML

در جلسه پانزدهم مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش جاوا اسکریپت در HTML از وب سایت آموزش برنامه نویسی سورس باران.

آموزش جاوا اسکریپت در HTML

جاوا اسکریپت صفحات HTML را پویاتر و تعاملی‌تر می‌کند. با استفاده از جاوا اسکرییپت در صفحات HTML، کاربران می‌توانند در بخش‌هایی از صفحه مشارکت کرده یا دستورالعمل‌هایی را اجرا کنند.

JavaScript makes HTML pages more dynamic and interactive.

آموزش تگ <script> در HTML

تگ <script> برای تعریف جاوا اسکریپت در سمت کلاینت به کار برده می‌شود. عنصر <script> یا حاوی دستورات (statement) جاوا اسکریپت است یا از طریق خصوصیت src به یک فایل خارجی اسکریپت اشاره می‌کند. استفاده‌های رایج از جاوا اسکریپت شامل تغییرات عکس، تایید اعتبار فرم و تغییرات داینامیک محتوا است. جاوا اسکریپت اغلب برای انتخاب یک عنصر HTML از روش document.getElementById(id) استفاده می‌کند. مثال جاوا اسکریپتی زیر عبارت “Hello JavaScript!” با id=”demo” در یک عنصر HTML نوشته می‌شود:

The <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains script statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

To select an HTML element, JavaScript most often uses the document.getElementById() method.

This JavaScript example writes “Hello JavaScript!” into an HTML element with id=”demo”:

 <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
پیشنمایش

 

مثال هایی از استفاده جاوا اسکریپت در Html

در ادامه چند نمونه از کارهایی که می‌توان با جاوا اسکریپت انجام داد را مشاهده می‌کنید. جاوا اسکریپت می‌تواند محتوای HTML را تغییر دهد :

 document.getElementById("demo").innerHTML = "Hello JavaScript!";
پیشنمایش

جاوا اسکریپت می‌تواند استایل‌های HTML را تغییر دهد:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
پیشنمایش

جاوا اسکریپت می‌تواند خصوصیت‌های HTML را تغییر دهد:

 document.getElementById("image").src = "picture.gif";
پیشنمایش

 

آموزش تگ <noscript> در HTML

تگ <noscript> برای ایجاد محتوای جایگزین برای کاربرانی به کار می‌رود که اسکریپت‌ها در مرورگرشان غیرفعال بوده و یا از مرورگری استفاده می کنند که از اسکریپت های سمت کاربر (کلاینت) پشتیبانی نمی‌کند:

 <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>
پیشنمایش

 

آموزش استفاده از جاوا اسکریپت در قسمت Head یک صفحه وب

در مثال زیر مشاهده خواهید کرد که دستورات جاوا اسکریپت میتوانند در قسمت هد یک صفحه ی HTML قرار بگیرند.

<!DOCTYPE html>
<html>
<head>
 
<script>
function myFunction() {
document.getElementById("test").innerHTML = "sourcebaran";
}
</script>
 
</head>
<body>
 
<p id="test"></p>
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
</body>
</html>

 

آموزش استفاده از جاوا اسکریپت در قسمت Body یک صفحه وب

در مثال زیر مشاهده خواهید کرد که دستورات جاوا اسکریپت میتوانند در قسمت Body یک صفحه ی HTML قرار بگیرند.

<!DOCTYPE html>
<html>
<body>
 
<p id="test"></p>
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
<script>
function myFunction() {
document.getElementById("test").innerHTML = "sourcebaran";
}
</script>
 
</body>
</html>

 

آموزش فراخوانی فایل جاوا اسکریپت خارجی در HTML

در مثال زیر نحوه چگونگی فراخوانی فایل خارجی جاوا اسکریپت را در قسمت Head یک صفحه HTML برای طراحی وب سایت مشاهده خواهید نمود.

<!DOCTYPE html>
<html>
<head>
 
<script src="test.js"></script>
 
</head>
<body>
 
<p id="test"></p>
 
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
</body>
</html>

در مثال زیر نحوه چگونگی فراخوانی فایل خارجی جاوا اسکریپت را در قسمت Body یک صفحه HTML مشاهده خواهید نمود.

2
3
4
5
6
7
8
9
	
<body>
 
<p id="test"></p>
 
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
<script src="test.js"></script>
 
</body>

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش Html؛ آموزش جاوا اسکریپت در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html%d8%9b-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d8%af%d8%b1-html.html/feed 0 آموزش Html؛ آموزش iframe در HTML http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html%d8%9b-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-iframe-%d8%af%d8%b1-html.html http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html%d8%9b-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-iframe-%d8%af%d8%b1-html.html#respond Wed, 24 Jul 2019 13:33:19 +0000 https://www.sourcebaran.com/?p=53138 در جلسه چهاردهم مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش iframe در HTML از وب سایت آموزش برنامه نویسی سورس باران. در این مقاله به معرفی مسیر فایل (file path) جاوااسکریپت و iframe در HTML خواهیم پرداخت. با ما همراه باشید… آموزش iframe در HTML از iframe برای نمایش یک […]

The post آموزش Html؛ آموزش iframe در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش iframe در HTML

آموزش Html؛ آموزش iframe در HTML

در جلسه چهاردهم مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش iframe در HTML از وب سایت آموزش برنامه نویسی سورس باران. در این مقاله به معرفی مسیر فایل (file path) جاوااسکریپت و iframe در HTML خواهیم پرداخت. با ما همراه باشید…

آموزش iframe در HTML

از iframe برای نمایش یک صفحه وب درون یک صفحه وب استفاده می‌شود، به مثال زیر توحه نمایید :

<iframe src="https://www.sourcebaran.com/"></iframe>

کد بالا خروجی زیر را خواهد داشت:

 

آموزش ساخت iframe

نگارش یا syntax عنصر iframe در HTML به این صورت است که با تگ <iframe> تعریف می‌شود

<iframe src="https://www.sourcebaran.com/"></iframe>

خصوصیت src آدرس وب یا URL صفحه درونی که در داخل صفحه اصلی باز می‌شود را مشخص می‌کند.

 

خصوصیات height و width در  iframe

از خصوصیات height و width برای مشخص کردن اندازه‌ی iframe استفاده کنید. مقدار این خصوصیات به صورت پیش‌فرض بر حسب پیکسل تعریف می‌شوند اما می‌توان آن‌ها را بر اساس درصد (مثلا ۸۰٪) هم تعریف کرد:

 <iframe src="demo_iframe.htm" height="200" width="300"></iframe>
پیشنمایش

 

حذف کادر iframe 

یک iframe به صورت پیش‌فرض دارای یک کادر اطراف خود است. برای حذف این کادر باید خصوصیت style را اضافه کرده و از ویژگی border در CSS استفاده کنید

 <iframe src="demo_iframe.htm" style="border:none;"></iframe>
پیشنمایش

 

با CSS می‌توانید اندازه، استایل و رنگ کادر iframe را هم تغییر دهید

 <iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
پیشنمایش

 

هدف یک لینک در Iframe

از iframe در HTML می‌توان به عنوان قاب هدف برای یک لینک هم استفاده کرد. خصوصیت target برای لینک باید به خصوصیت name از iframe اشاره کند:

 <iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
پیشنمایش منبع

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش Html؛ آموزش iframe در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html%d8%9b-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-iframe-%d8%af%d8%b1-html.html/feed 0 آموزش Html؛ آموزش کار با لینک در HTML http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html%d8%9b-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-%d9%84%db%8c%d9%86%da%a9-%d8%af%d8%b1-html.html http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html%d8%9b-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-%d9%84%db%8c%d9%86%da%a9-%d8%af%d8%b1-html.html#respond Wed, 17 Apr 2019 05:30:14 +0000 https://www.sourcebaran.com/?p=50474 در جلسه نهم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با لینک در HTML از وب سایت آموزش برنامه نویسی سورس باران.لینکدهی یکی از مهمترین مباحث مهم در آموزش HTML است. استفاده از لینک در لا به لای محتوا از اهمیت بسیار زیادی در طراحی وب سایت برخوردار است. […]

The post آموزش Html؛ آموزش کار با لینک در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش کار با لینک در HTML

آموزش Html؛ آموزش کار با لینک در HTML

در جلسه نهم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با لینک در HTML از وب سایت آموزش برنامه نویسی سورس باران.لینکدهی یکی از مهمترین مباحث مهم در آموزش HTML است. استفاده از لینک در لا به لای محتوا از اهمیت بسیار زیادی در طراحی وب سایت برخوردار است.

این لینک‌ها می‌توانند مخاطب را به محتوا یا بخش‌های مهم دیگر سایت شما یا منابع دیگر هدایت کنند. لینک‌ها نه تنها برای افزایش اعتبار محتوا و صفحه وب، بلکه به منظور اهداف سئو و بهتر دیده شدن در میان رقبا هم به کار می‌روند. با ما همراه باشید…

آموزش کار با لینک در HTML

استفاده از لینک در سندهای HTML قواعد خاص خود را دارد و همچنین در عین حال که یادگیری آن بسیار ساده هست ولی باید به نکات مهم و استانداردهای گفته شده توجه نمایید که مشکلی بوجود نیاد.

 

هایپرلینک ها در Html

لینک‌ها را می‌توان تقریبا در همه جای صفحات وب پیدا کرد. کار لینک‌ها هدایت کاربر از صفحه‌ای به صفحه دیگر یا از محتوایی به محتوای دیگر است. لینک‌های HTML از نوع هایپرلینک هستند که می‌توانید با کلیک کردن روی آن‌ها به سند دیگری هدایت شوید. وقتی ماوس خود را روی یک لینک نگه می‌دارید، نشانگر ماوس (در بیشتر موارد) به شکل یک دست کوچک درمی‌آید. توجه داشته باشید که لینک‌ها نباید لزوما به شکل متن باشند، بلکه می‌توانند در قالب عکس یا یک عنصر HTML باشند.

 

نگارش لینک در اچ تی ام ال

نحوه نگارش یا سینتکس (Syntax) لینک‌ها در HTML به این صورت است که لینک‌ها با تگ تعریف می‌شوند:

<a href="url">link text</a>

 <a href="https://www.sourcebaran.com/html/">Visit our HTML tutorial</a>
پیش نمایش

خصوصیت href آدرس مقصد یک لینک را مشخص می‌نماید. link text با کلیک کردن روی این قسمت به آدرس مشخص شده هدایت خواهید شد. فراموش نکنید که در انتهای لینک خود حتما علامت اسلش (/) را قرار دهید در غیر این صورت ممکن است دو درخواست به سرور داده شود. بسیاری از سرورها به صورت خودکار این علامت را به آدرس اضافه کرده و سپس یک درخواست تازه ایجاد می‌کنند.

 

لینک Local در اچ تی ام ال

در مثال بالا از یک URL کامل استفاده شده است. یک لینک local (لینک به همان وب‌سایت) با یک URL نسبتا مشابه و بدون http://www. مشخص می‌شود:

 <a href="html_images.asp">HTML Images</a>
پیش نمایش

 

رنگ لینک در HTML

به صورت پیش‌فرض لینک ها در تمام مرورگرها به یکی از شکل‌های زیر ظاهر می‌شوند:

  1. لینکی که مشاهده نشده است به صورت زیرخط‌دار و آبی نمایش داده می‌شود
  2. لینکی که مشاهده شده است به صورت زیرخط‌دار و بنفش نمایش می‌شود
  3. لینک فعال به شکل زیرخط‌دار و قرمز نمایش می‌شود

می‌توانید به سلیقه خودتان و با استفاده از style، رنگ‌های پیش‌فرض را تغییر دهید:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
پیش نمایش

 

خصوصیت Target در Html

خصوصیت target مشخص می‌کند که سند لینک شده در کجا باز شود. این خصوصیت می‌تواند دارای یکی از مقادیر زیر باشد:

  1. blank_ : که سند لینک شده را در یک پنجره یا سربرگ جدید باز می‌کند
  2. self_ : که سند لینک شده را در همان پنجره یا سربرگی که کلیک انجام شده باز می‌کند (روش پیش‌فرض)
  3. parent_ : که سند لینک شده را در فریم والد (parent frame) باز می‌کند
  4. top_ : که سند لینک شده را به صورت کامل در همان پنجره نشان می‌دهد
  5. Framename: که سند لینک شده را در یک فریم نام‌گذاری شده نشان می‌دهد

مثال زیر سند لینک شده را در یک پنجره یا سربرگ جدید از مرورگر باز خواهد کرد:

 <a href="https://www.sourcebaran.com/" target="_blank">Visit W3Schools!</a>
پیش نمایش

این نکته را به یاد داشته باشید که اگر صفحه وب شما در یک فریم قفل شده باشد می‌توانید از target=”_top” برای خارج شدن از آن فریم استفاده کنید:

 <a href="https://www.sourcebaran.com/html/" target="_top">HTML5 tutorial!</a>
پیش نمایش

 

تصویر لینک دار در Html

در سندهای HTML معمولا مرسوم است که از تصویر هم به عنوان لینک استفاده می‌کنند:

 <a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
پیش نمایش

توجه داشته باشید که border:0; به این منظور استفاده می‌شود که از نمایش کادر پیرامون عکس‌ها توسط اینترنت اکسپلورر ۹ و نسخه‌های پیشین جلوگیری شود.

 

ایجاد یک بوک مارک در Html

از بوک مارک‌های HTML به این منظور استفاده می‌شود که خواننده بتواند با استفاده از آن‌ها به بخش‌های مشخصی از یک صفحه وب جهش کند. اگر صفحات وب سایت شما طولانی باشد، بوک مارک‌ها ابزار مفید و کارآمدی خواهند بود. برای بوک مارک کردن یک بخش ابتدا باید بوک مارک را ایجاد کرده و به آن لینک اختصاص دهید. وقتی روی آن لینک کلیک می‌شود صفحه وب سایت اسکرول یا پیمایش شده و به نقطه‌ای که بوک مارک کرده‌اید می‌رود.

در مثال زیر این مراحل آورده شده است،ابتدا با استفاده از خاصیت id یک بوک مارک ایجاد کنید:

<h2 id="C4">Chapter 4</h2>

سپس به آن بوک مارک لینکی از درون همان صفحه بدهید (Jump to chapter 4):

<a href="#C4">Jump to Chapter 4</a>

یا می‌توانید لینکی از یک صفحه دیگر را برای بوک مارک خود تعریف کنید:

 <a href="html_demo.html#C4">Jump to Chapter 4</a>
پیش نمایش

 

External page در Html

لینک دهی به صفحات خارجی (External page) یا صفحات فرعی وب سایت را می‌توان با یک URL کامل یا با مسیری مشابه با صفحه جاری وب سایت (صفحه اصلی) مشخص کرد. مثال زیر از یک URL کامل برای لینک دادن به یک صفحه استفاده می‌کند:

 <a href="https://www.sourcebaran.com/html/default.asp">HTML tutorial</a>
پیش نمایش

این مثال به صفحه‌ای لینک می‌شود که در پوشه html موجود در صفحه جاری وب سایت قرار دارد:

 <a href="/html/default.asp">HTML tutorial</a>
پیش نمایش

این مثال به صفحه‌ای لینک می‌شود که در همان پوشه‌ی صفحه جاری قرار گرفته است:

 <a href="default.asp">HTML tutorial</a>
پیش نمایش

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش Html؛ آموزش کار با لینک در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html%d8%9b-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-%d9%84%db%8c%d9%86%da%a9-%d8%af%d8%b1-html.html/feed 0 آموزش Html؛ آموزش کار با تصاویر در HTML http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d8%af%d8%b1-html.html http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d8%af%d8%b1-html.html#comments Tue, 05 Mar 2019 16:28:37 +0000 https://www.sourcebaran.com/?p=49269 در جلسه هشتم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با تصاویر در HTML از وب سایت آموزش برنامه نویسی سورس باران.در این جلسه معرفی و نحوه استفاده از عکس و جاگذاری تصویر رو بصورت کامل آموزش خواهیم داد. با ما همراه باشید… آموزش کار با تصاویر در HTML قطعا […]

The post آموزش Html؛ آموزش کار با تصاویر در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش کار با تصاویر در HTML

آموزش Html؛ آموزش کار با تصاویر در HTML

در جلسه هشتم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با تصاویر در HTML از وب سایت آموزش برنامه نویسی سورس باران.در این جلسه معرفی و نحوه استفاده از عکس و جاگذاری تصویر رو بصورت کامل آموزش خواهیم داد. با ما همراه باشید…

آموزش کار با تصاویر در HTML

قطعا در تمامی وب سایت ها با تصاویر متعددی مواجه می شوید. تصاویر، برای گویاتر کردن محتوا یا زیباسازی صفحات استفاده می‌شود. هیچ شکی نیست که حضور عکس در هر صفحه از سایت می‌تواند طرح و ظاهر یک صفحه وب را بهبود ببخشیده و مخاطب را بیشتر مجذوب خود کند. اگر بخواهید در یک صفحه وب یک عکس جایگذاری کنید، باید با استفاده از کد HTML تصویر را در طراحی سایت قرار بدهید. در ادامه سه تصویر مختلف و کدهای مربوط به هر کدام را به ترتیب از چپ به راست مشاهده می‌کنید:

 

<img src="pulpitrock.jpg" alt="منظره کوهستان">

<img src="img_girl.jpg" alt="دختر ژاکت پوش">
<img src="img_chania.jpg" alt="تصویر گل">
پیشنمایش منظره کوهستان پیشنمایش دختر ژاکت پوش پیشنمایش تصویر گل

 

نحوه قرارگیری (Syntax) عکس در HTML

تصاویر در HTML با تگ <img> تعریف می‌شوند که یک تگ خالی و تنها حاوی ویژگی است. همانطور که در درس اول سری آموزش HTML هم به آن اشاره کردیم، تگ‌های خالی دارای تگ پایانی نیستند. ویژگی src در واقع URL (آدرس اینترنتی) تصویر را مشخص می‌کند:

<img src="url">

 

خصوصیت alt در اچ تی ام ال

خصوصیت alt یک متن جایگزین برای تصویر ایجاد می‌کند تا اگر کاربر بنا به هر علتی (سرعت پایین اینترنت، خطا در ویژگی src یا استفاده از صفحه‌خوان توسط کاربر) نتواند عکس را مشاهده کند، این متن نمایش داده شود. مقدار خصوصیت alt باید تصویر را توصیف کند:

<img src="img_chania.jpg" alt="تصویر گل">
پیشنمایش

اگر مرورگر نتواند به هر دلیلی، تصور را پیدا کند مقدار ویژگی alt را نمایش خواهد داد.توجه داشته باشید که ویژگی alt ضروری است. یک صفحه وب بدون دارا بودن این ویژگی، اعتبار نخواهد داشت. توجه داشته باشید که مقدار alt می‌تواند بسته به انتخاب شما به زبان انگلیسی، فارسی یا هر زبان دیگری نوشته شود.

 

اندازه تصویر در HTML

می‌توانید از ویژگی style برای مشخص کردن عرض و طول یک تصویر استفاده کنید

<img src="img_girl.jpg" alt="دختر ژاکت پوش" style="width:500px;height:600px;">

در روش دیگر می‌توانید از ویژگی‌های width و height استفاده کنید:

<img src="img_girl.jpg" alt="دختر ژاکت پوش" width="500" height="600">

ویژگی‌های width و height همیشه طول و عرض تصویر را با واحد پیکسل تعریف می‌کنند. توجه داشته باشید همیشه طول و عرض تصویر را مشخص کنید در غیر این صورت، صفحه سایت طراحی شده، در زمان بارگزاری تصویر لرزش خواهد داشت.

 

استفاده از ویژگی های Width و Height یا ویژگی Style

تمام ویژگی‌های width، height و style در HTML5 معتبر هستند. البته ما استفاده از ویژگی style را توصیه می‌کنیم. با این کار از تغییر اندازه تصاویر توسط شیوه‌نامه‌ها (style sheet) جلوگیری می‌شود:

<!DOCTYPE html>
<html>
<head>
<style>
img { 
    width:100%; 
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html
پیشنمایش

 

تصاویر موجود در یک پوشه دیگر در Html

اگر پوشه عکس مشخص نشده باشد مرورگر انتظار دارد تصویر را در همان پوشه صفحه وب پیدا کند. البته معمولا تصاویر را در یک پوشه فرعی ذخیره می‌کنند. در صورت استفاده از این روش حتما باید نام پوشه را در ویژگی src بگنجانید:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
پیشنمایش

 

تصاویر موجود در یک سرور دیگر در Html

برخی از سایت‌ها تصاویر خود را روی سرور تصاویر ذخیره می‌کنند. در واقع، شما می‌توانید از هر آدرس url در جهان به این تصاویر دسترسی داشته باشید:

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
پیشنمایش

 

لینک دادن به تصاویر در اچ تی ام ال

برای استفاده از تصویر به عنوان لینک باید تگ <img> را در تگ <a> قرار دهید

 <a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
پیشنمایش

در کد بالا border:0 به این علت اضافه شده تا از نمایش کادر اطراف تصویر توسط مرورگر اینترنت اکسپلورر ۹ و نسخه‌های قبلی جلوگیری شود.

 

شناور کردن تصاویر در اچ تی ام ال

می‌توانید از خصوصیت float در CSS استفاده کرده و اجازه دهید تصاویر به سمت چپ یا راست متن شناور شوند:

 <p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
پیشنمایش

 

Image Maps در اچ تی ام ال

از تگ <map> برای تعریف یک نقشه- تصویر (image-map) استفاده کنید. یک نقشه-تصویر در واقع تصویری است که نقاطی از آن قابل کلیک شدن باشد. با استفاده از کدی که در ادامه می‌آید در تصویر زیر اشیاء کامپیوتر، گوشی موبایل و فنجان قهوه قابل کلیک شدن خواهند بود:

<img src="workplace.jpg" alt="محل کار" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="رایانه" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="تلفن" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="قهوه" href="coffee.htm">
</map>
پیشنمایش

خصوصیت نام تگ <map> با خصوصیت usemap مربوط به تگ <img> همراه شده و یک رابطه بین تصویر و نقشه ایجاد می‌کند. تگ <map> حاوی تعداد تگ‌های <area> بوده که نواحی قابل کلیک در نقشه- تصویر را مشخص می‌کند.

 

تصویر پشت زمینه در اچ تی ام ال

برای افزودن تصویر پشت زمینه به یک عنصر HTML، از خصوصیت background-image در CSS استفاده کنید. در مثال زیر نشان داده شده است که برای افزودن تصویر پشت زمینه به یک صفحه وب، باید ویژگی background-image را در عنصر BODY مشخص کنید:

<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

</body>

در مثال زیر نشان می‌دهد که برای افزودن تصویر پشت زمینه به یک پاراگراف، باید ویژگی background-image را برای عنصر P مشخص کنید:

<body>

<p style="background-image:url('clouds.jpg')">
...
</p>

</body>
پیشنمایش

 

عنصر <picture> در اچ تی ام ال

نسخه HTML5 عنصر <picture> را برای افزودن انعطاف‌پذیری بیشتر در زمان تعریف منابع تصویر اضافه کرده است. عنصر <picture> حاوی یک تعداد از عناصر <source> است که هر یک به یک منبع متفاوت ارجاع داده می‌شوند. با این روش مرورگر می‌تواند تصویری را انتخاب کند که به بهترین شکل با view یا دستگاه فعلی منطبق است. هر عنصر <source> دارای خصوصیاتی (attribute) است که نشان می‌دهد چه زمان تصویر در بهترین حالت تناسب قرار دارد. مرورگر از اولین عنصر <source> که دارای مقادیر منطبق است استفاده کرده و بقیه عناصر <source> دیگر را نادیده می‌گیرد.

در مثال زیر اگر پنجره مرورگر حداقل ۶۵۰ پیکسل باشد یک تصویر و اگر کمتر از ۶۵۰ و بیشتر از ۴۶۵ پیکسل بود تصویر دیگری نمایش داده می‌شود:

<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="گل" style="width:auto;">
</picture>
پیشنمایش

توجه داشته باشید که همیشه یک عنصر <img> به عنوان آخرین عنصر فرزند <picture> تعریف کنید. عنصر <img> توسط مرورگرهایی به کار برده می‌شود که از عنصر <picture> پشتیبانی نمی‌کنند یا تگ‌های <source> انطباق ندارند.

 

صفحه خوان های HTML

صفحه خوان یک برنامه نرم‌افزاری است که کدهای HTML را می‌خواند، متن را تبدیل کرده و به کاربر امکان گوش دادن به محتوا را می‌دهد. صفحه‌خوان‌ها معمولا برای افراد نابینا، کم بینا یا دارای ناتوانی در یادگیری بسیار مفید است. تصاویر در HTML یکی از مهم‌ترین مباحث این زبان نشانه گذاری بوده و به زیبایی و قابل فهم کردن محتوای وب سایت شما کمک شایانی می‌کنند. امروزه نقش تصاویر در محتوای تولیدی بر هیچ وبمستری پوشیده نیست. بنابراین در طراحی وب‌ سایت خود حتما به این بخش توجه ویژه‌ای داشته باشید. یادتان باشد یک طراحی سایت حرفه ای که به ایجاد ظاهری زیبا بیانجامد، یکی از وجوه تمایز شما با رقبا است. می‌توانید با مطالعه کامل دوره آموزش HTML مقدماتی در لیداوب، اصلی‌ترین گام در راه آموزش طراحی سایت را برداشته و پس از آن با مطالعه مفاهیم دیگر، به یک طراح سایت حرفه‌ای تبدیل شوید.

منبع: W3Schools

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش Html؛ آموزش کار با تصاویر در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d8%af%d8%b1-html.html/feed 1 آموزش Html؛ آموزش کار با رنگ ها در HTML http://www.sourcebaran.com/html_colors.html http://www.sourcebaran.com/html_colors.html#respond Tue, 19 Feb 2019 08:43:55 +0000 https://www.sourcebaran.com/?p=45761 در جلسه هفتم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با رنگ ها در HTML از وب سایت آموزش برنامه نویسی سورس باران.در این جلسه رنگ در HTML، رنگ Background، رنگ متن، رنگ کادر و مقدار رنگ‌ ها را خواهیم داشت. با ما همراه باشید… آموزش کار با رنگ ها در […]

The post آموزش Html؛ آموزش کار با رنگ ها در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش کار با رنگ ها در HTML

آموزش Html؛ آموزش کار با رنگ ها در HTML

در جلسه هفتم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با رنگ ها در HTML از وب سایت آموزش برنامه نویسی سورس باران.در این جلسه رنگ در HTML، رنگ Background، رنگ متن، رنگ کادر و مقدار رنگ‌ ها را خواهیم داشت. با ما همراه باشید…

آموزش کار با رنگ ها در HTML

رنگ‌های HTML با استفاده از نام‌های از پیش تعیین شده یا مقادیر RGB، HEX، HSL، RGBA و HSLA مشخص می‌شوند. در HTML، یک رنگ را می‌توان با استفاده از نام آن مشخص کرد. HTML از ۱۴۰ نام استاندارد رنگ پشتیبانی می‌کند:

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>
پیشنمایش

 

آموزش کار با رنگ پشت زمینه در اچ تی ام ال (background color for HTML)

شما می‌توانید برای عناصر HTML یک رنگ پشت زمینه یا background انتخاب کنید که نمونه کد آن را در زیر مشاهده می‌کنید

 <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
پیشنمایش

 

آموزش کار با رنگ متن در اچ تی ام ال ( Text Color for Html )

در HTML می‌توان برای متن خود یک رنگ مشخص انتخاب کرد. نمونه و کد مربوط به آن را در زیر مشاهده می‌کنید

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
پیشنمایش

 

آموزش کار با رنگ کادر در اچ تی ام ال (Border Color for Html)

اگر بخواهید پیرامون یک متن کادری را قرار دهید می‌توانید برای شاخص تر کردن کادر برای آن یک رنگ انتخاب کنید

 <h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
پیشنمایش

 

آموزش کار با مقدار رنگ ها در اچ تی ام ال (Color Values for Html)

در HTML، رنگ ها می‌توانند با مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر rgBA و مقادیر HSLA مشخص شوند. در زیر نمونه رنگ «Tomato» نرمال را مشاهده می‌کنید

در اینجا هم نمونه رنگ Tomato را با ۵۰ درصد شفافیت مشاهده می‌کنید

 <h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
پیشنمایش

 

آموزش کار با مقدار RGB در اچ تی ام ال (RGB Value for Html)

در HTML می‌توان با استفاده از فرمول زیر یک رنگ را به عنوان یک مقدار RGB تعریف کرد. RGB سرواژه کلمات «Red، Green و Blue» است. هر یک از پارامترهای قرمز، سبز، آبی شدت رنگ را بین بازه ۰- ۲۵۵ تعریف می‌کند. برای مثال rgb(255, 0, 0) به صورت رنگ قرمز نمایش داده می‌شوند چون رنگ قرمز بالاترین مقدار را داشته و بقیه صفر تعریف شده‌اند. برای نمایش رنگ سیاه، تمام پارامترها باید صفر تعیین شوند مانند rgb(0, 0, 0). برای نمایش رنگ سفید تمام پارامترها باید ۲۵۵ تعیین شوند مانند rgb(255, 255, 255). در ادامه چند نمونه را مشاهده می‌کنید

پیشنمایش

 

سایه خاکستری اغلب با استفاده از تعیین مقادیر مساوی برای هر سه منبع رنگ ایجاد می‌شود

پیشنمایش

 

آموزش کار با مقدار HEX در اچ تی ام ال (HEX Value for Html)

در HTML مقدار رنگ را می‌توان با استفاده از یک مقدار هگزادسیمال به شکل #rrggbb تعریف کرد که در آن rr نماد رنگ قرمز (red)، gg نماد رنگ سبز (green) و bb نماد رنگ آبی (blue)، مقادیری بین 00 و ff (مشابه ۰- ۲۵۵) هستند. برای مثال #ff0000 به صورت رنگ قرمز نمایش داده می‌شود، چون به قرمز بالاترین مقدار (ff) داده شده و بقیه پایین‌ترین مقدار (00) را دارند.

پیشنمایش

 

سایه خاکستری معمولا با استفاده از تعریف مقادیر مساوی برای سه منبع رنگ به دست می‌آید

پیشنمایش

 

آموزش کار با مقدار HSL در اچ تی ام ال (HSL Value for Html)

در HTML یک رنگ را می‌توان با استفاده از ته رنگ، غلظت و روشنایی به شکل HSL یا همان Hue، Saturation‌ و Lightness، مشخص کرد. ته رنگ یا hue درجه‌ ۰ تا ۳۶۰ روی چرخه رنگ است که مقدار ۰ نشان‌دهنده رنگ قرمز، مقدار ۱۲۰ مقدار رنگ سبز و ۲۴۰ معرف رنگ آبی است. غلظت یا Saturation به معنی یک مقدار درصدی است که %0 به معنی سایه‌ی خاکستری و %100 به معنی رنگ کامل است. روشنایی یا Lightness هم به صورت درصدی تعریف می‌شود که %0 به رنگ سیاه، %50 نه روشن و نه تیره و %100 نشان‌دهنده رنگ سفید است

پیشنمایش

 

آموزش کار با غلظت رنگ در اچ تی ام ال (Saturation for Html)

غلظت را می‌توان به عنوان شدت یک رنگ تعریف کرد. ۱۰۰ درصد یعنی یک رنگ خالص که هیچ‌گونه سایه خاکستری ندارد. ۵۰ درصد یعنی ۵۰ درصد سایه خاکستری وجود دارد اما هنوز می‌توانید رنگ اصلی را تشخیص دهید. صفر درصد یعنی خاکستری کامل و شما دیگر نمی‌توانید رنگ اصلی را ببینید

پیشنمایش

 

روشنایی در Html

روشنایی یک رنگ را می‌توان به صورت میزان نوری که می‌خواهید به یک رنگ بدهید تعریف کرد؛ به این صورت که صفر درصد یعنی عدم وجود نور (سیاه)، ۵۰ درصد یعنی ۵۰ درصد نور (نه روشن و نه تیره) و ۱۰۰ درصد به معنی روشنایی کامل (سفید) است.

 

پیشنمایش

 

سایه‌های خاکستری اغلب از طریق قرار دادن مقادیر ته رنگ و غلظت روی صفر و تنظیم روشنایی بین صفر تا صد برای به دست آوردن سایه‌های تیره‌تر یا روشن‌تر ایجاد می‌شوند

 

آموزش کار با مقدار RGBA در اچ تی ام ال (RGBA Value for Html)

مقادیر رنگ‌های RGBA در واقع بسط یافته‌ی مقادیر رنگ‌های RGB به همراه یک کانال آلفا هستند که کدری یک رنگ را مشخص می‌کند. مقدار رنگ RGBA به صورت rgba (red, green, blue, alpha) مشخص می‌شود. پارامتر آلفا یک عدد بین 0.0 (کاملا شفاف) و 1.0 (بدون هیچ‌گونه شفافیت) است

پیشنمایش

 

آموزش کار با مقدار HSLA در اچ تی ام ال (HSLA Value for Html)

مقادیر رنگ‌های HSLA هم بسط یافته‌ی مقادیر رنگ‌های HSL با یک کانال آلفا است که کدری رنگ را مشخص می‌کند. مقدار یک رنگ HSLA به صورت hsla (hue, saturation, lightness, alpha) تعریف می‌شود. پارامتر آلفا یک عدد بین 0.0 (کاملا شفاف) و 1.0 (بدون هیچ‌گونه شفافیت) است:

پیشنمایش

منبع : W3Schools

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش Html؛ آموزش کار با رنگ ها در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/html_colors.html/feed 0 آموزش Html؛ آموزش کار با کامنت در HTML http://www.sourcebaran.com/html-comment-tags.html http://www.sourcebaran.com/html-comment-tags.html#respond Mon, 28 Jan 2019 09:24:34 +0000 https://www.sourcebaran.com/?p=45227 در جلسه ششم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با کامنت در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید… آموزش کار با کامنت در HTML تگ‌های کامنت برای وارد کردن توضیح در کد منبع HTML به کار برده می‌شوند. می‌توانید با استفاده […]

The post آموزش Html؛ آموزش کار با کامنت در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش کار با کامنت در HTML

آموزش Html؛ آموزش کار با کامنت در HTML

در جلسه ششم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با کامنت در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید…

آموزش کار با کامنت در HTML

تگ‌های کامنت برای وارد کردن توضیح در کد منبع HTML به کار برده می‌شوند. می‌توانید با استفاده از سینتکس زیر به منبع HTML خود کامنت یا توضیح اضافه کنید

<!-- Write your comments here -->

توجه داشته باشید که در تگ آغازین یک علامت تعجب (!) وجود دارد اما در تگ پایانی این‌طور نیست. کامنت‌ها توسط مرورگر نمایش داده نمی‌شوند اما می‌توانند به مستندسازی کد منبع HTML کمک کنند.

با استفاده از کامنت‌ در HTML می‌توانید یادآوری‌ها و پیغام‌هایی را در کد منبع خود قرار دهید :

 <!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->
پیشنمایش

 

کامنت‌ها همچنین ابزاری فوق‌العاده برای رفع باگ‌های HTML است چون می‌توانید هر بار چند خط از کدهای HTML را برای کامنت گذاشتن انتخاب کرده و به دنبال خطاهای موجود در آن بخش بگردید :

<!-- Do not display this at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
پیشنمایش

 

کامنت های شرطی در Html

گاهی ممکن است جایی لازم باشد تا توضیح دهید اگر شرایط ایجاد شود چه اتفاقی در HTML رخ دهد :

!--[if IE 9]>
    .... some HTML here ....
<![endif]-->

کامنت‌های شرطی برخی از تگ‌های HTML را برای اختصاصا اجرا شدن در اینترنت اکسپلورر تعریف می‌کنند.

 

مثالی درگیر از کامنت در Html

<!DOCTYPE html>
<html>
<body>

<!-- <p>This is a paragraph.</p> -->

</body>
</html>
پیشنمایش

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش Html؛ آموزش کار با کامنت در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/html-comment-tags.html/feed 0 آموزش Html؛ آموزش کار با عنصر نقل قول در HTML http://www.sourcebaran.com/html_quotation_element.html http://www.sourcebaran.com/html_quotation_element.html#respond Tue, 25 Dec 2018 17:14:51 +0000 https://www.sourcebaran.com/?p=44318 در جلسه پنجم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با عنصر نقل قول در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید…. آموزش کار با عنصر نقل قول در HTML همان‌طور که در وب‌سایت‌ها و سندهای آنلاین مشاهده کرده‌اید گاهی لازم است گفته‌ای […]

The post آموزش Html؛ آموزش کار با عنصر نقل قول در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش کار با عنصر نقل قول در HTML

آموزش Html؛ آموزش کار با عنصر نقل قول در HTML

در جلسه پنجم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با عنصر نقل قول در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید….

آموزش کار با عنصر نقل قول در HTML

همان‌طور که در وب‌سایت‌ها و سندهای آنلاین مشاهده کرده‌اید گاهی لازم است گفته‌ای از شخصی در جایی از متن آورده شود. برای مشخص کردن و تفکیک آن متن از بقیه قسمت‌ها باید از عناصر مشخصی در HTML استفاده کرد که در ادامه با‌ آن‌ها آشنا خواهیم شد.

 

عنصر <q> مختص نقل قول‌ کوتاه

عنصر <q> در HTML یک نقل قول کوتاه (short quotation) را تعریف می‌کند. مرورگرها معمولا پیرامون این عنصر علامت نقل قول قرار می‌دهند. در زیر یک نمونه از آن را مشاهده می‌کنید.

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
پیش نمایش

 

عنصر <blockquote> مختص نقل قول ها

عنصر <blockquote> بخشی را تعریف می‌کند که از منبع دیگری نقل شده است (Quotation). مرورگرها معمولا آن را به صورت فرو رفته نشان می‌دهند :

 <p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
پیش نمایش

 

عنصر <abbr> مختص اختصارات

عنصر <abbr> مشخص کننده یک اختصار (Abbreviation) یا مخفف (Acronym) است. مشخص کردن اختصار می‌تواند اطلاعات مفیدی به مرورگرها، سیستم‌های ترجمه و موتورهای جستجو بدهد.

 <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
پیش نمایش

 

عنصر <address> در HTML مختص اطلاعات تماس

عنصر <address> اطلاعات تماس (نویسنده/ صاحب اثر) یک سند یا مقاله را مشخص می‌کند. این عنصر معمولا به صورت ایتالیک نمایش داده می‌شود. بیشتر مرورگرها قبل و بعد از این عنصر از شکست خطی استفاده می‌کنند.

 <address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
پیش نمایش

 

عنصر <cite> در HTML

برای عنوان شغلی عنصر <cite> عنوان یک شغل (work title) را تعریف می‌کند. مرورگرها معمولا این عنصر را به شکل ایتالیک نمایش می‌دهند.

 <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
پیش نمایش

 

عنصر <bdo> در HTML

برای لغو دو طرفه عنصر <bdo> نشان‌دهنده لغو دو طرفه (bi-directional override) است. این عنصر برای نادیده گرفتن مسیر فعلی متن مورد استفاده قرار می‌گیرد.

 <bdo dir="rtl">This text will be written from right to left</bdo>
پیش نمایش

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش Html؛ آموزش کار با عنصر نقل قول در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/html_quotation_element.html/feed 0 آموزش Html؛ آموزش کار با قالب بندی متن در Html http://www.sourcebaran.com/html_formatting.html http://www.sourcebaran.com/html_formatting.html#respond Tue, 27 Nov 2018 21:00:29 +0000 https://www.sourcebaran.com/?p=43520 در این مطلب در جلسه چهارم با آموزش Html؛ آموزش کار با قالب بندی متن در Html در خدمت شما هستیم. لطفا با ما همراه باشید… آموزش قالب بندی متن در Html چند مورد ساده را در زیر مشاهده می نمایید <!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> <p><i>This text is italic</i></p> <p>This is<sub> […]

The post آموزش Html؛ آموزش کار با قالب بندی متن در Html appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش کار با قالب بندی متن در Html

آموزش Html؛ آموزش کار با قالب بندی متن در Html

در این مطلب در جلسه چهارم با آموزش Html؛ آموزش کار با قالب بندی متن در Html در خدمت شما هستیم. لطفا با ما همراه باشید…

آموزش قالب بندی متن در Html

چند مورد ساده را در زیر مشاهده می نمایید

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

خروجی به شکل زیر هست

This text is bold

This text is italic

This is subscript and superscript

در مطلب آموزشی قبل در مورد خصوصیت پاراگراف و استایل در HTML توضیح کامل دادیم. زبان HTML همچنین عناصر خاصی برای تعریف متن با معنای مشخص دارد. این زبان از عناصری مانند <b> و <i> برای قالب بندی خروجی مانند متن bold (برجسته) یا ایتالیک استفاده می‌کند. عناصر قالب بندی برای نمایش انواع خاصی از متن طراحی شده‌اند. در ادامه چند نوع از آن‌ها را مشاهده می‌کنید:

  • <b>: برجسته کردن متن

  • <strong>: متن مهم

  • <i>: متن ایتالیک

  • <em>: تاکید بر متن

  • <mark>: متن علامت گذاری شده

  • <small>: متن کوچک

  • <del>: متن پاک شده

  • <ins>: متن وارد شده

  • <sub>: متن زیر

  • <sup>: متن رو

 

عنصر <b> و عنصر <strong> در HTML

عنصر <b> متن را بدون هیچ‌گونه اهمیت یا تاکید بیشتر، پررنگ و برجسته می‌کند

 <b>This text is bold</b>
پیش نمایش

 

عنصر <strong> به متن قدرت داده و اهمیت معنایی به آن می‌بخشد

 <strong>This text is strong</strong>
پیش نمایش

 

عناصر <i> و <em> در HTML

عنصر <i> در HTML متن را بدون اختصاص هرگونه اهمیت بیشتر به حالت ایتالیک تبدیل می‌کند:

 <i>This text is italic</i>
پیش نمایش

 

عنصر <em> در HTML بدون اختصاص اهمیت معنایی، متن را به صورت تاکیدی تبدیل می‌کند

 <em>This text is emphasized</em>
پیش نمایش

به یاد داشته باشید که مرورگرها متن <strong> را به صورت <b> و متن <em> را به صورت <i> نمایش می‌دهند. البته در معنای این تگ‌ها تفاوت‌هایی وجود دارد. تگ‌های <b> و <i> متن برجسته و ایتالیک را تعریف می‌کنند اما تگ‌ها <strong> و <em> به معنای مهم بودن متن است.

 

عنصر <small> در HTML

عنصر <small> در HTML کوچک‌تر بودن متن را در یک سند HTML تعریف می‌کند

 <h2>HTML <small>Small</small> Formatting</h2>
پیش نمایش

 

عنصر <mark> در HTML

عنصر <mark> در HTML متن نشانه‌گذاری شده و هایلایت شده را تعریف می‌کند

<h2>HTML <mark>Marked</mark> Formatting</h2>
پیش نمایش

 

عنصر <del> در HTML

عنصر <del> در HTML متن پاک شده یا حذف شده را مشخص می‌کند

 <p>My favorite color is <del>blue</del> red.</p>
پیش نمایش

 

عنصر <ins> در HTM

عنصر <ins> در HTML متن وارد شده یا افزوده شده را مشخص می‌کند

 <p>My favorite <ins>color</ins> is red.</p>

پیش نمایش

عنصر <sub> در HTML

عنصر <sub> در HTML متن در زیر خط قرار گرفته را مشخص می‌کند

 <p>This is <sub>subscripted</sub> text.</p>
پیش نمایش

 

عنصر <sup> در HTML

عنصر <sup> در HTML متن بالاتر از خط قرار گرفته را مشخص می‌کند

 <p>This is <sup>superscripted</sup> text.</p>
پیش نمایش

 

در انتهای این جلسه حود را بیازمایید

تمرین1 تمرین2 تمرین3 تمرین4 تمرین5

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش Html؛ آموزش کار با قالب بندی متن در Html appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/html_formatting.html/feed 0 آموزش Html؛ آموزش کار با پاراگراف و استایل در Html http://www.sourcebaran.com/html-paragraphshtml-styles.html http://www.sourcebaran.com/html-paragraphshtml-styles.html#respond Sat, 10 Nov 2018 14:41:07 +0000 https://www.sourcebaran.com/?p=42609 بدون توضیح اضافه آموزش کار با پاراگراف و استایل در Html را شروع خواهیم کرد. لطفا در ادامه مطلب با ما همراه باشید… آموزش کار با پاراگراف(Paragraphs) در Html عنصر <p> پاراگراف را در یک سند HTML تعریف می‌کند <p>This is a paragraph.</p> <p>This is another paragraph.</p> مرورگرها به صورت خودکار به قبل و بعد از […]

The post آموزش Html؛ آموزش کار با پاراگراف و استایل در Html appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش کار با پاراگراف و استایل در Html

آموزش Html؛ آموزش کار با پاراگراف و استایل در Html

بدون توضیح اضافه آموزش کار با پاراگراف و استایل در Html را شروع خواهیم کرد. لطفا در ادامه مطلب با ما همراه باشید…

آموزش کار با پاراگراف(Paragraphs) در Html

عنصر <p> پاراگراف را در یک سند HTML تعریف می‌کند

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

مرورگرها به صورت خودکار به قبل و بعد از یک پاراگراف کمی فضای سفید اضافه می‌کنند.

پیش نمایش

 

نحوه نمایش HTML

شما نمی توانید از چگونگی نمایش کدهای HTML خود توسط مرورگرها مطمئن باشید. هنگامی که صفحه نمایش بازدید کننده بزرگ یا کوچک باشد و یا پنجره مرورگر در سایز های مختلفی تنظیم شود، شکل نمایش صفحات وب شما تغییر خواهد کرد. با کم و زیاد کردن فضای خالی بین حروف (Space) نمی توانید فاصله بین حروف را در متنی که در کدهای HTML خود می نویسید کم و زیاد کنید. مرورگر تمام فضاهای اضافه ایجاد شده در کد HTML شما را حذف کرده و تنها به یک فضای خالی بین کلمات تبدیل می کند. به هر تعدادی از فضای خالی یا خط خالی بین حروف استفاده کنید، نتیجه یک فضای خالی بین دو کلمه خواهد بود.

 <p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>
پیش نمایش

 

تگ پایانی را فراموش نکنید

بیشتر مرورگرها حتی اگر در هنگام نوشتن کدها تگ پایانی را فراموش کنید باز هم HTML را به درستی نمایش می‌دهند. ولی هرگز تگ پایانی را فراموش نکنید.

<p>This is a paragraph.
<p>This is another paragraph.

مثالی که در بالا آورده شد در بیشتر مرورگرها به درستی کار می‌کند اما بر این اصل تکیه نکنید. فراموش کردن تگ پایانی می‌تواند نتایج پیش‌بینی نشده و یا خطاهایی را به دنبال داشته باشد.

پیش نمایش

 

شکست خط در HTML

عنصر <br> در HTML یک شکست خط را تعریف می‌کند. اگر می‌خواهید بدون ایجاد یک پاراگراف جدید در خط خود شکست ایجاد کرده و به خط بعد بروید از عنصر <br> استفاده کنید:

<p>This is<br>a paragraph<br>with line breaks.</p>

تگ <br> یک تگ خالی محسوب می‌شود یعنی نیازی به تگ پایانی ندارد.

پیش نمایش

 

نمایش شعر در Html

نمایش شعرگونه در سند HTML محتوا را در خطوط تفکیک شده و به صورت جداجدا نمایش می‌دهد که در زیر یک نمونه از آن را مشاهده می‌کنید

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>
پیش نمایش

 

عنصر <pre> در HTML

عنصر <pre> در HTML متن‌های از پیش قالب‌بندی شده را تعریف می‌کند. متنی که داخل عنصر <pre> قرار می‌گیرد با فونتی با عرض ثابت (معمولا Courier) نمایش داده شده و فضا و شکست خط را حفظ می‌کند. در زیر یک نمونه از این کد را مشاهده می‌کنید

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>
پیش نمایش

 

آموزش کار با استایل(Style) در Html

مشخص کردن استایل یک عنصر HTML می‌تواند از طریق خصوصیت style انجام شود که دارای اصول چینش زیر است

<tagname style="property:value;">

Property یک خصوصیت از CSS و value یک مقدار CSS است. ب. CSS به کدهای شما استایل میده و از نظر گرافیکی خیلی برانامه شما رو زیبا می کنه. فیلم های آموزشی بسیاری برای یادگیری CSS روی سایت موجود هست که میتونید استفاده کنید.

 

رنگ پشت زمینه در HTML

خصوصیت background-color در واقع رنگ پشت زمینه را برای یک عنصر HTML تعریف می‌کند. مثال زیر رنگ پشت زمینه صفحه را به آبی تغییر می‌دهد

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
پیش نمایش

 

رنگ متن در HTML

خصوصیت color رنگ متن را برای عنصر HTML تعریف می‌کند

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
پیش نمایش

 

کار با فونت در HTML

خصوصیت font-family در واقع فونتی که باید در یک عنصر HTML به کار رود را تعریف می‌کند

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
پیش نمایش

 

اندازه متن در HTML

خصوصیت font-size اندازه متن را برای هر یک از عنصرهای HTML تعریف می‌کند:

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
پیش نمایش

 

هم ترازی متن در HTML

خصوصیت text-align هم ترازی متن افقی را برای یک عنصر HTML تعریف می‌کند که در زیر نمونه کد آن را مشاهده می‌کنید

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
پیش نمایش

امیدواریم این مطلب مورد توجه دوستان قرار گرفته باشد…

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

 

پیشنهاد ویژه 1 : دانلود کاملترین آموزش تصویری HTML به زبان فارسی

پیشنهاد ویژه 2 : دانلود تمامی مجموعه های آموزشی HTML سورس باران

پیشنهاد ویژه 3 : کتاب آموزش HTML5 و CSS3 در قالب پروژه

 

The post آموزش Html؛ آموزش کار با پاراگراف و استایل در Html appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/html-paragraphshtml-styles.html/feed 0 آموزش HTML؛ آموزش اصول اولیه و عناصر HTML http://www.sourcebaran.com/html.html http://www.sourcebaran.com/html.html#respond Fri, 24 Aug 2018 07:56:16 +0000 https://www.sourcebaran.com/?p=40775 باسلام و عرض ادب. در خدمت دوستان عزیز هستیم با آموزش HTML؛ آموزش اصول اولیه و عناصر HTML از وب سایت آموزش برنامه نویسی سورس باران. این دوره آموزش html از مقدماتی تا متوسطه است. HTML پایه طراحی سایت و تمام فعالیت‌های وابسته به آن است. بنابراین جهت طراح وب سایت شدن، حتما حتما باید از […]

The post آموزش HTML؛ آموزش اصول اولیه و عناصر HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش HTML؛ آموزش اصول اولیه و عناصر HTML

آموزش HTML؛ آموزش اصول اولیه و عناصر HTML

باسلام و عرض ادب. در خدمت دوستان عزیز هستیم با آموزش HTML؛ آموزش اصول اولیه و عناصر HTML از وب سایت آموزش برنامه نویسی سورس باران. این دوره آموزش html از مقدماتی تا متوسطه است. HTML پایه طراحی سایت و تمام فعالیت‌های وابسته به آن است. بنابراین جهت طراح وب سایت شدن، حتما حتما باید از آموزش HTML آغاز کنید.لطفا با ما همراه باشید…

در این دوره آموزش HTML از وب سایت آموزشی سورس باران، ده‌ها نمونه کد HTML گنجانده می‌شود تا با ساختار آن‌ها آشنا شده و در صورت لزوم از آن‌ها برای انجام پروژه‌های طراحی سایت خود استفاده کنید.

مفاهیم آموزش HTML، مقدمه ای بر زبان نشانه گذاری

همان‌طور که پیش از این هم در مقاله معرفی HTML اشاره کردیم، «اچ.تی.ام.ال» یک زبان نشانه گذاری استاندارد برای ایجاد صفحات وب است. ای زبان با استفاده از نشانه‌ها، ساختار صفحات را تعیین می‌کند. عناصر HTML بلوک‌های سازنده صفحات هستند و با استفاده از تگ‌ها مشخص می‌شوند. هر تگ HTML بخش‌هایی از محتوا مثل عنوان، پاراگراف، جدول و غیره را مشخص می‌کند. مرورگرها این تگ‌ها را نمایش نمی‌دهند بلکه از آن‌ها برای تفسیر محتوای صفحه استفاده می‌کنند.

 

یک نمونه سند ساده HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

اگر به این سند (Document) توجه کنید می‌بینید که از چند تگ با علامت <> تشکیل شده است که هر کدام بخش‌هایی از سند HTML را برای مرورگرها توضیح می‌دهند. حالا به توضیح هر قسمت از این سند می پردازیم تا ببینیم هر تکه کد چه معنایی در بر دارد و چه دستوری به مرورگر برای نمایش محتوا می‌دهد:

– عبارت <DOCTYPE  html!> مشخص می‌کند که این سند یک سند HTML5 است.

– عنصر <html> عنصر ریشه یک صفحه HTML است.

– عنصر <head> حاوی اطلاعات متا در مورد سند است.

– عنصر <title> عنوان سند را مشخص می‌کند.

– عنصر <body> حاوی محتوای قابل دیدن صفحه است.

– عنصر <h1> یک عنوان درشت را تعریف می‌کند.

– عنصر <p1> پاراگراف را تعیین می‌کند.

 

نجوه بکار گیری تگ ها در HTML

تگ‌ها در واقع نام عناصر هستند که درون پرانتز‌های شکسته قرار می‌گیرند. تگ‌های HTML معمولا به حالت جفت می‌آیند مثل <p> و <p/> . تگ اول در جفت را تگ آغازین و تگ دوم را تگ پایانی می‌نامند. تگ پایانی درست به شکل تگ آغازین نوشته شده اما یک اسلش ( / ) هم قبل نام تگ قرار داده می‌شود.

مرورگرهای وب

هدف یک مرورگر وب (مثل گوگل کروم، اینترنت اکسپلورر، فایرفاکس یا سافاری) خواندن اسناد HTML و نمایش آن‌ها است. مرورگر تگ‌های HTML را نمایش نمی‌دهد اما از آن‌ها برای تعیین نحوه نمایش سند استفاده می‌کند.

 

ساختار صفحات HTML

در زیر نمایی از ساختار یک صفحه HTML آمده است

نکته: فقط محتوای درون بخش <body> در مرورگر نمایش داده می‌شود.

عبارت <!DOCTYPE> در  HTML

این عبارت نشان‌دهنده نوع سند است و به مرورگرها کمک می‌کند تا صفحات سایت را به درستی نمایش دهند. این عبارت باید فقط یک‌ بار و در بالای صفحه (قبل از هرگونه تگ HTML) قرار بگیرد. این عبارت برای HTML به صورت <!DOCTYPE html> نوشته می‌شود.

نوشتن HTML با استفاده از Notepad یا TextEdit

می‌توان صفحات وب را با استفاده از ویرایشگرهای حرفه‌ای HTML ایجاد کرده و تغییر داد. البته ما در دوره آموزش HTML در سورس باران، توصیه می‌کنیم برای یادگیری HTML از یک ویراشگر متنی ساده مانند نوت پد (PC) یا تکست ادیت (Mac) استفاده کنید. به نظر می‌رسد استفاده از یک ویرایشگر ساده روش خوبی برای یادگیری HTML باشد. با دنبال کردن چهار مرحله زیر می‌توانید اولین صفحه وب خود را با نوت پد یا تکست ادیت ایجاد کنید. البته اگر دوست داشته باشید از امکانات بیشتری بهره ببرید، می‌توانید روی سیستم عامل ویندوز از ++Notepad هم استفاده کنید.

استفاده از نوت پد برای ایجاد سند HTML (ویندوز)

در ویندوز ۸ و نسخه‌های بعدی ابتدا منوی استارت را باز کرده و عبارت Notepad را تایپ کنید. در ویندوز ۷ و نسخه‌های قبلی، منوی استارت را باز کرده، وارد قسمت Programs شده و Accessories را انتخاب کرده و سپس Notepad را پیدا و باز کنید.

استفاده از تکست ادیت برای HTML در Mac

قسمت Finder را باز کرده، از منوی اپلیکیشن گزینه TextEdit را انتخاب کنید. همچنین باید برخی از preferenceها را تغییر دهید تا فایل‌ها به درستی ذخیره شوند. در قسمت Preference، گزینه Format و سپس Plain Text را انتخاب کنید. سپس باکسی «Ignore rich text commands in HTML files» که در زیر گزینه «Open and Save» قرار دارد را تیک بزنید. سپس یک سند جدید باز کرده تا کدهای خود را در آن قرار دهید.

نوشتن کدهای HTML

داخل نوت پد کدهای HTML را نوشته یا کپی کنید.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

ذخیره کردن صفحه HTML

فایل را روی کامپیوتر ذخیره کنید. گزینه File و سپس Save as را در منوی نوت پد انتخاب کنید. فایل را به نام «index.htm» نام‌گذاری کرده و حالت encoding را روی UTF-8 (که حالت encoding مطلوب برای فایل‌های HTML است) تنظیم کنید.

پسوند فایل می‌تواند .htm یا .html باشد که هیچ فرقی هم با هم ندارند و به سلیقه شما بستگی دارد.

مشاهده صفحه HTML در مرورگر

فایل HTML ذخیره شده را روی مرورگر مورد نظر خود باز کنید (روی فایل دابل کلیک کنید). نتایج به شکل زیر خواهد بود:

در قسمت‌های بعدی آموزش مقدماتی تا متوسطه HTML  آموزش های پیشرفته‌ تری را جهت توسعه یک فایل HTML برای طراحی وب سایت قرار می دهیم.

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

 

پیشنهاد ویژه 1 : دانلود کاملترین آموزش تصویری HTML به زبان فارسی

پیشنهاد ویژه 2 : دانلود تمامی مجموعه های آموزشی HTML سورس باران

پیشنهاد ویژه 3 : کتاب آموزش HTML5 و CSS3 در قالب پروژه

The post آموزش HTML؛ آموزش اصول اولیه و عناصر HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/html.html/feed 0 دانلود کتاب آموزشی اچ تی ام ال 5 به زبان فارسی http://www.sourcebaran.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%da%a9%d8%aa%d8%a7%d8%a8-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d8%a7%da%86-%d8%aa%db%8c-%d8%a7%d9%85-%d8%a7%d9%84-5-%d8%a8%d9%87-%d8%b2%d8%a8%d8%a7%d9%86-%d9%81.html http://www.sourcebaran.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%da%a9%d8%aa%d8%a7%d8%a8-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d8%a7%da%86-%d8%aa%db%8c-%d8%a7%d9%85-%d8%a7%d9%84-5-%d8%a8%d9%87-%d8%b2%d8%a8%d8%a7%d9%86-%d9%81.html#comments Sat, 21 Apr 2012 19:52:35 +0000 https://sourcebaran.com/?p=2784 با سلام.در این مطلب کتاب آموزشی اچ تی ام ال 5 رو برای تمامی بازدیدکنندگان محترم قرار داده ایم.در این کتاب آموزشی به صورت خلاصه به معرفی تگ ها یا تگ های جدید و همین طور تگ های بهبود یافته در HTML5 می پردازد.این کتاب آموزشی که بصورت ترجمه از چند منبع می باشد و […]

The post دانلود کتاب آموزشی اچ تی ام ال 5 به زبان فارسی appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> کتاب آموزشی اچ تی ام ال 5

با سلام.در این مطلب کتاب آموزشی اچ تی ام ال 5 رو برای تمامی بازدیدکنندگان محترم قرار داده ایم.در این کتاب آموزشی به صورت خلاصه به معرفی تگ ها یا تگ های جدید و همین طور تگ های بهبود یافته در HTML5 می پردازد.این کتاب آموزشی که بصورت ترجمه از چند منبع می باشد و به چند عناوین مهم اشاره نموده که دوستان عزیز می توانند با مراجعه به ادامه مطلب این عناوین را مشاهده فرمایند

جهت دانلود کتاب آموزشی اچ تی ام ال 5 به زبان فارسی به ادامه مطلب مراجعه فرمایید

HTML5 چیست؟

ساختمان تگ HTML5

HTML5 شامل چه مواردی است؟

تگ های جدید معرفی شده در HTML5

استفاده از HTML5 برای ساختن آسان تر کد HTML

کار کردن با فرم HTML5

چه تغییری در فرم HTML 2.0  روی داده است؟

کنترل داده بوسیله HTML5

نمایش داده در HTML5

ذخیره داده و استفاده در ذخیره سازی های داده وب

چگونگی ذخیره داده ها بصورت لوکال

ویژگی های جدید HTML5

چه چیزی د ر HTML5 پشتیبانی می شود؟

چگونه با کمک تگ HTML5 یک سایت جدید بسازیم؟

معرفی تگ های کاربردی رسانه ای

The post دانلود کتاب آموزشی اچ تی ام ال 5 به زبان فارسی appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%da%a9%d8%aa%d8%a7%d8%a8-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d8%a7%da%86-%d8%aa%db%8c-%d8%a7%d9%85-%d8%a7%d9%84-5-%d8%a8%d9%87-%d8%b2%d8%a8%d8%a7%d9%86-%d9%81.html/feed 9 دانلود کاملترین و مفیدترین مجموعه آموزشی c#.net http://www.sourcebaran.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%da%a9%d8%a7%d9%85%d9%84%d8%aa%d8%b1%db%8c%d9%86-%d9%85%d8%ac%d9%85%d9%88%d8%b9%d9%87-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-c-net.html http://www.sourcebaran.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%da%a9%d8%a7%d9%85%d9%84%d8%aa%d8%b1%db%8c%d9%86-%d9%85%d8%ac%d9%85%d9%88%d8%b9%d9%87-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-c-net.html#comments Tue, 20 Sep 2011 14:04:09 +0000 https://sourcebaran.com/?p=436 اینبار مجموعه ی بسیار مفید و ارزشمند از مقاله های  آموزش سی شارپ دات نت رو که از سایت احسان ای وی آر دانلود کردم رو واسه شما کاربران عزیز سورس باران گذاشتم این مجموعه آموزشی شامل 45 فایل پی دی اف و 26 فایل ورد است همین جا از سایت احسان ای وی آر […]

The post دانلود کاملترین و مفیدترین مجموعه آموزشی c#.net appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> کاملترین مجموعه آموزشی c#.net

اینبار مجموعه ی بسیار مفید و ارزشمند از مقاله های  آموزش سی شارپ دات نت رو که از سایت احسان ای وی آر دانلود کردم رو واسه شما کاربران عزیز سورس باران گذاشتم این مجموعه آموزشی شامل 45 فایل پی دی اف و 26 فایل ورد است همین جا از سایت احسان ای وی آر نهایت تشکر رو می کنم که چنین مجموعه پرارزشی رو برای دانلود گذاشته بود به جرات می توان گفت که این مجموعه یکی از کاملترین مجموعه های آموزشی سی شارپ است عنوان تعدادی از آموزش ها و فایل دانلود در ادامه مطلب موجود می باشد.

 جهت دانلود کاملترین و مفیدترین مجموعه آموزشی c#.net به ادامه مطلب مراجعه فرمایید

کاملترین و مفیدترین مجموعه آموزشی c#.net :

  • آموزش ADO.NET 2.0
  • آموزش مبحث Anonymous Method  در c# 3.0
  • آموزش کامل ADO.NET 3.0  در 21 روز
  • آموزش کار با BackGroundWorker  در C#
  • آموزش ساخت Setup برای برنامه های  Visual Studio .Net 2005
  • تولبار ها و منو ها در ویژوال سی شارپ
  • نگفته های سی شارپ دات نت
  • ویژگی های C#3.0
  • آموزش سی شارپ نوشته سید مسعود طباطبایی
  • نکته های برنامه نویسی در سی شارپ
  • آموزش Delegate
  • آشنایی با معماری NET Framework
  • مقایسه دو شی در Generics
  • آموزش ساخت فرم شیشه ای در سی شارپ
  • آموزش مبحث Lambda Expression در سی شارپ
  • آموزش کامل سی شارپ آقای هاشمیان
  • مفاهیم های اولیه کنترل های دات نت فریمورک
  • آموزش Model View Controller
  • استفاده از کلاس های موجود در System.Threading
  • آموزش ساخت چند فرم با خصوصیت های یکسان و مساوی
  • آموزش کامل سی شارپ دات نت 2008 در یک شبانه روز
  • آموزش گذاشتن فایل در SWF
  • آموزش Socket Programming
  • آموزش نحوه ی گرفتنه Backup از Database و Restore
  • آموزش کامل SQL
  • آموزش کار کردن با Setting  برنامه سی شارپ
  • برنامه نویسی تیمی در Visual Studio Team System 2005
  • کار با توابع API در برنامه C#
  • و تعداد خیلی محدود از آموزش نرم افزار

The post دانلود کاملترین و مفیدترین مجموعه آموزشی c#.net appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%da%a9%d8%a7%d9%85%d9%84%d8%aa%d8%b1%db%8c%d9%86-%d9%85%d8%ac%d9%85%d9%88%d8%b9%d9%87-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-c-net.html/feed 10