html ساده ترین و پرکاربردترین زبان برای طراحی صفحات وب می باشد. همین صفحه ای که در حال حاضر مطالعه می کنید نیز با این زبان نوشته شده است. باور نمی کنید !!! روی صفحه کلیک راست کنید و گزینه ی view page source را انتخاب کنید. تمام کدهایی که برای شما نشان داده می شوند، به زبان html هستند.

آنچه در این فیلم آموزشی خواهید آموخت :

آشنایی با زبان html و دستورالعمل های آن

معرفی ابزار مورد نیاز برای ساخت صفحات وب با html

معرفی پسوند فایل های html

برای شروع کار با html نیاز دارید تا مفاهیم اولیه این زبان را یاد بگیرید. ما در این فیلم آموزشی شما را با قوانین ساده ی زبان html و بعضی تگ های (tag) پرکاربرد آن در طراحی صفحات وب آشنا خواهیم کرد.

آنچه در این فیلم آموزشی خواهید آموخت :

آشنایی با قوانین html و ساختار تگ ها

تعریف عنصر (المنت) در زبان اچ تی ام ال

معرفی اصطلاحات تگ بازشونده (opening tag) و تگ بسته شونده (closing tag)

معرفی تگ های p,br,strong و em و بیان کاربرد آن ها در html

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

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

آموزش این قسمت

حتماً تا به حال با استفاده از نرم افزار word یا در ویرایشگرهای دیگر، لیستی از نام ها، اقلام و … را ایجاد کرده اید؛ لیست هایی که بصورت ترتیبی و شماره گذاری شده و یا غیر ترتیبی درج می شوند و می توانید از آن ها بصورت تودرتو استفاده کنید. حال می خواهیم در این فیلم آموزشی، روش استفاده از لیست ها در html را به شما بیاموزیم.

لیست ها در طراحی صفحات وب، کاربردهای مختلف و مهمی از جمله ساخت منو ها، معرفی مطالب مرتبط، ایجاد پیوند به سایر وب سایت ها و یا صفحات و … را دارند.

آنچه در این فیلم آموزشی خواهید آموخت :

آشنایی با لیست های ترتیبی و غیرترتیبی ( تگ های ul و ol )

بیان قواعد لیست ها در html

بیان روش استفاده از لیست ها بصورت تودرتو

معرفی تگ های html قابل استفاده در لیست ها

آموزش این قسمت

حتماً تا به حال در سایت های اینترنتی با نوشته هایی برخورد کرده اید که با کلیک بر روی آن ها به صفحات دیگر همان وب سایت یا به سایت های دیگر ارجاع داده شده اید؛ این نوشته ها همان لینک ها در html هستند که برای پیوند به یک صفحه دیگر در هر جای وب و یا پیوند به مکانی در داخل همان صفحه وب سایت و … استفاده می شوند.

لینک ها در طراحی صفحات وب، کاربردهای مختلفی از جمله ساخت منو ها، صفحه بندی سایت ها (pagination)، ارتباط بین صفحات وب و … را دارند.

شما در این فیلم آموزشی علاوه بر آشـنایی با تگ a، با صفت ها(attribute) در html آشنا خواهید شد. با استفاده از صـفت ها شما می توانید کنترل بیشتری بر روی تگ ها داشته باشید. درواقع attributeها ویژگی های هر تگ را مشخص می کنند. برخی صفات عبارتند از : id, class, dir, style, title, href, target, …

آنچه در این فیلم آموزشی خواهید آموخت :

نحوه ایجاد لینک در html به صفحات خاص یا فایل های خاص جهت دانلود فایل مربوطه و …

معرفی برخی صفات تگ a در اچ تی ام ال، مانند href, title, target, rel

بیان روش آدرس دهی لینک ها

آموزش تعیین عنوان برای تگ a بصورتی که با بردن موس روی لینک، عنوان نمایش داده شود.(tooltip)

نحوه کنترل پنجره لینک ها

آموزش ساخت یک منوی ساده با استفاده از لینک ها

معرفی صفات(attribute) در html

آموزش نحوه استفاده از صفات در تگ های html

دانلود فیلم آموزشی لینک ها در HTML

آیا تا به حال در سـایت هایی که بازدیـد کرده اید، با لـینک هایی مواجه شده اید که به محض کلـیک بر روی آنها، فرآیند ارسـال ایمیل آغاز می شود؟

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

دانلود فیلم آموزش ایجاد لینک برای ارسال ایمیل در صفحات وب

آیا می خواهید در وب سایت خود از عکس استفاده کنید؟ اگر تصاویر شما در صفحه وب سایتتان لود نشد، چه کار می کنید؟ آیا می دانید عکس ها چگونه در افزایش سئوی سایت به شما کمک خواهند کرد؟ ما به شما خواهیم آموخت که چگونه تصاویر را در طراحی صفحات وب بکار ببرید. عکس ها زیبایی خاصی به صفحات وب شما می دهند و سایت را از حالت یکنواختی درمی آوردند. بـرای ایـجاد تصویر در صـفحه وب سایت خود باید از تگ img استفاده کنید.

آنچه در این فیلم آموزشی خواهید آموخت :

آموزش قرار دادن عکس در html

معرفی برخی صفات تگ img در اچ تی ام ال، مانند : src, alt, title, width, height

بیان فواید صفت alt برای سئوی سایت و کاربرد آن در تگ img

آموزش نحوه لینک کردن عکس ها

دانلود فیلم آموزش کار با عکس ها در HTML

آیا دوست دارید هنگام طراحی وب سایت خود همزمان با مشاهده کدهای html و css، تغییراتی را که در کدها می دهید، در قالب وب سایتتان مشاهده کنید ؟ قابلیت inspect element در مرورگر فایرفاکس این امکان را به شما خواهد داد.

Inspect element (بازرسی عناصر) که جزء ابزارهای توسعه وب (Web Developer) در فایرفاکس محسوب می شود، امکان جذابی است که به طراحان وب اجازه می دهد تا کد html و css مربوط به عناصر را از بین صدها خط کد پیدا کرده و آن را تحلیل نمایند. همچنین می توانند بصورت آنلاین و البته موقتی، کدهای html را تغییر دهند و تاثیر آن را بر روی سایتی که در حال مشاهده یا طراحی آن هستند، ببینند. Inspect کردن کدها در مواقعی که به bug (مشکل) می خورید به شما کمک می کند تا سریع تر و راحت تر مشکل را پیدا کرده و رفع (debug) نمایید. در فیلم آموزشی زیر شما نحوه ی کار با این ابزار فایرفاکس را یاد خواهید گرفت.

دانلود فیلم آموزشی بررسی گزینه ی inspect element برای کدهای html در فایرفاکس

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

ما در این فیلم آموزشی مشخصات و رفتارهای هر دو گروه از عناصر html را برای شما توضیح خواهیم داد. همچنین کاربردها و نکاتی که inline و block levelها دارند را با مثال برای شما تشریح خواهیم کرد تا به راحتی با مفهوم این ویژگی ها آشنا شوید.

در ادامه ی سلسله مباحث آموزش طراحی سایت، در قسمت فیلم آموزش کاربرد مشخصه display می توانید در مبحث css هم مطالب بیشتری در این زمینه بیاموزید.

دانلود فیلم آموزشی آشنایی با عناصر inline level و block level در html

آیا می دانید استفاده از تگ table برای طراحی ساختار اصلی وب سایت دیگر کاربردی ندارد و یک اصول کدنویسی غیراستاندارد است؟ تگ div یک جایگزین مناسب برای تگ table می باشد.

همان طور که می دانید زبان html دارای دو گروه تگ عمومی و اختصاصی است. تگ های اختصاصی مانند تگ a, p, ul و تگ های عمومی مانند تگ span, div. ما شما را با دو تگ عمومی div و span آشنا خواهیم کرد و به شما خواهیم آموخت که چگونه با تگ div ساختار صفحه خود را مشخص کنید.

در یکی از فـیلم های آموزشـی، صفات در html را برای شما توضـیح دادیم. در آنجا بیـان کردیم که صـفت ها به دو دسـته کلی تقســیم می شوند، یکسری صفات مخصوص بعضی تگ ها هستند، مانند صفت href برای تگ a و یکسری صفات عمومی هستند و برای تمامی تگ ها به کار می روند. ما در این فیلم آموزشی دو نوع از پرکاربردترین صفات عمومی class و id را برای شما توضیح خواهیم داد.

آنچه در این فیلم آموزشی خواهید آموخت :

بیان تفاوت تگ های span و div

توضیح کاربرد تگ div و span در html

بیان تفاوت صفات id و class

توضیح کاربردهای صفات id و class در html

بیان مثال کاربردی برای استفاده از div, span, id, class در کدهای html

دانلود فیلم آموزشی آشنایی با تگ های div-span و صفات id-class در html