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

HTML <b> and <strong> Elements

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

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

bold text

 

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

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

format text


HTML <i> and <em> Elements

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

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

italic text

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

 

 

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

emphzsized text

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

HTML <small> Element

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

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

small formatting


HTML <mark> Element

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

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

marked formatting


HTML <del> Element

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

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

deleted formatting


HTML <ins> Element

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

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


HTML <sup> Element

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

اگر کد بالا را در  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>عنوان ۱</h1>

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

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

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

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

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

</body>

</html>

 

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

 

heading

 

 

 

 

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

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

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

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

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

 

 

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

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

<h1 style=”font-size:60px;”>عنوان ۱</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”۵۰۰” به معنی این است که عرض تصویر ۵۰۰ پیکسل است.

شما در قسمت  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 تودرتو هستند.

مثال پایین شامل ۴ المنت 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>این عنوان ۱ است</h1>

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

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

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

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

<h6>این عنوان۶ است </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 می باشد:

سال ورژن
۱۹۹۱ HTML
۱۹۹۵ HTML 2.0
۱۹۹۷ HTML3.2
۱۹۹۹ HTML 4.01
۲۰۰۰ XHTML
۲۰۱۴ HTML5

مقدمه

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

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

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

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

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

 

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

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

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

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

HTML

HTML

مقدمه

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

ادامه مطلب

HTML چیست؟

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

ادامه مطلب

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

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

ادامه مطلب

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

نگران نباشید اگر که در این مثالها از تگهایی استفاده شده است که شما آنها را بلد نیستید . در فصلهای بعد با همه ی این تگها آشنا خواهید شد و آنها را یاد خواهید گرفت . HTML documents (سندهای

ادامه مطلب

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

یک المنت  HTML معمولا شامل تگ شروع و تگ پایان است، به همراه محتوایی که در بین دو تگ قرار میگیرد. <tagname>محل قرار گیری محتوا ها…</tagname> یک المنت HTML  شامل تگ شروع تا تگ پایان و هر چیزی که بین

ادامه مطلب

Html attribute(صفات html)

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

ادامه مطلب

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

عنوان ها توسط تگهای <h1> تا <h6> تعریف میشوند . <h1> مهمترین عنوان را تعریف می کند. <h6> کم اهمیت ترین  عنوان را تعریف می کند. <!DOCTYPE html> <html> <body> <h1>عنوان ۱</h1> <h2>عنوان ۲</h2> <h3>عنوان ۳</h3> <h4>عنوان ۴</h4> <h5>عنوان ۵</h5>

ادامه مطلب

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

  المنت <p>  یک پاراگراف را تعریف میکند : <!DOCTYPE html> <html> <body> <p>این یک پاراگراف است</p> <p>این یک پاراگراف است</p> <p>این یک پاراگراف است</p> </body> </html> اگر کد بالا را در  notepad  بنویسید و آن را توسط مرورگر باز

ادامه مطلب

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

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

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

ادامه مطلب