وبلاگ چیتا وب


blog post
در این بخش یاد میگیرید که چگونه از پلاگین Emmet استفاده کنید، و همچنین با تعدادی از تگ ها برای نوشتن متن و عنوان های صفحه آشنا میشوید. تمامی ویراشگرها پلاگین دارند اما اسم و طرز استفاده آن ها متفاوت است. استفاده از تگ ها الزامی ست و با نوشتن آن ها مرورگر صفحه وب شما را یک صفحه وب استاندارد میداند.

در این بخش به ادامه کدنویسی و معرفی برخی از تگ ها میپردازیم.
اولین تگ های گفته شده در بخش 2 تگ های اساسی و مهمی هستند که حتما باید در همه صفحات وب نوشته شوند. (لینک آموزش نصب و راه اندازی) بعد از نصب پلاگین emmet و ذخیره کردن فایل کافی است که علامت تعجب"!" (shift + 1) تایپ کنید و دکمه ی تب برروی کیبورد را بزنید، تا تمام کدها و تگ های الزامی سایت نوشته میشوند.

the shortcut of emmet the shurt cut of plugins results

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

تگ های h :

اولین تگی که با آن شروع میکنیم تگ های h است، این تگ ها از h1 شروع میشوند و تا h6 ادامه دارند:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

از این تگ ها برای عنوان ها استفاده میشوند و به ترتیب از h1 تا h6 کوچک میشوند، یعنی اگر یک عنوان بسیا مهم داشته باشید باید آن را در داخل تگ h1 قرار بدهید، تگ های h برای مرورگر معانی مختلفی دارند؛ h1 یک عنوان پراهمیت و h6 یک عنوانی است که از اهمیت کمی برخوردار است.
پس در انتخاب تگ ها و عنوان ها دقت کنید، زیرا هنگامی که کاربر در مرورگر کلمه و یا جمله ای جستجو میکند، موتور جستجو یکی از عواملی را که چک میکند تا جواب کاربر را بدهد تگ هایh1 تا h6 است پس سعی کنید به ترتیب اهمیت موضوع ها و عنوانین، آن ها را درست و به جا در این تگ ها قرار دهید. مثال زیر را خودتان امتحان کنید:

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <title>Document</title>
    </head>
    <body>
        <h1>Very Very Very Very Very Important</h1>
        <h2>Very Very Very Very Important</h2>
        <h3>Very Very Very Important</h3>
        <h4>Very Very Important</h4>
        <h5>Very Important</h5>
        <h6>Important</h6>
    </body>
 </html>
h1 to h6 results

بعد از هربار تغییر در کدنویسی لازم است که کلید ctrl+s (یا در تب فایل گزینه ی seve را انتخاب کنید ) زده شود تا تمام کدتان ذخیره شود، سپس در صفحه وب باید کلید refresh را بزنید تا صفحه دوباره بارگذاری شود.

تگ <p></p> :

این تگ برای قرار گرفتن پاراگراف ها و جملات میباشد. شاید پیش خودتان بگویید که متن ها و پاراگراف ها را میتوان بدون اینکه آن ها در تگی قرار دهیم هم بنویسیم، پس چرا از تگ p استفاده کنیم!!
باید گفت که قرار دادن آن ها در یک تگ کار استانداردی است و در قسمت css که در درس های بعدی آموزش داده میشود کاربرد زیادی دارد.
پس تگ p برای قرار گرفتن متن ها و جملاتی است که در سایت قرار است نمایش داده شوند.

نکته
باید گفته شود که در کل سند HTML دکمه enter (که برای رفتن به خط بعدی است) فقط و فقط در فایل html اعمال میشود، یعنی اگر در وسط متن enter زده شود شما این را فقط در فایل کدها میبینید و هیچ تغییری در صفحه وب شما اعمال نمیشود، امتحان کنید.
<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <title>Document</title>
    </head>
    <body>
        <p>
            hello
            world!
            this is
            my first
            webpage.
            ..
        </p>
    </body>
 </html>
enter in p tag dose not work

همانطور که میبینید در کد بین جمله ها enter زده شده اما در صفحه وب این enter نمایش داده نشده است.
پس برای اینکه برخی از پاراگراف ها را در خط جدید شروع کنیم، باید چه کاری انجام دهیم؟؟ دو روش برای انجام این کار است؛ روش اول این است که از یک تگ p دیگری استفاده کنیم و بقیه ی متن را در این تگ بنویسیم:

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <title>Document</title>
    </head>
    <body>
        <p>
            hello world!
        </p>
        
        <p>
            this is my first webpage...
        </p>
    </body>
 </html>
double p for enter

تگ <br>:

این تگ مخفف (break) است و باعث میشود که عناصری که بعد از آن قرار دارند در خط بعدی شروع شوند. برای حل مشکل بالا میتوان از آن استفاده کرد، البته این روش مرسوم تر میباشد ، تگ br تگ بسته ندارد:

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <title>Document</title>
    </head>
    <body>
       
        <p>
            hello world!
        </p>
        
        <p>
            this is my first webpage...
        </p>
        
        <p>
            hello world! <br> tis is my first webpage..
        </p>
        
    </body>
 </html>
br tag

اگر امتحان کنید خواهید دید که تفاوت هایی بین آن ها است دلیل این موضوع پیش فرضی است که مرورگر برای تگ های مختلف و حاشیه آن ها دارد؛ به این معنی است که مرورگر حاشیه ای که برای تگ p پیشفرض دارد با حاشیه ای که برای تگ br در نظر دارد متفاوت است (مفهوم حاشیه را در بخش CSS یاد میگیرید).

تگ <hr>:

این تگ مخفف (Horizental) میباشد و یک خط در صفحه وب میکشد. تگ hr تگ بسته ندارد، برای اینکه بین متن ها و مطالب خط کشی شود میتوان از hr استفاده کرد.

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <title>Document</title>
    </head>
    <body>
       
        <h2>
            Horizemtal Line
        </h2>
        
        <hr>
        
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
           Ipsam harum impedit aut nam molestiae illo fugiat omnis alias
           laboriosam. Repellat ipsam quam eius rerum veniam! Tenetur 
           dolores eaque autem eius.
        </p>
        
        <hr>
        
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam harum impedit 
            aut nam molestiae illo fugiat omnis alias laboriosam. Repellat ipsam quam 
            eius rerum veniam! Tenetur dolores eaque autem eius.
        </p>
        
    </body>
 </html>
hr tag

در تگ p از تگ های دیگری هم استفاده میشود مانند:

تگ <i></i>:

این تگ به شکل <i></i> نوشته میشود و در ببین دو تگ باز و بسته جمله ای که میخواهید به شکل ایتالیک نمایش داده شود را مینویسید.

تگ <strong></strong>:

این تگ برای بیشتر کردن وزن یک کلمه و یا جمله میباشد که آن جمله ی مورد نظر در بین تگ باز و بسته ی <strong></strong> قرار میگیرد.

تگ <em></em>:

این تگ مخفف Emphasized است و برای تاکید بیشتر برروی یک کمله استفاده میشود و آن کلمه و یا جمله ی مورد نظر در بین تگ باز و بسته <em></em> قرار میگیرد.

تگ <q></q>:

این تگ برای نقل استفاده میشود. و جمله ای را که بین تگ های <q></q> بنویسید، در یک doublel qoutation قرار میدهد.

تگ <del></del>,<ins></ins>:

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

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <title>Document</title>
    </head>
    <body>
       
        <p>
            This is a test for <i>italic sentence</i>, to show how it works!
            <br>
            <br>
            This is a <strong>strong</strong> word.
            <br>
            <br>
           Attention the <em>emphasized</em> word.       
           <br>
           <br>
           Lorem ipsum said: <q> dolor sit amet, consectetur adipisicing elit.</q>
           <br>
           <br>
           the price was <del>100$</del> but now is <ins>70$</ins>
        </p>
        
    </body>
 </html>
the tags that are used in p tag

این مطلب را به اشتراک بگذارید

about author

ثمین یدالهی

فارغ التحصیل مهندسی IT

دیدگاه ها

دیدگاهی بگذارید: