در آغاز تنها محتوایی که میشد در وب سایت ها قرارداد, متن ها بودند اما پس از پیشرفت های صورت گرفته در این زمینه امکان قرار دادن تصاویر و سایر محتوای بصری نیز فراهم شد و جلوه ای خاص به سایت ها و وبلاگ ها داده شد. در جلسه ی چهارم از سری جلسات آموزش رایگانHTML قصد داریم به تصاویر و لیست ها در HTML بپردازیم.

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

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

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

اضافه کردن تصاویر به HTML وب سایت

در دنیای دیجیتال امروزه تصاویر همه چیز هستند. تگ <img> هر آنچه برای نمایش تصاویر در سایت خود نیاز دارید را برای شما فراهم خواهد کرد. دقیقاً مانند عنصر لنگر(anchor) <a> ، <img> هم دارای ویژگی هایی است.

این ویژگی ها اطلاعات مربوط به منبع ، ارتفاع ، عرض و متن تصویر را برای رایانه شما ارائه می دهند.

استایل و فرمت ها

نوع فایل تصویرمورد نظر را میتوانید با کلیک راست روی آن و انتخاب “Properties” بررسی کنید.
با استفاده از مشخصه کلاس هم می توانید مرزها و سبک های دیگری برای تصویر مورد نظرتان تعریف کنید که در جلسات بعد حتما به آن می پردازیم.

فرمت هایی که به صورت آنلاین برای تصاویر استفاده میشوند عبارتند از: .jpg ، .png و gif.

ویژگی alt تصویرچیست؟

Alt متنی است که در کنار تصویر بارگذاری میشود و در صورتی که تصویر به هر دلیلی نمایش داده نشود یا به درستی بارگذاری نشود, این متن جایگزین قالب خالی محل تصویر خواهد بود.در واقع این متن کاربران را راهنمایی می کند تا حداقل از محتوای تصویر اطلاع داشته باشند.

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

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

تگ <img> بصورت زیر نوشته می شود:

<img src=”yourimage.jpg” alt=”Describe the image” height=”X” width=”X”>

ایجاد یک تصویر به همراه متن Alt

یک تصویر انتخاب کنید وآن را در پوشه ای ذخیره کنید که قبلا index.html و page2.html را ذخیره کرده اید. این تصویر را “testpic.jpg” نام گذاری کنید.

در یک خط جدید در ویرایشگر HTML , کد زیر را وارد کنید:

<img src=”testpic.jpg” alt=”This is a test image” height=”42″ width=”42″>

حالا صفحه index.html را در مرورگرتان ذخیره و پیش نمایش آن را مشاهده کنید.

چگونه یک لیست HTML بسازیم؟

در طراحی وب سایتها ، 3 نوع لیست مختلف وجود دارد که ممکن است بخواهید به سایت تان اضافه کنید.

1.لیست مرتب (Ordered List)

لیست مرتب با تگ <ol> شروع میشود و آیتم ها در این لیست ها با تگ <li> شروع میشوند. اما منظور از لیست مرتب چیست؟

مثالی که در ادامه می بینید یک نمونه از لیست مرتب است؛ در لیست زیر آیتم ها با نشانه های عددی 1 ، 2 و 3 نمایش داده شده اند.

1.  آیتم اول
2.  آیتم دوم
3.  و آیتم سوم

همانطور که گفتیم در تگ <ol> ما هر مورد از لیست را در داخل تگ <li> </li> قرار میدهیم.

برای مثال:

<ol>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ol>

اهمیت type

ویژگی type در لیست های مرتب, نشانه ی آیتم ها را مشخص می کند یعنی؛

از ویژگی type در تگ ol و به صورت “type=”A استفاده کنید.

2.لیست نامرتب (Unordered List)

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

مثالی از این لیست به صورت زیر است:

<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul>

ویژگی list-style-type در لیست های نامرتب

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

برای استفاده از این ویژگی کد “;style=”list-style-type: circle را در تگ ul می نویسیم.

🧐🤗 یک نکته ی مهم اینکه برای یادگیری بهتر میتوانید از دوره ی آموزشی مقدماتی HTML  و  CSS که در سایت افق وب به صورت رایگان در اختیار شما قرار گرفته است استفاده کنید. 🤗🧐

3. لیست توضیحی (Definition List)

در مواردی ممکن است بخواهید یک لیست توضیحی در صفحه خود قرار دهید. لیست های توضیحی ترکیبی از واژگان (اصطلاحات) هستند که در آن برای هر واژه توضیحی در نظر گرفته شده است. از تگ <dl> برای این لیست ها استفاده میشود.

•  برای تعریف واژه در این نوع از لیست ها از تگ <dt> استفاده میشود.
•  و تگ <dd> توضیحی را برای هر واژه مشخص میکند.

یک مثال از لیست <dl> به شرح زیر است:

HTML
زبان نشانه گذاری Hypertext یک زبان برنامه نویسی است که برای ایجاد صفحات وب استفاده می شود و توسط مرورگر وب ارائه می شود.

کد استفاده شده برای این لیست به صورت زیر است:

<dl>
<dt>آیتم</dt>
<dd>توضیحات اینجا قرار میگیرد</dd>
</dl>

حالا وقت آن است تا از مطالبی که یاد گرفتیم استفاده کنیم✌ . فایل index.html را باز کنید و در یک خط جدید ، HTML زیر را وارد کنید:

<p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>

تغییراتی که ایجاد کردید را ذخیره کنید و به نتیجه ی کارتان نگاهی بیندازید. اگر همه چیز درست اجرا شده باشد, یک لیست گلوله ای با اطلاعات بالا نمایش داده میشود.

جلسه ی آینده

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

😊✌ از بقیه‌ی جلسات  آموزش رایگان HTML جا نمونید✌😊

منبع؛ www.html.com