آموزش HTML

[یوسف فراهانی]

به نام خدا

طبق قولی که از مدتها پیش به دوستان داده بودم، تصمیم گرفتم طراحی وب رو بصورت کاملا کاربردی بهتون آموزش بدم. این کلاس رایگان نیست!!! شهریه این کلاس به ازای هر درس مبلغ یک فاتحه برای رفتگان من و تمامی اهل قبوره.

متاسفانه در تمامی کتابهای موجود در بازار، html که شروع طراحی وب محسوب میشه بصورت غولی بزرگ برای علاقه مندان آموزش داده میشه. نتیجه این نوع آموزش فقط وب زدگی برای دوست داران این رشته است. متاسفانه سیستم آموزشی در این کتاب ها بصورت کاملا سنتی عمل میکنه یعنی اینطور فرض میشه که انگار کارآموز قراره کل سایت رو با کد نوشتن طراحی کنه در حالی اصلا به این صورت نیست. ما سایت رو با نرم افزار طراحی میکنیم و خود نرم افزار بیشتر کارهای لازم رو انجام میده و ما فقط به یک آشنایی مختصر و البته دقیق به html نیاز داریم.

سیستم ما در این آموزش به این صورته که ابتدا هر درس بصورت یک یا چند عکس بهتون داده میشه. در پایان هر درس یک یا چند تمرین بهتون داده میشه. این تمرینات در قالب یک فایل zip برای شما آماده میشه. فقط دوستانی که در سایت ثبت نام کرده باشند، قادر به دانلود فایل تمرینات هستند.

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

امکان داره در ارائه دروس وقفه بیفته. خواهش میکنم در چنین مواردی بنده رو نفرین نکنید و این رو بذارید به پای کمبود وقت من.

[یوسف فراهانی]

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

* برای شروع به یه ویرایشگر متن ساده نیاز دارید. ویرایشگر معمول در بین طراحان وب، NotePad  موجود در ویندوزه که در منوی کلیک راست در هر جاییکه باشید وجود داره. همون Text Document معروف.

* به یک مرورگر نیاز دارید، من با اینکه همیشه FireFox رو به دوستان توصیه کردم ولی الان بهتون InternetExplorer رو پیشنهد میدم. چون کاربران بیشتری از این مرورگر استفاده میکنن و بهتره که سایت شما ابتدا با این مرورگر سازگاری داشته باشه.

* فایل NewTextDocumet رو باز کنید و از منوی فایل Save as  رو انتخاب کنید و فایل خودتون و با نام دلخواه و پسوند html ذخیره کنید. حالا میتونید اون NewTextDocumet اولی رو پاک کنید چون یک فایل جدید با آیکون مرورگر InternetExplorer براتون ایجاد شده. برای نوشتن کد در این فایل روی اون کلیک راست کنید و از open with ، گزینه NotePad رو انتخاب کنید. از این به بعد هر تغییری که در ساختار کدها ایجاد کردید save میکنید و فایل اصلی رو باز میکنید و اگر باز بود، رفرش میکنید تا تغییرات رو ببینید.

* برای کار با html هیچ نیازی به اینترنت ندارید و بصورت آفلاین کار میکنید.

* Tagها دو نوعند: الف) تگهایی که نیاز به بسته شدن دارند (Container) و ب) تگهایی که نیازی به بسته شدن ندارند (Empty)

* در html فاصله بین کلمات اهمیتی نداره. چه عمودی و چه افقی. اما فاصله در ساختار تگها تاثیر گذاره به مثال زیر توجه کنید:

مثال: نحوه نوشتن تگها: <font > = نادرست ، <font> = درست

* مثال بالا در قالب یک قانون: بین تگ و <> ابتدایی هیچگونه فاصله ای نباید وجود داشته باشد.

* به عبارت اصلی که داخل <> قرار بگیره، Element و به مجموعه حاصل Tag میگن.  زبان html مجموعه ای از همین tagهاست.

* هر Element ویژگی هایی داره که به اونها attribute میگیم و به مقداری که attribute به خودش اختصاص میده، Value گفته میشه. مثال:

<"font face="verdana>

[/size][/color]
در تگ بالا font=element ، face=attribute ، verdana=value میباشد.

*بین attributeها وجود فقط یک فاصله الزامیست.

*مقادیر value چه عدد باشد چه حروف و ... باید بین دوتا "  " قرار بگیره.

*دستورات html  را به اصلاح case insensitive هستند یعنی به کوچکی و بزرگی حروف حساس نیستند.

*قانون بالا در xhtml نقض میشود.

تا درس بعد، تمامی این قوانین را بخوبی یاد بگیرید.

[یوسف فراهانی]

در این درس به معرفی ساختار کلی صفخات وب میپردازیم و تگ های اساسی موجود در هر سند html را معرفی میکنیم.

برای مشاهده تصویر در سایز اصلی روی لینک زیر کلیک کنید:
لینک دانلود: «مشاهده لینک ها فقط برای اعضا مجاز است»
«ثبت نام کنید» یا «وارد حساب کاربری خود شوید»
حجم: 72 کیلوبایت

[یوسف فراهانی]

در این درس تگهای مهم و پرکاربردی رو بهتون معرفی میکنم. امیدوارم با تمرین و کار زیاد در بکارگیری این تگها در اسناد مختلف مهارت پیدا کنید.

برای مشاهده تصویر در سایز اصلی روی لینک زیر کلیک کنید:
لینک دانلود: «مشاهده لینک ها فقط برای اعضا مجاز است»
«ثبت نام کنید» یا «وارد حساب کاربری خود شوید»
حجم: 86 کیلوبایت

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

[یوسف فراهانی]

ادامه مباحث آمزش html به آدرس زیر منتقل شد:

«مشاهده لینک ها فقط برای اعضا مجاز است»
«ثبت نام کنید» یا «وارد حساب کاربری خود شوید»