تگ ها در html در واقع پایه ترین مفهوم html و حتی طراحی وب میباشد,ساختار یک وب سایت بر اساس تگ هایی که در آن استفاده شده است تعیین میشود,ما در این مقاله میخواهیم به صورت کامل و جامع همراه با مثال های متنوع تگ ها را توضیح دهیم.
تعریف اصطلاحی تگ در html
اگر بخواهیم یک تعریف کلی از تگ به صورت اصطلاحی داشته باشیم باید بگوییم که تگ ها در html ساختار یک وب سایت را تشکیل میدهند.تگ ها در html به دو دسته تقسیم میشوند.تگ هایی که اطلاعاتی را در مورد وب سایت به مرورگر میدهند و تگ هایی که عناصری را به کاربر نمایش میدهند.
<!DOCTYPE html> <html> <head> <title>من یک تگ title هستم</title> </head> <body> <h1>من یک تگ h1 هستم</h1> <p>من یک تگ پاراگراف هستم</p> </body> </html>
در بالا شما میتوانید یک مثال خیلی ساده از کد html را مشاهده کنید,در ادامه این ساختار را بیشتر توضیح میدهیم و کاملا به شما آموزش میدهیم, پس مقاله را تا آخر مطالعه کنید.
ساختار تگ در html چگونه است
در زبان برنامه نویسی html ساختار تگ بسیار آسان است,ساختار تگ در html به صورت <tag> و </tag> باز و بسته می باشد که میتوان از آن ها برای نمایش عناصری همچون متن,ویدیو و عکس استفاده کرد,در پایین چند مدل از ساختار تگ را برای شما نمایش داده ایم,لازم به ذکر است که شما نیازی ندارید آن ها را به صورت کامل فرا بگیرید و در اینجا تنها مثال هایی را برای شما ارایه میدهیم.
<p></p> // نمونه ای از تگ های باز و بسته <input type="text" name="name" placeholder="your name"/> // نمونه ای از تگ های تکی
تگ های باز و بسته در html
تگ های باز بسته در html به تگ هایی گفته می شود که درون آن ها یک سری محتوا قرار می دهیم.این تگ ها با سینتکس <> و </> باز و بسته میشوند.عموما اکثر تگ های html به این صورت می باشند,در پایین چند نمونه مثال از این تگ هارا برای شما آورده ایم.
<p>این یک پاراگراف است</p> //تگ p برای درج پاراگراف <div>این یک تگ دیویژن است</div> // تگ دیویژن برای درج یک بلاک <span>این یک تگ span است</span> //تگ span برای درج یک اینلاین
در بالا نمونه هایی از تگ های باز و بسته مختلف را مشاهده می کنید که برای درج کردن پاراگراف,بلوک و اینلاین ها استفاده میشوند.عموما این تگ ها بیشتر تگ های html را تشکیل میدهند.
تگ های تکی در html
تگ های تکی در html به تگ هایی گفته میشود که عناصر باز و بسته را دارا نمیباشند.این تگ ها عموما برای درج عناصر غیر متنی مانند ورودی ها,عکس ها و ویدیو و …. استفاده میشوند که در آینده کاملا آن هارا مورد بررسی قرار میدهیم.
<img src="../your_url"> // تگ برای درج عکس می باشد <input type="text" name="name" placeholder="name"/> // تگ برای ورودی متنی می باشد
در بالا دو نمونه از تگ های تکی را برای شما آورده ایم که در مقالات بعدی آن ها را کاملا شرح میدهیم..
مثال هایی از تگ های مختلف در html
در اینجا میخواهیم مثال هایی از تگ های مختلف را برای شما بی آورریم بیایید با 5 مثال شروع کنیم.در اینجا میخواهیم تگ های پاراگراف,دیویژن و همچنین تگ های بدنه و سربرگ ها را مورد بررسی قرار دهیم.
تگ پاراگراف در html
تگ پاراگراف در html تگی است که یک پاراگراف را درج میکند برای مثال شما میخواهید 3 پاراگراف را در متن خود ایجاد کنید برای این کار باید از سه تگ p استفاده کنید.
<p>این یک متن تستی است</p> <p>این یک متن تستی دیگر است</p>
در اینجا از دو عدد تگ پاراگراف استفاده شده است اولی برای متن اول است و دومی برای پاراگراف دوم می باشد.
تگ div در html
تگ div در html در واقع به تنهایی کاربرد خاصی برای خود ندارد,در واقع وقتی عنصری درون این تگ قرار میگیرد میتوان گفت باعث میشود که آن عنصر کل عرض آن قسمت را برای خود تصاحب کند,اگر این قضیه را متوجه نشده اید نگران نباشید ما در یک مقاله جداگانه کاملا به این موضوع میپردازیم.
<div> من یک تگ div هستم من میتوانم عرض کامل بک پاراگراف را تصاحب کنم </div> <div> من تگ div دوم هستم من میتوانم یک پاراگراف را کاملا تصرف کنم </div>
در مثال بالا از دو تگ دیویژن استفاده شده است که بر اساس چیزی که ما برای شما شرح داده ایم باید دو پاراگراف را به صورت کامل برای خود تصاحب کند.
تگ body در زبان html
تگ body در html تگ والد برای نمایش عناصر میباشد در واقع هر تگی که بخواهیم چیزی روی صفحه برای ما نمایش دهد را درون این تگ قرار می دهیم.
سخن پایانی
خب به صورت خیلی مختصر تگ ها و چیستی آن را بررسی کردیم امیدوارم از این مقاله لذت کامل را برده باشید.