عناصر در HTML
سند های HTML به وسیله عناصر HTML تعریف می شوند.
عناصر (Element)
یک عنصر در HTML، هر چیزی از تگ شروع تا تگ پایان می باشد:
تگ شروع* | محتوای عنصر | تگ پایان* |
---|---|---|
<p> | This is a paragraph | </p> |
<a href="/default.htm" > | This is a link | </a> |
<br /> |
*تگ شروع را اغلب تگ باز و تگ پایان را اغلب تگ بسته می نامند.
نحوه نوشتن یک عنصر در HTML
- یک عنصر با یک تگ شروع (تگ باز) آغاز می شود.
- یک عنصر به یک تگ پایان (تگ بسته) ختم می شود.
- محتوای یک عنصر نوشته های بین تگ شروع و پایان می باشد.
- بعضی از عناصر در HTML تهی هستند.
- عناصر تهی در همان تگ شروع بسته می شود.
- بیشتر عناصر HTML می توانند دارای خصوصیت هایی باشند.
توجه: در آموزش بعدی در مورد خصوصیت های عناصر، بیشتر توضیح می دهیم.
عناصر تو در تو در HTML
بیشتر عناصر HTML می توانند به صورت تو در تو باشند. (بدین معنی که محتوای آنها می تواند شامل دیگر عناصر HTML نیز باشد)
سندهای HTML شامل عناصر تو در توی HTML می باشند.
مثالی از یک سند HTML
<body>
<p>This is my first paragraph.</p>
</body>
</html>
مثال بالا شامل سه عنصر زیر می باشد:
1- عنصر <p>
عنصر <p> یک پاراگراف را در سند HTML تعریف می کند.
این عنصر حاوی تگ شروع <p> و تگ پایان <p/> می باشد.
محتوای این عنصر "This is my first paragraph" می باشد.
2- عنصر <body>
<p>This is my first paragraph.</p>
</body>
عنصر <body> بدنه یک سند HTML را توصیف می کند.
این عنصر دارای تگ شروع <body> و تگ پایان <body/> می باشد.
محتوای این عنصر حاوی یک عنصر دیگر (عنصر p) می باشد.
3- عنصر <html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
عنصر <html> تمام سند html را توصیف می کند.
این عنصر دارای تگ شروع <html> و تگ پایان <html/> می باشد.
محتوای این عنصر حاوی یک عنصر دیگر (عنصر body که خود حاوی عنصر <p> است) می باشد.
تگ پایان را فراموش نکنید
در بعضی عناصر HTML حتی اگر تگ پایان را فراموش کنید ممکن است آن عنصر درست عمل کند:
<p>This is a paragraph
مثال بالا در بیشتر مرورگرها درست عمل می کند، زیرا تگ بسته در اینجا اختیاری می باشد.
هرگز به این مسئله که تگ بسته اختیاری است استناد نکنید. عناصر زیادی هستند که اگر تگ پایان را در آنها ننویسید خطا می دهند یا نتایج نادرستی می دهند.
عناصر تهی
عناصری که قسمت محتوای آنها خالی است را عناصر تهی می نامیم.
عنصر <br> یک عنصر تهی و بدون تگ بسته است (تگ <br> یک خط را تعریف می کند.)
نکته: در XHTML تمام عناصر باید بسته شوند. اضافه کردن یک اسلش درون تگ شروع، مثل </br>، راه مناسبی برای بستن عناصر تهی در XHTML و XML می باشد.
نکته: تگ ها را با حروف کوچک بنویسید
تگ های HTML حساس به کوچکی و بزرگی حروف نیستند: <P> با <p> یکسان است. بیشتر وب سایت ها تگ ها را با حروف بزرگ می نویسند.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 80020
دیدگاهها
خیلی محشر و دقیق ترجمه شدع مرررررسی
با سلام و خسته نباشید.تشکر از سایت خوبتون میخواستم بدونم امکانش هست سوالات خصوصیرو از طریقه صفحه مجازی پرسید مثال تلگرام یا اینستاگرام ممنون اگر پاسخ دهید خدانگهدار.
سلام . ممنون از شما.
لطفا سوال خودتون رو با استفاده از آی دی sbaloot@ در تلگرام مطرح کنید. تا حد امکان پاسخ خواهیم داد.
سلام با عرض خسته نباشید به شما ممنون از سایتتون واقعا عالیه
یک درخواستی که داشتم این بود که اگر همه اموزش ها رو اخرش ویدیو با بخش انلاین بزارید ممنون میشم
اموزش ها مقدمه اینا داره ولی هر چه پایین تر میایم دیگه نزاشتید لطفا بزارید.
سلام، ضمن تشکر از شما، تنها 3 درس اول آموزش HTML رایگان است و برای خرید مابقی دروس HTML از لینک زیر استفاده نمایید:
beyamooz.com/product/web-design/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-html
سلام خداقوت .
سایتتون فوق العاده هستش.
ممنون.
عناصر توسط کدام مرور گرها پشتیبانی میشود؟
با سلام.
منظورتون دقیقا کدوم عناصر هست.
اکثر تگها توسط اکثر مرورگرها پشتیبانی میشن، مگر تگ خاصی که برای یه مرورگر خاص که خیلی کم پیش میاد و برای جایگزین کردنش باید به منابع رجوع کنید.
سلام.
یه سوال در مورد تگ br
اینجا گفته شده در xhtml حتما باید این تگ رو به صورت بسته نوشته شود. آیا این به این معنی میشه که اگر ما یک سند html رو با نسخه xhtml بنویسیم این تگ با حالت بسته نشده ایجاد خطا میکنه؟ اما همان سند در html5 بدون مشکل اجرا میشه؟
و یه سوال خارج از درس:
من قبل از آشنایی با این سایت از خود w3c داشتم یاد میگرفتم و حدود 15-16 فصل رفتم جلو. فصل لینکها. و تازه سایت فوق العاده شما رو دیدم و دارم از اول با شما شروع میکنم. اما ترتیب یک سری از فصلها و در مواردی هم محتویاتشون (مثل 3 سند اولیه در فصل شروع کار با html)با اونی که من میخواندم فرق میکنه. البته کمتر از 10%. آیا این مربوط به تغییرات جدید w3c میشه که شما لازم ندیدید در سایتتون اعمال کنید یا خودتون این تغییرات رو برای بهتر شدن آموزش انجام دادین؟
با سلام.
اگر تگ رو توسط / نبندید، به این معنی نیست که اشکال بگیره و کار نکنه. بلکه بهتره برای استاندارد، این مورد رعایت بشه.
در مورد سؤال دوم، هدف اصلی این سایت آموزش هست. آموزش مبتنی بر رفرنس انگلیسی آن. ان شاءالله سعی میکنیم مدنظر قرار بدیم.
با سپاس از حسن توجه شما دوست عزیز.
سلام
مرسی بابت سایت خوبتون ولی شما همه چیز رو گفتید الا اینکه چطوری پکیج رو بخریم.
سلام، برای خرید فیلم آموزش HTML از منوهای بالای سایت روی "فروشگاه" و سپس "HTML&CSS" کلیک کنید و یا روی لینک زیر کلیک کنید:
beyamooz.com/product/web-design/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-html
نهایتا برای خرید فیلم آموزش HTML، در صفحه ی بالا، روی دکمه "اضافه کردن به سید خرید" کلیک کنید و مراحل پرداخت را انجام دهید. توجه داشته باشید که بلافاصله بعد از پرداخت هزینه از طریق درگاه بانک، ایمیلی حاوی لینک دانلود فیلم آموزش HTML به ایمیل شما ارسال می شود.
با تشکر از شما
سلام اقای پهلوان صادق من فیلم جلسه اول تا سوم آموزش HTML رو دانلود و مشاهده کردم و همه رو یاد گرفتم ولی فیلم جلسه چهارم به بعد رو دسترسی ندارم لطفا رسیدگی کنید . ممنون بابت زحمت هاتون
سلام
همان طور که قبلا عرض کردم، تنها فیلم جلسه اول تا سوم بصورت رایگان قابل مشاهده هست، بنابراین در صورت لزوم شما باید آنرا خرید نمایید. در صورت تمایل می توانید از لینک زیر برای خرید پکیج آموزش HTML اقدام نمایید:
beyamooz.com/product/web-design/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-html
سلام خسته نباشید ممنون ازاموزش های که دارید خلیی عالی هستش
تفاوت بین html و xhtml چیست ؟
تشکر
با سلام و تشکر
اگه بخوام در یه جمله بگم، xhtml نسخه بهبودیافته html هست. در xhtml در واقع دو زبان html و xml با هم ترکیب شده اند.
برای آشنایی کامل شما با تفاوت این دو بهتره به لینک زیر مراجه کنید.
www.websiteha.com/post/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%D8%A8%DB%8C%D9%86-HTML-%D9%88-XHTML-%DA%86%DB%8C%D8%B3%D8%AA-%D8%9F
ایا برای یادگیری برنامه نویسی اندروید و شی گرا باید از قبل اچ تی ام ال و سی اس اس را یاد بگیریم
با سلام
زبانی که برای برنامه نویسی آندروید استفاده میشود زبان Java هست که بسیار شبیه به زبان های خانواده C یعنی C# C++ هست.
سلام.من این آموزش هایی رو که شما نوشتید مو به مو دارم تو یه دفتر مینویسم.من رفتم سراغ کدنویسی ولی بهم گفتند از همه اول باید HTML رو یادبگیری من هم به اینجا اومدم.امیدوارم مطالب سایتتون برام مفید باشه.راستی بعد HTML چی رو یاد بگیرم؟
سلام، بعد از آموزش HTML برید سراغ آموزش CSS ...
سلام سایتتون فوق العادس خیلی عالی شده
یه سوال داشتم اینکه
عناصر تهی مثل چه فایده ای دارن؟
باهاشون چیکار میشه کرد؟
این تگ ها بیشتر کاربرد ویرایش و درست کردن ظاهر زیبا برای وب سایت به کار گرفته میشه.
مثل تگ hr که یک خط افقی را رسم می کنه و یا br که یک خط فاصله رو ایجاد میکنه تا کمک کنه که متن خوانایی داشته باشید در سایتی که طراحی میکنیم.
این تگ ها بیشتر در ظاهر و چیدمان کاربرد دارند نه برای محتوا مثل br که برای شکستن خط به کار می رود. در واقع این ها تگ های ظرف نیستند که داخل آن ها محتوا قرار بگیرد
سلام
با اینکه سایتتون کپی از یه سایت خارجی هست ولی همین که خوب به فارسی ترجمه شده خیلی عالیه و کار ما رو راحت کردین.
ممنون
سلام من بهمن میخام برم طراحی وب
و میخام تا اون موقع آموزشای شمارو بخونم
HTML css
تشکر بابت سایت خوبتون :)
به نقل از یونس:
سلام، ممنون...
در این صورت شما استاندارهای HTML رو رعایت نکرده اید ولی مرورگر با هیچ مشکلی تگ مربوطه را نشان خواهد داد. توجه داشته باشید که اگر قوانین از این دست رو رعایت نکنید، در رنگ سایتتان تأثیر منفی خواهد گذاشت.
به نقل از someone:
با سلام خدمت شما، فراموش نکنید که در HTML 4.0 تگ ها به بزرگی و کوچکی حروف حساس نیستند و در XHTML حساس است و البته این یک استاندارد است و اگر از آن پیروی نشود، مرورگرها صفحه را بدرستی نمایش خواهند داد.
اگر تگ ها case sensitive نیستند و بیشتر وب سایت ها تگ ها را با حروف بزرگ می نویسند ( احتمالا برای یکپارچگی ) چرا شما می گید تگ ها را با حروف کوچک بنویسید؟؟؟؟؟
فرقی نداره ولی برای یادگیری بهتر چنین چیزی گفته میشه
سلام وقتتون بخیر،من دانشجوی برنامه نویسی تحت وب هستم سایتتون عالیه و واقعا ب من کمک میکنه.تشکراز زحماتتون.