آموزش html بخش دوم

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

تگهای عنوان در HTML

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

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

۱- این تگ‌ها به موتورهای جستجو در ایندکس کردن صفحه کمک می‌کنند و به موتورها می‌فهمانند که کدام قسمت از سندی که در حال ایندکس آن هستند مهم‌تر از بقیه است؛ و به همین ترتیب اهمیت بخش‌های مختلف هر متن در هر صفحه را برای موتورها تعیین می‌کند.

۲- شمایی که در حال مطالعه این متن هستید، حتما می‌خواهید بدانید که این بخش از آموزش طراحی سایت در مورد چه موضوعاتی است؟ از طریق این عناوین، که اندازه آن از بقیه بخش‌ها بزرگ‌تر است، می‌توانید عناوین اصلی را شناسایی کنید و یک شناخت کلی نسبت به‌کل محتوا پیدا کنید.

<!DOCTYPE html>

<html lang="en">

                <head>

                                <meta charset="UTF-8">

                                <title>Document</title>

                </head>

 

 

                <body>

 

                                <h1> عنوان ۱ </h1>

                                <h2> عنوان ۲ </h2>

                                <h3> عنوان ۳ </h3>

                                <h4> عنوان ۴ </h4>

                                <h5> عنوان ۵ </h5>

                                <h6> عنوان ۶ </h6>

 

                </body>

</html>

 

 

 

 

 

 

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

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

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

خطهای افقی

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

<!DOCTYPE html>

<html lang="en">

                <head>

                                <meta charset="UTF-8">

                                <title>Document</title>

                </head>

 

 

                <body>

 

                                <h1>   یک قسمت از صفحه</h1>

                                <hr>

                                <h2> قسمت دیگری از صفحه </h2>

                                <hr>

                                <h3> قسمت دیگر از صفحه </h3>

                                <hr>

 

                </body>

</html>

 

 

 

 

 

 

 

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

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

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

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

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

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

ایجاد یک پاراگراف در HTML

برای تعین و ایجاد هر پاراگراف از تگ <p> استفاده می‌کنیم. مرورگرها به‌طور خودکار برای هر پاراگراف white spase در نظر می‌گیرند:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title>Document</title>

          </head>

 

 

          <body>

 

                   <p> پاراگراف اول صفحه </p>

                   <p> پاراگراف دوم صفحه </p>

                   <p> پاراگراف سوم صفحه </p>

 

          </body>

</html>

 

 

 

 

 

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

نکته: متن‌ها در صفحات با اندازه‌های مختلف، همچنین در مرورگرهای مختلف، متفاوت نمایش داده می‌شوند.

نکته: از طریق زبان HTML نمی‌توان هر تعداد فاصله را که بخواهیم به متن‌ها اضافه کنیم. مثلا در بین دو کلمه نمی‌توان به تعداد دلخواه فرضا ۱۰ فاصله ایجاد کرد. هر مرورگری، فاصله‌ها را به‌صورت دیفالت خودش نمایش می‌دهد و همیشه یک‌فاصله را در نظر می‌گیرد و هرچند بار space بزنید، فقط یکی از آن‌ها در مرورگر اعمال می‌شود:

<!DOCTYPE html>

<html lang="en">

                <head>

                                <meta charset="UTF-8">

                                <title>Document</title>

                </head>

 

 

                <body>

 

                                <p> پاراگرف      بین این تگ‌ها قرار می‌گیرد </p>

                                <p>مرورگرها        فاصله‌های اضافی را   نمایش نمی‌دهند </p>

 

                </body>

</html>

 

 

 

 

 

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

نکته: همان‌طور که قبلا گفتیم، مرورگرها به‌صورت دیفالت برای هر جزء ( element ) مارجین دیفالتی را در نظر می‌گیرند و هرچند در کدها به المنت‌ها فاصله بدهید، مرورگرها تنها یک‌فاصله را اعمال می‌کنند:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title>Document</title>

          </head>

 

 

          <body>

 

                   <p>بند      بین      این      تگ‌ها      قرار     می‌گیرد</p>

 

                    <p> مرورگرها        مار جین ( فاصله بین دو جزء ) اضافی       را   نمایش     نمی‌دهند</p>

 

          </body>

</html>

 

 

 

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

نکته: برای اعمال فاصله‌های دلخواه بین اجزاء صفحه و بین کلمات، از CSS استفاده می‌کنیم.

نکته: هنگام نوشتن یک پاراگراف، برای رفتن به خط بعدی ( کاری که دکمه Enter در Word انجام می‌دهد )  باید از تگ <br> استفاده کنیم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title>Document</title>

          </head>

 

 

          <body>

 

<p> هنگام تایپ یک پاراگراف<br> برای تایپ ادامه پاراگراف در ابتدای خط بعدی <br> باید از تگ <br> br <br> استفاده کرد </p>

 

          </body>

</html>

 

 

 

 

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

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

تگ <pre>

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title>Document</title>

          </head>

          <body>

 

                   <pre>                   با     استفاده     از این     تگ

                                                 می‌توان      بین لغات

                                                 بدون استفاده از

                                                CSS

                                                 فاصله‌های     دلخواه     را

                                                 اعمال       کرد

                                                 <p> یک پاراگراف </p>

                                                 <p> پاراگراف دوم بافاصله بیشتر نسبت به پاراگراف قبل </p>

 

                   </pre>

 

          </body>

</html>

 

 

 

 

 

 

 

 

 

 

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

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

آشنایی با اتریبیوت style

تغییرات در شیوه نمایش هر جزء، برای مثال تغییر رنگ متن، را با استفاده از اتریبیوت style که در تگ آغاز نوشته می‌شود، اعمال می‌کنیم. البته این‌یکی از روش‌های اعمال تغییرات است. استفاده از CSS برای تغییرات را در آموزش CSS  در طراحی سایت به‌طور کامل خواهیم گفت.

تمام خصیصه ( property ) و مقادیر آن‌ها، در CSS هم استفاده می‌شوند. تفاوت در این است که برای CSS یک فایل جدا داریم ولی در style در همان تگ آغاز نوشته می‌شوند. Syntax اعمال Style به  این صورت است که ابتدا نام تگ نوشته می‌شود و بعد کلمه style و بعد علامت مساوی و در ادامه: “property:value; ” توجه شود که بین پراپرتی و مقدار آن ” : ”  و در انتها ” ;  ” را استفاده می‌کنیم.

<tagname style="property:value;">

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

تعیین رنگ زمینه برای اجزا

همانطورکه گفتیم هر سند HTML از اجزا، مختلفی تشکیل‌شده است. می‌توان با استفاده از پراپرتی background-color رنگ دلخواه را به هر جزء اعمال کرد:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title>Document</title>

          </head>

 

 

          <body style="background-color:red;">

 

 

                   <h1> عنوان ۱ </h1>

 

                   <p> پاراگراف‌هایی از صفحه </p>

 

          </body>

</html>

 

 

 

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

در مثال بالا رنگ کل صفحه را از سفید ( که دیفالت مرورگرهاست ) به قرمز تغییر دادیم.

 

تغییر رنگ متن در HTML

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <h1 style="color:blue;"> عنوان ۱ را از مشکی به آبی تغییر دادیم </h1>

                   <p style="color:red;"> اگر این‌یک پاراگراف باشد، آن را به رنگ صورتی تغییر می‌دهیم! </p>

 

 

          </body>

</html>

 

 

 

 

 

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

تعیین فونت برای متن‌ها در HTML

فونت را با اتریبیوت font-family تعیین می‌کنیم

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <h1 style="font-family:Myriad عربي;"> عنوان دلخواه </h1>

                   <p style="font-family:A Shekari; font-size: 40px"> قسمتی از یک پاراگراف </p>

 

 

          </body>

</html>

 

 

 

 

 

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

تعیین اندازه فونت در زبان HTML

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <h1 style="font-size:300%;"> عنوان ۱ با اندازه ۳ برابر دیفالت مرورگر </h1>

                   <p style="font-size:160%;"> پاراگرافی با اندازه حروف ۱٫۶ برابر دیفالت مرورگر </p>

 

 

          </body>

</html>

 

 

 

 

 

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

تنظیم ( Alignment ) متن‌ها در زبان HTML

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p style="text-align:right;"> پاراگراف راست‌چین </p>

                   <p style="text-align:center;"> پاراگراف وسط‌چین </p>

                   <p style="text-align:left;"> پاراگراف چپ‌چین </p>

 

 

          </body>

</html>

 

 

 

 

 

 

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

[rating itemreviewed=”آموزش HTML – بخش دوم” rating=”9.5″ reviewer=”سایت سازان” dtreviewed=”12/11/2016″ best=”10″ worst=”0″]برای یادگیری کامل طراحی سایت ، ابتدا باید زبان HTML را آموخت. اکنون‌که با کاربرد HTML آشنا میشویم شروع کار با HTML و آموزش HTML و آموزش طراحی صفحات وب و…[/rating]

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

دسته بندی طراحی سایت در سایت سازان