عناصر پایه ای در HTML
از اینکه احیاناً در مثال ها از تگ هایی که شما نیاموخته اید استفاده می شود نگران نباشید.
در فصل های بعد آنها را خواهید آموخت.
عنوان ها (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 مگابایت (کلیک کنید +) |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 99252
دیدگاه‌ها
سلام ببخشید آقای پهلوان صادق، میخواستم ببینم ویژگی alt یا همان آلتریشن دقیقا چه کاری انجام می دهد؟؟؟؟؟
سلام و درود
ویژگی alt در تگ img: اگر در لود تصویر مورد نظر اشکالی پیش آمد، متن تنظیم شده برای ویژگی alt جایگزین تصویر خواهد شد.
سلام
وقتتون بخیر
میشه بپرسم چجوری میشه یک عکس رو از داخل فایل های خود کامپیوتر آدرس دهی کرد و داخل سایت قرار داد؟
سلام،
1- در Root اصلی پروژه تون یک فولدر با نام Images ایجاد کنید و تصاویر رو داخل اش قرار دهید.
2- برای آدرس دهی تصاویر همان طور که می دونید به 2 صورت "آدرس دهی نسبی" یا "آدرس دهی مطلق" می توانید عمل کنید.
1- مطلق: در این روش، آدرس بصورت کامل ذکر می شود.
مثال: <img src="http://www .beyamooz.com/p hp/MyImage.jpg" />
توجه داشته باشید که در آدرس دهی مطلق حتما باید نوع پروتکل صفحات ذکر شود یعنی برای صفحات وب معمولی باید http و برای صفحات وب امنیتی https در آدرس گفته شود.
2- نسبی: در این روش آدرس را بصورت کامل ذکر نمی کنیم، در واقع، قسمت دامین یعنی http://www.beyamooz.com ذکر نمی شود. تصور نمایید که در فولدر manage هستیم و می خواهیم در فایل index.html از یک تصویر استفاده کنیم. این تصویر به فایلی در روت اصلی پروژه لینک است. بنابراین خواهیم داشت:
<img src="/../MyImag e.jpg" />
توجه فرمایید که به ازای هر دو نقطه (..) می توانیم یک گام به عقب برگردیم، یعنی زمانی که محل جاری مان فولدر Manage است با یک دو نقطه به Root اصلی پروژه خواهیم رسید.
شاید بپرسید چرا به این صورت عمل می کنیم، و چرا آدرس کامل را ذکر نمی کنیم ...!؟ جواب اینکه اگر زمانی تصمیم بگیرید که پروژه تان را روی یک دامین دیگر قرار دهید و یا بخواهید پروژه را به یک مشتری دیگر بفروشید، آن موقع به مشکل برخواهید خورد و باید تمام آدرس دهی ها را با دامین جدید عوض کنید، در صورتی که در آدرس دهی نسبی، هیچ کار خاصی نیاز نیست که انجام دهید.
سلام ممنون بابت اموزش خوب و عالی شما
عالی بود.
توضیحاتتون و اموزشاتون کامل و عالیه ازتویپرسش و پاسخها هم کلی میشه یاد گرفت.حس کردم تشکر کردن کمترین کاریه که میتونم انجام بدم . پاینده باشین
سلام، چطور می تونم فیلم آموزش HTML رو خرید کنم؟
سلام، برای خرید فیلم آموزش HTML مراحل زیر را طی نمایید:
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 برای شما ارسال خواهد شد.
وقتی من یک عکس رو لینکی میکنم دیگه عکسش نمیاد
سلام، اگر عکس نمایش داده نمی شه مطمئنا ویژگی src یا همان آدرس عکس را اشتباه تنظیم کرده اید. لطفا یکبار دیگر ویژگی src عکس را با دقت تنظیم کنید.
همان طور که در مثال زیر می بینید، ما بنر سایت بیاموز رو به عنوان لینک استفاده کرده ایم:
< a href="http://ww w.beyamooz.com/ " title="با يک کليک بياموز">
<img src="/images/be yamooz_logo.png " alt="با يک کليک بياموز" width="336px" height="69px" />
</a >
سلام خسته نباشید
1- میخواستم ببینم alt که برای توضیح به کار میره به چه دردی میخوره؟
2- چجوری میشه عکس رو لینکی کرد؟ ینی اگه عکسو بزنی لینک باز شه؟
سلام
1- ویژگی alt در عنصر img به ما کمک می کنه تا اگر در لود عکس مشکلی پیش اومد، متنی که برای ویژگی alt تنظم کردید، نمایش داده بشه.
2- لطفا به مثال کامنت بالا توجه کنید.
سلام و خسته نباشید.....gif, .jpg,.png چه فرقی با هم دارند؟هرکدام برای چه عکسی و چه کاری؟چون همیشه فقط یکی از این ها جواب میده و اگر اون یکی رو بزنی Xمیشه
JPG و PNG و نهايتا GIF فرمت های رايجي هستند که اکثر اوقات با آنها روبرو مي‌شويم و البته هريک از اين سه فرمت نقاط ضعف و قوتي نيز دارند. اکثر مرورگرها، مشکلي با نمايش سه فرمت يادشده ندارند و برخي از اين فرمت‌ها براي استفاده‌هايي خاص، برتر از سايرينند.
به عنوان قانوني نانوشته، هنگامي که به تصاوير متحرک نياز داريد بهتر است از GIF استفاده کنيد. فشرده‌سازي JPG فايل هايي با حجم کمتر توليد مي‌کند که البته اين حجم پايين به قيمت افت کيفيت تمام خواهد شد. PNG نيز فرمتي بهينه براي حفظ کيفيت تصوير در مواقعي است که حجم فايل براي شما اهميتي ندارد.
ولی من مثلا عکسی دارم که وقتی ازش properties میگیرم نوشته jpg ولی وقتی تو صفحه ی وب مثلا میام براش gifیا png استفاده میکنم نشون نمیده؟
تذکر مهم:
زمان تنظیم ویژگی src در تگ img، باید توجه داشته باشید که هم نام و هم فرمت عکس را بدرستی تنظیم کنید وگرنه عکس نمایش داده نمی شود.
بعنوان مثال اگر عکس شما Test.jpg باشد، خصوصیت src باید بصورت زیر تنظیم شود:<img src="/Test.jpg" />
تشکر
سلام. میشه لطفا جندتا سایت برای آبلود کردن عکس معرفی کنید؟
با سلام
http://8pic.ir/
www.picofile.com
سلام، عالی بود. ممنون
سلام ..این قسمت عکس من فهمیدم چه طور عکسی رو از سایتی بر روی سایت خودم بزارم ولی اصلا نمی دونم الان یک عکسی فرضا توmy pc>pictures>p22 445678_184 دارم چه طوری بزارمش؟
سلام
ابتدا یک پوشه ایجاد کنید و سند اچ تی ام ال خودتون را وارد این پوشه کنید. عکس مورد نظر را هم وارد این پوشه کنید و به صورت زیر عمل کنید:
<img src="/نام عکس مورد نظر به همراه پسوند ">
سلام..ممنون از اطلاعات گرانقدرتون..در قسمت img من خودم اومدم از ادرس عکستون استفاده کردم ولی عکس رو نشون نمیده و فقط یه مربع که کنارش علامت عکسه نشون میده!اینجوری نوشتم:
This is a heading
This is a paragraph.
so right
soso right beyamooz.com
اگر از یک آدرس عکس کامل آپلود شده استفاده کنید مشکلی پیش نخواهد آمد.
من قسمت img رو خیلی دقیق نفهمیدم ...واینکه چرا من وقتی alt وwidthوheight رو حذف کردمهیچ تغیری نکرد و عکس رو نشون داد...اون چیزی که داخا کوتیشن srcنوشتین رو نمی فهمم ؟یعنی اگه خودم بخوام عکس رو عوض کنم چی کار باید کنم؟
خصوصیت alt توضیحی در مورد عکس است و اگر نباشد هم مشکلی پیش نخواهد آمد. همچنین اگر width و height را هم حذف کنید باز عکس در اندازه ی واقعی خودش نمایش پیدا می کند و مشکلی پیش نمیاد. چیزی که به طور کلی در imgها مهم است همان src است. src در واقع مخفف کلمه ی source است. و آدرس عکس را مشخص می کند. اگر بخواهید خودتان عکس را عوض کنید، باید یک عکس را آپلود کنید و آدرس آن را در قسمت src قرار دهید.
بازم متوجه نشدم چه طور میشه عکس رو عوض کنم؟و اگر اون ها تاثیری ندارن پس اصلا چرا بزاریمشون؟
همان طور که گفتم، اگر بخواهید عکس را عوض کنید، باید در سایت های آپلود عکس، یک عکس را آپلود کنید و آدرسی که این سایت به شما می دهد را در اینجا قرار دهید:
<img src="/آدرس عکس شما در اینجا قرار می گیرد" >
در مورد خصوصیت های width و height عرض کردم که: اگر width و height را حذف کنید، عکس در اندازه ی واقعی خودش نمایش پیدا می کند.
با تعریف این دو خصوصیت، عکس در عرض و ارتفاع دلخواه شما نمایش می یابد نه در اندازه ی واقعی خودش.
پاراگراف با عنوان در کل فرقی نداره که؟اگه جابه جا بنویسیم چه مشکلی پیش میاد؟
یکی از فرق های این دو در اندزه ی فونت آنها است. اندازه ی فونت یک عنوان بیشتر است و ضخیم تر هم هست.
چرا من برا عنوان ها بیشتر از 6 میزدم خطا نمی گرفت .مثلا میزدمh9
با درست ننوشتن یک تگ، خطا ایجاد نمی شود، و فقط این تگ وظیفه ی خود را به درستی انجام نمی دهد.
سلام از سایت خوبتون تشکر می کنم
یک سوال من می خوام به جای استفاده ازویرایشگر note pad از Microsoft SharePoint Designer 2013 استفاده کنم برای راحتی کد نویسی اما مشکلی که دارم اینکه وقتی روی new blank site می زنی فیلد ها را نمی دونم چی بگدارم که وارد محیط برنامه بشم اخه front page که اینطوری نبود لطف کنید راهنمایی بفرمایید متشکرم ارادتمند شما parsa میشه جوابم زود بدید البته ببخشید
سلام
لطفاً سوالاتتون مربوط به بحث آموزشی باشه ...!
با عرض معذرت اما از این جملتون که گفتید "به جای استفاده ازویرایشگر note pad ازMicrosoft SharePoint Designer 2013" واقعاً متعجب شدم. این دو تا از زمین تا آسمون با هم فرق دارن ...!
خیلی عالیه واقعا ممنون
تو همه ضمینه های کامپیوتر چه سخت افزاری چه نرم افزاری مهارت فوق العاده داشتم به جز طراحی وب اونم شانس اوردم با یه جستو جو با سایتتون آشنا شدم واقعا خیلی جالبه موفق و سر افراز باشید :v
اگر میدونستم سایت شما وجود داره اون همه هزینه بابت کلاس آموزش html نمیدادم :(
سلام من از سایت شما راضی هستم امیدوارم موفق باشید با تشکر . سعید دادفر :roll:
سلام
باید عکس رو از کجا اضافه کنیم؟
میتونیم از سیستم اضافه کینم؟؟
سلام اگه می خوای عکس از سیستمت بزاری اول باید عکس مورد نظرتو توی اینترنت آپلود کنی بد آدرس اینترنتیشو در قسمت ایمج سرس اچ تی ام ال کپی کنی
یا علی