وبسایت آموزشی وب تی ام ال – webtml

ویژگی در HTML – جلسه پنجم

میثم صحراگرد — Tue, 20 Oct 2020 14:15:41 +0000

ویژگی در HTML

همه المان های HTML می توانند ویژگی هایی داشته باشند.
ویژگی ها اطلاعات اضافی را برای المان های HTML فراهم می کنند.
ویژگی ها همیشه در تگ آغازین تعریف می شوند.
ویژگی ها معمولا به صورت یک جفت نام-مقدار (name/value) تعریف می شوند. مثل: name = "value"

ویژگی href در HTML

لینک های HTML توسط تگ تعریف می شوند. آدرس لینک در ویژگی href تعریف می شود.

Visit W3Schools

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

ویژگی src در HTML

برای قرار دادن عکس در صفحات HTML از تگ استفاده می شود. ویژگی src مسیر عکسی که میخواهیم نمایش دهیم را مشخص می کند.

دو روش برای اختصاص دادن URL به ویژگی src وجود دارد:

URL مطلق: لینک دادن به یک عکس خارجی که روی سایتی دیگر بارگزاری شده است. مثال:

src="https://webtml.ir/images/img_girl.jpg"

نکته: عکس های خارجی ممکن است تحت قوانین کپی رایت باشند. اگر شما اجازه استفاده از آن ها را نداشته باشید؛ ممکن است قوانین کپی رایت را نقض کنید (البته در ایران قوانین کپی رایت اجرا نمی شوند). همچنین شما بر روی تصاویر خارجی کنترل ندارید و ممکن است تغییر کنند یا حذف شوند.

URL نسبی: لینک دادن به عکس هایی که بر روی وب سایت شما میزبانی می شوند. در این صورت URL شامل آدرس دامنه نمی باشد. اگر URL بدون علامت اسلش ( / ) شروع شود نسبت به صفحه فعلی خواهد بود. مثال: src="img_girl.jpg". اگر URL با یک اسلش ( / ) شروع شود نسبت به دامنه خواهد بود. مثال: src="/images/img_girl.jpg".

نکته: بهتر است همیشه از URL های نسبی استفاده کنید. در این صورت اگر دامنه عوض شود تصاویر درست نمایش داده می شوند.

ویژگی های عرض (width) و ارتفاع (height) در HTML

تگ می تواند دارای ویژگی های width و height باشد. که عرض و ارتفاع تصویر را به پیکسل مشخص می کنند.

ویژگی alt در HTML

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

نتیجه:

در بخش آموزش تصاویر اطلاعات بیشتری کسب خواهید کرد.

ویژگی style در HTML

از ویژگی style برای فرمت دهی المان از قبیل: رنگ، فونت، اندازه و … استفاده می شود.

This is a red paragraph.

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

ویژگی lang در HTML

برای تعریف زبان صفحات وب باید ویژگی lang را در تگ قرار داد. از این ویژگی برای کمک به موتورهای جستجو و مرورگرها استفاده می شود.

مثال زیر انگلیسی را به عنوان زبان تعریف می کند:

...

می توان کد کشور را نیز به کد زبان اضافه کرد. به طوری که دو حرف اول زبان صفحه وب را مشخص می کنند و دو حرف آخر کشور را مشخص می کنند.

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

...

می توانید لیست کامل کد زبان ها را از لینک مرجع کدهای زبان HTML مشاهده کنید.

ویژگی title در HTML

ویژگی title اطلاعات اضافی را برای المان تعریف می کند.

مقدار ویژگی tilte هنگامی که موس بر روی المان قرار گیرد به صورت tooltip نمایش داده می شود.

This is a paragraph.

پیشنهاد می کنیم ویژگی ها را همیشه با حروف کوچک بنویسد

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

ویژگی title و همه ویژگی های دیگر را می توان با حروف کوچک یا حروف بزرگ نوشت. مثل title یا TITLE.

اگرچه W3C نوشتن ویژگی ها با حروف کوچک را پیشنهاد می کند. در اسناد سخت گیرانه تر مثل XHTML نوشتن ویژگی ها با حروف کوچک را مطالبه می کند.

در webtml ما پیشنهاد می کنیم ویژگی ها را همیشه با حروف کوچک بنویسید.

پیشنهاد می کنیم مقدار ویژگی ها را همیشه درون کوتیشن (“”) بنویسد

در استاندارد HTML نوشتن مقدار ویژگی ها درون کوتیشن اجباری نیست.

اگرچه W3C نوشتن کوتیشن را پیشنهاد می کند و در اسناد سخت گیرانه تر مثل XHTML نوشتن کوتیشن را مطالبه می کند.

خوب:

Visit our HTML tutorial

بد:

Visit our HTML tutorial

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

در webtml ما همیشه مقادیر ویژگی ها را درون کوتیشن می نویسیم.

