آموزش کار با HTML
جلسات آموزشی جدید
-
1
در جلسه ۱ از دوره آموزشی اچ تی ام ال (HTML) به آموزش HTML - معرفی آن می پردازد. HTML سرنام واژه های Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. زبان استاندارد طراحی صفحات وب همان اچ تی ام ال است که زبان قابل فهم مرورگرها است در واقع مرورگرها تنها کدهای اچ تی ام ال را می فهمند و بقیه کدها مثل php و asp و... برای مرورگرها قابل فهم نیستند. HTML یک زبان نشانه گذاری است، به این معنی که بخش های مختلف صفحه توسط تگ ها از هم جدا می شوند و ساختار کلی وب سایت تشکیل خواهد شد، که هر کدام کاربرد و خواص خود را دارند. این تگ ها به مرورگر می گویند که هر بخش از صفحه جای چه المنتی است و باید به چه صورت نمایش داده شود .
مشاهده و خرید2
در جلسه ۱ از دوره آموزشی اچ تی ام ال (HTML) به آموزش تگ های پایه در html می پردازیم. در این جلسه از دوره آموزشی اچ تی ام ال به بررسی تگ های اولیه html که کاربرد اصلی آن ها برای قراردادن محتوای وب سایت ( متن، تصویر و لینک) است پرداخته خواهد شد. در این دوره از جلسه آموزشی تگ های h1,h2,h3,p,img,a,ul,li و... بررسی خواهند شد. از تگ H1- H6 برای تیترها و عنوان ها استفاده می شود.به ترتیب H1 مهمترین سر تیتر به حساب می آید همچنین h1 درشت ترین تیتر نسبت به بقیه را دارا می باشد. توصیه می شود جهت بهینه سازی سایت حتما از این سرتیترها استفاده شود زیرا این خاصیت بسیار برای موتورهای جستجو حائز اهمیت می باشد
مشاهده و خرید3
در جلسه ۳ از دوره آموزشی اچ تی ام ال (HTML) به آموزش المنت ها در برنامه html می پردازیم. برخی المنت ها فقط دارای یک تگ باز هستند. یعنی فقط opening tag رو شامل می شوند. اما برخی دیگر از elements (المنت ها) شامل هر دو تگ باز (Opening tag) و تگ بسته (Closing Tag) هستند. در html هر تگ از آغاز تا پایان، المنت نامیده می شود. برخی از المنت ها نیاز به تگ پایانی ندارند و قرار دادن تگ پایان برای آن ها اختیاری است. بطور مثال تگ p برخی از المنت ها خالی هستند که به این المنت ها empty element گفته می شود. در این دوره آموزشی اچ تی ام ال با انواع المنت ها آشنا خواهید شد.
مشاهده و خرید4
در جلسه ۴ از دوره آموزشی اچ تی ام ال (HTML) به آموزش attribute ها در html می پردازیم. در html هر تگ میتواند صفت هایی داشته باشد که گزینه های بیشتری درمورد آن تگ را در اختیار می گذارد. هر المنت می تواند اتریبیوت یا صفاتی داشته باشد که این صفات در تگ شروع آن المنت بصورت name=”value” نوشته می شوند. در این دوره از جلسه آموزشی اچ تی ام ال با صفات تگ های مهم آشنا خواهید شد. یک attribute برای تعریف ویژگی های عنصر HTML استفاده می شود و در داخل برچسب بازکننده ی عنصر قرار می گیرد. همه ی ویژگی ها از دو بخش تشکیل شده اند: name و value.
مشاهده و خرید5
در جلسه ۵ از دوره آموزشی اچ تی ام ال (HTML) به آموزش Heading ها درنرم افزار html می پردازیم. در html مطالب براساس اولویت آن ها و از طریق هدینگ ها ایندکس می شوند. ایندکس ها به موتورهای جستجو برای یافتن وب سایت شما کمک خواهند کرد. استفاده از تگ های هدینگ h1,h2,h3,h4,h5,h6 وب سایت شما را برای کاربر خواناتر خواهند نمود. هدینگ ها هرکدام سایز و استایل خود را دارند و تباید از آن ها در متون عادی استفاده کرد بلکه باید در عنوان ها و زیرمجموعه های هر عنوان استفاده شوند. به کمک اتریبیوت های مختلف می توان استایل هدینگ ها را تغییر داد. در این جلسه از دوره آموزشی اچ تی ام ال با تگ های h آشنا خواهید شد.
مشاهده و خرید6
در جلسه ۶ از دوره آموزشی اچ تی ام ال (HTML) به آموزش پاراگراف ها در برنامه html می پردازیم. در اچ تی ام ال هر بخش از صفحه بوسیله تگ های مختلف مشخص می شود. تگ p در صفحات اچ تی ام ال میتواند متن های طولانی و پاراگراف ها را نمایش دهد. اما این تگ فواصل و خطوط جدید را نمیشناسد و باید از تگ های خط جدید و فاصله در آن استفاده کرد. تگ دیگری بنام pre وجود دارد که متن را به همان صورتی که در کدها نوشته می شود نمایش می دهد. در این جلسه از دوره آموزشی اچ تی ام ال به بررسی تگ های p و pre و br و نحوه عملکرد هرکدام بصورت کامل پرداخته می شود.
مشاهده و خرید7
در جلسه ۷ از دوره آموزشی اچ تی ام ال (HTML) به آموزش استایل پاراگراف ها در html می پردازیم. نمی توان مطمئن بود که HTML نوشته شده چگونه نمایش داده خواهد شد. صفحه های بزرگ و کوچک یا مرورگر تغییر اندازه داده شده ممکن است نتیجه متفاوتی دهند. در HTML نمی توان با اضافه کردن فاصله یا سطر خالی ،خروجی را تغییر داد. مرورگر هر فاصله یا سطر خالی اضافی را هنگام نمایش ،حذف خواهد کرد. تگ ها تنها قادرند المنت خاص خود را ایجاد کنند هر گونه تغییرات در ظاهر و صفات آن ها بوسیله اتریبیوت ها در آن ها ایجاد می شود. اتریبیوت استایل می تواند به هر المنتی اعمال شده و تغییرات را در آن بوجود آورد. در این جلسه از دوره آموزشی اچ تی ام ال به بررسی این اتریبیوت پرداخته می شود.
مشاهده و خرید8
در جلسه ۸ از دوره آموزشی اچ تی ام ال (HTML) به آموزش فرمت متن ها در html می پردازیم. بوسیله اتریبیوت استایل می توان به المنت های مختلف از جمله پاراگراف ها تغییرات دلخواه را اعمال کرد. اما اچ تی ام ال تگ هایی را برای بولد، ایتالیک، آندرلاین، هایلایت و... متن در نپر گرفته است که در این جلسه از دوره آموزشی اچ تی ام ال به بررسی این تگ ها پرداخته می شود. در HTML عناصر مخصوص برای فرمت دهی متن به منظور رساندن معانی مختلف ، وجود دارد. بطور مثال از عناصری مانند <b> و <i> برای فرمت دهی خروجی متن استفاده می شود تا متن را ضخیم یا کج نمایش دهیم. عناصر فرمت دهی برای نمایش انواع مخصوصی از متن ، طراحی شده است.
مشاهده و خرید9
در جلسه ۹ از دوره آموزشی اچ تی ام ال (HTML) به آموزش Quote و cite در html می پردازیم. در اچ تی ام ال تگ هایی برای قراردادن نقل قول، قسمتی از یک متن، قراردادن مشخصات نویسنده یک مطلب و... وجود دارند. این تگ ها فرمت این گونه متن ها را بصورت پیش فرض اعمال می کنند. برچسب cite عنوان یک اثر را تعریف می کند و نشاندهنده یک رفرنس به یک کار خلاقانه است که باید شامل عنوان اثر و یا نام نویسنده (فرد، افراد یا سازمان) و یا یک URL مرجع باشد. کار خلاقانه ممکن است شامل یک کتاب، مقاله، شعر، آهنگ، اسکریپت، فیلم، برنامه تلویزیونی، بازی، مجسمه ، نقاشی، تئاتر، اپرا، موسیقی، نمایشگاه، برنامه کامپیوتری، وب سایت، صفحه وب، یک پست وبلاگ و غیره
مشاهده و خرید10
در جلسه ۱۰ از دوره آموزشی اچ تی ام ال (HTML) به آموزش رنگها در برنامه html می پردازیم. قبلا با مطالعه مقاله «HTML چیست» دریافتیم که HTML یک زبان نشانه گذاری است که دستورات خود را به صورت تگ به مرورگر اعلام میکند. این تگ‌ها در زمان نمایش سند به کاربر نشان داده نمی‌شوند اما تمامی چارچوب و ظاهر یک صفحه وب را تعیین می‌کنند. از آنجایی که ظاهر صفحات وب هم اهمیت بالایی دارند، عناصری در HTML گنجانده شده‌اند که به برنامه نویس در ایجاد ظاهری مطلوب برای صفحات وب کمک می‌کنند. در ادامه به معرفی عناصر CSS و رنگ در HTML می‌پردازیم. اچ تی ام ال انواع مختلف رنگی را پشتیبانی میکند، RGB,HSL,HEX و.... هر کدام از این مدل های رنگی می توانند بوسیله مجموعه ای از ۳ عدد و یا یک کد یک رنگ را ایجاد نمایند.
مشاهده و خرید11
در جلسه ۱۱ از دوره آموزشی اچ تی ام ال (HTML) به آموزش css در برنامه html می پردازیم. در این جلسه از دوره آموزشی اچ تی ام ال به معرفی هر سه این روش ها و کار با اصلی ترین ویژگی های css از جمله padding,margin,id,class,font و... پرداخته می شود. در واقع زیبایی سازی صفحات وب بر عهده این زبان بوده و تنها با تعریف کد های HTML ممکن نمی باشد. CSS یک زبان برنامه نویسی پر کاربرد می باشد که مکملی بر زبان HTML است و سعی در تکمیل آن دارد CSS زبانی می باشد که توسط آن قادر خواهید بود استایل طراحی صفحات وب را یکبار تعریف و به صفحات مورد نیازتان اعمال کنید.
مشاهده و خرید12
در جلسه ۱۲ از دوره آموزشی اچ تی ام ال (HTML) به آموزش لینک در برنامه html می پردازیم. مهم ترین قسمت در html، ایجاد لینک برای ارتباط و مرور بین صفحات مختلف است. بوسیله تگ a در html می توان به هر عنصر یک لینک نسبت داد که با کلیک روی آن لینک نمایش داده شود. در این جلسه از دوره آموزشی html به آموزش تگ a و تنپیمات مربوط به نحوه کارکرد آن آشنا خواهید شد.لینک‌ها را می‌توان تقریبا در همه جای صفحات وب پیدا کرد. کار لینک‌ها هدایت کاربر از صفحه‌ای به صفحه دیگر یا از محتوایی به محتوای دیگر است. لینک‌های HTML از نوع هایپرلینک هستند که می‌توانید با کلیک کردن روی آنها به سند دیگری هدایت شوید.
مشاهده و خرید13
در جلسه ۱۳ از دوره آموزشی اچ تی ام ال (HTML) به آموزش تصویر در برنامه html می پردازیم. وجود تصویر در یک وب سایت، زیبایی و گیرایی صفحه را بهبود می بخشد. در html با استفاده از تگ img می توان تصویری را در وب سایت قرار داد. این تصاویر می توانند بصورت بک گراند، دکمه، لینک و... باشند تا به کاربر در استفاده بهتر از وب سایت شما کمک کنند. در این جلسه از دوره آموزش اچ تی ام ال نحوه ایجاد تصاویر، آدرس دهی و قرار دادن آن ها ، نحوه طراحی به صورتی که وب سایت در هر اندازه ای از صفحه نمایش به درستی نشان داده شود، نحوه چیدمان تصاویر کنار یکدیگر، خواص و استایل آن ها آموزش داده می شود.
مشاهده و خرید14
در جلسه ۱۴ از دوره آموزشی اچ تی ام ال (HTML) به آموزش ایجاد جدول در html می پردازیم. جدول ها در html کاربرد زیادی دارند. از تقسیم بندی صفحه تا ایجاد فرم ها و جدول های ساده. برای تعریف جدول از تگ table و برای ایجاد ستون ها و ردیف های آن از تگ های tr,td,th استفاده می شود. با استفاده از استایل ها می توان چیدمان و نحوه نمایش جدول ها را تغییر داد. در این جلسه ار دوره آموزشی بصورت کامل به بررسی جدول و تگ های مربوط به آن پرداخته می شود. در اچ تی ام ال برای تعریف یک جدول از تگ table استفاده میکنیم. هر جدول میتواند شامل سربرگ جدول، ردیف ها و سلول های اطلاعات باشد. سربرگ هر جدول که حاوی عنوان مربوط به هر ستون است را با تگ th مشخص میکنیم. ردیف های هر جدول را با تگ tr ایجاد میکنیم. و در پایان خانه های جدول، یا همان سلول های اطلاعات را با td مشخص میکنیم.
مشاهده و خرید15
در جلسه ۱۵ از دوره آموزشی اچ تی ام ال (HTML) به آموزش لیست در برنامه html می پردازیم. در html می توان دو نوع لیست ایجاد کرد Ordered و unOrdered لیست های unordered بصورت غیرعددی نشانه گذاری می شوند و لیست های ordered بصورت عددی و یا حروف. این لیست ها با تگ های ul و ol ایجاد می شوند. از این دو نوع لیست می توان منو های وب سایت را ایجاد کرد و بوسیله استایل لیست ها را بصورت منو ایجاد کرد. همچنین نوع دیگری از لیست ها بعنوان description list، می توانند توضیحاتی را درمورد هر آیتم ارائه دهند. برای هر کدام از انواع لیست های قابلیت قراردادن زیر مجموعه موجود است که در این جلسه به بررسی آن ها پرداخته می شود.
مشاهده و خرید16
در جلسه ۱۶ از دوره آموزشی اچ تی ام ال (HTML) به آموزش بلاک ها و کلاس در html می پردازیم. در html هر عنصر با توجه به نوع خود، به صورت inline و یا بلاک نمایش داده می شود. در حالت نمایش بلاک، عنصر در یک خط جدید قرار میگیر د و نمیتوان عنصر دیگری را در کنار آن قرار داد. تگ هایی مانند p، div، h و... از این دسته عناصر هستند. اما برخی تگ ها مثل button، img، span و... بصورت inline هستند و عناصر را به اندازه عرض واقعی خود نشان می دهند. به این صورت می توان این عناصر را در کنار هم قرار داد. در این جلسه از دوره آموزشی html با انواع این عناصر و خاصیت تگهای دسته بندی inline و بلاک آشنا خواهد شد. همچنین در این جلسه کلاس ها در اچ تی ام ال و نحوه اعمال استایل به یک سری از عناصر آموزش داده می شود.
مشاهده و خرید17
در جلسه ۱۷ از دوره آموزشی اچ تی ام ال (HTML) به آموزش id و iframe در html می پردازیم. در اچ تی ام ال هنگام استفاده از استایل ها، می توان به نوع خاصی از تگ ها استایل موردنظر را اعمال کرد. اما در صورتی که در یک صفحه تعداد زیادی از نوع تگ موردنظرما (مثلا تگ p) موجود باشد، چگونه می توان به یکی از آن ها دسترسی داشت و استایل را به آن اعمال کرد؟ بوسیله اعمال id به هر تگ می توان به صورت منحصر به فرد به آن تگ دسترسی داشت. این ویژگی می تواند به تمام المنت ها اعمال شود. در این جلسه از دوره آموزشی html به آموزش کار با id و کاربردهای آن و همچنین آشنایی با تگ Iframe برای نمایش صفحات دیگر درون وب سایت خودمان خواهیم پرداخت.
مشاهده و خرید18
در جلسه ۱۸ از دوره آموزشی اچ تی ام ال (HTML) به آموزش جاوا اسکریپت در html می پردازیم. با استفاده از جاوا اسکریپت می توان توابع را در اچ تی ام ال بکار برد. این توابع در سمت کلاینت اجرا خواهند شد. استفاده از جاوا اسکریپت امکانات متعددی از جمله اعتبارسنجی فیلدها, امکان ایجاد صفحات داینامیک و... را به ما می دهد. بوسیله جاوا اسکریپت می توان بر روی تگ های اچ تی ام ال در هنگام وقوع رویداد های مختلف تغییراتی را ایجاد کرد. این تغییرات می تواند بر روی خود تگ ها, استایل و یا اتریبیوت های آن ها اعمال شود. جاوا اسکریپت در تگ script تعریف می شود . می توان در المنت های مختلف آن را صدا کرد تا عملیات خود را آغاز کند. در برخی مرورگرها امکان غیرفعال کردن اجرای این کدها وجود دارد که بوسیله تگ noScript می توان پیغامی مناسب در این مواقع به کاربر نمایش داد. در این جلسه از دوره آموزشی html به تعریف جاوا اسکریپت، نحوه نوشتن تگ های آن و کاربردهای اصلی آن و نوشتن کدهای آن پرداخته خواهد شد.
مشاهده و خرید19
در جلسه ۱۹ از دوره آموزشی اچ تی ام ال (HTML) به آموزش تگ head در html می پردازیم. تگ head در اچ تی ام ال, بیشتر به منظور تعریف متا دیتا یا داده هایی در مورد داده های وب سایت استفاده می شود. در تگ هد می توان عناصری مانند تیتر صفحه وب، کلمات کلیدی، نام نویسنده، استایل ها، اسکریپت ها و... را تعریف کرد. تگ <head> یک ظرف برای همه عناصر عنوان است. تگ <head> باید شامل یک title برای سند باشد و می تواند شامل script ها باشد، مرورگر را به مکانی هدایت کند که style sheet ها رابیابد، اطلاعات meta را ارائه کند و غیره.. تگ سر(<head>) شامل عناصری مانند اسکریت ها ، آدرس فایل های سبک (Style Sheet)،ارائه اطلاعات متا ،عنوان صفحه و موارد دیگر می باشد. وارد کردن عنوان صفحه به شما کمک می کنند تا موتور های جستجو شما را بهتر پیدا کنند و ان موضوع باعث خواهد شد رتبه ی شما در این موتورهای جستجو بالا برود در این جلسه از دوره آموزشی html به بررسی تگ های موجود در head می پردازیم.
مشاهده و خرید20
در جلسه ۲۰ از دوره آموزشی اچ تی ام ال (HTML) به آموزش انواع طراحی layout در html می پردازیم. layout به معنای Layout به معنای طرح بندی است یعنی صفحه وب چطور نمایش داده شود. معمولا محتوای سایت در قالب چندین ستون نمایش داده میشود. در html برای طراحی صفحات روش های مختلفی وجود دارد. طراحی صفحات توسط خود html بوسیله جدول انجام می شود. جدول ها با استفاده از تگ های table,tr,td,th بوجود می آیند و در اصل برای طراحی صفحات ساخته نشده اند. استفاده از جدول برای طراحی مشکلات زیادی را از جمله عدم انعطاف پذیری و ویر ایش دشوار بوجود می آورد. برای طراحی صفحات از روش های دیگر که عمدتا بر پایه css هستند استفاده می شود. در این جلسه از دوره آموزشی html به معرفی این روش های و مزایا و معایب هرکدام پرداخته می شود.
مشاهده و خرید21
در جلسه ۲۵ از دوره آموزشی اچ تی ام ال (HTML) به آموزش برنامه ی html5 می پردازیم. در سال ۱۹۸۹ اولین نسخه اچ تی ام ال ایجاد شد و پس از طی مراحل مختلف در سال ۲۰۰۶ اولین نسخه از html5 با هدف سادگی و بهبود کارایی عرضه شد. HTML5 ورژن پنجم (Hypertext Markup Language (HTML می باشد. HTML5 بر اساس استانداردهای کدنویسی قبلی ولی به مراتب با بهبود کارایی بیشتر و انعطاف پذیری بالاتر برای کنترل روی وب سایت ها ساخته شده است. HTML5 قدمی بزرگ و رو به جلو در دنیای طراحی وب می باشد که این امکان را برای افزایش کارایی را می دهد. این به خاطر سه دلیل مهم است که همه آنها حول محور کارایی صفحات وب شخصی می چرخند. صفحات وب به این نیاز دارند که شبیه یک صفحات وب باشند یا به مانند صفحات وب عمل کنند. دردسترس بودن فلش به طراحان کمک می کند که محدودیت های استانداردهای HTML را برطرف کنند تا بتوانند انیمیشن و افکت های بصری در صفحات وب قرار دهند. تمامی سایت را می توان بوسیله یک فلش طراحی کرد که این اجازه را می دهد که از روش های جدید منوی ناوبری و سازماندهی صفحات استفاده کنید.
مشاهده و خرید
