تبلیغات
قطره (ای از زندگی یک درگیر کامپیوتر) - آموزش HTML قسمت اول
 
اگر قادر نیستی خود را بالا ببری ،همانند سیب باش تا با افتادنت اندیشه ای بالا برود.

آموزش HTML قسمت اول

نوشته شده توسط :سپهر ساداتی فر
یکشنبه 4 اسفند 1387-04:08 ق.ظ

خیلی خوب اول آموزش html رو شروع میکنیم و تا جایی که  برای  یک برنامه نویس وب تازه کار نیازه جلو میریم و در جلسه سوم یا چهارم میریم سراغه php ، امیدوارم تا آخرش همراهیم کنید

یادآوری: این آموزش به هیچ وجه کامل نیست و بعضی مطالب به عمد از قلم انداخته شده ولی مطمئن باشید این آموزش مناسبه شمایی که تازه میخواهید این موضوع رو یاد بگیرید نوشته شده . در آخر  مطلب چند مرجع ساده و معتبر رو ذکر کردم که خواندن آنها مکمل این مطالب است .


 

آموزش HTML به زبان ساده - 1

پیش نیاز : تمام مثالها و کدها رو میتونید در notepad ویندوز بنویسید و با فرمت  html. ذخیره کنید سپس برای مشاهده صفحه فایل رو در مرورگرتون باز کنید . اگر در کد متنی به زبان فارسی نوشته شده بود قبل از زدن دکمه save از کادر Encoding گزینه utf-8 رو انتخاب کنید تا حروف فارسی به درستی ذخیره بشه :

 من خودم از برنامه ++notepad که شبیه  نوت پد ویندوزه اما امکاناتش بیشتره استفاده میکنم  .


 

تو این جلسه با برچسب ها (= تگها ) و ساختار یک فایل html  آشنا میشویم :

زبان html از تگها  (tags)  یا همون برچسبها و محتوای متنی تشکیل شده و این زبان ، یک زبان برنامه نویسی نیست بلکه زبانی برای نشانه گذاری محتوا است و این یعنی که تگها به محتواشون معنی و مفهوم خاصی رو می بخشند .

پس ما یا با تگ سر و کار داریم که کم کم یادشون میگیریم یا با محتوا  ، که محتوا میتونه همین نوشته که نوشتمش باشه یا تصاویر داخل همین صفحه  که تگهای html  باعث شدن این صفحه اینطور که دارید میبینید دیده بشه .

در حدود 60-70 تگ وجود داره که همشون جزو استاندارد نیستند و استفاده از بعضی هاشم  برطبق مرجع رسمی html یعنی موسسه  W3C توصیه نمیشه ( html ورژنهای مختلف داره که آخرین ورژنش 4.01 در سال 1999 اعلام شده و در این ورژن توصیه شده که  از  بعضی از تگهای ورژنهای قبلتر  استفاده نشه ). شما در کل با حدود نصفشون شایدم کمتر سر و کار دارید ( در اکثر مواقع با 15 تا بیشتر کار ندارید!! ) .

  تگها یکی از دو حالت رو به رو  را دارند :      <اسم تگ>   یا <اسم تگ/>محتوا<اسم تگ>

تگهای که محتوا دار هستند باید با یک تگ پایانی بسته بشوند: <اسم تگ/>محتوا<اسم تگ>  و محتوا بین ایندو تگ آغازین و پایانی قرار میگیره

تگهای بدون محتوا هم این شکلی هستند : <اسم تگ>   یعنی فقط از تگ آغازین تشکیل شدن.

تگها صفت ( مشخصه - attribute ) هم دارند ( بی صفت نیستند!!)  و هر صفت هم خصوصیتی رو به اون تگ یا محتواش نسبت میده ، البته تمام تگها صفت دار نیستند .

اگه تگی صفت داشته باشه  شکلش اینجوری میشه :  

<"مقدار"=صفت اسم تگ> یا  <اسم تگ/>محتوا<"مقدار"=صفت  اسم تگ>

بعضی صفتها هم مقدار ندارند( که چندتایی بیشتر نیستن) :                                                                    <صفت اسم تگ> یا    <اسم تگ/>محتوا<صفت  اسم تگ>

یعنی فقط اسم صفت رو مینویسید ولی برای اونا که مقدار دار هستند باید یکی از مقادیری رو که میشه بجای مقدار نوشت بنویسید ( که بعدا با این مقادیر آشنا شده و کم کم حفظ میشید)

اینم چند تا مثال که به عملی که انجام میدن کاری نداریم فقط میخوام با شکلشون آشنا بشید :

<br>                                                                            تگ  تکی (فاقد محتوا) و فاقد صفت

<img src="logo.jpg">( logo.jpg:و  مقدار صفت  src :  تگ تکی  (فاقد محتوا) و دارای صفت ( اسم صفت

< b>salam!</b>                                                  تگ دوتایی (زوج -  ابتدایی و پایانی) و فاقد صفت

<div width="20%">salam</div>   (20%:مقدار صفت width : تگ دوتایی (زوج-ابتدایی و پایانی) و دارای صفت

خوب حالا که با تگ و ساختارش آشنا شدیم بریم سراغه یه فایل html ببینیم چه شکلیه :

<html><head></head><body>hi!</body></html>               

نکته : در html بیشتر از یک کارکتر فاصله ( space ) همان یکی و بیشتر از یک خط جدید همان یک خط حساب میشه پس کد زیر با کد بالا هیچ فرقی نداره:

<html>
<head>
</head>
<body>
hi!
</body>
</html> 

هر فایل html حداقل از سه قسمت head , body , html که به همان ترتیب کد بالا نوشته میشن تشکیل شده : 

1- تگ html  کل تگ ها رو در بر میگیره و کاری انجام نمیده ولی باید باشه  ( پس دقت کنید که بعضی تگها رو میشه درون تگ دیگه نوشت و به اصطلاح nested بشن مثله همین تگ <html> که تمام تگهای صفحه درون این تگ اصلی هستند)

2- در قسمت head  تگهایی قرار میگیرند که راجع به خصوصیات صفحه اصلاعاتی رو به مرورگر میدن و فعلا نیازی به دونستنشون نداریم

3- در body هر چیزی که در صفحه میخواهیم قرار بدیم رو مینویسم یعنی اینجا مخصوص محتوامونه و 90% کد نویسیه ما اینجا انجام میشه .

تا همین جا برای جلسه اول کافیه میتونید تا مطلب بعدی با این تگهای زیری که میزارم و همشون جفتی هستن ( هم تگ آغازین دارن هم پایانی ) و نیاز به محتوا دارند  کار کنید و ببینید تاثیر هر کدومشون چیه ، محتوا هم چیزی نیست جز متن :

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<big>
<b>
<p>   
<sup>
<sub>

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

در جلسه بعد هر تگ رو با توضیحش براتون مینویسم...

سایت ها و مراجع برای مطالعه بیشتر ( گزینه view--->source یادتون نره!) :

1- w3schools.com/html/default.asp : بهترین مرجع یادگیری به زبان ساده همراه با مثال

2- htmlcodetutorial.com : اینم ساده و خوبه ولی خوب مطالب رو  دسته بندی نکرده 

3- iranw3.com/htmltut : اینم یه سایت فارسی  همراه با مثال

4- khaterat.com/www/sarfasel.php : اینم فارسیه فرق زیادی با قبلی نداره ولی اگه قبلی رو دیدی اینم سریع یه مرور کن شاید قبلی مطلبی رو جا انداخته باشه

5- reference.sitepoint.com/html : این برای شروع خوب نیست چون توضیحاتش در حد مبتدی نیست ولی بعد یه مدت که حرفه ای تر شدید دیگه سراغه سایتهای دیگه نمیرید ;)





درباره وبلاگ:



آرشیو:


طبقه بندی:


آخرین پستها:


پیوندها:


پیوندهای روزانه:


صفحات جانبی:


نویسندگان:


ابر برچسبها:


آمار وبلاگ:







The Theme Being Used Is MihanBlog Created By ThemeBox