بــیــگ تــم
مرجع قالب وردپرس ، افزونه وردپرس ، آموزش وردپرس ، هاست وردپرس

جستجو
فقط جستجو من
جستجو در عنوان
جستجو در محتوا
جستجو در دیدگاه ها
جستجو در خلاصه ها
Filter by Custom Post Type
برگه‌ها
پیش نمایش فرم
اسلایدر دلخواه

خانه / آموزش طراحی سایت با html / اموزش تگ های HTML (قسمت اول)

اموزش تگ های HTML (قسمت اول)

ھمه صفحات وب با استفاده از دستورالعمل ھایی ساخته شده اند که به آنھا برچسب
است Hyper Text Markup Language گویند که مخفف کلمه HTML ھا یا تگ ھای
شامل : HTML اصلی ترین تگ ھا و بدنه یک فایل

<html> نشان گر نوع فایل
<head> قسمت سر یا فرم کلی صفحه
<title> </title> عنوان صفحه
</head>
<body> قسمت بدنه یا بخش قابل نمایش در مرورگر
</body>
</html>

نکاتی که اگر انجام نشود مشکلی پیش نمی آیدولی اگر انجام شود بهتر است:
نکته ١:پس از شروع ھر تگ لازم است با علامت / پایان آن را اعلام کنید.
نکته ٢:بھتر است کدھا را با حروف کوچک بنویسید.
استفاده نمود و ھنگام ذخیره سازی Notepad نکته ٣:برای نوشتن کدھا میتوان از برنامه
استفاده نمایید. UTF_ ذخیره کرده و از 8 .HTML آن را با پسوند
سایر تگ ھا:

<b> تگ:
این تگ باعث می شوند متن مورد نظر پر رنگ شود مثال:

<html>
<head>
<title> Test </title>
</head>
<body>
<b> سلام دنیا </b>
</body>
</html>
به جای این تگ میتوان از تگ های </i> <i> برای ایتالیک کردن واز </small> <small> برای کوچک کردن متن استفاده کرد.

<br> تگ
میباشد یعنی باعث میشود متن شما به سطر بعد منتقل شود Enter این تگ مانند کلید
این تگ نیازی به تگ بسته ندارد. مثال

<html>
<head>
<title> Test </title>
</head>
<body>
سلام دنیا <br>
این یک تست است <br>
</body>
</html>

<h بزرگترین عنوان و < 6 <h ایجاد می شوند که< 1 <h تا < 6 <h عنوان ھا توسط تگ ھای< 1
کوچترین عنوان را ایجاد می کند. مثال:

<html>
<head>
<title> Test </title>
</head>
<body>
<h این یک تست است< 1 </h1>
<h این یک تست است< 2 </h2>
<h این یک تست است< 3 </h3>
<h این یک تست است< 4 </h4>
<h این یک تست است< 5 </h5>
<h این یک تست است< 6 </h6>
</body>
</html>

<p> تگ
این تگ باعث ایجاد یک پاراگراف می شود. مثال:

<html>
<head>
<title> Test </title>
</head>
<body>
<p> سلام دنیا </p>
<p> این یک تست است </p>
</body>
</html>

<center> تگ
این تگ باعث می شود متن یا ھرچیز دیگری در وسط صفحه قرار بگیرد. مثال:

<html>
<head>
<title> Test </title>
</head>
<body>
<center>
این یک تست است
</center>
</body>
</html>

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

<html>
<head>
<title> Test </title>
</head>
<body>
<p> سلام دنیا
<hr>
این یک تست است </p>
</body>
</html>

توضیحات
نوشتن توضیحات در یک صفحه باعث میشود برای ویرایش ھای مجدد آن فایل کمتر دچار
دردسر شویم در ضمن مرورگر توضیحات را نادیده گرفته و آن ھا را نمایش نمیدھد.مثال:

<html>
<head>
<title> Test </title>
</head>
<body>
<– این یک تست است –!>
<p> سلام دنیا </p>
</body>
</html>

استفاده نمود <font> برای تعیین نوع سایز ورنگ فونت می توان از برچسب
<font face= Tahoma> این یک تست است </font> تعیین نوع فونت
<font size= این یک تست است < 2 </font> سایز فونت
<font color=red> این یک تست است </font> رنگ فونت
<font face=Tahoma size=2 color=red> این یک تست است </font> به صورت کلی

تصاویر

استفاده می کنیم این تگ ھم شامل <img> برای ایجاد یک تصویر در صفحه از تگ
پارامترھایی از قبیل آدرس تصویر و حاشیه وغیره می باشد این تگ نیازی به تگ بسته
ندارد
<img src=”/image/logo.png”> آدرس عکس جھت نمایش در مرورگر
<img src=”/image/logo.png” border= حاشیه دور عکس < 0
<img src=”/image/logo.png” alt=”test”> نوشتن توضیحات برای عکس
<img src=”/image/logo.png” width=70 height= تعیین سایز تصویر < 60

مثال:

<html>
<head>
<title> Test </title>
</head>
<body>
سلام دنیا <br>
<img src=”/image/logo.png” width=70 height=60>
</body>
</html>

align ویژگی
با این ویژگی می توان تراز شدن متن وتصویر را تنظیم کرد. مثال:

<body>
این یک
<img src=”/image/logo.png” width=70 height=60 align=”middle”>
تست است
</body>

لینک ھا
جھت ایجاد یک پیوند یا لینک با صفحه یا فایل دیگر استفاده می شود <a> از تگ
این تگ ھم شامل مشخصاتی نظیر آدرس مقصد و نوع نمایش میباشد.مثال:

<a href=”http://gallery25.wordpress.com/”>Barkhord</a>

آدرس و عنوانی جھت نمایش درصفحه:

<a href=http://gallery25.wordpress.com/ target=”_blank “>Barkhord</a>

نوع نمایش یعنی باعث میشود لینک در پنجره ای جدید باز شود:

_parent لینک در ھمان قاب باز خوا ھد شد
_top ( لینک در ھمان پنجره باز خواھد شد (برای خارج شدن از قاب
_self لینک در ھمان پنجره باز خواھد شد

لینک به یک آدرس ایمیل:

<a href= “mailto:mfatemian@gmail.com”> تماس </a>

ساخت لینک بر روی تصاویر:

<a href=” http://gallery25.wordpress.com”><img src=”/image/logo.png”></a>

به جای عنوان از آدرس یک عکس استفاده کنید
*نکات:
1-این اموزش شامل 3بخش است که دو بخش بعدی آن را در چند روز بعدی خواهیم گذاشت.
موفق باشید

منبع: bigtheme

 

 

باکس دانلود

4 دیدگاه

  1. داداش آخرین کدی که قرار دادی تگ img درست نبستیش / رو یادت رفته :)))))

  2. اون کلمهTest که تو هر نوشته دارید چیه؟معنیشو میگم
    کنار هر تگی که مینوسیم باید معنیشوهم بنویسیم؟

    • هادی قربانی

      یعنی همون تست به جای اون مثلا متن مورد نظر باید قرار بگیره


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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دنبال کردن