آموزش کامل HTML – قسمت پنجم: عکس ها

توسط با بدون دیدگاه آموزش کامل HTML

در قسمت چهارم آموزش html با لینک ها آشنا شدیم. در این قسمت در مورد عکس ها و اضافه کردن آن ها به صفحات وب صحبت می کنیم.

اضافه کردن عکس

برای اضافه کردن عکس در اچ تی ام ال از تگ <img> استفاده می کنیم. بعد از img آدرس عکس را وارد می کنیم. برای این کار از اتربیوت src به صورت زیر استفاده می کنیم.

<img src=”آدرس عکس”/>

همان طور که مشاهده می کنیم تگ فوق نیاز به بستن با تگ جداگانه ندارد. برای نمایش دادن عکس باید نام و فرمت عکس را دقیقا با آدرس عکس بنویسیم.

اتربیوت alt

این صفت در واقع متنی است که اگر عکس ما به هر دلیلی لود نشود به جای آن نشان داده می شود. این ویژگی در جستجو های گوگل هم استفاده می شود. همچنین alt برای افراد معلول در دستگاه های خواندن صفحه مانند بریل نیز کاربرد دارد.

<img src=”url” alt=”کلمه یا متن مورد نظر”/>

تنظیم ابعاد تصویر

برای تنطیم اندازه تصویر از صفت style استفاده می کنیم. اندازه تصاویر را بر حسب پیکسل مشخص می کنیم.

<img src=”url” style=”width:250px; height:350px;”/>

استفاده از اتربیوت style همیشه ضروری نیست و می توانید طول و عرض را به صورت مستقیم بنویسید. مثلا کد زیر مانند فوق عمل می کند:

<img src=”url” width=”350px” height=”250px”/>

پایان قسمت پنجم

آموزش کامل HTML – قسمت چهارم: لینک ها

توسط با بدون دیدگاه آموزش کامل HTML

در قسمت قبلی آموزش html با تگ های عنوان آشنا شدیم. در این قسمت از آموزش در مورد لینک دادن در مطالب و صفحات اچ تی ام ال توضیح خواهیم داد. با قرار دادن لینک در صفحات می توانیم صفحات اچ تی ام ال خود را به صفحات دیگر متصل کنیم.

نحوه قرار دادن لینک در صفحات HTML

لینک ها یکی از پر استفاده ترین المان های اچ تی ام ال هستند. با استفاده از لینک ها می توانیم کاربران خود را به صفحات دلخواه خود انتقال دهیم. استفاده از لینک ها در اچ تی ام ال به صورت زیر است:

<a href = “http://pardiswp.com”>متن لینک</a>

نتیجه ای که مروگر نشان می دهد به صورت زیر است:

متن لینک

بنابراین تگ <a> برای نمایش دادن یک لینک در صفحه به کار می رود و نحوه استفاده از آن به صورت فوق است. کلمه href در واقع مقصد لینک مورد نظر است و آدرس لینک را در مقابل آن قرار می دهیم. متن لینک هم همان نام لینک است و متن یا نامی که می خواهیم نماینده لینک باشد را مشخص می کند.

شاید این سوال برای شما پیش بیاید که کلمه href چیست، این کلمه در واقع یک صفت یا attribute است. بعضی از تگ ها در اچ تی ام ال دارای اتربیوت هستند که نقش توضیحی یا تکمیل کننده را برای آن تگ بازی می کنند. در تگ لینک هم href صفتی است که آدرس لینک را در خود قرار داده و آن را تکمیل می کند.

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

حال اگر بخواهیم که لینک ما در صفحه ای جدید بدون بسته شدن صفحه جاری باز شود باید از صفتی دیگر به نام target به صورت زیر استفاده کنیم.

<a href = “http://pardiswp.com” target = “_blank”>پردیس وردپرس</a>

پایان قسمت چهارم

آموزش کامل HTML – قسمت سوم: تگ های عنوان

توسط با بدون دیدگاه آموزش کامل HTML

در قسمت دوم آموزش html با تگ پاراگراف آشنا شدیم. در این قسمت از آموزش اچ تی ام ال با تگ های عنوان آشنا خواهیم شد.

به کمک تگ های عنوان می توانیم عنوان هایی برای متن هایمان در صفحه در نظر بگیریم. تگ عنوان را با h نمایش می دهیم.

تگ های عنوان <h>

تگ های عنوان در واقع 6 نوع هستند که آن ها را از <h1> تا <h6> نام گذاری می کنیم. تفاوت این تگ ها در اندازه آن ها می باشد. این تگ ها به ترتیب از بزرگ به کوچک از <h1> شروع می شوند تا <h6> که کوچکترین آن ها می باشد. برای ایجاد یک عنوان بزرگ از تگ <h1/> متن عنوان <h1> استفاده می کنیم. ویژگی پر رنگ بودن در هر 6 تگ از بزرگ به کوچک قابل مشاهده است.

برای تمرین و آشنایی بیشتر یک صفحه html طراحی کنید و هر 6 تگ را در آن امتحان کنید و خروجی را مشاهده کنید.

اهمیت تگ های عنوان

عناوین در زبان اچ تی ام ال از اهمیت بسیار زیادی برخوردار هستند. چرا که موتورهای جستجو برای ایندکس کردن سایت شما از عناوین به عنوان یکی از المان‌های مهم استفاده می‌کنند. همچنین تا حد امکان سعی کنید تا از عناوین برای بولد کردن کلمات در متن استفاده نکنید، چرا که آن ها تگ مخصوص خود را دارند و به آن تگ <b> می‌گوییم. (در رابطه با این تگ در آینده بیشتر می گوییم)

علاوه  بر این, ترتیب در استفاده از  عناوین هم مهم است. در واقع مهمترین مطالب با <h1> و مطالب زیر مجموعه و با اهمیت کمتر با <h2> و به ترتیب کم اهمیت ترین عناوین‌ با <h6> نوشته می‌شوند.

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

آموزش کامل HTML – قسمت دوم: تگ پاراگراف

توسط با بدون دیدگاه آموزش کامل HTML

در قسمت اول آموزش html با مفاهیم اولیه html آشنا شدیم و اولین صفحه اچ تی ام ال خود را ساختیم. در این قسمت با نحوه نوشتن متن در صفحات html آشنا خواهیم شد.

تگ پاراگراف

برای نوشتن متن در صفحات وب از این تگ استفاده می کنیم. تگ پاراگراف با <p> شروع می شود و به <p/> ختم می شود و  متن مورد نظر بین آن ها قرار می گیرد. روش استفاده از آن به صورت زیر است.

<p> متن یا جمله مورد نظر </p>

به مثال زیر توجه کنید:

<p> سلام </p>

<p> آموزش کامل اچ تی ام ال با پردیس وردپرس </p>

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

سلام

آموزش کامل اچ تی ام ال با پردیس وردپرس

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

تگ <pre>

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

<pre> متن مورد نظر </pre>

تگ <br>

از این تگ برای انتقال متن به خط بعدی استفاده می شود، در واقع کاربرد کلید اینتر را دارد. از این تگ می‌توان برای اینتر زدن در متن یا به طور کلی ایجاد یک خط جدید در هر المان اچ‌تی‌ام‌ال استفاده نمود. تگ <br> به همین شکل و بدون تگ پایانی استفاده می شود. مثال:

<p> متن خط اول <br> متن خط دوم </p>

خروجی:

متن خط اول

متن خط دوم

پایان قسمت دوم آموزش html.

آموزش کامل HTML – قسمت اول: آشنایی کلی

توسط با بدون دیدگاه آموزش کامل HTML

مقدمه

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

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

ساخت اولین صفحه html

این کار بسیار ساده است و به ابزار خاصی نیاز ندارد، شما با نوت پد ویندوز هم می توانید یک سند html بسازید. ولی پیشنهاد می کنیم که از ++NotPad استفاده کنید، ویرایشگرهای دیگری نیز هستند که شما می توانید از آنها استفاده کنید.

  1. نوت پد را باز کرده و هر متنی که دوست دارید در آن بنویسید.
  2. حالا آن را با پسوند html ذخیره کنید.
  3. موقع ذخیره کردن فایل اینکدینگ فایل را روی utf-8 قرار دهید.
  4. فایل را از هرجایی که ذخیره کردید اجرا کنید.

خواهید دید که فایل شما در صفحه مرورگر پیش فرض تان باز می شود و متنی که نوشته بودید را نمایش می دهد.

تگ های html:

تمام کدهای html بین دو علامت <> قرار می گیرند که به آن ها تگ می گوییم. گاهی به تگ html المان هم می گویند. از تگ ها به صورت زیر استفاده می کنیم.

<tagname> محتوا </tagname>

به تگ اول opening tag و به تگ دوم closing tag گفته می شود، قالب تگ های html به صورت فوق می باشند. هر چیز در تگ مربوط به خودش قرار می گیرد.

کد یک صفحه ساده html:

<!DOCTYPE html>

<html>

<head>

<title>  عنوان صفحه | پردیس وردپرس  </title>

</head>

<body>

<h1>  تگ عنوان 1 </h1>

<p>  تگ پاراگراف یا متن  </p>

</body>

</html>

توضیح کد:

  • <!DOCTYPE html> جمله اول هر سند html می باشد، این جمله باید همیشه در ابتدای سند اچ تی ام ال قرار گیرد.
  • همه محتویات یک صفحه html در بین تگ های <html> قرار می گیرد، ازجمله تگ های دیگر مانند تگ هد یا …
  • تگ <head> اطلاعات ابتدایی در رابطه با صفحه را در بر می گیرد. مثلا نام نویسنده صفحه یا اطلاعاتی در رابطه با سایت، معمولا چیزهایی که در این تگ نوشته می شوند مستقیما در صفحه نمایش داده نمی شود.
  • تگ <title> یک عنوان برای صفحه وب نشان می دهد، این عنوان در نوار عنوان نشان داده می شود.
  • تگ <body> بدنه صفحه اچ تی ام ال ما را مشخص می کند و تمام کد ها و محتوایی که در صفحه نشان داده می شوند در این تگ قرار می گیرد.
  • تگ <h1> برای نشان دادن عنوان های در صفحه به کار می رود.
  • تگ <p> برای قرار دادن پاراگراف یا متن در صفحات وب به کار می رود.

برای نشان دادن حروف فارسی در صفحات html از کد متای <“meta charset=”UTF-8> استفاده می کنیم، این کد را باید در تگ هد قرار دهیم.

خب برای قسمت اول تا همین جا کافیست،در قسمت های بعدی بصورت کامل تر و دقیق تر با html آشنا می شویم.