فصل اول – آموزش زبان HTML5

سیلابس:

1. تعریف زبان HTML
2. آشنایی با زبان HTML و بررسی نقش این زبان در طراحی سایت و سئو
3. آشنایی با سایت W3Schools و بخش HTML این سایت
4. آشنایی با مخترع زبان HTML و دیدگاه او نسبت به نسخه های متعدد آن
5. بررسی سورس کد وب سایت ها و آشنایی بیشتر با زبان HTML
6. نقش مرورگرها در تفسیر کدهای HTML
7. نقش مرورگرها در بروزرسانی زبان HTML
8. بررسی اجمالی چند تگ از روی سورس وب سایت ها جهت آشنایی با کارکرد زبان HTML
9. بررسی نقش سازمان ARPA در گسترش زبان HTML
10. بررسی ابتدایی ارتباط زبان HTML با زبان CSS و ترکیب آنها برای رسیدن به نتیجه بهتر
11. بررسی نقش زبان HTML در سئو سایت

باید بدانیم که زبان HTML از هر نسخه و ورژنی, در تمامی سایت های دنیا به کار برده شده است و ساختار اصلی تمامی وب سایت ها را تشکیل داده است.

در این درس قصد داریم تا شما را با این زبان و اهمیت یادگیری آن در دنیای طراحی سایت و سئو آشنا نماییم و با مخترع آن هم میتوانیم آشنایی کوتاهی داشته باشیم.

آخرین نسخه این زبان را در حال حاضر مورد بررسی قرار میدهیم و حتی در مورد نسخه های قبلی و کارکردهای آنها نیز مطالبی را خواهیم گفت.

مطالب آموزشی خود را بر مبنای یکی از سایت های مرجع و عالی در مورد یادگیری زبان HTML به جلو خواهیم برد و در این درس با این سایت نیز آشنا خواهیم شد.

سری هم به سایت سازمان W3C خواهید زد و نقش این سازمان را در استاندارد سازی زبان HTML و CSS مورد بررسی قرار خواهیم داد.

سیلابس:

1. بررسی دقیق سایت W3Schools در بخش آموزش زبان HTML
2. بررسی نقش Bootstrap و ارتباط آن با زبان HTML و سئو سایت
3. مقایسه کامل وب سایت های استاتیک با وب سایت های داینامیک
4. بررسی داینامیک بودن چند وب سایت و عوامل تشکیل دهنده آنها و تفاوت آن با بخش های استاتیک
5. بررسی بخش زبان های Client-Side وب سایت W3Schools
6. آشنایی با Libraryهای متنوع زبان JavaScript
7. بررسی بخش زبان های Server-Side وب سایت W3Schools
8. بررسی چند زبان برنامه نویسی سمت سرور به عنوان زبان های برنامه نویسی سمت سرور
9. بررسی نحوه برگزاری آزمون پس از پایان هر درس آموزشی در وب سایت W3Schools و انجام آن در این فصل
10. بررسی نقش ابزارها در استفاده و یادگیری زبان HTML
11. بررسی چند ابزار خوب برای ایجاد نمودن و ویرایش صفحات وب سایت
12. بررسی نقش ابزار Notepad در ایجاد نمودن و ویرایش صفحات وب سایت
13. نحوه ساختن صفحات html توسط ابزار Notepad به عنوان یک روش بسیار ساده و سریع
14. بررسی نقش ابزار ویرایشگر کدها در سایت W3Schools و نحوه استفاده از آن
15. بررسی نقش یکی از ابزارهای آنلاین عالی در ایجاد نمودن و ویرایش صفحات وب سایت
16. بررسی نقش ابزار Sublime Text در ایجاد نمودن و ویرایش صفحات وب سایت

در این درس امروز قصد داریم تا شما را بیشتر با وب سایت و منبع آموزشی W3Schools آشنا نماییم و بخش های مختلف این وب سایت را مخصوصا بخش آموزش زبان HTML را بیشتر مورد ارزیابی قرار دهیم.

سعی میکنیم در این درس, در مورد نقشه آموزشی خودمان و ترتیب یادگیری سریع و عالی زبان HTML و نحوه پیاده سازی آن نیز صحبت کنیم.

البته یکی از بخش های مهم دیگر درس امروز, یادگیری ابزارهایی میباشد که برای ایجاد نمودن صفحات وب سایت و یا نوشتن کدهای HTML و CSS و حتی JavaScript نیز میتواند مورد استفاده قرار بگیرد.

سیلابس:

1. بررسی دقیق نقش زبان HTML در صفحات مدرن و امروزی
2. بررسی رابطه و نقش زبان HTML در پیاده سازی ذهنیت های طراح سایت
3. بررسی دقیق یک صفحه وب سایت و نقش زبان HTML در به وجود آوردن تک تک بخش های آن صفحه
4. تعریف DOCTYPE و بررسی نقش آن در درست تفسیر شدن صفحات وب سایت
5. بررسی مشکلات مربوط به DOCTYPE و نسخه های مختلف آن
6. تعریف دقیق Tagها در زبان HTML
7. نقش تگها و یادگیری آن در به وجود آوردن صفحات وب سایت
8. بررسی دقیق ساختار تگ ها در زبان HTML
9. بررسی تگ باز (Opening Tag) و تگ بسته (Closing Tag)
10. بررسی مشکلات مربوط به بسته نشدن تگ ها و خطرات احتمالی آن
11. بررسی دقیق کدهای HTML یک وب سایت برای آموزش بهتر و یادگیری مطالب بیشتر درس امروز
12. نقش تگ html در صفحات وب سایت و بررسی موارد مربوط به آن همراه با مثال
13. نقش تگ head در صفحات وب سایت و بررسی موارد مربوط به آن همراه با مثال
14. نقش تگ title در صفحات وب سایت و بررسی موارد مربوط به آن همراه با مثال
15. نقش تگ body در صفحات وب سایت و بررسی موارد مربوط به آن همراه با مثال
16. بررسی نحوه نوشتن استاندارد و مناسب کدهای HTML و موارد مصرف آن
17. بررسی نسخه های مختلف زبان HTML و دسترسی به تاریخچه این زبان
18. بیان مشکلات طراحان وب سایت در نسخه های قدیمی زبان HTML و ارتباط آن با نسخه های مختلف مرورگرها
19. بررسی تفاوت نسخه HTML5 با نسخه های قبلی زبان HTML
20. بیان نکاتی مربوط به سئو و ارتباط آن با زبان HTML وب سایت
21. معرفی سایت caniuse برای بررسی دقیقتر تگ های HTML

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

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

سیلابس:

1. بررسی دقیقتر Element Content در زبان HTML
2. بررسی قانون تگ های تودرتو (Nesting Tag) برای نوشتن و اعمال چندین تگ به محتویات و المان ها
3. بررسی قانون بسته بودن تمامی تگ ها و بیان مشکلات احتمالی آنها
4. تعریف دقیق خصوصیت تگ ها (Attribute) همراه با مثال جهت تفهیم بهتر مطلب
5. نقش Attributeها در زبان HTML
6. نحوه نوشتن Attributeها در زبان HTML
7. بررسی چند قانون مفید در زمان نوشتن Attribute برای تگها
8. بررسی چند Attribute و نحوه جایگذاری آنها در تگ ها در زبان HTML
9. آشنایی ابتدایی با چند تگ و Attribute
10. نقش خصوصیت lang در تگ html
11. بررسی قانون کوچک بودن حروف یا بزرگ بودن آنها در نوشتن تگ ها و Attributeها

با توجه به مطالب آموزشی که در درس قبل در مورد یادگیری تگها در زبان HTML داشتیم, حالا زمان آن فرا رسیده است تا در مورد ساختار Attributeها یا همان خصوصیت تگ ها در زبان HTML صحبت کنیم.

در این درس, در مورد ساختار و نحوه نوشتن و قانون های مختلف Attributeها در زبان HTML صحبت خواهیم نمود.

بنابراین منتظر یادگیری قانون ها خوب و ساده و البته زیادی در این زمینه باشید.

سیلابس:

1. بررسی فاصله ها در کدهای HTML و واکنش مرورگرها در برخورد با آنها
2. بررسی Enterها در کدهای HTML و واکنش مرورگرها در برخورد با آنها
3. بررسی دقیق تگ هایی از نوع Block-Levels و معرفی چند تگ در این زمینه
4. بررسی دقیق تگ هایی از نوع Text-Levels و معرفی چند تگ در این زمینه
5. معرفی تگ p و کاربردهای آن
6. معرفی تگ br و کاربردهای آن
7. معرفی تگ pre و کاربردهای آن
8. معرفی Container بودن تگ ها
9. معرفی نوع Empty بودن تگ ها

در این درس تنها قصد داریم تا شما را با چند قانون و حقیقت بسیار مهم و تاثیر گذار در نوشتن کدها در زبان HTML آشنا نماییم.

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

طبیعتا با فراگرفتن این درس میتوانید خیلی راحتتر و سریعتر نسبت به پیاده سازی تگ ها و Attributeهایی که در درس های قبلی و همچنین درس های بعدی فرا می گیرید, صفحات وب سایت خود را بسازید و آنها را برای بهینه سازی در موتورهای جستجو آماده نمایید.

سیلابس:

1. بررسی دقیق تگ b و کاربرد آن
2. بررسی دقیق تگ strong و کاربرد آن
3. تفاوت تگ b و strong در HTML و اهمیت استفاده از آنها
4. بررسی دقیق تگ i و کاربرد آن
5. بررسی دقیق تگ em و کاربرد آن
6. تفاوت تگ i و em در HTML و اهمیت استفاده از آنها
7. بررسی دقیق تگ mark و کاربرد آن
8. بررسی دقیق تگ small و کاربرد آن
9. بررسی دقیق تگ del و کاربرد آن
10. بررسی دقیق تگ sub و کاربرد آن
11. بررسی دقیق تگ sup و کاربرد آن
12. تعریف دقیق Global Attribute و کاربرد آن
13. آشنایی با برخی از دستورات CSS برای فرمت دهی تگ ها
14. برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده

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

در این درس چند تگ بسیار مهم و کاربردی که برای سئو سایت هم بسیار مفید هستند را به شما معرفی خواهیم نمود و کاربردهای آنها را به دقت مورد بررسی و ارزیابی قرار خواهیم داد.

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

سیلابس:

1. بررسی دقیق تگ blockquote و کاربرد آن
2. بررسی چند مورد در استفاده از تگ blockquote
3. بررسی دقیق تگ q و کاربرد آن
4. بررسی دقیق تگ abbr و کاربرد آن
5. بررسی دقیق خصوصیت title در تگ abbr
6. بررسی دقیق تگ address و کاربرد آن و نقش این تگ در سئو سایت به صورت محلی
7. بررسی دقیق تگ cite و کاربرد آن
8. بررسی دقیق تگ bdo و کاربرد آن
9. بررسی اهمیت Direction در صفحات وب فارسی و ذکر چند نکته مهم
10. برگزاری آزمون انتهایی درس HTML Quotations در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
11. تعریف Commentها در زبان های برنامه نویسی
12. بررسی و بیان کاربردهای مختلف گذاشتن Comment در کدهای HTML
13. نحوه نوشتن درست Commentها در زبان HTML
14. برگزاری آزمون انتهایی درس Comments در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
15. بررسی نقش رنگ ها در موفقیت سایت و جذب بازدیدکنندگان و همچنین ارتباط آن با سئو سایت
16. بررسی روش های مختلف بیان نمودن رنگ ها در زبان HTML و معایب و مزایای آنها
17. معرفی دقیق ساختار رنگ ها در RGB همراه با مثال
18. معرفی دقیق ساختار رنگ ها در Hexadecimal همراه با مثال
19. معرفی دقیق ساختار رنگ ها در RGBA همراه با مثال
20. آشنایی ابتدایی با ساختار رنگ ها در HSL
21. آشنایی ابتدایی با ساختار رنگ ها در HSLA
22. معرفی یک Extension انتخاب رنگ ها در مرورگر Chrome جهت انتخاب دقیق رنگ ها
23. بررسی چند دستور ساده CSS برای بیان رنگ ها در تگها
24. بررسی تگ font جهت به کاربرد رنگ ها و آشنایی با آنها

درس امروز را به 3 بخش مهم تقسیم نموده ایم تا بتوانیم در مورد هر یک از آنها به تفضیل برای شما صحبت کنیم.

در بخش اول در مورد مجموعه ای تگ ها گه در دسته HTML Quotation قرار میگرند و بیشتر برای نقل قول مورد استفاده قرا میگیرند نیز صحبت خواهیم نمود. البته در این بخش با چند Attribute خوب هم آشنا خواهیم شد.

در بخش دوم در مورد نحوه نوشتن یادداشت ها (Comments) در زبان HTML و کاربردهای متنوع آن نیز صحبت خواهیم نمود.

در بخش سوم و پایانی درس امروز خیلی کامل در مورد رنگ ها در دنیای کامپیوتر مخصوصا نحوه نوشتن و بیان کردن آنها در زبان HTML و CSS و همچنین زبان های دیگر تحت وب نیز صحبت نموده ایم.

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

سیلابس:

1. تعریف زبان CSS و نقش ابتدایی آن در طراحی سایت
2. بررسی رابطه زبان CSS با زبان HTML
3. بررسی دلایل به وجود آمدن زبان CSS
4. بررسی دلایل استفاده از زبان CSS
5. بررسی چند وب سایت از نگاه به کاربردن زبان CSS در آنها
6. بررسی ارتباط Responsive بودن سایت با زبان CSS
7. آشنایی ابتدایی با Duplicate Content و ارتباط آن با طراحی سایت
8. بررسی دقیق روش های به کاربردن دستورات CSS
9. بررسی دقیق روش External برای استفاده از دستورات CSS
10. بررسی دقیق روش Internal برای استفاده از دستورات CSS
11. بررسی دقیق روش Inline برای استفاده از دستورات CSS
12. بررسی نفش خصوصیت style در به کاربردن دستورات CSS
13. آشنایی ابتدایی با ساختار دستورات در زبان CSS و تفاوت های آن با زبان HTML
14. بررسی ارتباط یادگیری زبان CSS با زبان HTML
15. نحوه دسترسی به فایل های CSS خارجی وب سایت ها جهت بررسی دقیق کدها
16. معرفی و بررسی چند ابزار سودمند جهت طراحی سایت و تجزیه و تحلی کدهای HTML و CSS و ….
17. معرفی و آشنایی با ابزار Chrome Dev Tools در مرورگر Chrome
18. معرفی و آشنایی با ابزار Web Developer در مرورگر کروم
19. معرفی و آشنایی با ابزار Google Lighthouse در مرورگر Chrome و ابزار Chrome Dev Tools
20. معرفی سایت W3C Markup Validation Service جهت بررسی کدهای HTML
21. معرفی سایت W3C CSS Validation Service جهت بررسی کدهای CSS

در این درس قصد داریم تا شما را با CSS و روش های استفاده از آن در کنار زبان HTML آشنا نماییم. نقش این زبان را برای شما شرح خواهیم داد و دلایل به وجود آمدن زبان CSS را برای شما تشریح خواهیم نمود.

در این درس هر 3 روش استفاده از دستورات CSS را مورد بررسی قرار خواهیم داد تا در مورد فراگرفتن مطالب آموزشی این فصل نیز مشکلی نداشته باشیم.

البته در بخشی دیگر از آموزش درس امروز در مورد برخی از سودمندترین ابزارهای دنیای طراحی سایت نیز با شما صحبت خواهیم نمود تا بتوانید طراحی راحتتر و موثرتری را در حوزه HTML و CSS و حتی JavaScript داشته باشید.

سیلابس:

1. تعریف دقیق لینک ها و بررسی واژه Hyperlink
2. بررسی دقیق خصوصیت href در تگ a
3. بررسی انواع مقدارهایی که میتوانیم در href قرار دهیم
4. بررسی دقیق آدرس دهی مطلق (Absolute)
5. بررسی دقیق آدرس دهی نسبی (Relative)
6. بررسی عواملی که میتوانیم حالت و نحوه نمایش لینک ها را تغییر دهیم
7. بررسی نقش زبان CSS در تغییر خصوصیت لینک ها
8. بررسی دقیق حالت Unvisited لینک ها
9. بررسی دقیق حالت Visited لینک ها
10. بررسی دقیق حالت Active لینک ها
11. بررسی 3 حالت بیان شده در بالا بر روی وب سایت گوگل
12. بررسی چند دستور CSS برای تغییر حالت لینک ها جهت جذاب شدن آنها
13. روش تبدیل لینک ها به دکمه (Button) توسط زبان CSS
14. بررسی دقیق خصوصیت target در تگ a
15. بررسی دقیق مقدار _blank در target همراه با بیان سناریوها و کاربردهای مختلف آن
16. آشنایی ابتدایی با Framesetها در HTML و نقش خصوصیت target در آنها
17. معرفی خصوصیت title در تگ a و بررسی کاربردهای آن و ارتباط این خصوصیت با سئو لینک ها
18. معرفی قابلیت Named Anchor در تگ a و کاربرد آن همراه با ذکر مثال
19. برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
20. بررسی دقیق خصوصیت download در تگ a همراه با مثال
21. بررسی دقیق خصوصیت media در تگ a همراه با مثال
22. بررسی دقیق خصوصیت ping در تگ a همراه با مثال
23. بررسی دقیق خصوصیت rel در تگ a همراه با مثال
24. بررسی و معرفی چند خصوصیت (Attribute) تگ a که در HTML5 پشتیبانی نمی شود

در درس مهم امروز که میتواند ارتباط مستقیم به سئو و فصل 8 دوره سئو مقدماتی تا پیشرفته داشته باشد, شما را کاملا با تگ a که برای ساختن لینک ها مورد استفاده قرار میگرد اشنا خواهیم نمود و همچنین در مورد مهمترین Attributeهای این تگ نیز صحبت خواهیم نمود.

وب سایت های مختلفی را برای تجزیه و تحلیل لینک های آنها مورد بررسی قرار خواهیم داد و در مورد واژه Anchor Text هم مطالب بسیار سودمندی را نیز ارائه خواهیم نمود.

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

سیلابس:

1. بررسی نقش تصاویر در موفقیت و جذاب شدن وب سایت
2. معرفی تگ Img برای وارد نمودن تصاویر و نکات مهم در این زمینه
3. معرفی خصوصیت src در تگ Img و نکات مهم در این زمینه
4. بررسی روش لود کردن تصاویر از سایت های دیگر و بیان نکات مثبت و منفی در این زمینه
5. آشنایی ابتدایی با وارد نمودن تصاویر به غیر از تگ Img
6. بررسی نقش مهم خصوصیت alt در تصاویر و بیان مزیت های به کاربردن آنها در بخش های مختلف
7. بررسی سناریوهای مختلف تصاویری که alt ندارند
8. آشنایی ابتدایی با Web Accessibility و نرم افزارهای صفحه خوان (Screen Reader)
9. بررسی نقش alt در پیدا شدن تصاویر در Google Image
10. بررسی خصوصیت width و height تصاویر و بیان نکات مهم در به کاربردن آنها در کدهای html
11. نکات بسیار مهم در تغییر سایز تصاویر و بیان روش درست برای این کار
12. معرفی خصوصیت border در تگ Img و کاربرد آن
13. معرفی خصوصیت srcset در تگ img
14. معرفی فرمت تصویری که انیمیشن را پشتیبانی می کند و نحوه وارد کردن آن در صفحات وب سایت
15. معرفی فرمت های مختلف تصویری قابل پیشتیبانی در صفحات وب سایت همراه با نکات مهم در آدرس دهی این تصاویر
16. بررسی نحوه لینک کردن یک تصویر و نکات مهم در این زمینه
17. بررسی نحوه تنظیم شدن تصویر در کنار متن به واسطه CSS و موارد مهم در این زمینه همراه با ذکر مثال
18. آشنایی با تکنولوژی Image Map در تصاویر و کاربردهای آن و بررسی کدهای HTML آن
19. بررسی نحوه استفاده از تصاویر به عنوان تصویر پس زمینه (Background Image)
20. معرفی تگ picture و کاربرد آن
21. معرفی تگ source و کاربرد آن
22. رابطه ریسپانسیو بودن وب سایت با تگ picture
23. آشنایی با خصوصیت hspace در تگ Img
24. آشنایی با خصوصیت vspace در تگ Img
25. آشنایی با خصوصیت longdesc در تگ Img
26. آشنایی با خصوصیت align در تگ Img
27. برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده

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

تگ img خصوصیت های (Attributes) فراوانی دارد که سعی میکنیم در مورد بسیاری از آنها صحبت کنیم. البته نقش زبان CSS را نیز در این زمینه نیز بررسی و ارزیابی خواهیم نمود.

در مورد 3 فرمت متداول تصاویر نیز صحبت خواهیم نمود و با آنها و قابلیت های آنها نیز آشنا می شویم.

سیلابس ها:

1. آشنایی ابتدایی با Tableها و بیان برخی از کاربردهای آن
2. دلایل به وجود آمدن Tableها در زبان HTML
3. بیان نقل قولی از مخترع زبان HTML در زمینه Tableها
4. بررسی دقیق ساختار Tableها در قالب سطر و ستون
5. معرفی و آشنایی با Featured Snippets ها و ارتباط آن با Tableها
6. معرفی و آشنایی با تکنیک ساختن ساختار وب سایت با استفاده از Tableها
7. بررسی دقیق تگ هایی که باید برای ساختن Tableها مورد استفاده قرار بگیرد
8. بررسی دقیق تگ table و کاربرد آن
9. بررسی دقیق تگ tr و کاربرد آن
10. بررسی دقیق تگ td و کاربرد آن
11. بررسی دقیق تگ th و کاربرد آن
12. ارتباط CSS با Tableها برای ساختن ساختار سایت
13. نحوه وارد کردن تگهای دیگر در Tableها
14. بررسی نقش مهم Table Cell در وارد نمودن تگ های دیگر در Table
15. بررسی خصوصیت border و کاربرد آن
16. بررسی خصوصیت cellpadding و کاربرد آن
17. بررسی خصوصیت cellspacing و کاربرد آن
18. بررسی خصوصیت width و کاربرد آن
19. بررسی خصوصیت align و کاربرد آن
20. بررسی خصوصیت rowspan و کاربرد آن
21. بررسی خصوصیت colspan و کاربرد آن
22. بررسی تگ caption و کاربرد آن
23. بررسی چند دستور CSS برای بهبود ظاهر Tableها
24. بررسی خصوصیت هایی از table که در HTML5 مورد پشتیبانی قرار نمیگیرد
25. برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده

در این درس در مورد Tableها در زبان HTML و کاربرهای درست و صحیح آن نیز صحبت خواهیم نمود. البته به صورت شفاف پاسخ آن دسته از افرادی که اعتقاد دارند در HTML5 قابلیت Tableها از بین رفت است نیز صحبت های بسیار خوبی هم خواهیم داشت.

سعی میکنیم شما را در این درس با ساختار و تگ های متنوع Table آشنا نماییم و حتی در وب سایت آمازون به شما نشان دهیم که هنوز از Table استفاده شده است.

بنابراین زمان را از دست ندهید و به دنیای جالب Tableها وارد شوید.

سیلابس:

1. معرفی انواع لیست ها و کاربرد آنها در سناریوهای مختلف
2. بررسی دقیق لیست هایی از نوع Unordered همراه با موارد مصرف آن
3. بررسی دقیق لیست هایی از نوع Ordered همراه با موارد مصرف آن
4. بررسی دقیق لیست هایی از نوع Definition همراه با موارد مصرف آن
5. آشنایی با واژه Bullet در لیست ها
6. معرفی تگ ul برای ساختن Unordered List
7. معرفی تگ li برای ساختن آیتم ها
8. آشنایی با انواع حالت های مختلف لیست های Unordered
9. بررسی دقیق خصوصیت type در تگ ul
10. بررسی دقیق خصوصیت start در تگ ol
11. بررسی دقیق خصوصیت reversed در تگ ol
12. نقش زبان CSS برای تغییر bulletهای لیست های Unordered
13. بررسی دقیق نقش Unordered List جهت ساختن منو در سایت های
14. بررسی دقیق نقش Unordered List جهت جذب کردن موتورهای جستجو
15. معرفی تگ ol برای ساختن Ordered List
16. آشنایی با واژه Indentation
17. بررسی دقیق تگ dl و کاربرد آن
18. بررسی دقیق تگ dt و کاربرد آن
19. بررسی دقیق تگ dd و کاربرد آن
20. بررسی نحوه نوشتن و ترکیب لیست ها در زبان HTML
21. بررسی خصوصیت هایی دیگر از لیست ها که در HTML5 مورد پشتیبانی قرار نمیگیرد
22. برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده

درس امروز را میتوان نهایت کاربرد CSS و ترکیب آن با زبان HTML نامگذاری نمود. در این درس ابتدا در مورد 3 نوع لیستی که در زبان HTML میتوان آن را ایجاد نمود صحبت میکنیم. در مورد بیشتر تگ ها و خصوصیت های آنها نیز صحبت به میان خواهد آمد.

در بخشی دیگر از آموزش امروز در مورد استفاده نوعی خاص از لیست هایی که یاد گرفته اید برای جلب نظر موتورهای جستجو و بالابردن سئو سایت نیز به تفضیل صحبت خواهیم نمود و حتی نمونه کدهای CSS آنها را نیز به شما معرفی میکنیم.

در این میان وب سایت های بزرگی همچون Alibaba.com و amazon.com و digikala.com را نیز از این منظر مورد بررسی قرار خواهیم داد.

سیلابس:

1. بررسی چند تگ در گروه های Block-Level و Text-Level
2. بررسی دقیق تگ DIV و کاربرد آن در تقسیم بندی صفحات
3. بررسی دقیق تگ Span و کاربرد آن در طراحی سایت
4. بررسی تفاوت دو تگ DIV و Span
5. بررسی و بیان نقش زبان CSS در استفاده از 2 تگ DIV و span
6. بررسی دقیق خصوصیت ID و نحوه استفاده از آن
7. بررسی دقیق خصوصیت Class و نحوه استفاده از آن
8. بررسی سورس سایت W3Schools در استفاده از Class و ID
9. بررسی تفاوت بین خصوصیت های Class و ID
10. بررسی دقیقتر خصوصیت Class و آنالیز استفاده شدن این خصوصیت در CSS و JavaScript
11. تعریف دقیق جاوااسکریپت و بررسی چند بخش کد جاوااسکریپت جهت آشنایی ابتدایی
12. بررسی وجود جاوااسکریپت در کنار کدهای HTML و CSS جهت ایجاد وب سایت نرمال
13. بررسی کاربردها و مزیت های استفاده از زبان جاوااسکریپت در سایت
14. بررسی واژه Interavtivity در وب سایت
15. تعریف دقیق زبان های Client-Side
16. تعریف دقیق زبان های Server-Side
17. نحوه غیر فعال کدن تفسیر کدهای جاوااسکریپت در مرورگر جهت بررسی فنی وب سایت ها
18. بررسی تغییر کدهای CSS و HTML داخل صفحات توسط جاوااسکریپت
19. بررسی و معرفی دقیق تگ Script و کاربرد اصلی آن
20. بررسی و معرفی دقیق تگ noscript و کاربرد اصلی آن
21. برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده

این درس را به 3 بخش بسیار مهم تقسیم نموده ایم تا بتوانیم در یک درس در مورد همه آنها صحبت نماییم و کار خود را در درس های آینده برای استفاده از زبان HTML هموارتر نماییم.

در بخش اول درس امروز در مورد تگ DIV و SPAN و اهمیت آن در دنیای کدنویسی HTML صحبت خواهیم نمود و در مورد برخی از عادت های اشتباه طراحان سایت نیز در این زمینه صحبت میکنیم.

در بخش دوم درس در مورد خصوصیت های Class و ID که در تمامی تگ های زبان HTML وجود دارند صحبت خواهیم کرد و حتی تفاوت های این 2 خصوصیت که در همه جا به چشم میخورد نیز مطالبی را خواهیم گفت.

در بخش سوم درس امروز در مورد زبان جاوااسکریپت و اهمیت به کاربردن آن در دنیای طراحی سایت به تفضیل صحبت خواهیم نمود.

سیلابس:

1. معرفی مجموعه تگ های Heading Levels و اهمیت وجود آنها در طراحی سایت و سئو
2. بررسی خصوصیت های تگ های Heading Levels
3. بررسی نحوه به کاربردن و ترتیب استفاده از تگ های Heading Levels
4. بررسی سایت Amazon و سایت های دیگر در زمینه استفاده درست و صحیح تگهای Heading Levels مخصوصا تگ h1
5. بررسی نقش تگ های Heading Levels در مقاله ها و پست های وب سایت
6. بررسی روش تغییر خصوصیت های تگ های Heading Levels توسط CSS
7. بررسی دقیق تگ hr و کاربردهای مختلف آن در قالب مثال
8. بررسی خصوصیت color در تگ hr
9. بررسی خصوصیت width در تگ hr
10. بررسی خصوصیت shadow در تگ hr
11. بررسی تفاوت خصوصیت size و width در تگ hr
12. بررسی متای UTF-8 در بخش head صفحه
13. آشنایی ابتدایی با تگ های متا در بخش head صفحه
14. بررسی خصوصیت های از بین رفته تگ body در HTML5
15. برگزاری آزمون انتهایی درس Heading Levels در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده

در این درس قصد داریم تا در مورد 4 بخش با شما صحبت کنیم و تگ های HTML مربوط به آنها را به شما عزیزان معرفی کنیم. مجموعه این تگ ها هم میتوانند شما را در ایجاد و ساختن صفحات وب سایت و همچنین بروز رسانی آنها از کدهای قدیمی HTML به کدهای جدید HTML یاری رساند.

در بخش اول در مورد اهمیت وجود مجموعه تگ های Heading Levels به تفضیل با شما صحبت میکنیم و حتی نحوه به کار بردن این تگ ها جهت بالا بردن رتبه سایت ها در موتورهای جستجو را بررسی و ارزیابی خواهیم نمود.

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

در بخش سوم در مورد خصوصیت های دیگر تگ head و کاربردهای دیگر آن برایتان آموزشی را خواهیم داشت.

در بخش چهارم باز هم در مورد تگ body و نقش آن در مورد مسائل دیگر صحبت هایی را برایتان خواهیم داشت.

سیلابس:

1. تعریف Frameset و دلایل استفاده از آن
2. معرفی سازمان ایجاد کننده Frameset
3. بررسی عواملی که باعث شد Framesetها دیگر مورد استفاده قرار نگیرند
4. بررسی عواملی که باعث شد موتورهای جستجو از Frameset پشتیبانی نکنند
5. بررسی رابطه Frameset با سئو سایت
6. بررسی دقیق تگ frameset و خصوصیت های مربوط به آن
7. بررسی دقیق تگ frame و خصوصیت مربوط به آن
8. بررسی DOCTYPE های مختلف مخصوصا در زمینه Frameset
9. تعریف iframe و دلایل استفاده از آن
10. بررسی سورس یکی از سایت ها جهت استفاده از iframe در قالب ویدئو
11. بررسی خصوصیت width تگ iframe
12. بررسی خصوصیت height تگ iframe
13. بررسی خصوصیت src تگ iframe
14. بررسی خصوصیت frameborder تگ iframe
15. بررسی خصوصیت scrolling تگ iframe
16. بررسی خصوصیت های تگ iframe که در HTML5 پشتیبانی نمی شود.
17. بررسی شرایطی که مرورگر از تگ iframe پشتیبانی نمیکند
18. برگزاری آزمون انتهایی درس iframe در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
19. بررسی دقیق روش هایی که میتواند ساختار وب سایت را توسط آنها ایجاد نمود و تشریح مزیت ها و معایب هر یک از آنها
20. بررسی دقیق جایگاه تگ های جدید و مفهومی که در HTML5 برای تقسیم بندی صفحات وب سایت به وجود آمده اند.
21. بررسی روش HTML Table برای ساختار بندی وب سایت همراه با ذکر نکات مهم
22. بررسی روش CSS Float Property برای ساختار بندی وب سایت همراه با ذکر نکات مهم
23. بررسی روش CSS Flexbox برای ساختار بندی وب سایت همراه با ذکر نکات مهم
24. بررسی روش Framework برای ساختار بندی وب سایت همراه با ذکر نکات مهم
25. بررسی روش CSS grid برای ساختار بندی وب سایت همراه با ذکر نکات مهم
26. بررسی Bootstrap جهت ساختار بندی صفحات وب سایت و تاثیر آن در سئو سایت

اگرچه امروزه از Framesetها چندان در طراحی سایت ها استفاده نمیشود ولی برای یادگیری iframeها که امروزه مورد استفاده قرار میگیرد قصد داریم تا در درس امروز در مورد Framesetها و سپس در مورد iframe نیز صحبت کنیم.

برای درک بهتر شرایط استفاده از iframe وب سایتی را مورد بررسی قرار خواهیم داد که ویدئویی را در قالب iframe از وب سایتی دیگر لود مینماید.

در بخش انتهایی درس امروز در مورد روش های طراحی و ایجاد نمودن ساختار وب سایت توسط روش های CSS و غیر CSS نیز صحبت خواهیم نمود.

سیلابس:

1. تعریف دقیق تگ های Meta و کاربردهای آنها در یک نگاه کلی
2. تعریف دقیق تگ Meta Charset و کاربرد آن
3. بررسی نقش UTF-8 در صحیح نشان دادن صفحات وب سایت
4. تعریف دقیق تگ Meta Description و کاربرد آن
5. تعریف دقیق تگ Meta Keyword و کاربرد آن
6. بررسی و بیان سیاست گوگل در پشتیبانی از Meta Keyword
7. تعریف دقیق تگ Meta Author و کاربرد آن
8. تعریف دقیق تگ Meta Refresh و کاربرد آن
9. تعریف دقیق تگ Meta Viewport و کاربرد آن
10. بررسی 2 صفحه Responsive از نگاه Meta Viewport و مشخص نمودن مشکلات مربوط به آن
11. بررسی و استفاده از ابزارهایی جهت آزمایش Responsive بودن سایت ها
12. بیان نکات مثبت و منفی در حذف تگ های head و body از صفحات وب سایت
13. بررسی دقیقتر کاربردهای دیگر تگ Link و معرفی خصوصیت rel و type در این تگ
14. معرفی خصوصیت media در تگ link
15. معرفی خصوصیت defer تگ script و کارکرد آن
16. معرفی خصوصیت sync تگ script و کارکرد آن

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

بخش اول در مورد تگ های متایی صحبت میکنیم که بیشترین کاربرد در طراحی سایت مخصوصا سئو سایت میتوانند داشته باشند. ساختار تگ های متا را در این قسمت مورد بررسی و ارزیابی قرار می دهیم.

بخش دوم آموزش را به کارهای مختلف تگ Link اختصاص میدهیم و مهمترین کاربردهای این تگ را در طراحی سایت برای شما بازگو خواهیم نمود.

در بخش سوم در مورد تگ Base که میتواند در سایت های داینامیک به برنامه نویسان کمک بسیار زیادی نمایند صحبت خواهیم نمود.

سیلابس:

1. بررسی دقیق تگ kbd و کاربرد آن
2. بررسی دقیق تگ samp و کاربرد آن
3. بررسی دقیق تگ code و کاربرد آن
4. بررسی دقیق تگ var و کاربرد آن
5. تعریف کاراکترهای خاص به نام HTML Character Entities به همراه کاربرد آنها
6. بیان چند کاراکتر که جزء کاراکترهای خاص میباشند
7. بررسی مواردی که چرا نباید از برخی از کاراکترها به صورت ساده در زبان HTML و کدها استفاده نمود.
8. بررسی دقیق ساختار HTML Character Entities به لحاظ نام آنها
9. بررسی دقیق ساختار HTML Character Entities به لحاظ کد آنها
10. بررسی تفاوت بین ساختار اسمی و کدی در HTML Character Entities
11. بررسی دقیق کاراکتر   در ساختار کدهای HTML و کاربرد آن
12. بررسی دقیق ساختار تگ ها در نسخه XHTML
13. بررسی DOCTYPE نسخه XHTML
14. بررسی انواع قانون های نوشتن تگ ها در نسخه XHTML

در درس امروز, 3 بخش را پوشش خواهیم داد و مجموعه تگ های آنها را مورد بررسی قرار میدهیم.

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

در بخش دوم در مورد مجموعه کارهاکترهایی که بر روی کیبورد وجود ندارند و یا مجار به نوشتن آنها به صورت ساده در زبان HTML نیستیم صحبت خواهیم نمود.

در بخش سوم در مورد زبان XHTML و تفاوت های آن با زبان HTML5 صحبت خواهیم نمود.

سیلابس:

1. بررسی نقش مالی مدیا در جذب بازدیدکنندگان در وب سایت
2. بررسی نقش مالی مدیا در سئو سایت و افزایش رتبه در موتورهای جستجو
3. بررسی تاریخچه مالی مدیا و روش های متعدد وارد نمودن آن در صفحات وب سایت و بیان سختی های آن
4. بررسی فرمت های متداول مالی مدیا در صنعت کامپیوتر
5. بررسی فرمت هایی که امروزه به صورت مالی مدیا میتوانیم در صفحات وب سایت از آنها استفاده نماییم
6. آشنایی با پلاگین Flash Player و نقش آن در مالتی مدیای وب سایت ها
7. بررسی دقیق تگ video همراه با ذکر مثال
8. بررسی دقیق تگ source و کاربرد آن
9. بررسی دقیق خصوصیت src و کاربرد آن
10. بررسی دقیق خصوصیت type و کاربرد آن
11. بررسی دقیق خصوصیت controls و کاربرد آن
12. بررسی دقیق خصوصیت autoplay و کاربرد آن
13. آشنایی با MIME انواع فایل ها و تعریف آن
14. بررسی دلایل استفاده از چند فرمت تصویری در وارد نمودن آن در صفحات وب سایت
15. بررسی دلایل استفاده از سرویس های به اشتراک گذاری ویدئو
16. نقش زبان JavaScript در ایجاد تغییراتی در فایل های ویدئویی
17. بررسی دقیق تگ audio جهت وارد نمودن صدا در صفحات وب سایت
18. بررسی دقیق خصوصیت های تگ audio همراه با مثال
19. بررسی و مشخص نمودن فرمت های مجاز در وارد نمودن صدا در صفحات وب سایت
20. معرفی تگ object برای وارد کردن ابجکت های دیگر مالتی مدیا
21. معرفی بخش ویدئوهای Youttube در سایت W3Schools
22. بررسی نقش تگ iframe در وارد نمودن ویدئوها در صفحات وب سایت

درس امروز را به بحث بسیار مهم و جذاب ویدئوها و صداها در صفحات وب سایت اختصاص دادیم. از آنجایی که امروزه ویدئو ها در بسیاری از وب سایت ها قابل مشاهده میباشد و به چشم می خورند و از طرفی دیگر روش های متعددی که در گذشته برای وارد کردن ویدئوها در صفحات وب سایت وجود داشته است, از اینرو در درس امروزه به ویژه در مورد وارد کردن ساده و بدون دردسر ویدئو ها توسط HTML5 صحبت خواهیم نمود.

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

سیلابس:

1. بررسی تگ های Semantic Element در HTML5
2. بررسی خصوصیت های جدیدی که در HTML5 به وجود آمده است
3. بررسی تگ های جدید که میتواند گرافیک های بهتری را در HTML5 ایجاد نماید
4. بررسی تگ هایی که برای وارد کردن مالتی مدیا در HTML5 مورد استفاده قرار میگیرند
5. آشنایی ابتدایی با فرم ها در زبان HTML
6. آشنایی با API هایی که HTML5 در اختیار طراحان و برنامه نویسان قرار میدهد
7. آشنایی با HTML Geolocation در HTML5
8. بررسی دقیق لیست تگ هایی که از بین رفته اند و به جای آنها باید از روش های جایگزین استفاده نماییم
9. بررسی و نگاه دقیقتر به تاریخچه زبان HTML
10. بررسی دقیقتر نحوه پشتیبانی مرورگرها از HTML5
11. بیان راه حل هایی که زمانی که مرورگرها از برخی از تگ ها در زبان HTML5 پشتیبانی نمیکنند
12. آشنایی با کلمه Polyfill
13. آشنایی با تکنولوژی HTML5Shiv و طریقه استفاده از آن
14. بررسی تگ های جدید که برای تقسیم بندی صفحه در HTML5 به وجود آمده است
15. بررسی دقیق تک header
16. بررسی دقیق تگ footer
17. بررسی دقیق تگ nav
18. بررسی دقیق تگ aside
19. بررسی دقیق تگ section
20. بررسی دقیق تگ article
21. بررسی دقیق تگ figure
22. بررسی دقیق تگ figcaption
23. بررسی دقیق دستورالعمل هایی که میتوانید از نسخه های قدیمی HTML به HTML5 مهاجرت نمایید
24. بررسی دقیقتر استفاده از قوانین نام گذاری فایل ها در HTML5
25. بررسی دقیقتر استفاده از تگ ها در HTML5
26. بررسی بسیاری دیگر از قوانینی که باید در HTML5 مورد استفاده قرار بگیرد

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

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

موارد هشداری درس امروز را فراموش نکنید …

سیلابس:

1. بررسی دقیق تگ basefont و کاربرد آن
2. بررسی دقیق تگ big و کاربرد آن
3. بررسی دقیق تگ button و کاربرد آن
4. بررسی دقیق تگ canvas و کاربرد آن
5. بررسی دقیق تگ center و کاربرد آن
6. بررسی دقیق تگ data و کاربرد آن
7. بررسی دقیق تگ datalist و کاربرد آن
8. بررسی دقیق تگ details و کاربرد آن
9. بررسی دقیق تگ summary و کاربرد آن
10. بررسی دقیق تگ embed و کاربرد آن
11. بررسی دقیق تگ progress و کاربرد آن
12. بررسی دقیق تگ u و کاربرد آن

در درس امروز قصد داریم تا شما را با تگ های باقیمانده که در درس های قبلی در مورد آنها صحبت نکردیم آشنا نماییم و دقیقا بر مبنای لیستی که سایت W3Schools آن را فراهم کرده است هدف آموزشی خود را به پیش ببریم.

بنابراین زمان را از دست ندهید و با تگ ها و خصوصیت های باقیمانده از آنها آشنا شوید.