هاست لینوکس

آخرین بسته‌ی MyBB: نسخه‌ی 1.8.27 MyBB منتشر شد


امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش پایه HTML
#1
در این مقاله خیلی مختصر و مفید به آموزش HTML (پایه) می پردازیم.

HTML مخفف عبارت Hyper Text Markup Language به معنای زبان نشانه گذاری ابر متن می باشد.هر صفحه ای که در مرور گر خود با هر دستگاهی مشاهده می کنید، یک صفحه HTML است که ترکیبی از نوشته ها، عکس ها، اشیاء و رسانه (فیلم و فلش و …) و نشانه گذاری هاست.این نشانه گذاری ها موجب می شود که یک مرورگر بتواند ساختار ظاهری صفحه را درک کند و آن را به درستی برای شما نشان دهد.

این نشانه گذاری ها در تعیین استاندارد می شوند و به دنیا وب عرضه می شوند.نسخه دوم HTML از سال ۱۹۹۵ ارائه شد و اکنون HTML نسخه ۴ و ۵ پرکاربرد ترین نسخه ها می باشند.نسخه ۵ آن دارای تحولات بسیار زیادی بود که در این اموزش نیازی به توضیح آن نیست.برای یادگیری HTML 5 لازم است که HTML 4 را به خوبی آموخته باشید.آموزشی که در حال مطالعه آن هستید، HTML 4 می باشد.

شروع آموزش:

تگ – Tag

در html تگها پایه ترین مفهومی است که باید با آن آشنا باشید.تگ ها همیشه با علامت کوچکتر باز می شوند و با علامت بزرگتر و / و بسته می شوند.تگ ها نباید باز بمانند و هیچ تگی هم نباید بدون این که باز شود، بسته شود.هر تگ یک نام لاتین دارد.فرض کنید نام یک تگ mohsen است.در این حالت این تگ به این شکل باز می شود(شروع می شود):



کد:
<mohsen>


و به این شکل بسته می شود(تمام می شود):



کد:
</mohsen>


همان نامی که در هنگام باز شدن به کار رفته است در هنگام بسته شدن تگ هم باید به کار رود.

در خیلی از تگ ها می توان ، تگ دیگری به کار برد.و بسیار از تگ ها خاصیت تو در تو دارند.

در html علاوه بر تگ ، متا تگ هم وجود دارد.متا تگ ها کاربرد های مختلفی دارند و توسط کاربر دیده نمی شوند.مثلا توسط متاتگ ها می توانید از موتور های جستجو بخواهید سایت شما را بررسی نکنند.یا زبان آن صفحه را برای موتور های جستجو تنظیم کنید.همچنین می تواند برای سایر استفاده های دیگر (که به سئو مرتبط نیست) کاربرد داشته باشد که در ادامه چند متا تگ مهم را مرور می کنیم.

داخل هر تگ مقدار آن قرار می گیرد.مانند تگ زیر که دارای محتوای آموزش HTML است:

کد:
<mohsen>آموزش HTML </mohsen>
خود تگ ها نیز دارای مشخصه هایی هستند که مشخصه ها، Property نامیده می شوند و خود مقدار می گیرند.برای مثال تگ زیر دارای مشخه ID است.


1
کد:
<mohsen id="tag1" > آموزش HTML </mohsen>


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


1
کد:
<mohsen id="tag1" value="آموزش HTML" />


همانطور که مشاهده کردید در این حالت نیازی به تگ پایانی نیست.برای بسته شدن تک کافیستاز </ استفاده شود.

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


id - name - value - class - style


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

مشخصه id در هر صفحه نباید بیش از یک بار مقدار یکسان بگیرد.اگر برای یکی از تگ های خود در صفحه html، برای مشخصه id مقدار tag1 را قرار داده اید، برای مشخه id هیچ تگ دیگری در آنصفحه نباید از مقدار tag1 استفاده کنید.منحصر به فرد بودن مقدار id باید در صفحه حفظ شود.

مشخصه name و value کاربرد های متفاوتی دارند و ممکن است به ازای هر تگ، عملکرد متفاوتی داشته باشند که در ادامه همین آموزش با این مشخصه ها بیشتر آشنا می شوید.

مشخصه class مربوط به style است.در html شما می توانید برای تگ ها و اجزا صفحات خود مشخصه های ظاهری تعریف کنید(اندازه و فنت و رنگ و راست چین و …).با مشخصه style می توانید برای تگ های خود خصوصیات ظاهری تعریف کنید.مانند زیر:


کد:
<mohsen style="color:red;text-align:center;" >آموزش HTML </mohsen>


مقادیر مشخصه های داخل Style (مثل color) باید به ; ختم شوند.همچنین نام خود مشخصه های تعریف شده داخل مشخصه style ، مشخصه های ثابت و از پیش تعریف شده ای هستند و شما نمی توانید از خودتان مشخصه تعریف کنید(در style).

حالا اگر همین مشخصات ظاهری را بخواهید در جایی غیر از داخل آن تگ تعریف کنید باید از مشخصه کلاس استفاده کنید.برای استفاده از این مشخه باید مقدار آن را با نام کلاس پر کنید.برای تعریف کلاس باید در صفحه html خود به این شکل عمل کنید:
کد:
<style>

.mythme

{

color:red; text-align:center;

}

</style>
همانطور که مشاهده کردید، نام کلاس با نقطه داخل تگ style تعریف می شود.

سپس کافیست در تگ خود با استفاده از مشخه class ، آن را تعریف کنید.مانند زیر:


1
کد:
<mohsen class="mythme">آموزش HTML </mohsen>


توجه :اگر با برنامه نویسی کمی آشنایی دارید، در نظر داشته باشید این class با کلاسی که در برنامه نویسی وجود دارد کاملا متفاوت است و هیچ گونه ارتباطی به هم ندارند.

توجه: بحث style ها و class ها در HTML خود دنیای بزرگی به نام CSS مخفف عبارت Cascade Style Sheet باز می کنند که در این آموزش به CSS پرداخت نشده است.

حال که با مفهوم تگ آشنا شدید، می توان اجزا صفحه HTML را راحت تر شرح داد.

هر صفحه HTML دارای دو تگ اصلی Head و Body می باشد.محتوای تگ head توسط کاربر (هنگامی که با مرورگر سایت را باز کرده است) قابل مشاهده نمی باشد.محتوای body محتوایی است که کاربر با آن سر و کار دارد و آن را مشاهده می کند.

برای مثال تگ style که برای تعریف یک class جهت تغییر ویژگی های ظاهری استفاده شد باید در تگ head قرار داده شود.سایر تگ ها که توسط کاربر قابل مشاهده است باید در تگ body تعریف شوند.

حال به معرفی تگ های مهم داخل تگ head می پردازیم.

تگ title

این تگ، مقداری است که هنگامی که با موس روی تب مرورگر مکس می کنید نمایش داده می شود.این تگ در سئو مهمترین تگ می باشد و همان مقداری است که در نتایج گوگل برای عنوان سایت ها نمایش داده می شود.مقدار بهینه برای این تگ، کمتر از ۶۵ کاراکتر می باشد.

متا تگ meta description

این متاتگ مقداری است که در توضیحات، زیر هر نتیجه در موتور های جستجو نمایش داده می شود.گوگل خیلی اوقات آن مقدار را به سلیقه خود، تغییر می دهد.این متاتگ اکنون دارای اهمیت کمتری شده است.اما همچنان مهم است.مقدار بهینه برای این تگ کمتر از ۲۵۰ کاراکتر می باشد.

متا کیورد – meta keyword

متا تگ کیورد قبل از سال ۲۰۰۸ کاربر داشت.اکنون هیچ کدام از موتور های جستجو به آن اهمیت نمی دهند.برای گوگل به کلی این متا تگ نادیده گرفته می شود.مقدار این تگ باید حاوی کلمات کلیدی باشد(بود) که با کاما از هم جدا شده باشد.مانند (سئو,خدمات سئو,آموزش سئو).

در تگ head فایل های css و کدهای اسکریپت نیز می تواند قرار بگیرد یا به فایل دیگری ارجاع داده شود.

حال به معرفی تگ های مهم داخل تگ body می پردازیم.


span


این تگ یک نوشته است (lable) و می توان حاوی متن باشد.


div


این تگ، مخفف division به معنی بخش می باشد و داخل آن می تواند تگ های دیگر قرار بگیرد.


a


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


img


مخفف image است و برای نمایش تصویر به کار می رود.


table
برای ایجاد جدول به کار می رود.اکنون استفاده از این تگ برای افزایش سرعت بارگذاری صفحات، کمتر استفاده می شود.داخل این تگ باید تگ tr قرار بگیرد که مخفف table row به معنی سطر جدول می باشد و داخل هر tr نیز باید حداقل یک تگ td قرار بگیرد که یک سلول(ستون) سطر است.


input
به معنی ورودی می باشد و تگی است که دارای چند کاربرد است که توسط مشخصه type آن تغییر می کند.



کد:
input (type=button)
یک کلید است که مشخصات فرم و صفحه را ارسال می کند و در کل وب به کلید submit معروف است.



کد:
input (type=radio)


کلید های انتخابی است که از بین چند تای آنها فقط یکی از انها قابل انتخاب است.



کد:
input(type=checkbox)


کلیدهای انتخابی است که می توان هر کدام از آنها را انتخاب کرد(تیک زد).



کد:
input (type=text)


جعبه متنی است (text box) که می توان در آن متن وارد کرد.



کد:
input(type=file)
توسط کلید browse آن می توان فایل آپلود کرد.

چند نکته مهم داخل درباره لینک ها:

لینک های نوفالو (که در اینجا درباره مباحث سئوی ان شرح داده شده است) ، به شکل زیر قرار می گیرند:



کد:
<a href="http://www.google.com" rel="nogfollow">لینک نمونه</a>
همه لینک ها و در کل همه آدرس دهی ها در HTML به دو شکل می باشد:

۱- آدرس دهی مطلق:

در آدرس دهی مطلق به طور کامل آدرس داده می شود و با http آغاز می شود.مانند مثالی که در بالا مشاهده کردید.

استفاده از / برای لینک های داخلی (صفحات سایت خودتان) کاربرد دارد،اسلش ( / ) در آدرس دهی ها به معنی آدرس ریشه هاست می باشد.مثلا اگر دامنه شما example.com است، می توانید در آدرس دهی از / استفاده کنید.برای مثال اگر می خواهید به آدرس صفحه /page1/category/clock آدرس دهید به شکل زیر خواهد شد:



کد:
<a href="/page1/category/clock" rel="nogfollow">لینک نمونه</a>


لینک بالا به صفحه http://example.com/page1/category/clock اشاره می کند.

استفاده از / در ابتدای آدرس دهی موجب می شود، که هر زمان که دامنه و آدرس شما تغییر کرد (یا روی سیستم محلی local قبل از انتشار)،نیازی به اعمال تغییرات نداشته باشید و به شدت توصیه می شود.



۲- آدرس دهی نسبی

اگر در شروع آدرس دهی از / استفاده نکنید، مسیر نسبی می شود.مثلا اگر لینک در صفحه زیر قرار داشته باشد:

کد:
example.com/category/clock
و آدرس آن لینک را به شکل زیر آدرس دهی کنید:


1
کد:
<a href="category/clock/wallclock" rel="nogfollow">لینک نمونه</a>
آدرس دهی به از آدرس صفحه جاری اعمال می شود.در نتیجه آدرس لینک، روی مرورگر، به آدرس زیر تبدیل می شود:

کد:
example.com/category/clock/category/clock/wallclock
همانطور که مشاهده می کنید، از category دوم تکرار شده است.(آدرس صفحه فعلی با آدرس لینک بدون / ادغام می شود).

استفاده از آدرس دهی نسبی تنها در مواردی کاربردی است که مطمئن هستید، ساختار آن صفحه و آدرس آن لینک تا ابد تغییر نخواهد کرد.
پاسخ
 سپاس شده توسطfirstboy000 (۱۳۹۳/۱۰/۲، ۱۶:۵۲:۳۳ عصر) ، amir1 (۱۳۹۳/۱۰/۲، ۲۱:۲۶:۳۱ عصر) ، محمد تی ام (۱۳۹۳/۱۰/۳، ۱۵:۲۷:۴۴ عصر)
