آموزش html به زبان ساده قسمت دوم

//آموزش html به زبان ساده قسمت دوم

آموزش html به زبان ساده قسمت دوم

در قسمت اول آموزش html به زبان ساده یک سری از موارد و تگ های مهم زبان برنامه نویسی اچ تی ام ال را با هم بررسی کردیم. در این قسمت ادامه مطالب را با هم بررسی می کنیم.

مقادیر تگ style :

در اینجا قصد داریم تا مقادیر مجاز برای تگ style را معرفی کنیم. یعنی مشخص کنیم که تگ style چه تغییراتی را می تواند بر روی متن ایجاد کند.

background-color :

این مشخصه رنگ پس زمینه را تغییر می دهد. مانند:

<body style=”background-color:blue;”>

Text-color :

این مشخصه رنگ متن را تغییر می دهد. مانند:

<h1 style=”color:blue;”>This is a heading</h1>

Font-family :

این مشخصه فونت و قلم نوشتاری متن را تغییر می دهد. مانند:

<h1 style=”font-family:verdana;”>This is a heading</h1>

Font-size :

این مشخصه اندازه متن را تغییر می دهد. مانند:

<p style=”font-size:160%;”>This is a paragraph.</p>

Text-align :

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

<p style=”text-align:center;”>Centered paragraph.</p>

فرمت های متنی اچ تی ام ال :

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

تگ b و strong :

با این دو تگ شما می توانید متن را از حالت معمولی به حالت ضخیم تبدیل کنید. مانند:

<p><b>This text is bold.</b></p>

تگ i :

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

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

تگ em :

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

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

تگ small :

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

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

تگ mark :

این تگ برای مشخص کردن عبارات با یک رنگ می باشد. مانند:

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

تگ del :

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

<p>My favorite color is <del>blue</del> red.</p>

تگ ins :

این تگ برای ایجاد یک خط افقی زیر عبارت مورد نظر می باشد. مانند:

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

تگ sub :

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

<p>This is <sub>subscripted</sub> text.</p>

تگ sup :

این تگ برای ایجاد توان می باشد. مانند:

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

تگ q :

این تگ برای ایجاد نقل قل به کار می رود. مانند:

<p>WWF’s goal is to: <q>Build a future where people live in harmony with nature.</q></p>

تگ abbr :

این تگ برای ایجاد متن اختصار یا مخفف به کار می رود. مانند:

<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>

تگ address :

این تگ برای ایجاد هر نوع آدرسی می باشد چه مشخصات یک کتاب یا آدرس منزل و …

<address>

Written by John Doe.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

تگ cite :

این تگ برای عنوان یک کار به کار می رود. مانند:

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

تگ bdo :

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

<bdo dir=”rtl”>This line will be written from right to left</bdo>

تگ یادداشت در آموزش html :

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

<!– Comments are not displayed in the browser –>

مشخصه border :

این مشخصه برای صفت style به کار می رود و کادر حاشیه ایجاد می کند. مانند:

<h1 style=”border: 2px solid Tomato;”>Hello World</h1>

مشخصه background-image :

برای قرار دادن یک تصویر به عنوان تصویر زمینه می باشد.

<body style=”background-image:url(‘clouds.jpg’)”>

تگ picture :

این تگ برای تصاویر و دادن مشخصات برای نمایش آن تصویر می باشد. مانند:

<picture>

  <source media=”(min-width: ۶۵۰px)” srcset=”img_pink_flowers.jpg”>

  <source media=”(min-width: ۴۶۵px)” srcset=”img_white_flower.jpg”>

  <img src=”img_orange_flowers.jpg” alt=”Flowers” style=”width:auto;”>

</picture>

تگ های ایجاد جدول در آموزش html :

برای ایجاد جدول در زبان اچ تی ام ال چند تگ وجود دارد. اولی تگ table است که به صورت کلی برای ایجاد جدول باید ابتدا آن را بنویسید. دومی تگ tr است برای ایجاد سطر یه کار می رود. سومی تگ th است که برای عنوان به کار می رود و چهارمی تگ td است و برای ایجاد خانه ها و یا سلول های جدول به کار می رود. مانند جدول زیر:

<table style=”width:100%”>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

مشخصه colspan :

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

<th colspan=”2″>Telephone</th>

مشخصه rowspan :

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

<tr>

    <th rowspan=”2″>Telephone:</th>

    <td>55577854</td>

</tr>

تگ caption :

این تگ برای ایجاد یک عنوان کلی بیرون از جدول ولی برای جدول به کار می رود. مانند:

<caption>Monthly savings</caption>

لیست ها در آموزش html:

در این قسمت قصد داریم تا شما را با انواع لیست و شکل ظاهری آنها که یکی از موضوعات مهم در آموزش html می باشد آشنا کنیم و توضیح دهیم که چه طور می توانید انواع لیست ها مانند لیست های مرتب ، لیست های نامرتب و … را ایجاد کنید.

لیست های نامرتب :

این لیست ها ترتیب خاصی ندارند و فقط برای ایجاد موارد دلخواه به کار می روند. موارد موجود در این لیست ها با یک شکل خاص مانند دایره یا دیسک و … نمایش داده خواهند شد. همان طور که در مثال مشاهده می کنید لیست های نامرتب با تگ ul ساخته می شوند. در زیر مقادیر این شکل ها را مشاهده می کنید.

Disc : این مقدار شکل دایره توپر را به موارد لیست شما اضافه می کند.

Circle : این مقدار شکل دایره تو خالی را به موارد لیست شما اضافه می کند.

Square : این مقدار شکل مربع توپر را به موارد لیست شما اضافه خواهد کرد.

None : این مقدار هیچ شکلی ندارد و موارد لیست شما بدون شکل نمایش داده می شوند.

<ul style=”list-style-type:disc”>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

همان طور که در مثال بالا می بینید کلمه disc مشخص شده است و شما به جای این کلمه هر کدام از مقادیر داده شده در بالا را که قرار دهید شکل موارد تغییر می کند.

لیست های ترتیبی یا منظم :

در این نوع لیست ها موارد موجود در لیست با ترتیبی خاص با اعداد و … نمایش داده خواهند شد که در ادامه مقادیر این لیست ها را نیز توضیح خواهیم داد. این نوع لیست با تگ ol تعریف می شوند. در این لیست ها صفت type وجود دارد که نوع ترتیب را مشخص می کند مثلا عدد و یا حروف و …

Type = “۱” : این نوع از مقدار موارد لیست را به صورت اعداد به ترتیب نشان می دهد.

Type = “A” : این نوع از مقدار موارد لیست را به صورت حروف بزرگ انگلیسی نشان می دهد.

Type =”a” : این نوع از مقدار موارد لیست را به صورت حروف کوچک نشان می دهد.

Type = “I” : این نوع از مقدار موارد لیست را به صورت حروف بزرگ یونانی نشان می دهد.

Type = “i” : این نوع از مقدار موارد لیست را به صورت حروف کوچک یونانی نشان می دهد.

<ol type=”1″>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

در اینجا به پایان قسمت دوم از آموزش html به زبان ساده رسیدیم. در قسمت های بعدی آموزش سعی می کنیم مهمترین مطالب زبان اچ تی ام ال را با هم بررسی کنیم. پس منتظر قسمت بعدی آموزش های سایت ابزارِ دانش باشید.

۱۳۹۷-۱۱-۱۵ ۱۰:۴۱:۳۶ +۰۰:۰۰

دیدگاه خود را بنویسید

با خبرم کن

می خوای با ثبت ایمیل خودِت خیلی سریع از آموزش های جدید با خبر بشی؟