فهرست
تگ <i>

تک <u>

تگ <strong>

تگ <em>

تگ <big>

تگ <small>

تگ <del>

تگ <ins>

تگ <mark>

تگ <sup>

تگ <sub>

تگ <q>

تگ <abbr>

تگ <address>

تگ <cite>

تگ <samp>

تگ <code>

تگ <var>

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

  • قرار دادن کامنت در html 

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

حالا اصلا چرا باید از کامنت استفاده کنیم؟ باید حواسمون باشه که در برنامه نویسی ما 2 یا 4 خط کد نمی نویسیم بلکه ممکنه به چند هزار خط برسه کد هایمان حالا اگه از کامنت استفاده نکنیم بعد از مدتی، فهمیدنه این کد ها که هر کدام در کجا استفاده شده اند خیلی دشوار میشه  پس برای راحتی درک بیشتر در کدهایمان و همینطور راحتی در دیباگ (Debug) کردن برنامه مان از اهمیت بسیار بالایی برخوردار است.

به تصویر زیر دقت کنید:

<!-- Write your comments here -->

 

در قسمت “Write your comments here” کامنت خودتون رو مینویسید

خب در این جلسه می خواهیم درباره تگ های تحت عنوان text-formatting صحبت کنیم همان طور که می دانید بعضی مواقع نیاز پیدا می کنیم که یک حالت خاصی را به متنمان دهیم به عنوان مثال : من می خواهم یک نوشته ای را داشته باشم که bold شود در جلسه قبل دیدیم که اینکار را در style با استفاده از font-weight انجام دهیم اما میشود همینکار رابا <b> هم انجام دهیم

برای مثال :

<html>
  <head>
  </head>
  <body>
    <b> amoozesh HTML </b>
  </body>
</html>

 

 خودتون این کد رو اجرا کنید! 

  • تگ <i> 

یعنی متن مان را ایتالیک (italic) می کند ( به عبارتی شیب میده به متنمون) کد زیر رو اجرا کنین و نتیجه کار رو ببینین.

<html>
  <head>
  </head>
  <body>
    <i> amoozesh HTML </i>
  </body>
</html>

  • تک <u>

زیر متنمان خط می کشد (under line)

<html>
  <head>
  </head>
  <body>
    <u> amoozesh HTML </u>
  </body>
</html>

  • تگ <strong>

 

در واقع این تگ از لحاظ ظاهری همانند bold است اما این تگ جزو تگ های معنایی است ! یعنی به موتور جستوجو می گوید که این کلمه در این صفحه از اهمیت ویژه ای برخوردار است. مثلا کلمه ی ‘ html ‘ در زیر از اهمیت ویژه ای برخوردار است  :

<html>
  <head>
  </head>
  <body>
    <p> برای شروع کد نوسی <strong> html </strong> باید بدانیم که همه چیز <p>
  </body>
</html>

 

توجه :  درنتیجه اگر بخواهیم رتبه سایتمان در موتورهای جستوجو از رتبه خوبی برخوردار باشد باید کلمات کلیدی متنمان را مشخص کنیم و آنها را در تگ <strong> قرار دهیم.

  • تگ <em>

 

این تگ برای تاکید است.

<html lang="fa-IR">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <p> آموزش <em> Html </em> الکتروپروگرام <p>
   </body>
</html>

  • تگ <big>

 

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

<html lang="fa-IR"> 
  <head> 
    <title>ELectroProgram</title> 
  </head> 
  <body> 
    <p> آموزش <big> Html </big> الکتروپروگرام <p> 
  </body> 
</html>

  • تگ <small>

 

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

<html lang="fa-IR">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <p> آموزش <small> Html </small> الکتروپروگرام <p>
   </body>
</html>

  • تگ <del>

 

به معنای deleted

فرض کنید فروشگاهی تخفیف زده که به این صورت می شود

نتیجه کار کد 
<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <del> 100$ </del> &nbsp; <ins>80$</ins>
   </body>
</html>

 

  • تگ <ins>

 

تگ ins که در مثال بالا استفاده شده همانند تگ <u> عمل می کند یعنی زیر عبارت خط می کشد. اما موارد استفاده از آنها متفاوت است

تگ ins در مقابل تگ del قرار دارد و برای مشخص کردن محتوایی که به تازگی به سایت اضافه شده از این تگ استفاده می‌شود.

  • تگ <mark>

 

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

<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <p>
     salam <mark> amirhossein </mark> khobi!?
    </p> 
   </body>
</html>

  • تگ <sup>

 

علائمی مانند زیرنویس و بالا نویس داریم فرض کنید می خواهیم بنویسم x به توان 2 (x^2) از تگ <sup> استفاده می کنیم که اندکی متن را کوچک و بالا میبرد.

نتیجه کار کد 
<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <p>
       x<sup>2</sup>
    </p> 
   </body>
</html>

  • تگ <sub>

 

قسمتی از متن را کوچک و به پایین میاورد

نتیجه کار کد 
<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <p>
       H<sub>2</sub>O
    </p> 
   </body>
</html>

  • تگ <q>

 

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

نتیجه کار کد 
<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <p>
     salam <q> amirhossein </q> khobi!?
    </p> 
   </body>
</html>

 

و اگر نقل و قولی داریم که طولانی باشد یا مثلا چند بخش باشد می توانیم از تگ <blockquate> استفاده کنیم و می توانیم از اسم سایتی را که مثلا آن متن را از آن گرفتیم را هم به آن بدهیم برای مثال:

<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <blockquote cite="https://electroprogram.ir">
        salam amirhossein khobi<br/>
        salam reza<br/>
        salam ali<br/>
    </blockquote> 
   </body>
</html>

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

  • تگ <abbr>

 

این تگ از ما یک title میگیرد برای مثال:

نتیجه کد کد 
<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <abbr title="Islamic Republic Iran"> IRIB </abbr>
   </body>
</html>

همانطور که میبینین بعد از اجرا، مرورگر IRIB را نشان میدهد اگر با موس روی آن نگه داریم آن متنی که در title نوشتیم را میبینیم

  • تگ <address>

 

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

نتیجه کد کد 
<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <address> address </address>
   </body>
</html>

  • تگ <cite>

 

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

مثلا فلان کتاب یک اسمی دارد این اسم در تگ cite قرار می دهیم.

برای مثال:

نتیجه کد کد 
<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <P>
       <cite> مدیر مدرسه</cite> توسط جلال آل احمد
    </P>
   </body>
</html>

خب حالا اسم مدیر مدرسه که در تگ < cite> قرار داده شده موتور جستوجو آن را به عنوان اثر خواهد شناخت.

  • تگ <samp>

 

sample ، می تواند به عنوان نوشتن خروجی کامپیوتر استفاده شود. مثلا می خواهیم بگوییم که خروجی اجرای این برنامه x=35 است که آن را با فونت خاص خودش نشان می دهد. 

<samp> x=35 </samp>

  • تگ <code>

 

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

نتیجه کد کد 
<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <code>
        var i=0;
        document.get Element By Id('dl').value=i;
    </code>
   </body>
</html>

همانطور که در تصویر بالا میبینید فاصله ی بین کد جاوا اسکریپت ما رعایت نشده. ما می خواستیم کد خط دوم بیاید زیر var i=0 قرار گیرد

برای انجام اینکار میاییم از تگ دیگری به نام <pre> استفاده می کنیم. درواقع این تگ space ها را رعایت می کند

نتیجه کد کد 
<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <pre>
        <code>
            var i=0;
            document.get Element By Id('dl').value=i;
        </code>
    </pre>
   </body>
</html>

  • تگ <var>

 

فرمول های ریاضی را نشان می دهد.

نتیجه کد کد 
<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <var> 
        E = mc<sup>2</sup>
    </var>
   </body>
</html>

به صورت همان فونت های ریاضی به ما نشان می دهد.

خدارو شکر جلسه دوم هم تموم شد تا جلسه بعد خدانگهدارتون

جلسه بعد
جلسه قبل
5 3 رای
رتبه بندی مقاله
guest
0 دیدگاه
بازخورد درون خطی
مشاهده همه نظرات