#2
اول از همه با یه سری مطالب پایه ای و اساسی شروع می کنم:

یک فایل HTML چیست؟
· HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
· یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
· بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
· یک فایل HTML باید دارای پسوند html. یا html. باشد
· یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

---

آیا می خواهید یکبار امتحان کنید؟
اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.
کد HTML:
<html>
<head>
<title>title of page </title>
</head>
<body>
This is my first home page.<b> This text is bold </b>
</body>
</html>
فایل را تحت عنوان "mypage.htm"ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

------
مثال تشریح شده
اولین برچسب در فایل HTML شما ، <html> است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما <html/> است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است.
متن های بین برچسب و اطلاعات سرانداز (header)شماست .اطلاعات سر انداز در پنجره مرورگر نشان داده نخواهد شد. متن بین برچسب <title>، سرتیتر پرونده شماست. سرتیتر در قسمت عنوان صفحه مرورگر نشان داده خواهد شد.
متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب <body> نشان داده خواهد شد.
متنی که بین برچسب <b> قرار گیرد در مرورگر بصورت برجسته نشان داده خواهد شد.
---
پسوند htm. یا html. ?
هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.
------
به ویرایشگر های HTML توجه کنید:
شما می توانید به سادگی با استفاده از یک ویرایشگر WYSIWY("what you see is what you get") فایل های HTML را ویرایش کنید ، مثل FRONT PAGE,Claris Home Page یا Adob PageMill.
اگر شما می خواهید یک توسعه دهنده وب توانا باشید ما توصیه اکید می کنیم که شما از یک ویرایشگر متنی ساده استفاده کنید تا اصول اولیه HTML را یاد بگیرید.
-----
پرسش و پاسخ:
س: پس از اینکه فایل HTML را ویرایش می کنم نمی توانم نتیجه را در مرورگر مشاهده کنم. چرا؟
ج:اطمینان حاصل کنید که فایل را با یک نام و پسوند صحیح ذخیره کرده اید مثل"C:\mypage.htm". همچنین اطمینان حاصل کنید که از همان نام هنگام باز کردن فایل در مرورگر استفاده کرده اید.
س:من سعی کردم فایل HTMLام را ویرایش کنم. اما تغییرات در مرورگرم نشان داده نشد. چرا؟
ج:مرورگر صفحه را کاشه(cach) کرده بنا بر این یک صفحه را دو بار نمی خواند. هنگامی که شما یک صفحه را تغییر می دهید مرورگر آن را نمی داند. از کلید REFRESH/RELOAD مرورگر استفاده کنید تا آن را مجبور کنید صفحه را دوباره بخواند.
س:از چه مرورگری باید استفاده کنیم؟
ج:شما می توانید تمام این آموخته ها را با مرورگرهای متعارف انجام دهید مثل Internet Explorer, Netscape,Mozilla و Opera. هر چند که تعدادی از مثال های مادر کلاس های پیشرفته به آخرین نسخه مرورگرها نیاز دارند.
پاسخ
 سپاس شده توسطشماره مجازی (۱۴۰۱/۸/۲۶، ۰۱:۵۳:۵۹ صبح) ، گراف مسنجر (۱۴۰۱/۱۰/۳، ۰۴:۱۵:۵۳ صبح) ، چارتر ۴۲۴ (۱۴۰۲/۹/۱۲، ۱۵:۱۷:۴۲ عصر)


موضوع‌های مشابه…
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آشنایی با HTML، زبان پایه برنامه نویسی وب barati 4 3,533 ۱۳۹۹/۳/۲۳، ۱۷:۲۶:۴۹ عصر
آخرین ارسال: saeediran
  [آموزش html] همگام با مای بی بی ایران برای فراگیری html Pars 16 19,843 ۱۳۹۶/۶/۲۹، ۱۵:۱۱:۰۰ عصر
آخرین ارسال: drupal

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان