HTML text formatting(فرمت متنهای html)

HTML <b> and <strong> Elements

المنت <b> متن را بولد (چاق ) میکند.یعنی چی ؟ به مثال زیر توجه فرمایید :

<!DOCTYPE html>
<html>
<body>
<p>این متن نرمال است</p>
<p><b>این متن به صورت بولد است</b></p>
</body>
</html>

 اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

bold text

 

المنت <strong> متن را به صورت قوی تعریف میکند به مثال زیر توجه فرمایید:

<!DOCTYPE html>
<html>
<body>

<p>این متن نرمال است </p>

<p><strong>این متن  قوی است </strong></p>

</body>
</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

format text


HTML <i> and <em> Elements

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

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

</body>
</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

italic text

المنت <em> متن های emphasized (تاکید شده) را ایجاد میکنند. به مثال زیر توجه فرمایید :

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>

 

 

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

emphzsized text

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

HTML <small> Element

المنت <small> متن ها را به صورت کوچک نمایش میدهد .به مثال زیر توجه فرمایید:

<!DOCTYPE html>
<html>
<body>

<h2>HTML <small>Small</small> Formatting</h2>

</body>
</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

small formatting


HTML <mark> Element

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

<!DOCTYPE html>
<html>
<body>

<h2>HTML <mark>Marked</mark> Formatting</h2>

</body>
</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

marked formatting


HTML <del> Element

المنت <del> روی متن داخل المنت خط میکشه که به معنای  متن حذف شده  است .به مثال زیر توجه فرمایید:

<!DOCTYPE html>
<html>
<body>


<p>رنگ مورد علاقه من <del>آبی</del> قرمز است.</p>
<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

deleted formatting


HTML <ins> Element

المنت <ins> متن ها رابه صورت زیر نویس(subscripted) تعریف میکند .به مثال زیر توجه فرمایید:

<!DOCTYPE html>
<html>
<body>

<p>این یک متن  <sub>زیرنویس دار</sub> است.</p>
<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :subscripte text


HTML <sup> Element

المنت  <sup> متن superscripted  را تعریف می کند.به مثال زیر توجه فرمایید:

<!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

superscripted text

 

html paragraphs (پاراگراف های html)

 

المنت <p>  یک پاراگراف را تعریف میکند :

<!DOCTYPE html>

<html>

<body>

<p>این یک پاراگراف است</p>

<p>این یک پاراگراف است</p>

<p>این یک پاراگراف است</p>

</body>

</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

paragraphs


HTML Display(نمایش HTML)

شما نمی توانید مطمئن باشید که کد  HTML  چگونه نمایش داده خواهد شد.

صفحه های بزرگ یا کوچک و تغییر اندازه صفحه نتایج مختلفی ایجاد می کنند.

با  HTML ، شما نمی توانید خروجی را با افزودن فضاهای اضافی یا خطوط جدید در کد HTML خود تغییر دهید.

مرورگر فضاهای اضافی و خطوط اضافی را هنگامی که صفحه نمایش داده می شود حذف می کند.

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

<!DOCTYPE html>

<html>

<body>

<p>

این پاراگراف

شامل خط های زیاد

در منبع کد است

اما مرورگر

از آنها چشم پوشی میکند.

</p>

<p>

این پاراگراف

شامل خط های زیاد

در منبع کد است

اما مرورگر

از آنها چشم پوشی میکند.

</p>

<p>

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

</p>

</body>

</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

paragraphs


HTML Line Breaks(شکستن خط html)

المنت <br> یک شکست خط را تعریف میکند و به سطر بعدی میرود.

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

<!DOCTYPE html>

<html>

<body>

<p>این یک<br>پاراگراف<br>با سطرهای مختلف است</p>

</body>

</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

paragraphs

 

 

تگ <br> یک تگ خالی است، به این معنی که تگ پایان ندارد.


The Poem Problem(مشکل  نوشتن شعر)

این شعر در یک خط نمایش داده می شود:

<!DOCTYPE html>

<html>

<body>

<p>

  عیب رندان مکن‌ای زاهد پاکیزه سرشت

که گناه دگران بر تو نخواهند نوشت

من اگر نیکم و گر بد تو برو خود را باش

هر کسی‌ آن دروَد عاقبت کار که کشت

</p>

</body>

</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

poet peoblem

 


The HTML <pre> Element

 

متن داخل عنصر <pre> در یک فونت ثابت (معمولا  Courier) نمایش داده می شود و هم فضای خالی و هم خط شکست ها را  حفظ می کند:

 

<!DOCTYPE html>

<html>

<body>

<pre>

عیب رندان مکن‌ای زاهد پاکیزه سرشت

که گناه دگران بر تو نخواهند نوشت

من اگر نیکم و گر بد تو برو خود را باش

هر کسی‌ آن دروَد عاقبت کار که کشت

</pre>

</body>

</html>

 

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

pre paragraph

ملاحظه میشود که همه ی فضاهای خالی و همه ی خط شکست ها در نظر گرفته شده اند.

Html headings(عنوان های html )

عنوان ها توسط تگهای <h1> تا <h6> تعریف میشوند .

<h1> مهمترین عنوان را تعریف می کند. <h6> کم اهمیت ترین  عنوان را تعریف می کند.

<!DOCTYPE html>

<html>

<body>

<h1>عنوان 1</h1>

<h2>عنوان 2</h2>

<h3>عنوان 3</h3>

<h4>عنوان 4</h4>

<h5>عنوان 5</h5>

<h6>عنوان 6</h6>

</body>

</html>

 

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

 

heading

 

 

 

 

عنوان ها مهم هستند

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

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

تگ <h1> باید برای مهم ترین عنوان استفاده شود ، و سپس تگ <h2> برای عنوان باارزش تر بعدی ، و سپس <h3> و به همین ترتیب از تگ های بعدی استفاده میکنیم.

توجه: از عنوان های HTML فقط برای سرفصل ها (عنوان ها) استفاده کنید . از عنوان ها برای بزرگ نمایی و بولد کردن متن ها استفاده نکنید .

 

 

Bigger headings(عنوان های بزرگتر)

هر عنوان HTML دارای اندازه پیش فرض است. با این حال ، شما میتوانید سایز و اندازه عنوان ها را با استفاده ازstyle attribute  و صفت font-size که در css  است تعیین کنید .

<h1 style=”font-size:60px;”>عنوان 1</h1>

 

HTML Horizontal Rules

(خطوط افقی در HTML)

تگ <hr>   برای قرار دادن خط افقی بکار میرود .

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

<!DOCTYPE html>

<html>

<body>

 

<h1>این عنوان اول است</h1>

<p>این یک پاراگراف است.</p>

<hr>

 

<h2>این عنوان دوم است.</h2>

<p>این یک پاراگراف است</p>

<hr>

 

<h2>این نیز یک عنوان است .</h2>

<p>این نیز یک پاراگراف است. </p>

 

</body>

</html>

اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز کنید خروجی به صورت زیر خواهد بود :

heading

 

 

The HTML <head> Element

(المنت <head>)

عنصر  <head>   HTMLهیچ ارتباطی با  html headings ندارد.

المنت <head> مکانی برای قرار دادن metadata میباشد.

Html metadata اطلاعات مربوط به سند html است .

metadata نمایش داده نمیشود .(اگر یادتان باشد گفتیم که فقط عناصر داخل المنت <body> نمایش داده میشود.)

المنت <head>  بین تگ <html> و تگ <body>  قرار دارد.

 

 

 

<!DOCTYPE html>

<html>

<head>

  <title>اولین صفحه من</title>

  <meta charset=”UTF-8″>

</head>

<body>

.

.

.

</body>

</html>

 

نکته: متاداده معمولا عنوان سند، character set،styles، لینک ها، اسکریپت ها و سایر متا داده ها را تعریف می کند.

 

چگونه کدهای html  صفحات مختلف وب را ببینیم!

 

آیا تا کنون یک صفحه وب را دیده اید که بسیار برایتان جالب و زیبا  بوده باشه و برایتان این سوال پیش بیاید که چگونه این صفحات را ساخته اند و کد آنها چه بوده است ؟!

شما میتوانید کدهای html صفحات را به روشی که بیان میکنم مشاهده کنید :

در داخل صفحه html مورد نظر کلیک راست کنید ، اگر در مرورگر chrome هستید “view page source” و یا اگر که در مرورگر IE هستید “view source” را انتخاب کنید  (در مرورگرهای دیگر نیز به همین روش است .) با  انتخاب کردن آن  یک پنجره جدید که شامل کدهای html  صفحه مورد نظر است باز میشود .

 

 

 

 

Html attribute(صفات html)

Attribute ها اطلاعات اضافی در مورد المنتهای  HTML ارائه می دهند.

Html attribute

  • تمام عناصر(المنت) HTML می توانند دارای attributes(صفات) باشند.
  • Attribute ها اطلاعات اضافی در مورد یک عنصر(المنت) ارائه می کنند.
  • Attribute ها همیشه در تگ شروع (start tag) مشخص می شوند.

Attribute ها معمولا به صورت روبرو می آیند : name=”value” (یعنی اول اسم attribute سپس علامت مساوی و سپس مقدار صفت در بین “مقدارصفت ” می آید.)

The href attribute(صفت href)

در html  لینک ها توسط تگ <a> معرفی میشوند . آدرس لینک در صفت href مشخص میشود:

<a href=”https://www.pysocial.com”>این یک لینک است .</a>

 

در قسمت های بعدی آموزش بیشتربا لینک ها و تگ <a> آشنا خواهید شد .

 

The src attribute(صفت src)

تصاویر HTML با برچسب <img> تعریف می شوند.

در داخل صفت src اسم فایل و مسیر آدرس عکس را مشخص میکنیم :

<img src=”img_ball.jpg”>

 

The width and height Attributes

(صفتهای عرض و ارتفاع)

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

<img src=”img_flower.jpg” width=”500″ height=”600″>

اندازه تصاویر در پیکسل مشخص شده است :width”500” به معنی این است که عرض تصویر 500 پیکسل است.

شما در قسمت  html images  اطلاعات بیشتری در مورد تصاویر در html  پیدا خواهید کرد .

 

The alt Attribute

( صفت alt)

صفت  alt  وقتی که یک عکس نمیتواند نشان داده شود یک متن جایگزین را برای عکس در نظر میگیرد .و آن متن را بجای عکس نمایش میدهد .

<img src=”img_flower.jpg” alt=”عکس گل”>

 

صفت alt  همچنین وقتی که عکس موجود نباشد مفید است .

The style Attribute

(صفت style)

صفت style برای مشخص کردن ظاهر یک عنصر، مانند رنگ، فونت، اندازه و غیره استفاده می شود.

<p style=”color:red”>من یک پاراگراف هستم .</p>

 

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

The lang Attribute

(صفت lang)

زبان سند را می توان در تگ <html>  اعلام کرد.

زبان سند ما توسط صفت lang تعریف میشود .

مشخص کردن زبان سند برای موتورهای جست و جو مهم میباشد.

<!DOCTYPE html>
<html lang=”en-US”>
<body>

</body>
</html>


دو حرف اول زبان را مشخص میکنند (en) و اگر لهجه هم وجود داشته باشد از دو حرف اضافه دیگر هم استفاده میکنیم (US)

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

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

<!DOCTYPE html>
<html lang=”fa”>
<body>

</body>
</html>

 

The title Attribute

(صفت title )

در اینجا صفت  title   به المنت <p> اضافه شده است . مقداری که در صفت title  قرار داده ایم هنگامی که نشانگر ماوس را روی پاراگراف قرار میدهیم  مقدارش به عنوان  tooltip نمایش داده میشود .

<p title=”I’m a tooltip”>
این یک پاراگراف است .
</p>

 

Quote Attribute Values

استاندارد HTML5 نیازی به گزاشتن علامت نقل قول(”   “) در اطراف مقادیر attribute ندارد.مانند

<a href=https://www.w3schools.com>

 

در مثال بالا برای تعریف مقدار صفت href  از علامت نقل قول استفاده نکردیم و این نوع تعریف بد هست .بهتر است که برای تعریف مقادیر attribute ها از علامت نقل قول (”  “) استفاده کنیم .

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

گاهی مجبور هستیم که  از نقل قول استفاده کنیم . مثال پایینی title attribute را بدرستی نمایش نمیدهد چون شامل space(فضای خالی ) میباشد  .

<p title=About pysocial>

 

جا انداختن علامت نقل قول میتواند موجب خطا شود .

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

 

خلاصه این قسمت :

  • تمام عناصر HTML می توانند دارای attribute باشند.
  • Title attribute اطلاعات اضافی را تحت tooltip فراهم میکند .
  • href attribute اطلاعات آدرس را برای لینک ها را فراهم میکنند .
  • صفات width و height اندازه عکس هارا مشخص میکنند .
  • alt attribute یک متنی را هنگامی که عکس باز نشود به جای عکس نمایش میدهد .
  • در pysocial ما همیشه از حروف کوچک برای تعریف attribute ها استفاده میکنیم .
  • در pysocial ما همیشه مقادیر attribute ها را درون علامت نقل قول (” “)  قرار میدهیم .

 

HTML elements(المان های HTML)

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

<tagname>محل قرار گیری محتوا ها…</tagname>

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

تگ پایان (end tag) محتوای المنت  ( element content) تگ شروع (start tag)
</h1> اولین عنوان من <h1>
</p> اولین پاراگراف من <p>
  <br>

المنتهای  HTML بدون محتوا المنتهای خالی نامیده می شوند. المنتهای خالی تگ پایان ندارند، مانند المنت<br> که یک خط شکست تعیین میکند در واقع گزاشتن تگ <br> موجب میشود که مواردی که بعد از تگ <br> می آیند در سطر بعدی نمایش داده میشود.

 

Nested HTML element(المنتهای HTML  تودرتو )

 

میتوان که داخل المنتهای HTML  المنتهای HTML  دیگری تعریف کرد.( المنتها خود میتوانند شامل المنت دیگری شوند. )

تمام اسناد HTML حاوی المنت های HTML تودرتو هستند.

مثال پایین شامل 4 المنت HTML  میباشد

<!DOCTYPE html>

< html >

<body>

<h1>اولین عنوان من</h1>

<p>اولین پاراگراف من</p>

</body>

</ html >

 

توضیح مثال :                                       

المنت <HTML> تمام سند را تعریف میکند و شامل تگ شروع <HTML> و تگ پایان </HTML> میباشد که  این تگ داخل خودش محتوایی دارد که این محتوای داخل این تگ خود نیز تگ میباشند. (داخل تگ <HTML> تگ <body> قرار دارد.)

المنت <body> شامل تگ شروع <body> و تگ پایان</body> میباشد.

محتویات داخل المنت <body> خود شامل دو المنت HTML  دیگری میباشد. (<h1> و <p>)

<body>

<h1>اولین عنوان من </h1>
<p>اولین پاراگراف من</p>

</body>

 

المنت <h1> یک عنوان را مشخص میکند . این المنت با تگ <h1> شروع و با تگ </h1> خاتمه می یابد .

محتوای این المنت “اولین عنوان من”  میباشد.

<h1>اولین عنوان من</h1>

 

 

 

المنت <p> یک پاراگراف را مشخص میکند . شامل  تگ شروع <p> و تگ پایان </ p> میباشد.

محتوای این المنت “اولین پاراگراف من “میباشد.

<p>اولین پاراگراف من</p>

 

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

< html >
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</ html >

 

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

هرگز به این تکیه نکنید زیرا اگر که تگ پایان را فراموش کنید ممکن است نتایج غیر منتظره به وجود بیاید و یا موجب خطا شود  .

 

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

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

<br> یک المنت خالی بدون تگ بسته است <br> خط شکست را مشخص میکند .

المنتهای خالی را میتوان در همان تگی که باز میکنیم نیز ببندیم مانند روبرو : <br />

در  HTML5 نیازی به بستن المنتهای خالی نمیباشد. اما اگر میخواهید کد شما اعتبار بیشتری داشته باشد یا اگر می خواهید سند خود را با تجزیه کننده XML قابل خواندن کنید، باید تمام عناصر HTML را به درستی ببندید.

 

تگ های خود را با حروف کوچک بنویسید

تگ های HTML حساس به حروف بزرگ نیستند. تگ <P> با تگ <p> فرقی ندارد.

استاندارد HTML5 نیازی ندارد که حتما تگها با حروف کوچک نوشته شده باشند .اما کنسرسیوم جهانی وب نوشتن با حروف کوچک را توصیه میکند و خواستار حروف کوچک برای سندهای سخت گیرانه تری مانند XHTML است .

ما در آموزش هایمان از حروف کوچک همواره استفاده خواهیم کرد.

مثالهای پایه ای از HTML

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

در فصلهای بعد با همه ی این تگها آشنا خواهید شد و آنها را یاد خواهید گرفت .

HTML documents (سندهای HTML)

 همه ی سندهای HTML باید با اعلام کردن نوع سند مشخص شوند <DOCTYPE html!>

خود سند HTML  نیز با <html> شروع میشود و با <html/> خاتمه می یابد.

بخش قابل رویت از سند HTML بین  تگ <body> و <body/> است.

<!DOCTYPE html>
<html>
<body>

<h1> این یک عنوان است.</h1>
<p>این یک پاراگراف است.</p>

</body>

</html>
</html>

 

 

 HTML Headings(عنوان های HTML)

عنوان های HTML  توسط تگهای <h1> تا <h6> تعریف میشوند .

تگ <h1> مهمترین عنوان را مشخص میکند و تگ <h6 > کم اهمیت ترین عنوان را مشخص میکند . (منظور از عنوان همان تیتر نوشته ما است)

اگر که مثال زیر را در notepad  بنویسید و یا آن را کپی کنید و با مرورگر خود آن را باز کنید تفاوت تگهای <h1> تا <h6>را مشاهده خواهید کرد .

<!DOCTYPE html>

<html>

<body>

<h1>این عنوان 1 است</h1>

<h2>این عنوان 2 است</h2>

<h3>این عنوان3 است</h3>

<h4>این عنوان4 است </h4>

<h5>این عنوان5 است </h5>

<h6>این عنوان6 است </h6>

</body>

</html>

 

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

headers

 

HTML paragraphs(پاراگراف های HTML)

پاراگراف های HTML با  تگ  <p> درون قسمت <body>  تعریف می شوند  مانند زیر:

