با سلام خدمت شما دوستان عزیز ، در این قسمت از آموزش های وب می خواهیم به معرفی و آموزش تگ های HTML بپردازیم ، پس در ادامه این آموزش با ما همراه باشید …
ھمه صفحات وب با استفاده از دستورالعمل ھایی ساخته شده اند که به آنھا برچسب
است Hyper Text Markup Language گویند که مخفف کلمه HTML ھا یا تگ ھای
شامل : HTML اصلی ترین تگ ھا و بدنه یک فایل
<html> نشان گر نوع فایل
<head> قسمت سر یا فرم کلی صفحه
<title> </title> عنوان صفحه
</head>
<body> قسمت بدنه یا بخش قابل نمایش در مرورگر
</body>
</html>
تگ های HTML چیست؟
تگ های HTML برای نشانه گذاری عناصر در صفحه بکار میره ، هر تگی که شروع میشه باید بسته بشه .
نکاتی که اگر انجام نشود مشکلی پیش نمی آیدولی اگر انجام شود بهتر است:
نکته ١: پس از شروع ھر کدام از تگ های HTML لازم است با علامت / پایان آن را اعلام کنید.
نکته ٢: بھتر است کدھا را با حروف کوچک بنویسید.
استفاده نمود و ھنگام ذخیره سازی Notepad نکته ٣:برای نوشتن کدھا میتوان از برنامه
استفاده نمایید. UTF_ ذخیره کرده و از 8 .HTML آن را با پسوند
سایر تگ ھا:
تگ های HTML ، تگ <b> :
این تگ باعث می شوند متن مورد نظر پر رنگ شود اگر از مجموعه آفیس استفاده کرده باشید باید با کاری که این تگ انجام میدهید آشنا باشید ، کاری که انجام می دهد در واقع همان دکمه BOLD در آفیس است . مثال:
<html>
<head>
<title> Test </title>
</head>
<body>
<b> سلام دنیا </b>
</body>
</html>
نکته: با توجه به مشخصات HTML5، تگ <b> باید به عنوان آخرین راه حلی باشد که به کار می رود و در شرایطی از آن استفاده می کنیم که هیچ تگ مناسب تری موجود نباشد. در HTML5 برای عناوین از تگ ها <h1> تا <h6> ، برای نمایش تاکید شده متن از تگ <em>، برای متن های مهم از تگ <strong> و برای متن های هایلایت شده از تگ <mark> استفاده می کنیم.
به جای این تگ میتوان از تگ های </i> <i> برای ایتالیک کردن (مورب کردن متن ) و از </small> <small> برای کوچک تر کردن متن استفاده کرد.
تگ های HTML تگ <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>
تگ های HTML تگ <p> :
این تگ باعث ایجاد یک پاراگراف می شود. مثال:
<html>
<head>
<title> Test </title>
</head>
<body>
<p> سلام دنیا </p>
<p> این یک تست است </p>
</body>
</html>
تگ های HTML تگ <center> :
این تگ باعث می شود متن یا ھرچیز دیگری در وسط صفحه قرار بگیرد. مثال:
<html>
<head>
<title> Test </title>
</head>
<body>
<center>
این یک تست است
</center>
</body>
</html>
تگ های 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
بیگ تم منبع افزونه وردپرس ، قالب وردپرس ، آموزش وردپرس
یعنی همون تست به جای اون مثلا متن مورد نظر باید قرار بگیره
اون کلمهTest که تو هر نوشته دارید چیه؟معنیشو میگم
کنار هر تگی که مینوسیم باید معنیشوهم بنویسیم؟
ممنون که خبر دادی درست شد
داداش آخرین کدی که قرار دادی تگ img درست نبستیش / رو یادت رفته :)))))