Warning: Declaration of tie_mega_menu_walker::start_el(&$output, $item, $depth, $args, $id = 0) should be compatible with Walker_Nav_Menu::start_el(&$output, $item, $depth = 0, $args = Array, $id = 0) in /home3/afgsaane/public_html/wp-content/themes/jarida/functions/theme-functions.php on line 1904
آموزش HTML و XHTML؛ شروع ساخت صفحات وب | سایت تخصصی کامپیوتر afgsaa
خانه » برنامه نویسی » HTML » آموزش HTML و XHTML؛ شروع ساخت صفحات وب

آموزش HTML و XHTML؛ شروع ساخت صفحات وب

دانلود PDF این جلسه

خب در ادامه آموزش HTML بیشتر در مورد تگ های HTML صحبت خواهیم کرد. در جلسه قبل ساختار کلی صفحات HTML و تگ ها و مشخصه (attribute) ها را یاد گرفتیم. اکنون ممکن است این سوالات به ذهنتان رسیده باشد؛

آیا همیشه باید از تگ های آغازین و تگ های پایانی استفاده کرد؟

پاسخ: خیر، در هر قانونی استثنائاتی نیز وجود دارد، در مورد تگ ها نیز استثنائاتی داریم، بعضی از تگ ها، نیاز به تگ پایانی ندارند و باز و بسته شدن آنها در یک تگ انجام می گیرد. برای مثال تگ “رفتن به خط بعد” یا break که اینگونه استفاده می شود:

<br />

در HTML این گونه تگ ها را singleton tags یا void elements می نامند. در زیر لیستی از این تگ ها را در HTML5 می بینید.

  • <area / >
  • <base />
  • <br />
  • <col />
  • <command />
  • <embed />
  • <hr />
  • <img />
  • <input />
  • <link />
  • <meta />
  • <param />
  • <source />

تگ های HTML را با حروف بزرگ بنویسیم یا کوچک؟

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

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

<html>

<head><title>My First Website< /title></head>

<body>

<p> hello world </p>

</body>

</html>

نکته: استفاده از تگ <title></title> در قسمت <head> بسیار مهم است، زیرا موتورهای جستجوگر صفحه HTML شما را با همین عنوان ایندکس می کنند و در نتایج جستجو نمایش خواهند داد.

اکنون این صفحه ساده را کمی گسترش میدهیم. ابتدا با تگ های سرتیتر (headings) آشنا می شویم؛

سر تیترها با تگ های <h1> تا <h6> معرفی می شوند؛ <h1> بیانگر بزرگترین سرتیتر  و<h6>  بیانگر کوچکترین سر تیتر است؛ HTML بطور خودکار فضای خالی اضافی  به قبل و بعد از سر تیترها اضافه می کند.

<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>

برخی تگهای ابتدایی دیگر:

تگ

توضیحات

<br />

برش خطی ایجاد می کند، (به خط بعدی می رود)

<b> متن </b>

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

<i> متن </i>

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

<u> متن </u>

متن را بصورت زیر خط دار نمایش میدهد.

<em> متن </em>

متن را بصورت مورب نمایش می دهد. مثل  <i>

<hr />

یک خط افقی نمایش میدهد.

<big> متن </big>

متن را به نسبت متن های دیگر بزرگتر نمایش می دهد.

<small> متن </small>

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

<strong> متن </strong>

متن را برجسته نمایش می دهد.

<sub>  متن </sub>

متن را به صورت پانویس نمایش می دهد.

<sup> متن </sup>

متن را به صورت بالانویس نمایش می دهد.

<del> متن </del>

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

<ins> متن </ins>

متن را به صورت جا داده شده (زیر خط دار) نمایش میدهد.

همین حالا دست به کار شوید و تمام این تگ ها را در صفحه HTML خود امتحان کنید!

<html>

     <head>

          <title> My first webpage </title>

     </head>

     <body>

               <h1>this is heading1</h1>

               <p>this is a sample paragraph: in this lesson we learned some new <strong>HTML tags</strong>, and how to use them in our web pages.<br />this is the second line of our paragraph</p>

     </body>

</html>

دانلود PDF این جلسه

درباره امیر حمزه

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

دیدگاهتان را ثبت کنید

آدرس ایمیل شما منتشر نخواهد شدعلامتدارها لازمند *

*

theme
رفتن به بالا

Warning: Parameter 1 to W3_Plugin_TotalCache::ob_callback() expected to be a reference, value given in /home3/afgsaane/public_html/wp-includes/functions.php on line 3510