<!DOCTYPE html>

<html>

<body>

<p>این یک پاراگراف است.</p>

<p>این یک پاراگراف است.</p>

</body>

</html>

 

خروجی کد در مرورگر به صورت زیر خواهد بود :

 

 

 

HTML links (پیوند های HTML)

پیوندهای HTML با تگ <a>  تعریف میشوند  مانند مثال زیر:

 

<!DOCTYPE html>

<html>

<body>

<a href=”https://www.pysocial.com”>این یک پیوند است. </a>

</body>

</html>

 

اگر خروجی کد زیر را در مرورگر مشاهده کنید میبینید که با کلیک بر روی لینک  شما به صفحه pysocial.com هدایت خواهید شد .

مقصد لینک (پیوند)  در داخل href attribute(صفت href) مشخص شده است .

Attribute رو میشود صفت و یا ویژگی در فارسی ترجمه کرد اما ما همان  attribute  را برای آن بکار میبریم .

attribute ها  برای ارائه اطلاعات اضافی در مورد المنت های HTML استفاده می شود.

شما در فصل های بعد بیشتر درباره attribute ها یاد خواهید گرفت.

 

HTML images(تصاویر HTML)

تصاویر HTML با  تگ <img> تعریف می شوند.

source file (مکان فایل)  (src)، alternative text (متن جایگزین) (alt)، width  و height به عنوان attributes (ویژگی ها) ارائه می شود:

<!DOCTYPE html>

<html>

<body>

<img src=”pysocial.jpg” alt=”pysocial.com” width=”104″ height=”142″>

</body>

</html>

 

HTML buttons(دکمه های HTML)

دکمه های HTML با تگ <button>  تعریف میشوند :

 

<!DOCTYPE html>

<html>

<body>

<button>بر روی من کلیک کنید .</button>

</body>

</html>

 

این کد را در notepad  خود بنویسید و یا کپی کنید و سپس خروجی را در مرورگر خود مشاهده کنید .

 

HTML lists(لیست های HTML)

لیست های HTML با تگ <ul> (unordered list)(لیست غیر شمارشی) یا تگ <ol> (ordered list) (لیست شمارشی) و سپس تگ  <li>  (list items) (موارد لیست)تعریف می شوند:

 

<!DOCTYPE html>

<html>

<body>

<h2>An Unordered HTML List</h2>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

<h2>An Ordered HTML List</h2>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

 

این کد را در notepad  خود بنویسید و یا کپی کنید و سپس خروجی را در مرورگر خود مشاهده کنید .خروجی به صورت زیر خواهد بود :

 

lists

 

 

 

 

 

ویرایشگرهای HTML

خب حال میایم سراغ اینکه در چه محیطی میتوانیم کدهای HTML رو بنویسیم .

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

صفحات وب را میتوان با استفاده از ویرایستار حرفه ای HTML  ایجاد و یا اصلاح کرد.

با این حال، برای یادگیری HTML، یک ویرایشگر متن ساده مانند Notepad (PC) یا TextEdit (Mac) را توصیه میکنیم.

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

چهار مرحله زیر را دنبال کنید تا اولین صفحه وب خود را با Notepad یا TextEdit ایجاد کنید.

قدم اول: (pc) NotePad رو باز کنید .

در  windows 8 و نسخه های  بعد:

صفحه اصلی (start screen) را باز کنید (نماد پنجره در پایین سمت چپ روی صفحه خودnotepad . را تایپ کنید .

در windows 7 یا نسخه های قدیمی تر:

آدرس زیر را باز کنید :

Start > Programs > Accessories > Notepad

 

قدم اول در (mac):  

از این آدرس textedit را باز کنید :

Finder > Applications > TextEdit  

همچنین تنظیمات زیر را تغییر دهید تا برنامه بتواند به درستی فایل ها را ذخیره کند :

وارد قسمت Preferences > Format >  شوید و “Plain Text”  را انتخاب کنید.

سپس در زیر “Open and Save” ،

جعبه ای را که میگوید :

Display HTML files as HTML code instead of formatted text”  ” تیک بزنید .

سپس یک سند جدید برای قرار دادن کد باز کنید .

 قدم دوم :  چند خط کد  HTML  را بنویسید.

کد  HTML زیر را در NotePad بنویسید و یا آن را کپی کنید .

 

<!DOCTYPE html>
<html>
<body>

<h1>  اولین عنوان من </h1>

<p>اولین پاراگراف من</p>

</body>
</html>

به این صورت

editor

قدم سوم :صفحه  HTML  را ذخیره نمایید.

فایل رو بر روی کامپیوتر خود ذخیره نمایید . گزینه file  در بالا سمت راست notepad را انتخاب نمایید و گزینه Save as  رو  انتخاب کنید .

فایل را با اسم “index.HTML” ذخیره کرده و encoding  را بر روی  UTF-8 که برای صفحات  HTML  ترجیح داده میشوند را  مطابق شکل زیر تنظیم کنید .

 

 

utf-8

 

 

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

 

قدم چهارم:صفحه  HTMLکه ساختید رو در  browser  مشاهده کنید .

فایل HTML ذخیره شده را در مرورگر مورد علاقه خود باز کنید (روی فایل دوبار کلیک کنید یا راست کلیک کنید)

و «Open with» را انتخاب کنید .

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

output

 

HTML چیست؟

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

HTML ساختاری را برای ظاهر کردن و نمابش دادن محتوایی همچون عکس ها ، متن ها یا ویدیوها بر روی وبسایت ها فراهم میکند .

یادگیری  HTML  اولین قدم برای ایجاد کردن وبسایت ها میباشد . در قسمت های بعد شما میتوانید صفحات  HTML  را با استفاده از  css و javascript لایه گزاری کنید و به آن به اصطلاح رنگ و رو بدهید و صفحاتی دینامیکی و زیبا را طراحی کنید ، اما در حال حاضر ما قصد داریم بر روی  نحوه اضافه کردن  و اصلاح کردن محتوای اولیه و اساسی یک صفحه مانند متن ، عکس ها  و ویدیوها تمرکز کنیم .نگران نباشید که صفحاتتون در ابتدای کار زشت و ساده به نظر میرسند  …

HTML مخففِ عبارت Hyper Text Markup Language می باشد :

  • Markup language یا زبان نشانه گذاری یک زبان کامپیوتر است که ساختار و ارائه یک متن خام را تعریف میکنند
  • در HTML ، کامپیوتر میتواند متن خامی که تحت عنوان HTML elements هستند را تفسیر کنند .
  • HyperText متن نمایش داده شده در یک کامپیوتر یا دستگاه است که دسترسی به متن دیگر را از طریق لینک ها فراهم می کند. همچنین به عنوان  hyperlinks شناخته میشوند.
  • HTML ساختار صفحات وب را با استفاده از نشانه گذاری توصیف میکند.
  • عناصر HTML ( HTML elements) ، بلوک های تشکیل دهنده صفحات HTML هستند .
  • عناصر HTML(HTML elements) ، با برچسب ها (tags)  نمایش داده میشوند.
  • برچسب های HTML  یا همان  HTML tags محتویاتی مانند “heading” یا “عنوان صفحه”،”paragraph”یا “پاراگراف” ، “table”یا “جدول “و…را برچسب گزاری میکنند .
  • مرورگرها یا همان “browsers” تگ های HTML  رو نمایش نمیدهند بلکه از آنها برای رندر کردن محتوای صفحات استفاده میکنند .
 ممکنه که یه سری از موارد بالا براتون غیر قابل فهم باشه اما اصلا نگران نباشید چون در ادامه ی کار با تمام این اصطلاحات آشنایی پیدا خواهید کرد.

 

یک سند ساده HTML

<!DOCTYPE HTML>
<HTML>
<head>
<title>Page Title</title>
</head>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p></body>
</HTML>

توضیح مثال بالا:

<!DOCTYPE HTML> مشخص میکنه که این فایل یا سندی که ما داریم از نوع HTML5  هست.

المنت <HTML>  المنت اصلی صفحات HTML  هستند .

المنت <head>  شامل متا اطلاعاتی در مورد سند است . (در ادام متوجه منظور از متا اطلاعات خواهید شد پس نگران نباشید.)

المنت <title> یه عنوانی رو برای سند ما مشخص میکند .

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

المنت <h1> یک عنوان بزرگ را تعریف میکند .

المنت <p> یک پاراگراف را مشخص میکند .

HTML tags  (برچسب های HTML)

HTML tags اسم المان هایی هست که داخل  “علامتهای کوچکتر و بزرگتر”(angle brackets) قرار گرفته اند. به صورت زیر :

 

<tagname> محتوا ها داخل این دو تگ قرار میگیرند </tagname>

 

  • HTML tags معمولا به صورت جفت می آیند مانند  :    </p>محل قرار گیری محتوا<p>
  • در tag هایی که به صورت جفت می آیند به اولین  tag ، start tag و به tag دومی end tag گفته میشود
  • End tag دقیقا مانند start tag  نوشته میشود تنها فرق این هست که یک forward slash  قبل از اسم  tag  قرار داده میشود .
 

نکته : start tag همچنین با عنوان  opening tag و  end tag  هم با عنوان  closing tag نامگذاری میشوند .

 

Web browsers  (مرورگرها)

هدف مرورگرها مانند Chrome ، IE ، FireFox  ، Safari  و … خواندن صفحات HTML  و نمایش دادن آنهاست .

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

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

شکل زیر تجسمی از ساختار یک صفحه  HTML است .

<head>

 

<title>عنوان صفحه</title>

 

 

</head>

<HTML>

<body>

 

  <h1>این یک عنوان است .</h1>
<p>این یک پاراگراف است</p>

 

<p>این پاراگراف دیگری است </p>

 

 

 

 

 

 

 

 

 

</body>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

</HTML>

توجه :تنها محتویات داخل  <body>  در مرورگر ها نمایش داده میشوند .( قسمتی که با رنگ سفید مشخص شده است )

اعلامیه <!DOCTYPE>

 

اعلامیه <!DOCTYPE> نوع سند یا فایل مارا مشخص میکند و به مرورگر کمک میکند تا صفحات وب را به درستی نمایش دهد .

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

<!DOCTYPE> حساس به حروف بزرگ و کوچک نیست و میتوانیم آن را با حروف کوچک نیز تعریف کنیم یعنی <!doctype> هم قابل قبول است و اشکالی به کار ما وارد نمیشود .

نحوه اعلام <!DOCTYPE> برای  HTML5  به صورت زیر میباشد :

<!DOCTYPE  HTML>

HTML versions

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

سال ورژن
1991 HTML
1995 HTML 2.0
1997 HTML3.2
1999 HTML 4.01
2000 XHTML
2014 HTML5

مقدمه

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

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

دیوارها ، رنگ آمیزی ، نمای ساختمان و تمام جزییات یک ساختمان همان  CSS  است که به ساختمان ما ظاهر و زیبایی بخشیده است.

یک مثال دیگر که برای  HTML  و CSS  میتوان گفت بدن انسان است . اسکلت بندی بدن انسان دقیقا همان HTML  است   و گوشت و رنگ پوستو موهای سر و … همان  CSS  است .

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

 

در این دوره همه چیز را راجع به  HTML به شما آموزش خواهیم داد .

یادگیری  HTML  آسان است و شما به راحتی میتوانید آن را یاد بگیرید و مطمئنا از یادگیری  HTML  لذت خواهید برد.

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

آماده اید برای شروع آموزش؟!

ساختمان های داده و ساختار آنها در پایتون

رشته ها و متن ها

در این آموزش، تعدادی متغیر با رشته های پیچیده میسازیم تا آنها را بهتر بفهمیم.

یک رشته معمولا متنی است که میخواهید به کسی نشان بدهید یا به خارج از برنامه ای که مینویسید بفرستید. وقتی شما اطراف متن را با علامت های نقل قول تکی یا دوتایی میگذارید، پایتون شناسایی میکند که متن شما از نوع رشته است. شما بارها با این موضوع مواجه شده اید که هنگان استفاده از تابع print برای وارد کردن متن از ‘ یا ” برای تبدیل رشته کردن از آن استفاده میکنید و سپس پایتون آن را چاپ میکند.

در کل رشته ها در پایتون جزء محبوبترین نوع از انواع داده های پایتون محسوب میشوند.(البته در بسیاری از زبان ها، رشته یکی از محوری ترین داده ها محسوب میشود.)

نمونه هایی از رشته ها:

Capture

نقل قول سه تایی (نوشتن متن چند خطی)

برای ایجاد متن یا رشته چند خطی باید از نشان نقل قول سه تایی بهره ببریم(“””).

رشته های خام

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

رشته ای که خام نیست: Capture

کاوش در متن

برای کاوش در متن(رشته) کافیست متغیری که حاوی متن بوده را با استفاده از علامت های [] شروع به انتخاب ایندکس های موجود در رشته نمایید.

برای مثال:

Capture

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

Capture

استفاده از رشته های unicode

رشته های معمولی در پایتون به صورت ASCII و هشت بیتی ذخیره میشوند، در صورتی که رشته های یونیکد به صورت Unicode و 16 بیتی ذخیره میگردند.

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

Capture

همانطور که در بالا میبینید با پسوند (u) آن متن را یونیکد کرده ایم.

عملگر ها بر روی رشته ها

در این بخش با یک جدول٪ عملگر ها در رشته ها را شرح میدهیم.

فرض کنید متغیر a رشته “Hello” را در بر میگیرد و متغیر b رشته “Python” را نگهمیدارد.

Capture

کاراکتر های فرمت

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

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

همچنین فرمتها برای آرایش بهتر متن ما بکار گرفته می شوند.

حال تعداد زیادی رشته ، متغيير ، و فرمت ها ، را تایپ و چاپ می کنیم . شما حتی طریقه استفاده از نام های کوتاه شده ی متغییر ها را نیز تمرین می کنید . برنامه نویسان استفاده از زمان به نفع خود را دوست دارند و به این دلیل از نام هایی برای متغییر خود استفاده می کنند که برای افراد آماتور آزار دهنده است استفاده می کنند ، پس بیایید یاد بگیریم چطور این طریق نام ها را بخوانیم و بنویسیم .

Capture

چیزی که باید ببینید:

Capture

نمونه ای دیگر: Capture

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

Capture

در زیر لیست کاملی از نشانه ها(symbol) قابل استفاده را لیست کرده ایم.

Capture برای نمونه بر فرض مثال ما از متغیر استفاده میکنیم که زمان را بر حسب ثانیه به این شکل نمایش میدهد:

time = 23.34563972

و حال قصد داریماین زمان را تا دو رقم اعشار بیشتر نشان ندهد!

برای اینکار به روش زیر عمل میکنیم: Capture

که نتیجه برابر زیر خواهد بود: Capture

نوعی دیگر از فرمت استفاده از متد format() میباشد.

نحوه استفاده از آن را در زیر شرح میدهیم:

متد format() به اینگونه عمل میکند که متغیر های مورد نظر با جفت آکولاد های ({}) قرار داده شده در متن جابه جا میکند که این {}ها میتوانند به ترتیب اولویت داده شوند که کافیست داخل آنها شماره گذاری شود.

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

Capture

همچنین شما میتوانید از خواص (attribute) آن آرگومانها در متن نیز بهره ببرید:

Capture

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

Capture

جا به جایی با %s و %r: Capture

استفاده از فرمت های اعشاری در متن:

Capture

اضافه کردن واحد های پولی و هزارگان، هزارگان جدا کردن و کنترل نمایش واحد پول (currency): Capture

نمایش به صورت درصدی و محدودیت ارقام اعشاری:

Capture

استفاده از تاریخ و گونه های خاص:

Capture

یک مثال پیچیده:

Capture

متد های جاسازی شده در ساختار پایتون برای کار با رشته ها

برای کار با رشته ها پایتون ابزار های بسیاری در اختیار شما قرار داده است که یکسری از این تجهیزات را پیشتر بیان کردیم، حال به متد های کارآمد میپردازیم.

  • 1- متد capitalize() :

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

Capture

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

Capture

  • 2- متد center() :

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

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

Capture

توجه: حتما پارامتر دوم باید از نوع char باشد نه استرینگ:

مثل: Capture

کد بالا درست است:

Capture

اما در کد بالا همانطور که مشاهده میکنید دارای خطا گونه نوع داده میباشد!

  • 3- متد count() : این متد تعداد رشته یا تعداد حروف مورد نظر ما را در کل رشته شمارش میکند: Capture

که مقدار 2 را برمیگرداند.

  • 4- متد endswith() :

این متد در صورت پیدا کردن کلیدواژه ما در انتهای رشته مقدار True را برمیگرداند. در غیر این صورت مقدار False را برمیگرداند.

Capture

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

  • 5- متد find() : این متد موقعیت ایندکس رشته مورد جستجوی شما را در رشته اصلی پیدا کرده و برمیگرداند.

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

Capture

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

Capture

  • 6- متد isalpha() :

این متد مقدار True را زمانی که تمامی رشته از حروف الفبای لاتین تشکیل داده باشد برمیگرداند. در غیر این صورت(همراه با عدد و فاصله و کاراکتر های خاص) False برمیگرداند.

Capture

  • 7- متد isdigit() این متد بر عکس متد بالا است و اگر رشته ای تماما عدد باشد مقدار True را برمیگرداند.
  • 8- متد islower() : این متد زمانی که تمامی رشته ای از حروف کوچک تشکیل شده باشد مقدار True را برمیگرداند.

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

  • 9- متد isupper() :

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

  • 10- متد join() : این متد رشته شما را با دنباله ایی از رشته هایی که وارد میکنید میچسباند: Capture
  • 11- متد len() : این متد طول رشته شما را برمیگرداند:

Capture

خروجی بالا:

Capture

  • 12- متدهای ljust() و rjust() :

این متدها همانند متد center() بوده و هرکدام به ترتیب برای چپ چین شدن و راست چین شدن به کار میروند.

Capture

  • 13- متد lower() :

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

Capture

  • 14- متد upper() :

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

  • 15- متد replace() :

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

Capture

نکته: در اینجا شاید فقط نیمی از متد ها آموزش داده شده است.(با ارزش ترین های آنان جدا شده و آموزش داده شده اند.)

توصیه های لازم

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

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

مثالی برای کار با متد ها در رشته ها:

لطفا برنامه زیر را تایپ کنید: