• صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Search
Close this search box.
۰ تومان 0 Cart
  • ورود
  • ثبت نام
Menu
  • ورود
  • ثبت نام
Search
Close this search box.
۰ تومان 0 Cart
Menu
  • ورود
  • ثبت نام
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما

آموزش رایگان HTML – جلسه 4

تیر 15, 1400
نویسنده حامد نجفی
HTML-CSS ، برنامه نویسی
504 بازدید
آموزش رایگان html - جلسه 4 - تصاویر و لیست ها در html

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

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

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

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

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

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

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

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

آموزش رایگان html - جلسه 4 - تصاویر و لیست ها در html
آموزش رایگان HTML – جلسه 4 – تصاویر و لیست ها در HTML

نوع فایل تصویرمورد نظر را میتوانید با کلیک راست روی آن و انتخاب “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=”1

ترتیب آیتم ها از عدد 1 شروع میشود

“type=”A

آیتم ها در لیست به ترتیب حروف الفبا از مقدار A (حروف بزرگ) آغاز میشوند.
“type=”a

آیتم های لیست به ترتیب حروف الفبا از مقدار a (حروف کوچک) شروع میشوند.

“type=”I

آیتم های لیست به ترتیب اعداد یونانی از مقدار I (اعداد بزرگ) آغاز میشوند.
“type=”i

آیتم های لیست به ترتیب اعداد یونانی از مقدار i (اعداد کوچک) شروع میشوند.

 

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

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

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

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

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

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

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

 

مقدار

توضیح
disc

دایره های توپر

circle

دایره های تو خالی
square

مربع های توپر

none

در این مورد از هیچ نشانه ای برای نشان دار کردن آیتم های لیست استفاده نمیشود

 

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

تصاویر و لیست ها در HTML | آموزش رایگان HTML {جلسه 4}
تصاویر و لیست ها در HTML

 

دوره ی آموزش 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

4.5/5 - (2 امتیاز)
اشتراک گذاری:
برچسب: htmlآموزش رایگان htmlکد html لیست
About حامد نجفی

بعد از گذشت 9 سال کار با وردپرس و فعالیت اینترنتی هر روز علاقه ام به این کار بیشتر میشه. سختی های زیادی تو این راه کشیدم و دوست دارم به شما کمک کنم این مسیر رو سریعتر طی کنین. با من در شبکه های اجتماعی در تماس باشید :)

More Posts by حامد نجفی
تبلیغات
هاست وردپرس

مطالب زیر را حتما مطالعه کنید

آموزش رایگان CSS- جلسه 16| جدول ها در CSS

آموزش رایگان CSS- جلسه 16

آموزش رایگان CSS- جلسه 15| لیست ها در CSS

آموزش رایگان CSS- جلسه 15

اموزش رایگان CSS- جلسه 14| تصاویر در CSS

آموزش رایگان CSS- جلسه 14

آموزش رایگان CSS - جلسه 13| لینک ها در CSS

آموزش رایگان CSS – جلسه 13

آموزش رایگان CSS- جلسه 12| فونت ها در css

آموزش رایگان CSS- جلسه 12

آموزش رایگان CSS - جلسه 11| متن ها در CSS

آموزش رایگان CSS – جلسه 11

قدیمی تر قالب رایگان چند منظوره وردپرس Flash
جدیدتر 10 اصل مهم برای بازاریابی محصولات سایت 

3 Comments

Join the discussion and tell us your opinion.

  • فول استک گفت:
    مرداد 12, 1400 در 5:58 ب.ظ

    سلام
    برای تصاویر از img خالی استفاده کنیم یا
    تفاوتشون چیه؟

    پاسخ
    • حامد نجفی گفت:
      مرداد 14, 1400 در 1:47 ب.ظ

      برای تصاویر میتونین از دو تا تگ < figure > یا < img >استفاده کنید تفاوتی در نمایش تصویر ندارند. اما تگ فیگر بهتر هست و سئو تصاویر سایت تون رو ارتقا میده

      پاسخ
  • mohammad گفت:
    مرداد 28, 1400 در 2:02 ق.ظ

    سلام. چطور میتونم به جای اعداد و یا حروف انگلیسی در لیست از تصویری مانند فلش استفاده کنم؟

    پاسخ

دیدگاهتان را بنویسید لغو پاسخ

Search for:
نوشته‌های تازه
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
آخرین دیدگاه‌ها
  • سهند در آموزش تغییر رنگ پس زمینه در وردپرس
  • mojtaba در پرینت و ذخیره اطلاعات محصول با افزونه WooCommerce PDF Invoices & Packing Slips
  • مجید بهرامی راد در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟
  • پریا صادقی در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟
  • مریم در آموزش ایجاد صفحه تماس با ما در المنتور(جلسه 10)

یاد باد آنکه ز رخسار تو هر صبحدمی

افق دیده پر از شعله خور بود مرا

دسته بندی بلاگ

  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس
  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس

خدمات مشتریان

  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها
  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها

دسترسی سریع

  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام
  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام

تمامی حقوق مادی و معنوی این سایت متعلق به آکادمی افق وب میباشد.

ورود
استفاده از موبایل
استفاده از آدرس ایمیل
آیا هنوز عضو نیستید؟ اکنون عضو شوید

بازنشانی رمز عبور
استفاده از موبایل
استفاده از آدرس ایمیل
عضویت
قبلا عضو شدید؟ اکنون وارد شوید

نه + 18 =