تک کوتیشن یا جفت کوتیشن؟

در HTML بیشتر از جفت کوتیشن استفاده می شود، اما تک کوتیشن را نیز می توان به کار برد.

در بعضی مواقع، وقتی که خود مقدار ویژگی، شامل جفت کوتیشن باشد، لازم است که از تک کوتیشن استفاده کنیم:

یا برعکس:

خلاصه ی فصل

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

ویژگی src از تگ مسیر عکسی که قرار است نمایش داده شود را مشخص می کند.

ویژگی های width, height اطلاعات مربوط به اندازه را برای تگ فراهم می کنند.

ویژگی alt از تگ یک متن جایگزین برای تصویر فراهم می گند.

ویژگی style برای فرمت دهی به یک المان استفاده می شود. مثل: رنگ، فونت، سایز و …

ویژگی lang از تگ زبان صفحه وب را مشخص می کند.

ویژگی title اطلاعات اضافی در مورد یک المان را تعریف می کند.

با کلیک بر روی این لینک می توانید لیست کاملی از ویژگی های المان های HTML را ببینید.

نوشته ویژگی در HTML – جلسه پنجم اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

ساخت منو در css

نجمه زورمند — Thu, 20 Aug 2020 14:56:27 +0000

ساخت منو در css مبحث مقاله امروز ما می باشد که در این مقاله و مقاله های بعدی یاد می گیریم که چگونه به منوهایی افقی و عمودی که می سازیم، استایل دلخواهمان را بدهیم.

Home
News
Contact
About

استفاده راحت و آسان از نوار منو (navigation bar) برای هر وبسایتی ضروری است. با استفاده از CSS می توانید منوهای خسته کننده ای که با استفاده از HTML ساخته اید را جذاب کنید.

ساخت منو در css = لیستی از لینک ها

یک نوار منو به عنوان پایه و اصل، نیاز به HTML استاندارد دارد. در مثال زیر ما با استفاده از لیست استانداردی از HTML و با به کار بردن المان های


  Homehttp://html
  News
  Contact
  About

که به صورت زیر نمایش داده می شود:

Home
News
Contact
About

حال اگر بخواهیم بالت ها، خط زیرین و margin و padding را برداریم، به صورت زیر عمل می کنیم:

ul {
  list-style-type: none;
  text-decoration:none;
  margin: 0;
  padding: 0;
}

که نتیجه به صورت زیر می شود:

Home
News
Contact
About

که توضیح آن بدین صورت می باشد:

برای برداشتن خط زیرین text-decoration:none; می نویسیم.
برای برداشتن بالت ها list-style-type: none; می نویسیم.

کدی که در مثال بالا دیدیم، کد استانداردی است که در منوهای افقی و عمودی استفاده می شود. در درس های بعدی ساخت نوار منو در css را به تفکیک افقی و عمودی توضیح می دهیم.

لینک مقاله مرجع

نوشته ساخت منو در css اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

opacity در css

نجمه زورمند — Fri, 22 May 2020 13:17:38 +0000

خصوصیت opacity در css میزان شفافیت یک المان را مشخص می کند.

ویژگی opacity می تواند مقادیری بین ۰٫۰ تا ۱٫۰ داشته باشد که هر چه میزان آن کمتر باشد، شفافیت بیشتر است.

img {
  opacity: 0.5;
}

opacity 0.2

opacity 0.5

opacity 1
(default)

opacity در css و ویژگی hover

می توان شفافیت را با hover ترکیب کرد تاهنگام حرکت ماوس بر روی المان مورد نظر، میزان شفافیت تغییر کند:

حالت دیگری وجود دارد که در آن، تصویر در حالت عادی opacity=1 دارد و با حرکت ماوس بر روی آن، میزان شفافیت تغییر می کند:

img:hover {
  opacity: 0.5;
}

در حالتی که ویژگی opacity در css را به background المانی اختصاص دهیم، تمام المان های فرزند (child)، آن مقدار شفافیت را می گیرند.
به عنوان مثال در کد زیر، opacity را به المان div اختصاص داده ایم و المان های p که فرزند div هستند نیز تحت تاثیر قرار گرفته اند:

opacity 0.1
opacity 0.3
opacity 0.6
opacity 1 (default)

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

شفافیت و RGBA

اگر نخواهیم که شفافیت روی المان های فرزند تاثیر بگذارد، می توانیم از روش RGBA استفاده کنیم.

در مثال زیر می بینید که شفافیت فقط به پس زمینه اختصاص یافته و متن آن تغییری نکرده است:

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

همان طور که در مبحث رنگ در css توضیح دادیم rgba(red, green, blue, alpha) مقدار آلفا (a) در rgba بیانگر میزان شفافیت است که مقدار آن از صفر (کاملا شفاف) تا ۱ (کاملا مات) تغییر می کند.

نوشتن متن در Transparent Box

This is some text that is placed in the transparent box.


  
    This is some text that is placed in the transparent box.

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

لینک مقاله مرجع

نوشته opacity در css اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

شبه عناصر در css

نجمه زورمند — Tue, 12 May 2020 08:00:47 +0000

شبه عناصر در css برای استایل دهی به بخش هایی از یک المان استفاده می شوند.

به عنوان مثال:

برای استایل دهی به اولین کلمه یا اولین خط از یک المان
برای افزودن محتوا (content) به قبل یا بعد از محتوای یک المان

قاعده کلی استفاده از شبه عناصر در css به صورت زیر است:

selector::pseudo-element {
  property: value;
}

شبه عنصر first-line::

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

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.

نکته: شبه عنصر ::first-line فقط برای المان های block-level کاربرد دارد.

خصوصیات زیر را با استفاده از شبه عنصر ::first-line می توان به المان ها اختصاص داد:

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

علامت :: برای شبه عناصر و علامت : برای شبه کلاس ها استفاده می شود. این قاعده ای است که W3C تعیین کرده تا تمایزی بین شبه کلاس ها و شبه عناصر به وجود آید.
در CSS2 و CSS1 برای هر دوی شبه کلاس ها و شبه عناصر از : استفاده می شد.

شبه عنصر first-letter::

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

در مثال زیر کاربرد این شبه عنصر را مشاهده می کنید:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!

نکته: شبه عنصر ::first-letter فقط برای المان های block-level کاربرد دارد.

خصوصیات زیر را با استفاده از شبه عناصر ::first-letter می توان به المان ها اختصاص داد:

font
color
background
margin
padding
border
text-decoration
vertical-align (اگر مقدار float برابر none باشد)
text-transform
line-height
float
clear

شبه عناصر در css و کلاس های css

شبه عناصر را می توان با کلاس های css ترکیب کرد. به مثال زیر دقت کنید:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

مثال بالا اولین حرف از پاراگرافی که کلاس آن intro است را استایل دهی می کند.

استفاده از چند شبه عنصر

می توان چندین شبه عنصر را با هم ترکیب کرد و همزمان نتیجه را در یک المان مشاهده کرد:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!

در مثال بالا، اولین حرف از پاراگراف به رنگ قرمز و با اندازه xx-large درآمده و مابقی خط اول پاراگراف به رنگ آبی و با فونت small-caps تبدیل شده است.

شبه عنصر before::

از این شبه عنصر زمانی استفاده می شود که بخواهیم محتوایی (content) را قبل از المان خاصی اضافه کنیم.

در مثال زیر یک تصویر به ابتدای المان های h3 اضافه شده است:

h3::before {
  content: url(smiley.gif);
}

This is a heading

The ::before pseudo-element inserts content before the content of an element.

This is a heading

Note: IE8 supports the content property only if a !DOCTYPE is specified.

شبه عنصر after::

از این شبه عنصر زمانی استفاده می شود که بخواهیم محتوایی (content) را بعد از المان خاصی اضافه کنیم.

در مثال زیر یک تصویر به انتهای المان های h3 اضافه شده است:

h3::after {
  content: url(smiley.gif);
}

This is a heading

The ::before pseudo-element inserts content before the content of an element.

This is a heading

Note: IE8 supports the content property only if a !DOCTYPE is specified.

شبه عنصر selection::

در این نوع از شبه عنصر قادریم بخشی از متن که توسط کاربر انتخاب می شود، را قالب بندی کنیم.

در شبه عنصر ::selection می توانیم موارد زیر را تعیین کنیم:

color
background
cursor
outline

در مثال زیر هر بخش از متن که توسط کاربر انتخاب شود رنگش قرمز و پس زمینه اش به رنگ زرد درمی آید:

::selection {
  color: red;
  background: yellow;
}

Select some text on this page:

This is a paragraph.

This is some text in a div element.

Note: ::selection is not supported in Internet Explorer 8 and earlier versions.

Note: Firefox supports an alternative, the ::-moz-selection property.

لینک مقاله مرجع

نوشته شبه عناصر در css اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

شبه کلاس ها در css

نجمه زورمند — Mon, 27 Apr 2020 18:38:42 +0000

شبه کلاس ها در css مبحثی است که این مقاله به خود اختصاص داده است:

یک شبه کلاس (pseudo-class) برای تعریف حالت خاصی از المان (دادن style مد نظر به آن)، استفاده می شود.

در موارد زیر می توان از شبه کلاس ها استفاده کرد:

دادن استایل به یک المان، موقعی که ماوس کاربر روی آن قرار می گیرد.
دادن استایل های متفاوت به لینک های دیده شده (visited) و دیده نشده (unvisited)
دادن استایل به یک المان وقتی که روی آن زوم می شود.

