آموزش طراحي سايت با HTML: آشنايي با تگ ها

آموزش طراحي سايت با HTML: آشنايي با تگ ها

جلسه دوم (قسمت اول): آشنايي با تگ ها در HTML

 

آموزش طراحي وبسايت

 

در جلسه گذشته، يک فايل ساده ايجاد کرديم تا با محيط کدنويسي HTML آشنا شويم. اکنون ميخواهيم بيشتر با اين محيط آشنا شويم و آن را بيشتر بررسي کنبم.

تگ <h1> در HTML

در کدنويسي با HTML، ابتدا  تگ مورد نظر را مينويسيم. براي مثال تگ <h1>

سپس محتوي مورد نظر را مينويسيم و در پايان، دوباره از آن تگ استفاده ميکنيم، به اين صورت: <h1> My Name is Amin makarem </h1>

تگ h1
همانطور که ميبينيد، من متني را که ميخواهم به صورت عنوان نشان دهم، آن را در بین دو تگ <h1> قرار میدهم. به اين صورت که متن را در بين دو تگ مينويسم. همانند تصوير

 

در جلسه قبل گفتيم که تگ <h1> براي ايجاد يک عنوان، تعريف ميشود. در HTML، تگ <h6>، <h5>، <h4>، <h3>، <h2>، <h1> وجود دارد. از تگ <h1> مهمترين عنوان يک نوشته را مشخص ميکند و در بين تگ هاي h2 تا h6 بزرگترين Font را دارد. تگ h6 فونت کوچکي دارد. به همين دليل براي نمايش يک عنوان مهم، از آن استفاده نميکند. براي مثال يک سايت خبري را در نظر بگيريد. زماني يک خبر منتشر ميشود، معمولا سرفصل خبر ها، بزرگترين Font را دارد و نسبت به متن اخبار، بيشتر در معرض ديد ميباشد. به تصویر زیر توجه کنید.

 

انواع تگ های h

 

نکته مهم: توجه کنید که تمام محتوایی که ما ایجاد میکنیم (از جمله تگ ها) باید در بدنه body ایجاد شود.

 

تگ <P> در HTML: 

اگر بخواهيم يک متني را به صورت پاراگراف نمايش دهيم، از تگ <p> استفاده ميکنيم. به اين صورت که ابتدا تگ <P> را مينويسيم و بعد از آن متني را که ميخواهیم به صورت پاراگراف نمايش دهم مينويسم. در آخر از تگ <p/> استفاده ميکنم. به اين صورت: <p> WwW.FarKianTech.Com </p>>

 

ايجاد تگ p در HTML

 

تگ <a> در HTML:

برای ایجاد لینک در HTML، از تگ <a> استفاه میکنیم.  برای مثال، من میخواهم آدرس وبسایت فرکیان تک را در HTML تعریف کنم. به طوری که با کلیک بر روی یک عبارت، وارد سایت فرکیان تک بشوم.

ابتدا تگ <a> مینویسیم. سپس درون تگ <a> از دستور href استفاده میکنیم. به این صورت: <a href = ” “>  </a>

در بین دو علامت ”  ” ادرس وبسایت را مینویسیم. سپس یک نوشته در نظر میگیریم (برای مثال Link) تا زمانی که بر روی آن کلیک کنیم وارد سایت شویم.

به این صورت: <a href=” https://farkiantech.com/ “> Link </a>

به تصویر زیر توجه کنید.

 

ایجاد لینک در HTML
علاوه بر ایجاد تگ ، یک عنوان با تگ h1 ایجاد کردیم.

 

<html>
<head>
<title> </title>
</head>
<body>

<h1> Farkiantech site Link </h1>

<a href=” https://farkiantech.com/ “> Link </a>

</body>
</html>

اکنون در قسمت بالاي برنامه بر روي File کليک کنيد و بر روي گزينه Save as کليک کنيد تا اين صفحه به صورت يک فايل HTML در سیستم شما ذخیره میشود.  با کلیک بر روی آن وارد مرورگر میشوید و صفحه زیر برای شما باز خواهد شد.

در جزوه بعد، به ادامه آموزش آشنایی با تگ ها خواهیم پرداخت. با ما همراه باشید.

محمد امین مکارم

مطالب مرتبط

نقد و بررسی‌ها

نظر: