از اینکه احیاناً در مثال ها از تگ هایی که شما نیاموخته اید استفاده می شود نگران نباشید.
در فصل های بعد آنها را خواهید آموخت.
عنوان ها (Heading)
عنوان ها در HTML به وسیله تگ های <h1> تا <h6> تعریف می شوند.
مثال (عناصر پایه ای در HTML)
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
خودتان امتحان کنید »<h2>This is a heading</h2>
<h3>This is a heading</h3>
پاراگراف (Paragraph)
پارگراف ها در HTML به وسیله تگ <p> تعریف می شوند.
مثال (عناصر پایه ای در HTML)
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
خودتان امتحان کنید »<p>This is another paragraph.</p>
لینک ها (Link)
لینک ها در HTML به وسیله تگ <a> تعریف می شود.
توجه: آدرس لینک، در خصوصیت href مشخص می شود.
(در فصل های بعدی این خودآموز راجع به خصوصیت های عناصر، بیشتر خواهید آموخت.)
تصاویر (Image)
تصاویر در HTML به وسیله تگ <img> تعریف می شود.
مثال (عناصر پایه ای در HTML)
<img src="/beyamooz_logo.png" width="104" height="142" alt="beyamooz.com" />
خودتان امتحان کنید »توجه: نام و سایز عکس به وسیله خصوصیت ها مشخص می شود.
آموزش تصویری مطلب بالا (فیلم آموزش HTML) |
|---|
| درس شماره 3 (عناصر پایه ای در HTML) زمان فیلم: 08:00 |
خرید و دانلود مستقیم فیلم آموزش HTML - حجم دانلود 766 مگابایت (کلیک کنید +) |
ویژگی alt در تگ img: اگر در لود تصویر مورد نظر اشکالی پیش آمد، متن تنظیم شده برای ویژگی alt جایگزین تصویر خواهد شد.
وقتتون بخیر
میشه بپرسم چجوری میشه یک عکس رو از داخل فایل های خود کامپیوتر آدرس دهی کرد و داخل سایت قرار داد؟
1- در Root اصلی پروژه تون یک فولدر با نام Images ایجاد کنید و تصاویر رو داخل اش قرار دهید.
2- برای آدرس دهی تصاویر همان طور که می دونید به 2 صورت "آدرس دهی نسبی" یا "آدرس دهی مطلق" می توانید عمل کنید.
1- مطلق: در این روش، آدرس بصورت کامل ذکر می شود.
مثال: <img src="http://www.beyamooz.com/php/MyImage.jpg" />
توجه داشته باشید که در آدرس دهی مطلق حتما باید نوع پروتکل صفحات ذکر شود یعنی برای صفحات وب معمولی باید http و برای صفحات وب امنیتی https در آدرس گفته شود.
2- نسبی: در این روش آدرس را بصورت کامل ذکر نمی کنیم، در واقع، قسمت دامین یعنی http://www.beyamooz.com ذکر نمی شود. تصور نمایید که در فولدر manage هستیم و می خواهیم در فایل index.html از یک تصویر استفاده کنیم. این تصویر به فایلی در روت اصلی پروژه لینک است. بنابراین خواهیم داشت:
<img src="/../MyImage.jpg" />
توجه فرمایید که به ازای هر دو نقطه (..) می توانیم یک گام به عقب برگردیم، یعنی زمانی که محل جاری مان فولدر Manage است با یک دو نقطه به Root اصلی پروژه خواهیم رسید.
شاید بپرسید چرا به این صورت عمل می کنیم، و چرا آدرس کامل را ذکر نمی کنیم ...!؟ جواب اینکه اگر زمانی تصمیم بگیرید که پروژه تان را روی یک دامین دیگر قرار دهید و یا بخواهید پروژه را به یک مشتری دیگر بفروشید، آن موقع به مشکل برخواهید خورد و باید تمام آدرس دهی ها را با دامین جدید عوض کنید، در صورتی که در آدرس دهی نسبی، هیچ کار خاصی نیاز نیست که انجام دهید.
1- ابتدا عضو سایت شده و روی لینک زیر کلیک نمایید:
beyamooz.com/product/web-design/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-html
2- در لینک بالا روی دکمه "اضافه کردن به سبد خرید" کلیک کنید.
3- حالا از سمت چپ و بالای سایت روی "رفتن به سبد خرید" کلیک کنید و در صفحه باز شده روی دکمه "تکمیل" کلیک کنید.
4- سه مرحله "خریدار" / "نحوه تحویل" / "تأیید سفارش" را با کلید روی دکمه "بعدی" طی کنید.
5- در نهایت بعد از تأیید سفارش به درگاه بانک ملت متصل خواهید شد. با وارد کردن اطلاعات کارت بانکی خود اقدام به پرداخت هزینه فاکتور نمایید.
6- بلافاصله بعد از پرداخت هزینه، ایمیلی حاوی لینک دانلود فیلم آموزش HTML برای شما ارسال خواهد شد.
همان طور که در مثال زیر می بینید، ما بنر سایت بیاموز رو به عنوان لینک استفاده کرده ایم:
< a href="http://www.beyamooz.com/" title="با يک کليک بياموز">
<img src="/images/beyamooz_logo.png" alt="با يک کليک بياموز" width="336px" height="69px" />
</a >
1- میخواستم ببینم alt که برای توضیح به کار میره به چه دردی میخوره؟
2- چجوری میشه عکس رو لینکی کرد؟ ینی اگه عکسو بزنی لینک باز شه؟
1- ویژگی alt در عنصر img به ما کمک می کنه تا اگر در لود عکس مشکلی پیش اومد، متنی که برای ویژگی alt تنظم کردید، نمایش داده بشه.
2- لطفا به مثال کامنت بالا توجه کنید.
به عنوان قانوني نانوشته، هنگامي که به تصاوير متحرک نياز داريد بهتر است از GIF استفاده کنيد. فشرده‌سازي JPG فايل هايي با حجم کمتر توليد مي‌کند که البته اين حجم پايين به قيمت افت کيفيت تمام خواهد شد. PNG نيز فرمتي بهينه براي حفظ کيفيت تصوير در مواقعي است که حجم فايل براي شما اهميتي ندارد.
زمان تنظیم ویژگی src در تگ img، باید توجه داشته باشید که هم نام و هم فرمت عکس را بدرستی تنظیم کنید وگرنه عکس نمایش داده نمی شود.
بعنوان مثال اگر عکس شما Test.jpg باشد، خصوصیت src باید بصورت زیر تنظیم شود:<img src="/Test.jpg" />
http://8pic.ir/
www.picofile.com
ابتدا یک پوشه ایجاد کنید و سند اچ تی ام ال خودتون را وارد این پوشه کنید. عکس مورد نظر را هم وارد این پوشه کنید و به صورت زیر عمل کنید:
<img src="/نام عکس مورد نظر به همراه پسوند ">
This is a heading
This is a paragraph.
so right
soso right beyamooz.com
<img src="/آدرس عکس شما در اینجا قرار می گیرد" >
در مورد خصوصیت های width و height عرض کردم که: اگر width و height را حذف کنید، عکس در اندازه ی واقعی خودش نمایش پیدا می کند.
با تعریف این دو خصوصیت، عکس در عرض و ارتفاع دلخواه شما نمایش می یابد نه در اندازه ی واقعی خودش.
یک سوال من می خوام به جای استفاده ازویرایشگر note pad از Microsoft SharePoint Designer 2013 استفاده کنم برای راحتی کد نویسی اما مشکلی که دارم اینکه وقتی روی new blank site می زنی فیلد ها را نمی دونم چی بگدارم که وارد محیط برنامه بشم اخه front page که اینطوری نبود لطف کنید راهنمایی بفرمایید متشکرم ارادتمند شما parsa میشه جوابم زود بدید البته ببخشید
لطفاً سوالاتتون مربوط به بحث آموزشی باشه ...!
با عرض معذرت اما از این جملتون که گفتید "به جای استفاده ازویرایشگر note pad ازMicrosoft SharePoint Designer 2013" واقعاً متعجب شدم. این دو تا از زمین تا آسمون با هم فرق دارن ...!
باید عکس رو از کجا اضافه کنیم؟
میتونیم از سیستم اضافه کینم؟؟
یا علی