Mouse Over Me

نحوه کاربرد

نحوه استفاده از شبه کلاس ها در css به صورت زیر است:

selector:pseudo-class {
  property:value;
}

حالت های نمایش لینک

لینک ها به روش های متفاوتی نمایش داده می شوند:

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

می توانید نتیجه آن را در لینک زیر مشاهده کنید:

webtml.ir

در تعاریف css، حتما باید a:hover بعد از a:visited و a:link قرار بگیرد و نیز باید a:active بعد از a:hover قرار بگیرد تا به درستی کار کند.
همچنین شبه کلاس ها در css به بزرگی و کوچکی حروف حساس نیستند.

شبه کلاس ها و کلاس های css

شبه کلاس ها را می توان با کلاس های css ترکیب کرد.
مثال زیر ترکیبی از این دو نوع کلاس است:

a.highlight:hover {
  color: #ff0000;
}

اعمال hover بر روی

در مثال زیر نحوه اعمال hover بر div را می بینید:

div:hover {
  background-color: blue;
}

در مثال زیر نیز می بینید که با حرکت ماوس بر روی المان div، یک tooltip نمایش داده می شود:

webtml.ir

webtml.ir
  وب تی ام ال، وب سایتی برای یادگیری آسان تر

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

شبه کلاس ها در css برای :first-child

در اینجا شبه کلاس ها بر روی المانی که first-child المان دیگری است، اعمال می شود.
در مثال زیر سلکتور، المان p را که اولین فرزند المان های دیگر است را مشخص می کند:

p:first-child {
  color: blue;
}

در مثال زیر سلکتور، المان را که اولین فرزند المان های

است را مشخص می کند:

p i:first-child { color: blue; }

و در مثال زیر سلکتور، تمام المان های را انتخاب می کند که درون المان
قرار گرفته اند و خود المان
اولین فرزند المان های دیگر است:

I am a strong person. I am a strong person.

I am a strong person. I am a strong person.

Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

p:first-child i { color: blue; }

که نتیجه را در زیر مشاهده می کنید:

I am a strong person. I am a strong person.

I am a strong person. I am a strong person.

Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

تعیین زبان شبه کلاس ها در css

شبه کلاس :lang به شما این امکان را می دهد که قوانین خاصی برای زبان های مختلف تعریف کنید.

در مثال زیر، :lang علامت نقل قول را برای المان های که برای آن ها مقدار lang="no" باشد، تعریف می کند:

q:lang(no) { quotes: "~" "~"; }

Some text A quote in a paragraph Some text.

که نتیجه را در زیر مشاهده می کنید:

Some text A quote in a paragraph Some text.

لینک مرجع مقاله

نوشته شبه کلاس ها در css اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

finalize در RxJS

میثم صحراگرد — Fri, 24 Apr 2020 14:35:03 +0000

در این مقاله قصد داریم نگاهی به اپراتور finalize در RxJS بیندازیم.

اپراتور finalize در RxJS برای اجرای دستورالعمل ها هنگام پایان یافتن observable استفاده می شود.

فعال/غیرفعال کردن دکمه ارسال اطلاعات در فرم، هنگام اجرای درخواست HTTP

به مثال زیر که یک نمونه از subscribe کردن یا گوش دادن به یک observable است، دقت کنید:

this.someService.fetchDataFromApi() .subscribe( result => { // success }, err => { // some error happened } )

فرض کنید کد بالا از طریق کلیک بر روی دکمه ارسال فراخوانی شده است، بعضی از افراد عادت دارند که دو بار بر روی دکمه ها کلیک کنند. ما می خواهیم از فراخوانی مجدد api بک اند بر اثر دوبار کلیک کاربر، جلوگیری کنیم.

اگرچه راه های مختلفی برای این کار وجود دارد اما ما در این آموزش قصد داریم هنگامی که دکمه برای بار اول کلیک شد، آن را غیرفعال کنیم و هنگام پایان یافتن درخواست HTTP آن را دوباره فعال کنیم. به مثال زیر دقت کنید:

this.isLoading = true; this.someService.fetchDataFromApi() .subscribe( result => { // success this.isLoading = false; }, err => { // some error happened this.isLoading = false; } )

هنگامی که isLoading برابر با true باشد، دکمه ارسال را غیرفعال می کنیم.

همان طور که در مثال بالا می بینید، دستور isLoading = false دوبار تکرار شده، زیرا ما می خواهیم که در هر دو حالت success و error دکمه را فعال کنیم.

گزینه ۱: استفاده از اپراتور tap

همان طور که در مثال زیر می بینید، یکی از گزینه ها می تواند اپراتور tap باشد:

this.isLoading = true; this.someService.fetchDataFromApi() .pipe( tap(_ => { this.isLoading = false; }) ) .subscribe( result => { // success }, err => { // some error happened } )

دستورالعمل های نوشته شده در اپراتور tap فقط در حالت success اجرا می شود و در حالت هایی که خطا رخ می دهد یا هنگام terminate (پایان یافتن) observable، دستور this.isLoading = false; اجرا نمی شود. (مانند درخواست های HTTP ناموفق در انگولار)

اگرچه، اپراتور tap به ما این قابلیت را می دهد که دستورالعمل ها را در وضعیت های next، error و complete نیز اجرا کنیم مانند حالتی که در subscribe این وضعیت ها را کنترل می کنیم.

به مثال زیر توجه کنید:

this.someService.fetchDataFromApi() .pipe( tap({ next: (x) => { console.log('tap success', x); this.isLoading = false; }, error: (err) => { console.log('tap error', err); this.isLoading = false; }, complete: () => console.log('tap complete') }), ) .subscribe(x => { console.log('Got result', x); }, (err) => { console.error('Got error', err); })

گزینه ۲: استفاده از اپراتور finalize در RxJS

یک گزینه دیگر استفاده از اپراتور finalize می باشد که شبیه ساختار try-catch-finally در زبان های بر پایه C می باشد.

بنابراین می توانیم مثال خود را به شکل زیر تغییر دهیم:

this.isLoading = true; this.someService.fetchDataFromApi() .pipe( finalize(() => { this.isLoading = false; }) ) .subscribe( result => { // success }, err => { // some error happened } )

چگونه finalize کار می کند؟

درواقع اپراتور finalize از طریق subscription.add(fn) یک callback برای اجرا هنگام teardown یا از بین رفتن observable تعریف می کند.

نتیجه گیری

توجه کنید که اپراتور finalize زمانی که observable پایان می یابد، اجرا می شود. این نکته بسیار مهم است. این روش برای مواقعی که از Angular HTTP استفاده می کنیم، به خوبی کار می کند. به خاطر این که Observable هایی که توسط سرویس Angular HTTP بازگردانده می شوند، پس از اجرای درخواست HTTP، کامل می شوند.

اما در صورت استفاده از Observable های سفارشی (custom) ممکن است اینگونه نباشد.

لینک مقاله اصلی

نوشته finalize در RxJS اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

combinator در css

نجمه زورمند — Wed, 15 Apr 2020 14:11:57 +0000

Combinator در css مبحثی است که در مقاله امروز به آن می پردازیم:

یک combinator روابط بین selectorها را توضیح می دهد. یک CSS selector می تواند شامل بیش از یک سلکتور ساده باشد که برای ارتباط بین این سلکتورهای ساده، می توانیم از combinatorها استفاده کنیم.

انواع combinator در css

در سی اس اس، ۴ نوع مختلف combinator داریم:

descendant selector (space)

child selector (<)

adjacent sibling selector (+)

general sibling selector (~)

Descendant Selector

این نوع سلکتور، همه فرزندان یک المان خاص را با هم تطبیق می دهد.

مثال زیر، تمام المان های
درون المان
را انتخاب می کند:

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4. Not in a div.

Paragraph 5. Not in a div.

div p { background-color: yellow; }

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4. Not in a div.

Paragraph 5. Not in a div.

Child Selector

این سلکتور، تمامی فرزندان بدون واسطه یک المان را مشخص می کند.

مثال زیر، تمام المان های
که فرزند
هستند را انتخاب می کند:

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4 in the div.

Paragraph 5. Not in a div.

Paragraph 6. Not in a div.

div > p { background-color: yellow; }

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4 in the div.

Paragraph 5. Not in a div.

Paragraph 6. Not in a div.

Adjacent Sibling Selector

این سلکتور تمام المان های مجاور یک المان خاص را انتخاب می کند. بدین صورت که المان های sibling باید والد یکسانی داشته باشند و adjacent نیز به معنای اینست که باید بلافاصله پشت سر هم باشند.

مثال زیر، تمام المان های
که بلافاصله پس از المان
هستند را انتخاب می کند:

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3. Not in a div.

Paragraph 4. Not in a div.

div + p { background-color: yellow; }

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3. Not in a div.

Paragraph 4. Not in a div.

General Sibling Selector

نوع آخر Combinator در css شامل General Sibling Selector می باشد.

این سلکتور تمام siblingهای یک المان خاص را انتخاب می کند و کافیست که این دو المان، یک والد داشته باشند، اهمیتی ندارد که دقیقا پشت سر هم باشند.

مثال زیر، تمام المان های
که والد مشترکی با
دارند (sibling) را انتخاب می کند:

Paragraph 2.

Paragraph 3.
Some code.
Paragraph 4.

div ~ p { background-color: yellow; }

Paragraph 1.

Paragraph 2.

Paragraph 3.

Some code.

Paragraph 4.

لینک مرجع مقاله

نوشته combinator در css اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

ترازبندی در css

نجمه زورمند — Fri, 20 Mar 2020 21:51:20 +0000

ترازبندی در css مبحثی است که در این مقاله به آن می پردازیم:

وسط چین کردن المان ها

برای وسط چین کردن عناصر block-level (مثل div) مراحل زیر را انجام می دهیم:

مقدار خصوصیت margin را برابر با auto قرار می دهیم (margin:auto)

با دادن عرض خاصی به المان، مانع از این می شویم که المان کل عرض عنصر دربرگیرنده خود را اشغال کند.

بدین صورت المان در مرکز قرار می گیرد و باقیمانده عرض، به صورت مساوی در دو طرف تقسیم می شود.

مثال:

Note: This div element is centered.

.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }

اگر مقدار width تعریف نشود یا برابر با %۱۰۰ باشد، المان وسط چین نمی شود.

ترازبندی متن در وسط

برای این که تنها متن را در وسط قرار دهیم، از ویژگی text-align: center; استفاده می کنیم.

This text is centered

.center { text-align: center; border: 3px solid green; }

وسط قرار دادن عکس

برای وسط قرار دادن یک عکس می بایست مقدار margin چپ و راست را برابر auto قرار دهیم و آن را تبدیل به یک عنصر block-level کنیم:

img { display: block; margin-left: auto; margin-right: auto; width: 40%; }

ترازبندی چپ و راست با استفاده از position

یک راه برای تراز کردن (align دادن)، استفاده از position: absolute; می باشد:

In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }

ویژگی position: absolute; باعث می شود المان از حالت معمولی در بیاید و می تواند باعث overlap شدن (تداخل) المان ها بشود.

ترازبندی چپ و راست با استفاده از float

راه دیگر برای ترازبندی المان، استفاده از float است:

.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }

اگر المانی بلندتر از المان دربرگیرنده خود باشد و float شود، از المان دربرگیرنده بیرون می زند که برای حل این مشکل می توانید از clearfix استفاده کنید.

می توانید overflow: auto; را اضافه کنید تا این مشکل برطرف شود.

.clearfix { overflow: auto; }

برای مشاهده توضیحات بیشتر به آموزش float در css مراجعه نمایید.
قرار دادن المان در مرکز به صورت عمودی (Vertically) با استفاده از padding
راه های مختلفی برای انجام این کار وجود دارد که یکی از آن ها، دادن padding بالا و پایین به المان است:

I am vertically centered.

.center { padding: 70px 0; border: 3px solid green; }

برای مرکز قرار دادن المان به صورت عمودی و افقی padding را تعریف کنید، همچنین text-align: center قرار دهید:

I am vertically and horizontally centered.

.center { padding: 70px 0; border: 3px solid green; text-align: center; }

قرار دادن المان در مرکز به صورت عمودی با استفاده از line-height

یک روش دیگر تعیین line-height و مساوی قرار دادن مقدار آن با ویژگی height می باشد.

I am vertically and horizontally centered.

.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; }

و اگر متن سطرهای بیشتری داشت کد زیر را اضافه کنید:

.center p { line-height: 1.5; display: inline-block; vertical-align: middle; }

قرار دادن المان در مرکز به صورت عمودی با استفاده از position و transform

اگر نخواستیم از padding و line-height استفاده کنیم، گزینه بعدی استفاده از position و transform می باشد:

.center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

برگرفته از :
www.w3schools.com

نوشته ترازبندی در css اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

متغیر در جاوااسکریپت

محمدرضا دهقانی — Fri, 20 Mar 2020 20:40:55 +0000

متغیر در جاوااسکریپت مبحثی است که در این مقاله به آن می پردازیم:

بیشتر اوقات یک برنامه جاوااسکریپت باید با اطلاعات کار کند.

در اینجا دو مثال آورده شده است:

فروشگاه آنلاین: اطلاعات ممکن است شامل سبد خرید و کالاهایی باشد که به فروش می رسد.

برنامه چت: اطلاعات ممکن است شامل کاربران، پیام ها و موارد دیگر باشد.

برای ذخیره این اطلاعات از متغیر ها استفاده می شود.

متغیر (variable)

یک متغیر در جاوااسکریپت یک “فضای ذخیره سازی نامگذاری شده” برای داده ها است.

ما می توانیم از متغیرها برای ذخیره داده های مربوط به کالاها، بازدیدکنندگان و… استفاده کنیم.

برای ساختن متغیرها در جاوااسکریپت، از کلمه کلیدی let استفاده می کنیم.

عبارت زیر متغیری را با نام firstname تعریف می کند:

let firstname;

حال می توانیم به صورت زیر مقداری را توسط عملگر =در متغیر firstname ذخیره کنیم:

let firstname; firstname = "Reza"; //store the string

اکنون رشته “Reza” در ناحیه حافظه مرتبط با متغیر firstname ذخیره شده است. ما می توانیم به وسیله نام متغیر به آن دسترسی داشته باشیم.

let firstname; firstname = "Reza"; alert(firstname); //return Reza

نتیجه کد بالا:
برای اختصار می توانیم تعریف و مقداردهی متغیر را در یک خط ترکیب کنیم.

let firstname = "Reza"; alert(firstname); //return Reza

نتیجه کد بالا:
همچنین می توانیم چند متغیر در یک خط تعریف کنیم:

let firstname = "Reza", lastname = "Dehghani", age = 20;

کدی که به صورت بالا نوشته شده باشد، ممکن است کوتاه بنظر برسد، اما این روش را پیشنهاد نمی کنیم. به منظور خوانایی بهتر، لطفا از یک خط واحد برای تعریف هر متغیر استفاده کنید.

توجه کنید که برای تعریف هر سه متغیر در مثال بالا فقط یک بار کلمه کلیدی let را نوشته ایم.

نوع چند خطی آن طولانی تر است، اما خوانایی بهتری دارد.

let firstname = "Reza"; let lastname = "Dehghani"; let age = 20;

varبه جای let

در اسکریپت های قدیمی تر، ممکن است کلمه کلیدی var را به جای let مشاهده کنید:

var firstname = "Reza";

کلمه کلیدی var تقریبا مشابه کلمه کلیدی let می باشد و با تفاوت هایی برای تعریف متغیر در جاوااسکریپت استفاده می شود. نگران نباشید، تفاوت های آن را در درس های بعدی خواهید دید.

و اما واقعیت متغیر در جاوااسکریپت

برای درک بهتر مفهوم متغیر، می توان آن را به عنوان جعبه ای برای نگهداری داده ها در نظر گرفت که برچسبی منحصر به فرد بر روی این جعبه چسبانده ایم.
برای مثال، می توان متغیر message را به عنوان جعبه ای تصور کرد که داده”Hello” در آن قرار دارد.

ما می توانیم هر مقداری را در جعبه قرار دهیم. همچنین می توانیم این مقدار را هر چند بار که می خواهیم تغییر دهیم.

وقتی متغیری تغییر می کند، داده های قدیمی از آن حذف می شوند.

همچنین می توانیم دو متغیر تعریف کنیم و داده ها را از یکی به دیگری کپی کنیم.

let hello = "Hello World"; let message; message = hello; alert(hello); alert(message);

نتیجه کد بالا:

ثابت ها (constants)

برای تعریف یک ثابت (تغییر ناپذیر) از کلمه کلیدی const به جای let استفاده می کنیم.

const PI = 3.14;

متغیر هایی که با کلمه کلیدی const تعریف می شوند را ثابت می گویند.

ثابت ها را فقط یکبار می توان مقدار دهی کرد.

تلاش برای تغییر ثابت ها باعث بروز خطا می شود.

زمانی که برنامه نویس اطمینان دارد که متغیر هرگز تغییر نمی کند، از const استفاده می کند.

برگرفته از:

https://javascript.info

نوشته متغیر در جاوااسکریپت اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

المان های HTML – جلسه چهارم

میثم صحراگرد — Fri, 06 Mar 2020 07:55:05 +0000

در این جلسه قصد داریم که بخش چهارم از آموزش HTML 5 از طریق وب سایت w3schools.com را خدمت شما عزیزان ارائه دهیم.
در ابتدا وارد w3schools.com شده و از بخش آموزش HTML و از منوی سمت چپ لینک HTML Elements را کلیک می کنیم.

المان های HTML

هر کدام از المان های HTML معمولا از تگ آغازین، تگ پایانی به علاوه محتوا تشکیل می شود.

Content goes here...

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

هر المان HTML هر چیزی از تگ آغازین تا تگ پایانی را شامل می شود.

My first paragraph.

در جدول زیر چند نمونه از المان های HTML را می بینید.

Start tag Element content End tag

My First Heading

My first paragraph.

اگر دقت کنید می بینید که تگ با تگ های
و
تفاوت دارد که توضیحاتش را در ادامه، خدمتتان عرض خواهیم کرد.

المان های تو در تو

المان های HTML می توانند درون همدیگر قرار بگیرند و همه document های HTML از المان های تو در تو تشکیل شده اند.
در سند HTML زیر می توانید ببینید که تگ های
و
درون تگ و تگ درون تگ قرار گرفته است که به این مفهوم nested elements (المان های تو در تو) گفته می شود.

My First Heading

My first paragraph.

تگ body

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

تگ h1

تگ
برای تعریف عنوان های (heading) بزرگ و مهم تر استفاده می شود که همچون دیگر تگ های HTML شامل: تگ آغازین، تگ پایانی و محتوا می شود. که در مثال بالا، محتوا my first heading است.

تگ p

تگ
برای تعریف پاراگراف استفاده می شود که باز هم مانند تگ
شامل: تگ آغازین، تگ پایانی و محتوا (my first paragraph) می شود.

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

This is a paragraph
This is a paragraph

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

المان های خالی (Empty elements)

المان های خالی المان هایی هستند که تگ پایانی ندارند و فقط از تگ آغازین تشکیل شده اند.

تگ br

تگ هایی شبیه تگ تگ های خالی نامیده می شوند.

تگ باعث می شود که خط بشکند و بقیه محتوا به خط بعد برود.

المان های خالی می توانند در تگ آغازین بسته شوند. به این صورت که یک اسلش (/) را بعد از نام تگ قرار می دهیم .

در HTML5 نیازی به بستن تگ های خالی نیست اما اگر بخواهیم که یک اعتبارسنجی (validation) سخت تری را روی سند خود ایجاد کنیم و بخواهیم سند ما از طریق parser های xml قابل خواندن باشد، باید همه تگ های HTML را به درستی ببندیم.

در XHTML که یکی از نسخه های قبلی HTML بود، باید به اجبار از قوانین XML پیروی می کردیم. اما در HTML5 هیچ نیازی به این کار نیست.

اچ تی ام ال case sensitive نیست

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

نوشته المان های HTML – جلسه چهارم اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

وبسایت آموزشی وب تی ام ال – webtml

ویژگی در HTML – جلسه پنجم

ویژگی در HTML

ویژگی href در HTML

ویژگی src در HTML

ویژگی های عرض (width) و ارتفاع (height) در HTML

ویژگی alt در HTML

ویژگی style در HTML

ویژگی lang در HTML

ویژگی title در HTML

تک کوتیشن یا جفت کوتیشن؟

خلاصه ی فصل

ساخت منو در css

ساخت منو در css = لیستی از لینک ها

opacity در css

opacity در css و ویژگی hover

شفافیت و RGBA

نوشتن متن در Transparent Box

شبه عناصر در css

شبه عنصر first-line::

شبه عنصر first-letter::

شبه عناصر در css و کلاس های css

استفاده از چند شبه عنصر

شبه عنصر before::

This is a heading

This is a heading

شبه عنصر after::

This is a heading

This is a heading

شبه عنصر selection::

Select some text on this page:

شبه کلاس ها در css

نحوه کاربرد

حالت های نمایش لینک

شبه کلاس ها و کلاس های css

اعمال hover بر روی

شبه کلاس ها در css برای :first-child

تعیین زبان شبه کلاس ها در css

finalize در RxJS

فعال/غیرفعال کردن دکمه ارسال اطلاعات در فرم، هنگام اجرای درخواست HTTP

گزینه ۱: استفاده از اپراتور tap

گزینه ۲: استفاده از اپراتور finalize در RxJS

چگونه finalize کار می کند؟

نتیجه گیری

combinator در css

انواع combinator در css

Descendant Selector

Child Selector

Adjacent Sibling Selector

General Sibling Selector

ترازبندی در css

وسط چین کردن المان ها

ترازبندی متن در وسط

وسط قرار دادن عکس

ترازبندی چپ و راست با استفاده از position

ترازبندی چپ و راست با استفاده از float

قرار دادن المان در مرکز به صورت عمودی با استفاده از line-height

قرار دادن المان در مرکز به صورت عمودی با استفاده از position و transform

متغیر در جاوااسکریپت

متغیر (variable)

varبه جای let

و اما واقعیت متغیر در جاوااسکریپت

ثابت ها (constants)

المان های HTML – جلسه چهارم

المان های HTML

و تفاوت دارد که توضیحاتش را در ادامه، خدمتتان عرض خواهیم کرد.

المان های تو در تو

و درون تگ و تگ درون تگ قرار گرفته است که به این مفهوم nested elements (المان های تو در تو) گفته می شود. My First Heading My first paragraph.

My First Heading

تگ body

تگ h1

برای تعریف عنوان های (heading) بزرگ و مهم تر استفاده می شود که همچون دیگر تگ های HTML شامل: تگ آغازین، تگ پایانی و محتوا می شود. که در مثال بالا، محتوا my first heading است.

تگ p

شامل: تگ آغازین، تگ پایانی و محتوا (my first paragraph) می شود.

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

المان های خالی (Empty elements)

تگ br

اچ تی ام ال case sensitive نیست

`var`به جای `let`

و
تفاوت دارد که توضیحاتش را در ادامه، خدمتتان عرض خواهیم کرد.

و
درون تگ و تگ درون تگ قرار گرفته است که به این مفهوم nested elements (المان های تو در تو) گفته می شود.

My First Heading

My first paragraph.