طراحی سایت در تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
۰۹۱۲۰۱۹۹۳۸۶   ۰۲۱۸۸۴۷۱۵۲۱

آموزش HTML – بخش دوم

آموزش HTML | آموزش HTML5

در آموزش HTML – بخش دوم مطالب زیر را خواهیم آموخت:

  • آشنایی با چند تگ مهم در HTML
  • آشنایی با خصیصه style

آشنایی با چند تگ مهم در HTML

در این جلسه با تگ های سرصفحه، رسم خطوط افقی برای جدا کردن بخش های مختلف، تگ <head>  ، پاراگراف و تگ <pre>  آشنا خواهیم شد.

تگ های سر صفحه در HTML

یکی از مهم ترین بخش ها در هر سند HTML، تگ های سرصفحه هستند. همانطور که قبلا گفته شد، تگ های سر صفحه عبارتند از <h1>  تا <h6>  و گفتیم که اندازه و اهمیت سر صفحه ها به این ترتیب است که تگ <h1>  بیشترین اهمیت و اندازه را داراست و به همین ترتیب تا تگ <h6>  که کمترین اهمیت و اندازه را به خود اختصاص داده است. اما چرا این تگ ها مهم می باشند؟

دو دلیل اساسی را میتوان برای این نکته ذکر کرد:

  1. این تگ ها ساختار صفحه و محتوا را برای موتور های جستجو تشریح می کنند.
  2.  شمایی که در حال مطالعه این متن هستید، حتما می خواهید بدانید که در این بخش از آموزش طراحی سایت چه مباحثی تشریح شده است؟ از طریق این سر صفحه ها، که اندازه آن از بقیه متن ها بزرگتر است، می توانید عناوین اصلی را شناسایی کنید و یک شناخت کلی نسبت به محتوا پیدا کنید.

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

همانطور که در عکس بالا می بینید، بین هر عنوان تا عنوان بعدی فاصله ای ایجاد شده است. به این دلیل که مرورگرها به طور خودکار برای هر المان از هر سند HTML فاصله ای خالی، تا المان بعدی را در نظر می گیرند که به آن فاصله خارجی ( margin ) می گوییم. این اندازه ها را میتوان با استفاده از CSS تغییر داد که در بخش های بعدی با این موضوع به طور کامل آشنا خواهید شد.

نکته دیگری که باید متذکر شویم این است که بعضا مشاهده شده که بعضی از افراد برای برجسته کردن قسمتی از متن ها از این تگ ها استفاده می کنند. این نکته را از الان در ذهن داشته باشید که برای تاکید بر عبارتی که درون متن ها هستند از تگ های مخصوص به این کار استفاده می کنیم ( که در ادامه این آموزش ها به آنها خواهیم پرداخت ). تگ های Heading یا سر صفحه، صرفا برای عناوین اصلی یک متن به کار می روند.

 خطوط افقی

برای رسم یک خط افقی در صفحه و جدا کردن یک بخش از بخش دیگر از تگ <hr>  استفاده می کنیم. این تگ باید مابین بخش هایی که می خواهیم از هم جدا کنیم قرار گیرد. به مثال زیر توجه کنید:

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

آشنایی با تگ <head>

اولین تگی که در تگ <html>  قرار میگیرد تگ <head>  است و در قسمت قبل گفتیم که این تگ تمام اطلاعاتی که در مورد سند است را دربر می گیرد. این اطلاعات را متا دیتا ( metadata ) می گوییم ( و شامل اطلاعاتی مانند عنوان صفحه، کاراکترست، style، لینک ها و اسکریپت ها می شود که به مرور با تمام این متادیتاها آشنا خواهیم شد. ) و در صفحه مرورگر نمایش داده نخواند شد.

به‌عکس زیر که ساختار اصلی یک سند HTML است توجه فرمایید:

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

