در جلسه قبل با دو تگ جدید Heading و hr به خوبی آشنا شدیم و همچنین راجع به خاصیت‌ها و شیوه پیاده‌سازی آن‌ها در یک سند HTML حرف زدیم. در این مطلب قصد داریم با قالب‌دهی متنی که از طریق HTML اعمال می‌شوند و همچنین خاصیت Style آشنا شویم. در پایان نیز در رابطه با کامنت گذاری در HTML آشنا خواهیم شد.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
قالب‌دهی متنی
قبل از اینکه در رابطه با قالب‌دهی متنی آشنا شویم نیاز است که به یک مقوله بسیار مهم در رابطه با HTML آشنا شویم. برخی از تگ‌ها به سبک Block ساخته شده‌اند و برخی دیگر به سبک inline. برای درک اینکه این دو مورد دقیقا چه هستند باید به سراغ یک مثال برویم.
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>Welcome</h1> <h2>HTML</h2> </body> </html> |
آموزش پیشنهادی برای شما : آموزش کامل HTML و HTML5
حال این کدها را در یک سند HTML قرار داده و در مرورگر اجرا کنید. مشاهده خواهید کرد که علارغم اینکه دو تگ h1 و h2 در یک خط نوشته شده‌اند اما در خطوط مختلفی نمایش می‌یابند. این بدان دلیل است که h1 و h2 جزوی از تگ‌های blocking هستند. به این مفهوم که با تعریف آن‌ها، هر تگ یک خط کامل را در برگه وب به خود اختصاص می‌دهد. این موضوع بسیار مهمی است که باید حتما به آن توجه داشته باشید. از طرفی دیگر همانطور که گفته شد برخی تگ‌ها inline هستند، یعنی به همان مقداری که محتوا دارند فضا اشغال می‌کنند. برای مثال تگ strong یکی از این تگ‌ها است. به کدهای زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>Title</h1> <p>Body <strong>Text</strong></p> </body> </html> |
این کد را نیز در یک فایل html قرار داده و آن را در مرورگر اجرا نمایید. چیزی که با آن مواجه خواهید شد قرار گیری تگ strong در خط مربوط به تگ p است.
حال با درک این موضوع باید بگوییم که در زیر می‌توانید تگ‌های بسیاری را مشاهده کنید که همگی آن‌ها جزوی از تگ‌های inline به شمار می‌روند. از این تگ‌ها برای قالب‌دهی به متون HTML استفاده می‌شود.
- <b> – متن قوی
- <strong> – متن مهم
- <i> – متن کج
- <em> – متن تاکیدی
- <mark> – متن مارک شده
- <small> – متن کوچک
- <del> – متن حذف شده
- <ins> – متن وارد شده
- <sub> – متن زیرین
- <sup> – متن رویی
می‌توانید این موارد را به صورت زیر در کدهای‌تان پیاده‌سازی بکنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>This is regular text </p> <p><b> bold text </b></p> <p><em> em text </em></p> <p><i> italic text </i></p> <p><mark> mark text </mark></p> <p><strong> strong text </strong></p> <p><sub> subscripted text </sub></p> <p><sup> superscripted text </sup></p> <p><ins> inserted text </ins></p> <p><del> deleted text </del></p> </body> </html> |
خاصیت Style
همانطور که در مطلب اول از این مجموعه اشاره کردم برای آراسته کردن یک صفحه نیاز است که از CSS استفاده کنید. یکی از خاصیت‌های همگانی که در HTML وجود دارد style نام دارد. این خاصیت به ما این امکان را می‌دهد که به صورت مستقیم و inline از کدهای CSS استفاده کنیم. البته این جزوی از سر فصل اصلی نیست و فقط قصد داریم که شما را با این خاصیت آشنا کنیم.
برای مثال بیایید فرض کنید که قصد داریم یک عنوان با رنگ زرد و یک عنوان با رنگ قرمز را پیاده‌سازی بکنیم. برای اینکار می‌توانیم به صورت زیر عمل نماییم:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1 style="color:red">Red Heading</h1> <h1 style="color:yellow">Yellow Heading</h1> </body> </html> |
آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3
همانطور که مشاهده می‌کنید ما از خاصیتی با نام style استفاده کرده‌ایم. مقادیری که داخل این خاصیت قرار دارد براساس دستورات css نوشته شده است. البته باید بگویم که نیازی نیست فعلا آن‌ها را درک بکنید همینقدر کافی‌ست بدانید که با استفاده از این خاصیت می‌توانیم کدهای CSS بنویسیم.
البته قصد داریم چند مورد دیگر را نیز در این مطلب به شما نشان بدهیم.
با استفاده از مقدار background-color می‌توانید رنگ پس زمینه یک المان را تغییر دهید.
Color به شما اجازه می‌دهد که رنگ خود متن را تغییر دهید.
Font-family و font-size هر کدام به نوبت به شما اجازه می‌دهند تا نوع و اندازه فونت را تغییر دهید.
Text-align نیز قابلیت تغییر ترازبندی متون را به شما می‌دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1 style="background-color:red;">Simple</h1> <h1 style="color:red;">Simple</h1> <h1 style="font-famil:Tahoma;">Simple</h1> <h1 style="font-size: 20px;">Simple</h1> <h1 style="text-align: center;">Simple</h1> </body> </html> |
کامنت‌گذاری HTML
قبل از اینکه راجع به شیوه قرار دادن کامنت در HTML صحبت کنیم باید با تعریف کامنت آشنایی پیدا نماییم. کامنت چیست؟ سوال خیلی مهم و در عین حال ساده‌ای است.
تصور کنید شما یک فایل .html نوشته‌اید که حاوی هزاران خط کد است. برخی اوقات ممکن است یادتان رفته باشد که چرا خط برای مثال ۲۶۰ام را نوشته‌اید. برخی اوقات کدی را می‌نویسید و پس از یک هفته به آن مراجعه می‌کنید اما واقعا دلیل نوشتن آن را ندارید.
کامنت به شما کمک می‌کند که برای کدهای‌تان توضیحاتی بنویسید که تنها شما قادر به خواندن آن‌ها هستید. اینگونه می‌توانید کدهای‌تان را مرتب‌تر و بهتر بنویسید.
برای نوشتن کامنت باید آن را در بین دو دستور زیر قرار دهید:
|
1 |
<!-- Comment Here --> |
حال به کدهای زیر نگاه کنید:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- Text here will Not represent--> <p>Hello</p> </body> </html> |
در این کدها یک کامنت قرار داده شده که با اجرای فایل مشاهده خواهید کرد که هیچگونه متنی تحت عنوان Text here will Not represent در صفحه وجود ندارد.
جمع‌بندی:
ما در این مطلب با تگ‌های مربوط به قالب‌دهی متنی آشنا شدیم، همچنین خاصیت style را بررسی کردیم و در پایان نیز شیوه استفاده از کامنت را یاد گرفتیم.
