چگونه یک صفحه HTML بسازیم؟ HTML چه ساختاری را رعایت میکند؟ چگونه یک تگ HTML ساخته میشود؟ چگونه صفحه HTML استاندارد بسازیم؟ در این مقاله با ساختار کلی یک صفحه HTML آشنا میشویم.
سرفصلهای پست
ساختار HTML
با یکی دیگر از جلسات آموزش طراحی سایت در خدمت شما علاقمندان به مباحث طراحی سایت با HTML هستیم در جلسه گذشته با نرم افزارهای مورد نیاز جهت شروع کدنویسی به زبان اچ تی ام ال (HTML) آشنا شدیم و در این جلسه قصد داریم شما را با ساختار یک صفحه HTML آشنا کنیم اما لازم است که پیش از معرفی ساختار صفحات وب با مفهوم تگ آشنا شویم.
ساختار تگ ها:
تگ ھا از سه بخش تشکیل می شوند:
1 . یک علامت کوچکتر (>)
2 . نام تگ
3 . یک علامت بزرگتر (<)
مثال زیر ساختار یک تگ را نشان می دهد.
<tagname>
تگ ھا معمولا به صورت جفتی به کار می روند و ساختار جدیدی به نام عنصر (element) را تشکیل می دهند به مثال زیر دقت کنید :
<tagname> content </tagname>
ھمانطور که در مثال بالا مشاهده میکنید یک عنصر از سه قسمت اصلی تشکیل می شود: تگ آغازین، محتوای تگ (که میتواند یک متن ساده، یک عنصر دیگر و یا خالی باشد) و تگ پایانی.
به ساختار تگ پایانی توجه کنید تفاوت آن با تگ آغازین فقط در “/” است که قبل از نام تگ در تگ پایانی می آید.
بسیار خب. تا به اینجا با طریقه نوشتن تگ ھا آشنا شدید. حال به معرفی ساختار یک صفحه اچ تی ام ال میپردازیم .
ساختار اصلی یک صفحه وب (HTML) :
ھر صفحه وب یا هر صفحه اچ تی ام با یک تگ <html> شروع و به یک تگ بسته <html/> ختم می شود در واقع با این عنصر به مرورگر می گوییم که اولا با یک صفحه از نوع HTML روبه روست ثانیا صفحه با تگ <html> شروع و با تگ پایانی <html/> پایان می یابد .
در داخل عنصر html دو عنصر اصلی صفحه وجود دارند:
- عنصر <head> : این عنصر که قسمت head (سر) صفحه را مشخص میکند حاوی اطلاعاتی در مورد صفحه است. به عنوان مثال می تواند شامل عنوان و توضیحاتی در مورد آنچه در قسمت بدنه آمده است باشد. این قسمت از تگ <head> و تگ بسته <head/> و ھر چیزی که بین آنھاست تشکیل می شود.
- عنصر <body> : مشخص کننده بدنه صفحه است و در واقع حاوی اطلاعاتی است که قرار است در پنجره مرورگر نمایش داده شود. این قسمت از تگ <body> و تگ بسته <body/> و ھر چیزی که بین آنھاست تشکیل می شود.
نکته :
- معمولا آنچه که در قسمت head صفحه قرار میگیرد در صفحه نمایش داده نمی شود اما ھر آنچه که در قسمت body قرار گیرد در صفحه نمایش داده خواھد شد.
- دقت داشته باشید که ھر تگی که باز میشود باید درجایی بسته شود. که البته استثنائاتی ھم وجود دارد که بعدا به معرفی آن ها خواهیم پرداخت .
[/box]
سه عنصر <html> , <body> , <head> با ھم ساختار اصلی یک صفحه وب را تشکیل می دھند. مثال زیر ساختار اصلی یک صفحه را نمایش میدھد:
<html>
<head>
<title> Page title </title>
</head>
<body>
<p> This is a Paragraph </p>
</body>
</html>
ذکر این نکته اھمیت دارد که وقتی عناصر شامل عناصر دیگری باشند، جای قرار گرفتن آن ھا باید مناسب باشد ، یعنی ھر عنصر به طور کامل باید درون عنصر پدرش قرار گیرد. ھر وقت که از یک تگ بسته استفاده میکنید، این تگ بسته، باید وابسته به آخرین تگ بازی باشد که ھنوز بسته نشده!
به عبارتی دیگر، اول تگ A را باز کنید سپس تگ B را باز کنید، سپس تگ را ببندید و در آخر تگ A را ببندید به عنوان مثال اگر بخواهیم کلمه “پاراگراف” به صورت صخیم دیده شود بایستی از کد زیر استفاده کنیم .
<p> این یک <b> پاراگراف </b> است </p>
نتیجه کد بالا :
اما کد زیر نادرست است و باعث میشود که نه فقط کلمه “پاراگراف” بلکه ھر کلمه ای که بعد از آن بیاید نیز به صورت ضخیم درآید، که این امر یک اشکال در کدنویسی محسوب می شود.، زیرا تگ بسته <b/> داخل تگ <p> قرار نگرفته است :
<p> این یک <b> پاراگراف است </p></b>
نتیجه کد بالا :
پایان ترم
خب ببینیم که یاد گرفتید یا نه؟
[box type=”info” class=”question-from-users” width=””]سوال:
یک عنصر به نام a را تعریف کنید و عبارت “من حداکثر تلاشم برای یادگیری HTML را به کار خواهم گرفت” را در آن قرار دهید و کد نهایی را برایمان ارسال کنید.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
تا اینجا با ساختار تگ ھا و طریقه نوشتن و قواعدشون آشنا شدید. در مطلب بعدی به معرفی صفات تگ ھای اچ تی ام ال میپردازیم.
امیدواریم این جلسه هم براتون مفید بوده باشه و در جلسه بعدی ببینیمتون.
42 پاسخ
سلام
سلام شبنم. ممنون از تلاشت امیدوارم تا الان خیلی خوب یاد گرفته باشی HTML رو.
سلام
من حداکثر تلاشم برای یادگیری HTML را به کار خواهم گرفت
تو vscode اول رو تایپ کردم و در انتها تگ بسته رو گذاشتم ، اگه جابجا دیده میشه ، دلیلش مشکل رایج فارسی و انگلیسی نوشتن در کنار هم هست 🙂
سلام امیر درسته ممنون بابت تعاملت.
این هم تصویرش
سلام حسین ممنون از تعاملت درسته
سلام
تو VS code نوشتم سعی کردم یکم CSS هم بهش بدم تا خوشگل شه
برای href تگ a هم ادرس همین صفحه را وارد کردم
سلام حسین مرسی از سلیقت.
سلام
جواب تمرین اول
سلام
👌
بصورت تصویری
سلام کیوان ممنون ازت بابت تعاملت
من حداکثر تلاشم برای یادگیری اچ تی ام ال را به کار خواهم گرفت
سلام کیوان درسته کاملا آفرین.
سلام این جواب درسته ؟
سلام
تگ انتهایی یا بسته a رو درج نکردی
Salam In Ham Az Code
درود بر تو امیر حسین. خیلی عالی. چقدر خوب که HTML رو bold کردی.
سلام. خیلی ببخشید کامپیوتر در دسترس نبود با گوشی نوشتم.
بفرمایید پاسخ سوال:
عنصر a ایجاد نکردی پیام، این با تگ p نوشته شده.
پاسخ رو به صورت عکس فرستادم
سلام محمد، باید کدت رو نمایش بدی توی عکس.
سلام و مرسی بابت آموزش خوب و مفید اینم جواب سوال!!
سلام فرهان، توی تصویرت چیزی معلوم نیست متاسفانه.
من حداکثر تلاشم برای یادگیری HTML را به کار خواهم گرفت
سلام علی اکبر، لطفا کدهاتو به صورت تصویری ارسال کن. ممنونم.
پاسخ سوال :
من حداکثر تلاشم برای یادگیری HTML را به کار خواهم گرفت
سلام محمد، ممنون از پاسخگوییت. به زودی جایزهات را در میزفا آکادمی میگیری.
با سلام.
همونطور که قبلاً عرض کردم من نامم اسی است.
من برای منوهای باز شونده کدهایی رو که معرفی کردید وارد کردم اما تغییری ایجاد نشد میشه خودتون یه توضیحی از توی آموزش های خودتون بدید.
ممنون
احسان
سلام اسی، نمونه کدت رو بفرست راهنماییت کنیم. مقاله نوید واقعا خیلی خوب توضیح داده بهتر نمیشه گفت.
سلام من بر طبق معارفه ای که باشما وهمکارانتان داشتم مزاحم همیشگی ، اسی هستم.
من قبلا” ازتون سوال کرده بودم که برای کشویی کردن منو باید چیکار کنم وشما یکسری کد معرفی کردیدکه من وارد کردم ولی کشویی نشد .میشه خودتون یه توضیح کامل بدید.
ممنون
اسی
سلام اسی،
نوید تو یه مقاله خیلی کامل اومده و این مورد رو آموزش داده.
مقاله منوهای بازشونده در CSS را بررسی کن.
سلام . بنده بر طبق معارفه ی که قبلا” داشتیم اسی هستم.وسوالی دارم اگر من کل صفحه سایتم سفید رنگ باشه وفقط بخوام متنم زمینه اش مثلا” آبی باشه باید چیکار کنم
ممنون
اسی
سلام اسی جان،
آموزش CSS میزفا رو مطالعه کن.
برای این کاری که میگی کافیه یه class مشخص بکنی و بهش background-color بدی.
سلام بالا که یه کد گذاشتین(اولیش) کلمه ی paragraph رو اشتباه نوشتین خواستم اینو بگم تا سایتتون نمرش بیست از بیسته بشه بیست و یک
سلام رضا جان.
ممنونم از این همه دقت بالا.
واژه HTML مخفف کلمات Hypertext Mark Language است. اگر شما کمی با علم کامپیوتر آشنایی داشته باشید در صورت شنیدن کلمه طراحی صفحات وب مطمئنا اولین چیزی که به ذهن می رسد واژه HTML است.این واژه مخفف کلمات Hypertext Mark Language است. این واژه در اصل نام نوعی زبان برنامه نویسی است که در داخل notepad نوشته می شود. این زبان در واقع پایه ی تمام زبانهای برنامه نویسی طراحی صفحات وب است که دستورات آن به طور ساده بین تگ قرار می گیرد.
برای کسب اطلاعات بیشتر و صحیح در این مورد به لینک روبرو مراجعه نمایید: https://mizfa.com/blog/what-is-html/
سلام ایران کالج عزیزم.
ممنون که این اطلاعات خوب رو داخل میزفا به اشتراک گذاشتی.
فقط ما چون داشتی اشتباها لینک سازی میکردی مقاله خودمون رو لینک کردیم به کامنتت به جای اون یکی لینک :] اینطوری دیگه جواب نمیده لینک سازی ها اگر میخواین توی لینک هاتون پیشرفت کنین، حتما مقالات ما در مورد بک لینک ها رو بخونین.
راستی HTML زبان برنامه نویسی نیست.
موفق باشید.
Html یه زبان کد نویسی نیست ؟؟پس چیه
زبان نمادگذاری هست.
با کدنویسی میشه هر کاری کرد ولی با نمادگذاری نمیشه هر کاری کرد.
سایت تون عالی دمتون گرم…
خواهش میکنم.