با توجه به‌عکس بالا تگ <head>  بین تگ <body>  و تگ <html>  قرارگرفته است.

پاراگراف ها در HTML

برای نشانه گذاری هر پاراگراف از تگ <p>  استفاده می کنیم. مرورگرها به طور خودکار برای هر پاراگراف فاصله خارجی در اطراف آن در نظر می گیرند:

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

در HTML نمیتوان هر تعداد فاصله را که بخواهیم بین لغات قرار دهیم. مثلا در بین دو کلمه نمیتوان ۱۰ فاصله قرار داد. هر تعداد فاصله را که بین لغت ها قرار دهید، مروگر تنها یک فاصله را در نظر می گیرد:



آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

همانطور که قبلا گفتیم، مرورگرها به صورت پیش فرض برای هر المان ( element ) فاصله خارجی را در نظر می گیرند و هرچقدر در کدها به المان ها فاصله بدهید، مرورگرها تنها یک فاصله را اعمال می کنند. برای ایجاد فاصله های دلخواه بین المان های صفحه و بین کلمات، از CSS استفاده می کنیم.



آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

از بین تگ هایی که تاکنون آموختیم، تگ های <br>  و <hr>  به صورت تکی به کار می روند به این معنا که تگ پایان ندارند. ( به کدهای نوشته شده در مثال های قبل دقت کنید ). به این تگ ها، تگ های تهی ( empty) می گویند.

تگ <pre>

علاوه بر CSS برای نوشتن متن ها با فاصله های دلخواه، و همچنین اعمال فاصله دلخواه بین المان های صفحه، میتوان از تگ <pre> ( که سه حرف اول کلمه preformatted می باشد) استفاده کرد. این تگ دارای تگ آغاز و تگ پایان است.

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

توجه کنید که فونت پیش فرض تگ pre متفاوت است و فونت آن در مرورگرهای مختلف، متفاوت است. فونت را باید با استفاده از CSS تغییر داد.

آشنایی با خصیصه style

برای نمایش بهتر هر یک از المان های سند HTML می توان سبک های خاصی را تعیین کرد. یکی از روش های سبک دهی به المان ها استفاده از خصیصه style است. به الگوی زیر توجه فرمایید:

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

مطابق الگوی بالا، در تگ آغاز خصیصه style را می نویسیم و بعد از علامت تساوی، ویژگی های مد نظر را برای آن المان تنظیم می نماییم. در آموزش CSS با ویژگی های پر کاربرد آشنا خواهیم شد

رنگ زمینه المان ها

با استفاده از ویژگی background-color رنگ زمینه المان ها را تعیین می کنیم. در مثال زیر رنگ کل صفحه را از سفید ( که پیش فرض مرورگرهاست ) به قرمز تغییر می دهیم:

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

رنگ متن

با استفاده از ویژگی color می‌توان برای هر متن رنگ دلخواهی را تعیین کرد:

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

فونت

فونت را با ویژگی font-family انتخاب می کنیم:

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

اندازه فونت

اندازه فونت ها را میتوان با استفاده از ویژگی font-size و با واحد درصد یا px ( پیکسل ) تغییر داد:

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

هم ترازی ( Alignment ) متن ها

همانطور که در نرم افزار word می توانید متن ها را چپ چین، وسط چین و یا راست چین نمایید، در زبان HTML نیز می توانید با استفاده از ویژگی text-align این کار را انجام دهید:

آموزش HTML - بخش 2 | آموزش طراحی صفحات وب

امیدواریم که مطالب گفته شده نظر شما دوستان و همراهان گرامی را جلب کرده باشد. قسمت نظرات برای شما دوستان ارجمند در نظر گرفته شده است تا با پیشنهادات خود ما را در ارائه مطالب بهتر و مفیدتر یاری نمایید. همچنین کارشناسان سایت سازان آماده پاسخگویی به سوالات شما کاربران عزیز می باشند.

نوشته های مرتبط