فصل اول – آموزش زبان HTML5
( کد: OL5 )مدرس:
داریوش ببریان
من داریوش ببریان هستم. نزدیک به 17 سال در زمینه طر...
- مدت زمان آموزش 9 ساعت و 30 دقیقه
- حجم فایل آموزش 2.6 GB
- زبان آموزش فارسی
- تعداد درس ها 20 درس
- سطح آموزش (مبتدی)
- تاریخ بروزرسانی 1400 /12 /24
- دانلود سیلابس
امروزه وب سایت و معنای داشتن وب سایت فراگیر شده است و بیشتر کسب و کارها و افراد نیاز دارند تا بتوانند خودشان را به صورت خیلی ساده و با کمترین هزینه معرفی نمایند. لذا وب سایت و طراحی سایت یکی از اولین راه هایی است که همه میتوانند از این تکنولوژی بهره بگیرند.
زبان HTML به نوعی تنها زبانی میباشد که در تمامی وب سایت های دنیا از کوچکترین آن تا بزرگترین آن مورد استفاده قرار گرفته شده است و به نوعی در ساختار تمامی وب سایت ها مشاهده میشود. به نوعی اگر هر فردی که بخواهد کار طراحی سایت, برنامه نویسی سایت, سئو سایت و... را آغاز نماید باید به نحوی این زبان " اچ تی ام ال " تا به خوبی بداند و به آن مسلط باشد.
در ابتدا باید بدانید که این زبان توسط آقای Tim Berners Lee ابداع گردید و اولین هدفش این بود که تمامی افراد در دنیا از هر جایی بتوانند به این منابع و اطلاعات دسترسی داشته باشند. البته شبکه جهانی World Wide Web یا همان WWW هم در گسترش این زبان تاثیر بسیار زیادی داشته است چرا که افراد توسط این شبکه و صفحات وبی که با زبان HTML ایجاد شده بودند میتوانستند به اطلاعات دسترسی داشته باشند.
زبان HTML مسیر پر پیچ و خم زیادی را پشت سر گذاشته است و در هر کدام از نسخه های آن قابلیت های خوب و منحصر به فردی ایجاد شده است که باعث بهتر دیده شدن صفحات وب سایت شده است. به عنوان مثال در اولین نسخه زبان HTML خبری از تصاویر و حتی لینک ها نبودش و کاربران تنها میتوانستند از متن ها برای دسترسی به اطلاعات استفاده نمایند. سپس در نسخه های بعدی زبان HTML تصاویر و لینک ها و ویدئوها و فرم ها و .... اضافه شد و تا به جایی رسید که امروزه شما میتوانید صفحات وب سایت را به اینگونه مشاهده نمایید.
آخرین نسخه زبان HTML که نسبت به نسخه های قبلی خودش پیشرفت بسیار چشم گیری داشته است, نسخه HTML5 میباشد که در ویدئوی آموزش زبان HTML5 که برایتان تهیه شده است کاملا در مورد تمامی تگ های این زبان صحبت خواهیم نمود.
به صورت کلی در آموزش ویدئویی HTML5 که در حال حاضر میتوانید از سایت الگوها آن را تهیه فرمایید, یاد خواهید گرفت که این زبان در ابتدا چه کمکی میتواند به شما بکند. به واسطه زبان HTML5 شما میتوانید نکاتی که در ذهن دارید را به زبان کامپیوتر تبدیل نموده تا در نهایت کاربران وب سایت ها توسط مرورگرهای اینترنتی خود به آنها دسترسی پیدا نموده و آن کدها را تفسیر کرده و صفحات وب سایت را نمایش دهند. بنابراین در اینجا 2 مطلب مهم به وجود می آید:
1 - به واسطه زبان HTML5 ما میتوانیم تصاویر و لینک ها و فرم ها و تمامی چیزهایی که امروزه شما میتوانید در تمامی وب سایت ها ببینید را وارد صفحات وب سایت نموده و حتی جایگاه آنها را مشخص کنیم. به عنوان مثال تصاویر چگونه در کنار یکدیگر قرار بگیرند و یا رنگ متن ها چگونه باشد و یا کدام متن ها لینک شود و بسیاری از نکات دیگر.
2 - کاربران چگونه میتوانند این کدهای نوشته شده HTML را بخوانند؟ بله درست فهمیدید. توسط مرورگرهایشان. بنابراین مرورگرهای اینترنتی مانند Google Chrome و یا Mozilla Firefox و مرورگرهای دیگر وظیفه ترجمه و تفسیر کدهای زبان HTML را بر عهده دارند. بنابراین هر چقدر آموزش کاربردی HTML5 را بهتر و موثرتر دیده باشید, در نهایت میتوانید کدهای HTML بهتری نوشته و مرورگرها هم دقیقا همانطور که شما میخواهید صفحات وب سایت را نمایش میدهند.
در این دوره آموزش HTML5 دقیقا چه چیزی گفته خواهد شد؟
ما سعی نموده ایم تا در این آموزش کامل html5 به زبان فارسی همه چیز را در ابتدا در مورد این زبان با شما مطرح نماییم. در ابتدا شما نیاز دارید تا آموزش کامل تگ های html5 را مشاهده نمایید به دلیل اینکه قبلا عرض شد که توسط همین تگ ها میباشد که شما میتوانید ذهنیت خود را در مورد طراحی سایت به زبان کامپیوتر تبدیل نمایید. البته دوره های آموزش تصویری html5 به زبان فارسی زیادی در بازار و اینترنت مشاهده میشود, ولی امتیازی که این آموزش HTML را با آموزش های دیگر متمایز میکند, هم آموزش کاربردی html5 میباشد و هم آموزش سئو را همزمان با آن نیز خواهیم گفت.
آیا زبان HTML5 ارتباطی به سئو دارد؟
مطمئنا بله. چرا که موتورهای جستجو هم مانند مرورگر کاربران, همین کدهای HTML را تفسیر نموده و ساختار وب سایت و صفحات آن را متوجه میشوند.
اگر دقت فرموده باشید آموزش زبان HTML5 در حقیقت فصل اول دوره کامل سئو 128 ساعته سایت الگوها میباشد. بنابراین با مشاهده آموزش HTML5 هم خود را برای طراحی سایت آماده میکنید و هم میتوانید اطمینان حاصل کنید که پا به دنیای سئو و بهینه سازی سایت در موتورهای جستجو گذاشته اید.
در پکیج آموزشی زبان HTML5 که برایتان آماده شده است, در حال حاضر 20 فصل کامل همراه با مثال های متنوع و نکات بسیار زیاد و مفید در اختیارتان گذاشته شده است. به این معنا که سعی نموده ایم تمامی تگ ها را به حضورتان معرفی کنیم تا بتوانید در ابتدا یک دید کلی نسبت به گستردگی این زبان داشته باشید. به یاد داشته باشید که یادگیری زبان HTML5 بسیار بسیار راحت میباشد و روش یادگیری آن با زبان های دیگر مانند PHP و ASP کاملا متفاوت میباشد و نیازی نیست که از کلمه "برنامه نویسی" و "زبان برنامه نویسی" در این مورد نگرانی داشته باشید.
تمامی آموزش ها از ابتدا و گام به گام برایتان آماده شده است و شما به تدریج وارد این زبان بسیار بزرگ در دنیای طراحی سایت خواهید شد.
در کنار زبان HTML باید چه زبان دیگری را فرا بگیرم؟
البته برای طراحی سایت و برنامه نویسی سایت شما نیاز به تکنولوژی و دانش های دیگر هم دارید ولی اگر بخواهیم سوال را اینگونه مطرح کنیم که چه زبانی میتواند مکمل زبان HTML باشد باید خدمتتان عرض کنیم که زبان بزرگ دیگری به نام CSS.
واژه CSS مخفف جمله Cascading Style Sheet میباشد. بگذارید اینگونه به این زبان نگاه کنیم:
مطمئن باشید که اگر زبان HTML5 را هم به خوبی یاد بگیرید و تمامی آموزش های HTML5 که ما برایتان آماده کرده ایم را هم مشاهده نمایید, باز هم زبان HTML5 دارای کمبودها و نقص هایی میباشد که تنها زبانی که میتواند به خوبی این کمبودها را رفع کند همین زبان CSS میباشد.
اصلا عجله نکنید. امکان ندارد شخصی زبان HTML5 را نداند ولی به خوبی زبان CSS را یاد گرفته باشد. باید صبور باشید و گام به گام خود را به هدف خود نزدیک نمایید. بنابراین در ابتدا زبان HTML5 را به خوبی یاد بگیرید. در همین یادگیری میباشد که خود شما به تدریج با این نقص ها و کمبودها آشنا شده و میتوانید لزوم استفاده از زبان CSS را درک نمایید.
این نکته را به یاد داشته باشید که ممکن است در بازار آموزش های زیادی در زمینه HTML و CSS وجود داشته باشد و تحت عنوان عناوینی مانند آموزش پروژه محور html و css رایگان یا دانلود کامل آموزش html5 و css3 در قالب پروژه و .... اما این نکته را در نظر داشته باشید که هر آموزشی ممکن است آن کیفیت را نداشته باشد و شما را از هدف نهایی که همان استفاده درست و بدون مشکل از این زبان ها باشد دور نماید.
لیست درس ها
-
درس اول: زبان HTML چیست 10:52
سیلابس:
- تعریف زبان HTML
- آشنایی با زبان HTML و بررسی نقش این زبان در طراحی سایت و سئو
- آشنایی با سایت W3Schools و بخش HTML این سایت
- آشنایی با مخترع زبان HTML و دیدگاه او نسبت به نسخه های متعدد آن
- بررسی سورس کد وب سایت ها و آشنایی بیشتر با زبان HTML
- نقش مرورگرها در تفسیر کدهای HTML
- نقش مرورگرها در بروزرسانی زبان HTML
- بررسی اجمالی چند تگ از روی سورس وب سایت ها جهت آشنایی با کارکرد زبان HTML
- بررسی نقش سازمان ARPA در گسترش زبان HTML
- بررسی ابتدایی ارتباط زبان HTML با زبان CSS و ترکیب آنها برای رسیدن به نتیجه بهتر
- بررسی نقش زبان HTML در سئو سایت
باید بدانیم که زبان HTML از هر نسخه و ورژنی, در تمامی سایت های دنیا به کار برده شده است و ساختار اصلی تمامی وب سایت ها را تشکیل داده است.
در این درس قصد داریم تا شما را با این زبان و اهمیت یادگیری آن در دنیای طراحی سایت و سئو آشنا نماییم و با مخترع آن هم میتوانیم آشنایی کوتاهی داشته باشیم.
آخرین نسخه این زبان را در حال حاضر مورد بررسی قرار میدهیم و حتی در مورد نسخه های قبلی و کارکردهای آنها نیز مطالبی را خواهیم گفت.
مطالب آموزشی خود را بر مبنای یکی از سایت های مرجع و عالی در مورد یادگیری زبان HTML به جلو خواهیم برد و در این درس با این سایت نیز آشنا خواهیم شد.
سری هم به سایت سازمان W3C خواهید زد و نقش این سازمان را در استاندارد سازی زبان HTML و CSS مورد بررسی قرار خواهیم داد.
-
درس دوم: بررسی سایت W3Schools و ابزارهای مورد نیاز 21:03
سیلابس:
- بررسی دقیق سایت W3Schools در بخش آموزش زبان HTML
- بررسی نقش Bootstrap و ارتباط آن با زبان HTML و سئو سایت
- مقایسه کامل وب سایت های استاتیک با وب سایت های داینامیک
- بررسی داینامیک بودن چند وب سایت و عوامل تشکیل دهنده آنها و تفاوت آن با بخش های استاتیک
- بررسی بخش زبان های Client-Side وب سایت W3Schools
- آشنایی با Libraryهای متنوع زبان JavaScript
- بررسی بخش زبان های Server-Side وب سایت W3Schools
- بررسی چند زبان برنامه نویسی سمت سرور به عنوان زبان های برنامه نویسی سمت سرور
- بررسی نحوه برگزاری آزمون پس از پایان هر درس آموزشی در وب سایت W3Schools و انجام آن در این فصل
- بررسی نقش ابزارها در استفاده و یادگیری زبان HTML
- بررسی چند ابزار خوب برای ایجاد نمودن و ویرایش صفحات وب سایت
- بررسی نقش ابزار Notepad در ایجاد نمودن و ویرایش صفحات وب سایت
- نحوه ساختن صفحات html توسط ابزار Notepad به عنوان یک روش بسیار ساده و سریع
- بررسی نقش ابزار ویرایشگر کدها در سایت W3Schools و نحوه استفاده از آن
- بررسی نقش یکی از ابزارهای آنلاین عالی در ایجاد نمودن و ویرایش صفحات وب سایت
- بررسی نقش ابزار Sublime Text در ایجاد نمودن و ویرایش صفحات وب سایت
در این درس امروز قصد داریم تا شما را بیشتر با وب سایت و منبع آموزشی W3Schools آشنا نماییم و بخش های مختلف این وب سایت را مخصوصا بخش آموزش زبان HTML را بیشتر مورد ارزیابی قرار دهیم.
سعی میکنیم در این درس, در مورد نقشه آموزشی خودمان و ترتیب یادگیری سریع و عالی زبان HTML و نحوه پیاده سازی آن نیز صحبت کنیم.
البته یکی از بخش های مهم دیگر درس امروز, یادگیری ابزارهایی میباشد که برای ایجاد نمودن صفحات وب سایت و یا نوشتن کدهای HTML و CSS و حتی JavaScript نیز میتواند مورد استفاده قرار بگیرد.
-
درس سوم : آشنایی با ساختار تگ ها در صفحات وب 33:48
سیلابس:
- بررسی دقیق نقش زبان HTML در صفحات مدرن و امروزی
- بررسی رابطه و نقش زبان HTML در پیاده سازی ذهنیت های طراح سایت
- بررسی دقیق یک صفحه وب سایت و نقش زبان HTML در به وجود آوردن تک تک بخش های آن صفحه
- تعریف DOCTYPE و بررسی نقش آن در درست تفسیر شدن صفحات وب سایت
- بررسی مشکلات مربوط به DOCTYPE و نسخه های مختلف آن
- تعریف دقیق Tagها در زبان HTML
- نقش تگها و یادگیری آن در به وجود آوردن صفحات وب سایت
- بررسی دقیق ساختار تگ ها در زبان HTML
- بررسی تگ باز (Opening Tag) و تگ بسته (Closing Tag)
- بررسی مشکلات مربوط به بسته نشدن تگ ها و خطرات احتمالی آن
- بررسی دقیق کدهای HTML یک وب سایت برای آموزش بهتر و یادگیری مطالب بیشتر درس امروز
- نقش تگ html در صفحات وب سایت و بررسی موارد مربوط به آن همراه با مثال
- نقش تگ head در صفحات وب سایت و بررسی موارد مربوط به آن همراه با مثال
- نقش تگ title در صفحات وب سایت و بررسی موارد مربوط به آن همراه با مثال
- نقش تگ body در صفحات وب سایت و بررسی موارد مربوط به آن همراه با مثال
- بررسی نحوه نوشتن استاندارد و مناسب کدهای HTML و موارد مصرف آن
- بررسی نسخه های مختلف زبان HTML و دسترسی به تاریخچه این زبان
- بیان مشکلات طراحان وب سایت در نسخه های قدیمی زبان HTML و ارتباط آن با نسخه های مختلف مرورگرها
- بررسی تفاوت نسخه HTML5 با نسخه های قبلی زبان HTML
- بیان نکاتی مربوط به سئو و ارتباط آن با زبان HTML وب سایت
- معرفی سایت caniuse برای بررسی دقیقتر تگ های HTML
در این درس قصد داریم تا شما را با بخش هایی از ساختار صفحه آشنا نماییم که در تمامی وب سایت های دنیا باید این ساختارها وجود داشته باشند. برای این منظور چند وب سایت بزرگ در دنیا را مورد بررسی قرار خواهیم داد و سری هم به سورس HTML آنها خواهیم زد.
همچنین با نحوه صحیح نوشتن کدهای HTML و حتی کدهای دیگر نیز شما را آشنا خواهیم نمود و نقش این روش نوشتن را برای بررسی خطا و مشکل و موارد دیگر نیز مورد بررسی دقیق قرار خواهیم داد.
-
درس چهارم : آشنایی با ساختار Attributeها 22:44
سیلابس:
- بررسی دقیقتر Element Content در زبان HTML
- بررسی قانون تگ های تودرتو (Nesting Tag) برای نوشتن و اعمال چندین تگ به محتویات و المان ها
- بررسی قانون بسته بودن تمامی تگ ها و بیان مشکلات احتمالی آنها
- تعریف دقیق خصوصیت تگ ها (Attribute) همراه با مثال جهت تفهیم بهتر مطلب
- نقش Attributeها در زبان HTML
- نحوه نوشتن Attributeها در زبان HTML
- بررسی چند قانون مفید در زمان نوشتن Attribute برای تگها
- بررسی چند Attribute و نحوه جایگذاری آنها در تگ ها در زبان HTML
- آشنایی ابتدایی با چند تگ و Attribute
- نقش خصوصیت lang در تگ html
- بررسی قانون کوچک بودن حروف یا بزرگ بودن آنها در نوشتن تگ ها و Attributeها
با توجه به مطالب آموزشی که در درس قبل در مورد یادگیری تگها در زبان HTML داشتیم, حالا زمان آن فرا رسیده است تا در مورد ساختار Attributeها یا همان خصوصیت تگ ها در زبان HTML صحبت کنیم.
در این درس, در مورد ساختار و نحوه نوشتن و قانون های مختلف Attributeها در زبان HTML صحبت خواهیم نمود.
بنابراین منتظر یادگیری قانون ها خوب و ساده و البته زیادی در این زمینه باشید.
-
درس پنجم : تعریف قابلیت Block-Levels و Text-Levels 15:00
سیلابس:
- بررسی فاصله ها در کدهای HTML و واکنش مرورگرها در برخورد با آنها
- بررسی Enterها در کدهای HTML و واکنش مرورگرها در برخورد با آنها
- بررسی دقیق تگ هایی از نوع Block-Levels و معرفی چند تگ در این زمینه
- بررسی دقیق تگ هایی از نوع Text-Levels و معرفی چند تگ در این زمینه
- معرفی تگ p و کاربردهای آن
- معرفی تگ br و کاربردهای آن
- معرفی تگ pre و کاربردهای آن
- معرفی Container بودن تگ ها
- معرفی نوع Empty بودن تگ ها
در این درس تنها قصد داریم تا شما را با چند قانون و حقیقت بسیار مهم و تاثیر گذار در نوشتن کدها در زبان HTML آشنا نماییم.
اینکه آیا فاصله ها و Enterها در زبان HTML کار میکنند و بررسی واکنش مرورگرها با این کدها و حقایق و نحوه کنترل کردن آنها.
طبیعتا با فراگرفتن این درس میتوانید خیلی راحتتر و سریعتر نسبت به پیاده سازی تگ ها و Attributeهایی که در درس های قبلی و همچنین درس های بعدی فرا می گیرید, صفحات وب سایت خود را بسازید و آنها را برای بهینه سازی در موتورهای جستجو آماده نمایید.
-
درس ششم : معرفی چند تگ از نوع Text Formating 17:01
سیلابس:
- بررسی دقیق تگ b و کاربرد آن
- بررسی دقیق تگ strong و کاربرد آن
- تفاوت تگ b و strong در HTML و اهمیت استفاده از آنها
- بررسی دقیق تگ i و کاربرد آن
- بررسی دقیق تگ em و کاربرد آن
- تفاوت تگ i و em در HTML و اهمیت استفاده از آنها
- بررسی دقیق تگ mark و کاربرد آن
- بررسی دقیق تگ small و کاربرد آن
- بررسی دقیق تگ del و کاربرد آن
- بررسی دقیق تگ sub و کاربرد آن
- بررسی دقیق تگ sup و کاربرد آن
- تعریف دقیق Global Attribute و کاربرد آن
- آشنایی با برخی از دستورات CSS برای فرمت دهی تگ ها
- برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
با توجه به قانون های زیاد و متنوعی که در درس های قبلی فرا گرفتیم, حالا زمان آن رسیده است تا تگ ها و خصوصیت های آنها را شناخته و دایره یادگیری آنها را نیز افزایش دهیم. البته در درس های آینده باز هم در مورد قانون های بیشتری با شما عزیزان صحبت خواهیم نمود.
در این درس چند تگ بسیار مهم و کاربردی که برای سئو سایت هم بسیار مفید هستند را به شما معرفی خواهیم نمود و کاربردهای آنها را به دقت مورد بررسی و ارزیابی قرار خواهیم داد.
عموما این تگ ها برای فرمت دادن به متن ها و کاراکترهای مورد استفاده قرار میگیرند. بنابراین آموزش امروز را از دست ندهید.
-
درس هفتم : بررسی موارد HTML Quotation و Comments و رنگ ها 56:37
سیلابس:
- بررسی دقیق تگ blockquote و کاربرد آن
- بررسی چند مورد در استفاده از تگ blockquote
- بررسی دقیق تگ q و کاربرد آن
- بررسی دقیق تگ abbr و کاربرد آن
- بررسی دقیق خصوصیت title در تگ abbr
- بررسی دقیق تگ address و کاربرد آن و نقش این تگ در سئو سایت به صورت محلی
- بررسی دقیق تگ cite و کاربرد آن
- بررسی دقیق تگ bdo و کاربرد آن
- بررسی اهمیت Direction در صفحات وب فارسی و ذکر چند نکته مهم
- برگزاری آزمون انتهایی درس HTML Quotations در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
- تعریف Commentها در زبان های برنامه نویسی
- بررسی و بیان کاربردهای مختلف گذاشتن Comment در کدهای HTML
- نحوه نوشتن درست Commentها در زبان HTML
- برگزاری آزمون انتهایی درس Comments در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
- بررسی نقش رنگ ها در موفقیت سایت و جذب بازدیدکنندگان و همچنین ارتباط آن با سئو سایت
- بررسی روش های مختلف بیان نمودن رنگ ها در زبان HTML و معایب و مزایای آنها
- معرفی دقیق ساختار رنگ ها در RGB همراه با مثال
- معرفی دقیق ساختار رنگ ها در Hexadecimal همراه با مثال
- معرفی دقیق ساختار رنگ ها در RGBA همراه با مثال
- آشنایی ابتدایی با ساختار رنگ ها در HSL
- آشنایی ابتدایی با ساختار رنگ ها در HSLA
- معرفی یک Extension انتخاب رنگ ها در مرورگر Chrome جهت انتخاب دقیق رنگ ها
- بررسی چند دستور ساده CSS برای بیان رنگ ها در تگها
- بررسی تگ font جهت به کاربرد رنگ ها و آشنایی با آنها
درس امروز را به 3 بخش مهم تقسیم نموده ایم تا بتوانیم در مورد هر یک از آنها به تفضیل برای شما صحبت کنیم.
در بخش اول در مورد مجموعه ای تگ ها گه در دسته HTML Quotation قرار میگرند و بیشتر برای نقل قول مورد استفاده قرا میگیرند نیز صحبت خواهیم نمود. البته در این بخش با چند Attribute خوب هم آشنا خواهیم شد.
در بخش دوم در مورد نحوه نوشتن یادداشت ها (Comments) در زبان HTML و کاربردهای متنوع آن نیز صحبت خواهیم نمود.
در بخش سوم و پایانی درس امروز خیلی کامل در مورد رنگ ها در دنیای کامپیوتر مخصوصا نحوه نوشتن و بیان کردن آنها در زبان HTML و CSS و همچنین زبان های دیگر تحت وب نیز صحبت نموده ایم.
بنابراین درس امروز را برای فراگیری موارد آموزشی بسیار مهم در زبان HTML از دست ندهید.
-
درس هشتم : آشنایی با CSS و برخی از ابزارها 28:39
سیلابس:
- تعریف زبان CSS و نقش ابتدایی آن در طراحی سایت
- بررسی رابطه زبان CSS با زبان HTML
- بررسی دلایل به وجود آمدن زبان CSS
- بررسی دلایل استفاده از زبان CSS
- بررسی چند وب سایت از نگاه به کاربردن زبان CSS در آنها
- بررسی ارتباط Responsive بودن سایت با زبان CSS
- آشنایی ابتدایی با Duplicate Content و ارتباط آن با طراحی سایت
- بررسی دقیق روش های به کاربردن دستورات CSS
- بررسی دقیق روش External برای استفاده از دستورات CSS
- بررسی دقیق روش Internal برای استفاده از دستورات CSS
- بررسی دقیق روش Inline برای استفاده از دستورات CSS
- بررسی نفش خصوصیت style در به کاربردن دستورات CSS
- آشنایی ابتدایی با ساختار دستورات در زبان CSS و تفاوت های آن با زبان HTML
- بررسی ارتباط یادگیری زبان CSS با زبان HTML
- نحوه دسترسی به فایل های CSS خارجی وب سایت ها جهت بررسی دقیق کدها
- معرفی و بررسی چند ابزار سودمند جهت طراحی سایت و تجزیه و تحلی کدهای HTML و CSS و ….
- معرفی و آشنایی با ابزار Chrome Dev Tools در مرورگر Chrome
- معرفی و آشنایی با ابزار Web Developer در مرورگر کروم
- معرفی و آشنایی با ابزار Google Lighthouse در مرورگر Chrome و ابزار Chrome Dev Tools
- معرفی سایت W3C Markup Validation Service جهت بررسی کدهای HTML
- معرفی سایت W3C CSS Validation Service جهت بررسی کدهای CSS
در این درس قصد داریم تا شما را با CSS و روش های استفاده از آن در کنار زبان HTML آشنا نماییم. نقش این زبان را برای شما شرح خواهیم داد و دلایل به وجود آمدن زبان CSS را برای شما تشریح خواهیم نمود.
در این درس هر 3 روش استفاده از دستورات CSS را مورد بررسی قرار خواهیم داد تا در مورد فراگرفتن مطالب آموزشی این فصل نیز مشکلی نداشته باشیم.
البته در بخشی دیگر از آموزش درس امروز در مورد برخی از سودمندترین ابزارهای دنیای طراحی سایت نیز با شما صحبت خواهیم نمود تا بتوانید طراحی راحتتر و موثرتری را در حوزه HTML و CSS و حتی JavaScript داشته باشید.
-
درس نهم : معرفی تگ a 43:33
سیلابس:
- تعریف دقیق لینک ها و بررسی واژه Hyperlink
- بررسی دقیق خصوصیت href در تگ a
- بررسی انواع مقدارهایی که میتوانیم در href قرار دهیم
- بررسی دقیق آدرس دهی مطلق (Absolute)
- بررسی دقیق آدرس دهی نسبی (Relative)
- بررسی عواملی که میتوانیم حالت و نحوه نمایش لینک ها را تغییر دهیم
- بررسی نقش زبان CSS در تغییر خصوصیت لینک ها
- بررسی دقیق حالت Unvisited لینک ها
- بررسی دقیق حالت Visited لینک ها
- بررسی دقیق حالت Active لینک ها
- بررسی 3 حالت بیان شده در بالا بر روی وب سایت گوگل
- بررسی چند دستور CSS برای تغییر حالت لینک ها جهت جذاب شدن آنها
- روش تبدیل لینک ها به دکمه (Button) توسط زبان CSS
- بررسی دقیق خصوصیت target در تگ a
- بررسی دقیق مقدار _blank در target همراه با بیان سناریوها و کاربردهای مختلف آن
- آشنایی ابتدایی با Framesetها در HTML و نقش خصوصیت target در آنها
- معرفی خصوصیت title در تگ a و بررسی کاربردهای آن و ارتباط این خصوصیت با سئو لینک ها
- معرفی قابلیت Named Anchor در تگ a و کاربرد آن همراه با ذکر مثال
- برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
- بررسی دقیق خصوصیت download در تگ a همراه با مثال
- بررسی دقیق خصوصیت media در تگ a همراه با مثال
- بررسی دقیق خصوصیت ping در تگ a همراه با مثال
- بررسی دقیق خصوصیت rel در تگ a همراه با مثال
- بررسی و معرفی چند خصوصیت (Attribute) تگ a که در HTML5 پشتیبانی نمی شود
در درس مهم امروز که میتواند ارتباط مستقیم به سئو و فصل 8 دوره سئو مقدماتی تا پیشرفته داشته باشد, شما را کاملا با تگ a که برای ساختن لینک ها مورد استفاده قرار میگرد اشنا خواهیم نمود و همچنین در مورد مهمترین Attributeهای این تگ نیز صحبت خواهیم نمود.
وب سایت های مختلفی را برای تجزیه و تحلیل لینک های آنها مورد بررسی قرار خواهیم داد و در مورد واژه Anchor Text هم مطالب بسیار سودمندی را نیز ارائه خواهیم نمود.
در بخش های مختلف درس امروز در مورد کاربردهای دیگر تگ a که فقط هم برای ساختن لینک نمیباشد نیز صحبت خواهیم نمود و شما را با کارکردهای آنها نیز آشنا مینماییم.
-
درس دهم : معرفی تگ img 43:29
سیلابس:
- بررسی نقش تصاویر در موفقیت و جذاب شدن وب سایت
- معرفی تگ Img برای وارد نمودن تصاویر و نکات مهم در این زمینه
- معرفی خصوصیت src در تگ Img و نکات مهم در این زمینه
- بررسی روش لود کردن تصاویر از سایت های دیگر و بیان نکات مثبت و منفی در این زمینه
- آشنایی ابتدایی با وارد نمودن تصاویر به غیر از تگ Img
- بررسی نقش مهم خصوصیت alt در تصاویر و بیان مزیت های به کاربردن آنها در بخش های مختلف
- بررسی سناریوهای مختلف تصاویری که alt ندارند
- آشنایی ابتدایی با Web Accessibility و نرم افزارهای صفحه خوان (Screen Reader)
- بررسی نقش alt در پیدا شدن تصاویر در Google Image
- بررسی خصوصیت width و height تصاویر و بیان نکات مهم در به کاربردن آنها در کدهای html
- نکات بسیار مهم در تغییر سایز تصاویر و بیان روش درست برای این کار
- معرفی خصوصیت border در تگ Img و کاربرد آن
- معرفی خصوصیت srcset در تگ img
- معرفی فرمت تصویری که انیمیشن را پشتیبانی می کند و نحوه وارد کردن آن در صفحات وب سایت
- معرفی فرمت های مختلف تصویری قابل پیشتیبانی در صفحات وب سایت همراه با نکات مهم در آدرس دهی این تصاویر
- بررسی نحوه لینک کردن یک تصویر و نکات مهم در این زمینه
- بررسی نحوه تنظیم شدن تصویر در کنار متن به واسطه CSS و موارد مهم در این زمینه همراه با ذکر مثال
- آشنایی با تکنولوژی Image Map در تصاویر و کاربردهای آن و بررسی کدهای HTML آن
- بررسی نحوه استفاده از تصاویر به عنوان تصویر پس زمینه (Background Image)
- معرفی تگ picture و کاربرد آن
- معرفی تگ source و کاربرد آن
- رابطه ریسپانسیو بودن وب سایت با تگ picture
- آشنایی با خصوصیت hspace در تگ Img
- آشنایی با خصوصیت vspace در تگ Img
- آشنایی با خصوصیت longdesc در تگ Img
- آشنایی با خصوصیت align در تگ Img
- برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
در این درس به صورت کامل همراه با سناریوهای مختلف در مورد تصاویر و نقش تصاویر در صفحات وب سایت صحبت خواهیم نمود. البته برای انجام این کار نیاز است تا با تگ img برای وارد کردن تمامی فرمت های تصویری که مرورگرها پشتیبانی میکنند نیز آشنا شویم.
تگ img خصوصیت های (Attributes) فراوانی دارد که سعی میکنیم در مورد بسیاری از آنها صحبت کنیم. البته نقش زبان CSS را نیز در این زمینه نیز بررسی و ارزیابی خواهیم نمود.
در مورد 3 فرمت متداول تصاویر نیز صحبت خواهیم نمود و با آنها و قابلیت های آنها نیز آشنا می شویم.
-
درس یازدهم : معرفی تگ table 31:34
سیلابس ها:
- آشنایی ابتدایی با Tableها و بیان برخی از کاربردهای آن
- دلایل به وجود آمدن Tableها در زبان HTML
- بیان نقل قولی از مخترع زبان HTML در زمینه Tableها
- بررسی دقیق ساختار Tableها در قالب سطر و ستون
- معرفی و آشنایی با Featured Snippets ها و ارتباط آن با Tableها
- معرفی و آشنایی با تکنیک ساختن ساختار وب سایت با استفاده از Tableها
- بررسی دقیق تگ هایی که باید برای ساختن Tableها مورد استفاده قرار بگیرد
- بررسی دقیق تگ table و کاربرد آن
- بررسی دقیق تگ tr و کاربرد آن
- بررسی دقیق تگ td و کاربرد آن
- بررسی دقیق تگ th و کاربرد آن
- ارتباط CSS با Tableها برای ساختن ساختار سایت
- نحوه وارد کردن تگهای دیگر در Tableها
- بررسی نقش مهم Table Cell در وارد نمودن تگ های دیگر در Table
- بررسی خصوصیت border و کاربرد آن
- بررسی خصوصیت cellpadding و کاربرد آن
- بررسی خصوصیت cellspacing و کاربرد آن
- بررسی خصوصیت width و کاربرد آن
- بررسی خصوصیت align و کاربرد آن
- بررسی خصوصیت rowspan و کاربرد آن
- بررسی خصوصیت colspan و کاربرد آن
- بررسی تگ caption و کاربرد آن
- بررسی چند دستور CSS برای بهبود ظاهر Tableها
- بررسی خصوصیت هایی از table که در HTML5 مورد پشتیبانی قرار نمیگیرد
- برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
در این درس در مورد Tableها در زبان HTML و کاربرهای درست و صحیح آن نیز صحبت خواهیم نمود. البته به صورت شفاف پاسخ آن دسته از افرادی که اعتقاد دارند در HTML5 قابلیت Tableها از بین رفت است نیز صحبت های بسیار خوبی هم خواهیم داشت.
سعی میکنیم شما را در این درس با ساختار و تگ های متنوع Table آشنا نماییم و حتی در وب سایت آمازون به شما نشان دهیم که هنوز از Table استفاده شده است.
بنابراین زمان را از دست ندهید و به دنیای جالب Tableها وارد شوید.
-
درس دوازدهم : لیست ها 35:11
سیلابس:
- معرفی انواع لیست ها و کاربرد آنها در سناریوهای مختلف
- بررسی دقیق لیست هایی از نوع Unordered همراه با موارد مصرف آن
- بررسی دقیق لیست هایی از نوع Ordered همراه با موارد مصرف آن
- بررسی دقیق لیست هایی از نوع Definition همراه با موارد مصرف آن
- آشنایی با واژه Bullet در لیست ها
- معرفی تگ ul برای ساختن Unordered List
- معرفی تگ li برای ساختن آیتم ها
- آشنایی با انواع حالت های مختلف لیست های Unordered
- بررسی دقیق خصوصیت type در تگ ul
- بررسی دقیق خصوصیت start در تگ ol
- بررسی دقیق خصوصیت reversed در تگ ol
- نقش زبان CSS برای تغییر bulletهای لیست های Unordered
- بررسی دقیق نقش Unordered List جهت ساختن منو در سایت های
- بررسی دقیق نقش Unordered List جهت جذب کردن موتورهای جستجو
- معرفی تگ ol برای ساختن Ordered List
- آشنایی با واژه Indentation
- بررسی دقیق تگ dl و کاربرد آن
- بررسی دقیق تگ dt و کاربرد آن
- بررسی دقیق تگ dd و کاربرد آن
- بررسی نحوه نوشتن و ترکیب لیست ها در زبان HTML
- بررسی خصوصیت هایی دیگر از لیست ها که در HTML5 مورد پشتیبانی قرار نمیگیرد
- برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
درس امروز را میتوان نهایت کاربرد CSS و ترکیب آن با زبان HTML نامگذاری نمود. در این درس ابتدا در مورد 3 نوع لیستی که در زبان HTML میتوان آن را ایجاد نمود صحبت میکنیم. در مورد بیشتر تگ ها و خصوصیت های آنها نیز صحبت به میان خواهد آمد.
در بخشی دیگر از آموزش امروز در مورد استفاده نوعی خاص از لیست هایی که یاد گرفته اید برای جلب نظر موتورهای جستجو و بالابردن سئو سایت نیز به تفضیل صحبت خواهیم نمود و حتی نمونه کدهای CSS آنها را نیز به شما معرفی میکنیم.
در این میان وب سایت های بزرگی همچون Alibaba.com و amazon.com و digikala.com را نیز از این منظر مورد بررسی قرار خواهیم داد.
-
درس سیزدهم : DIV, Span , Class, ID, JavaScript 34:23
سیلابس:
- بررسی چند تگ در گروه های Block-Level و Text-Level
- بررسی دقیق تگ DIV و کاربرد آن در تقسیم بندی صفحات
- بررسی دقیق تگ Span و کاربرد آن در طراحی سایت
- بررسی تفاوت دو تگ DIV و Span
- بررسی و بیان نقش زبان CSS در استفاده از 2 تگ DIV و span
- بررسی دقیق خصوصیت ID و نحوه استفاده از آن
- بررسی دقیق خصوصیت Class و نحوه استفاده از آن
- بررسی سورس سایت W3Schools در استفاده از Class و ID
- بررسی تفاوت بین خصوصیت های Class و ID
- بررسی دقیقتر خصوصیت Class و آنالیز استفاده شدن این خصوصیت در CSS و JavaScript
- تعریف دقیق جاوااسکریپت و بررسی چند بخش کد جاوااسکریپت جهت آشنایی ابتدایی
- بررسی وجود جاوااسکریپت در کنار کدهای HTML و CSS جهت ایجاد وب سایت نرمال
- بررسی کاربردها و مزیت های استفاده از زبان جاوااسکریپت در سایت
- بررسی واژه Interavtivity در وب سایت
- تعریف دقیق زبان های Client-Side
- تعریف دقیق زبان های Server-Side
- نحوه غیر فعال کدن تفسیر کدهای جاوااسکریپت در مرورگر جهت بررسی فنی وب سایت ها
- بررسی تغییر کدهای CSS و HTML داخل صفحات توسط جاوااسکریپت
- بررسی و معرفی دقیق تگ Script و کاربرد اصلی آن
- بررسی و معرفی دقیق تگ noscript و کاربرد اصلی آن
- برگزاری آزمون انتهایی در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
این درس را به 3 بخش بسیار مهم تقسیم نموده ایم تا بتوانیم در یک درس در مورد همه آنها صحبت نماییم و کار خود را در درس های آینده برای استفاده از زبان HTML هموارتر نماییم.
در بخش اول درس امروز در مورد تگ DIV و SPAN و اهمیت آن در دنیای کدنویسی HTML صحبت خواهیم نمود و در مورد برخی از عادت های اشتباه طراحان سایت نیز در این زمینه صحبت میکنیم.
در بخش دوم درس در مورد خصوصیت های Class و ID که در تمامی تگ های زبان HTML وجود دارند صحبت خواهیم کرد و حتی تفاوت های این 2 خصوصیت که در همه جا به چشم میخورد نیز مطالبی را خواهیم گفت.
در بخش سوم درس امروز در مورد زبان جاوااسکریپت و اهمیت به کاربردن آن در دنیای طراحی سایت به تفضیل صحبت خواهیم نمود.
-
درس چهاردهم : Heading Levels, Horizontal Rule, Head, Body 19:28
سیلابس:
- معرفی مجموعه تگ های Heading Levels و اهمیت وجود آنها در طراحی سایت و سئو
- بررسی خصوصیت های تگ های Heading Levels
- بررسی نحوه به کاربردن و ترتیب استفاده از تگ های Heading Levels
- بررسی سایت Amazon و سایت های دیگر در زمینه استفاده درست و صحیح تگهای Heading Levels مخصوصا تگ h1
- بررسی نقش تگ های Heading Levels در مقاله ها و پست های وب سایت
- بررسی روش تغییر خصوصیت های تگ های Heading Levels توسط CSS
- بررسی دقیق تگ hr و کاربردهای مختلف آن در قالب مثال
- بررسی خصوصیت color در تگ hr
- بررسی خصوصیت width در تگ hr
- بررسی خصوصیت shadow در تگ hr
- بررسی تفاوت خصوصیت size و width در تگ hr
- بررسی متای UTF-8 در بخش head صفحه
- آشنایی ابتدایی با تگ های متا در بخش head صفحه
- بررسی خصوصیت های از بین رفته تگ body در HTML5
- برگزاری آزمون انتهایی درس Heading Levels در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
در این درس قصد داریم تا در مورد 4 بخش با شما صحبت کنیم و تگ های HTML مربوط به آنها را به شما عزیزان معرفی کنیم. مجموعه این تگ ها هم میتوانند شما را در ایجاد و ساختن صفحات وب سایت و همچنین بروز رسانی آنها از کدهای قدیمی HTML به کدهای جدید HTML یاری رساند.
در بخش اول در مورد اهمیت وجود مجموعه تگ های Heading Levels به تفضیل با شما صحبت میکنیم و حتی نحوه به کار بردن این تگ ها جهت بالا بردن رتبه سایت ها در موتورهای جستجو را بررسی و ارزیابی خواهیم نمود.
در بخش دوم در مورد تگی جالب و کاربردی در زبان HTML به نام تگ hr صحبت میکنیم که خصوصیت های متعدد این تگ را به شما معرفی خواهیم نمود.
در بخش سوم در مورد خصوصیت های دیگر تگ head و کاربردهای دیگر آن برایتان آموزشی را خواهیم داشت.
در بخش چهارم باز هم در مورد تگ body و نقش آن در مورد مسائل دیگر صحبت هایی را برایتان خواهیم داشت.
-
درس پانزدهم : Frameset, iframe, Layout 34:22
سیلابس:
- تعریف Frameset و دلایل استفاده از آن
- معرفی سازمان ایجاد کننده Frameset
- بررسی عواملی که باعث شد Framesetها دیگر مورد استفاده قرار نگیرند
- بررسی عواملی که باعث شد موتورهای جستجو از Frameset پشتیبانی نکنند
- بررسی رابطه Frameset با سئو سایت
- بررسی دقیق تگ frameset و خصوصیت های مربوط به آن
- بررسی دقیق تگ frame و خصوصیت مربوط به آن
- بررسی DOCTYPE های مختلف مخصوصا در زمینه Frameset
- تعریف iframe و دلایل استفاده از آن
- بررسی سورس یکی از سایت ها جهت استفاده از iframe در قالب ویدئو
- بررسی خصوصیت width تگ iframe
- بررسی خصوصیت height تگ iframe
- بررسی خصوصیت src تگ iframe
- بررسی خصوصیت frameborder تگ iframe
- بررسی خصوصیت scrolling تگ iframe
- بررسی خصوصیت های تگ iframe که در HTML5 پشتیبانی نمی شود.
- بررسی شرایطی که مرورگر از تگ iframe پشتیبانی نمیکند
- برگزاری آزمون انتهایی درس iframe در سایت W3Schools جهت ارزیابی موارد آموزشی مطرح شده
- بررسی دقیق روش هایی که میتواند ساختار وب سایت را توسط آنها ایجاد نمود و تشریح مزیت ها و معایب هر یک از آنها
- بررسی دقیق جایگاه تگ های جدید و مفهومی که در HTML5 برای تقسیم بندی صفحات وب سایت به وجود آمده اند.
- بررسی روش HTML Table برای ساختار بندی وب سایت همراه با ذکر نکات مهم
- بررسی روش CSS Float Property برای ساختار بندی وب سایت همراه با ذکر نکات مهم
- بررسی روش CSS Flexbox برای ساختار بندی وب سایت همراه با ذکر نکات مهم
- بررسی روش Framework برای ساختار بندی وب سایت همراه با ذکر نکات مهم
- بررسی روش CSS grid برای ساختار بندی وب سایت همراه با ذکر نکات مهم
- بررسی Bootstrap جهت ساختار بندی صفحات وب سایت و تاثیر آن در سئو سایت
اگرچه امروزه از Framesetها چندان در طراحی سایت ها استفاده نمیشود ولی برای یادگیری iframeها که امروزه مورد استفاده قرار میگیرد قصد داریم تا در درس امروز در مورد Framesetها و سپس در مورد iframe نیز صحبت کنیم.
برای درک بهتر شرایط استفاده از iframe وب سایتی را مورد بررسی قرار خواهیم داد که ویدئویی را در قالب iframe از وب سایتی دیگر لود مینماید.
در بخش انتهایی درس امروز در مورد روش های طراحی و ایجاد نمودن ساختار وب سایت توسط روش های CSS و غیر CSS نیز صحبت خواهیم نمود.
-
درس شانزدهم : Meta Tag, Link Tag, Base Tag 27:53
سیلابس:
- تعریف دقیق تگ های Meta و کاربردهای آنها در یک نگاه کلی
- تعریف دقیق تگ Meta Charset و کاربرد آن
- بررسی نقش UTF-8 در صحیح نشان دادن صفحات وب سایت
- تعریف دقیق تگ Meta Description و کاربرد آن
- تعریف دقیق تگ Meta Keyword و کاربرد آن
- بررسی و بیان سیاست گوگل در پشتیبانی از Meta Keyword
- تعریف دقیق تگ Meta Author و کاربرد آن
- تعریف دقیق تگ Meta Refresh و کاربرد آن
- تعریف دقیق تگ Meta Viewport و کاربرد آن
- بررسی 2 صفحه Responsive از نگاه Meta Viewport و مشخص نمودن مشکلات مربوط به آن
- بررسی و استفاده از ابزارهایی جهت آزمایش Responsive بودن سایت ها
- بیان نکات مثبت و منفی در حذف تگ های head و body از صفحات وب سایت
- بررسی دقیقتر کاربردهای دیگر تگ Link و معرفی خصوصیت rel و type در این تگ
- معرفی خصوصیت media در تگ link
- معرفی خصوصیت defer تگ script و کارکرد آن
- معرفی خصوصیت sync تگ script و کارکرد آن
در درس امروز در مورد 3 بخش بسیار مهم در زمینه به کارگیری تگ های زبان HTML تقسیم بندی نموده و در مورد آنها صحبت میکنیم.
بخش اول در مورد تگ های متایی صحبت میکنیم که بیشترین کاربرد در طراحی سایت مخصوصا سئو سایت میتوانند داشته باشند. ساختار تگ های متا را در این قسمت مورد بررسی و ارزیابی قرار می دهیم.
بخش دوم آموزش را به کارهای مختلف تگ Link اختصاص میدهیم و مهمترین کاربردهای این تگ را در طراحی سایت برای شما بازگو خواهیم نمود.
در بخش سوم در مورد تگ Base که میتواند در سایت های داینامیک به برنامه نویسان کمک بسیار زیادی نمایند صحبت خواهیم نمود.
-
درس هفدهم : Computer Code, Character Entities, XHTML 14:09
سیلابس:
- بررسی دقیق تگ kbd و کاربرد آن
- بررسی دقیق تگ samp و کاربرد آن
- بررسی دقیق تگ code و کاربرد آن
- بررسی دقیق تگ var و کاربرد آن
- تعریف کاراکترهای خاص به نام HTML Character Entities به همراه کاربرد آنها
- بیان چند کاراکتر که جزء کاراکترهای خاص میباشند
- بررسی مواردی که چرا نباید از برخی از کاراکترها به صورت ساده در زبان HTML و کدها استفاده نمود.
- بررسی دقیق ساختار HTML Character Entities به لحاظ نام آنها
- بررسی دقیق ساختار HTML Character Entities به لحاظ کد آنها
- بررسی تفاوت بین ساختار اسمی و کدی در HTML Character Entities
- بررسی دقیق کاراکتر در ساختار کدهای HTML و کاربرد آن
- بررسی دقیق ساختار تگ ها در نسخه XHTML
- بررسی DOCTYPE نسخه XHTML
- بررسی انواع قانون های نوشتن تگ ها در نسخه XHTML
در درس امروز, 3 بخش را پوشش خواهیم داد و مجموعه تگ های آنها را مورد بررسی قرار میدهیم.
در بخش اول در مورد مجموعه تگ هایی که کدنوشتن را در زبان HTML شبه سازی میکنند همراه با فونت خاصی که هر کدام از آنها دارند.
در بخش دوم در مورد مجموعه کارهاکترهایی که بر روی کیبورد وجود ندارند و یا مجار به نوشتن آنها به صورت ساده در زبان HTML نیستیم صحبت خواهیم نمود.
در بخش سوم در مورد زبان XHTML و تفاوت های آن با زبان HTML5 صحبت خواهیم نمود.
-
درس هجدهم : HTML Audio & Video 25:56
سیلابس:
- بررسی نقش مالی مدیا در جذب بازدیدکنندگان در وب سایت
- بررسی نقش مالی مدیا در سئو سایت و افزایش رتبه در موتورهای جستجو
- بررسی تاریخچه مالی مدیا و روش های متعدد وارد نمودن آن در صفحات وب سایت و بیان سختی های آن
- بررسی فرمت های متداول مالی مدیا در صنعت کامپیوتر
- بررسی فرمت هایی که امروزه به صورت مالی مدیا میتوانیم در صفحات وب سایت از آنها استفاده نماییم
- آشنایی با پلاگین Flash Player و نقش آن در مالتی مدیای وب سایت ها
- بررسی دقیق تگ video همراه با ذکر مثال
- بررسی دقیق تگ source و کاربرد آن
- بررسی دقیق خصوصیت src و کاربرد آن
- بررسی دقیق خصوصیت type و کاربرد آن
- بررسی دقیق خصوصیت controls و کاربرد آن
- بررسی دقیق خصوصیت autoplay و کاربرد آن
- آشنایی با MIME انواع فایل ها و تعریف آن
- بررسی دلایل استفاده از چند فرمت تصویری در وارد نمودن آن در صفحات وب سایت
- بررسی دلایل استفاده از سرویس های به اشتراک گذاری ویدئو
- نقش زبان JavaScript در ایجاد تغییراتی در فایل های ویدئویی
- بررسی دقیق تگ audio جهت وارد نمودن صدا در صفحات وب سایت
- بررسی دقیق خصوصیت های تگ audio همراه با مثال
- بررسی و مشخص نمودن فرمت های مجاز در وارد نمودن صدا در صفحات وب سایت
- معرفی تگ object برای وارد کردن ابجکت های دیگر مالتی مدیا
- معرفی بخش ویدئوهای Youttube در سایت W3Schools
- بررسی نقش تگ iframe در وارد نمودن ویدئوها در صفحات وب سایت
درس امروز را به بحث بسیار مهم و جذاب ویدئوها و صداها در صفحات وب سایت اختصاص دادیم. از آنجایی که امروزه ویدئو ها در بسیاری از وب سایت ها قابل مشاهده میباشد و به چشم می خورند و از طرفی دیگر روش های متعددی که در گذشته برای وارد کردن ویدئوها در صفحات وب سایت وجود داشته است, از اینرو در درس امروزه به ویژه در مورد وارد کردن ساده و بدون دردسر ویدئو ها توسط HTML5 صحبت خواهیم نمود.
البته در ادامه آموزش هم در مورد وارد کردن صدا که کمتر مورد استفاده قرار می گیرد نیز صحبت خواهیم نمود.
-
درس نوزدهم : راهنمایی هایی برای استفاده از HTML5 32:04
سیلابس:
- بررسی تگ های Semantic Element در HTML5
- بررسی خصوصیت های جدیدی که در HTML5 به وجود آمده است
- بررسی تگ های جدید که میتواند گرافیک های بهتری را در HTML5 ایجاد نماید
- بررسی تگ هایی که برای وارد کردن مالتی مدیا در HTML5 مورد استفاده قرار میگیرند
- آشنایی ابتدایی با فرم ها در زبان HTML
- آشنایی با API هایی که HTML5 در اختیار طراحان و برنامه نویسان قرار میدهد
- آشنایی با HTML Geolocation در HTML5
- بررسی دقیق لیست تگ هایی که از بین رفته اند و به جای آنها باید از روش های جایگزین استفاده نماییم
- بررسی و نگاه دقیقتر به تاریخچه زبان HTML
- بررسی دقیقتر نحوه پشتیبانی مرورگرها از HTML5
- بیان راه حل هایی که زمانی که مرورگرها از برخی از تگ ها در زبان HTML5 پشتیبانی نمیکنند
- آشنایی با کلمه Polyfill
- آشنایی با تکنولوژی HTML5Shiv و طریقه استفاده از آن
- بررسی تگ های جدید که برای تقسیم بندی صفحه در HTML5 به وجود آمده است
- بررسی دقیق تک header
- بررسی دقیق تگ footer
- بررسی دقیق تگ nav
- بررسی دقیق تگ aside
- بررسی دقیق تگ section
- بررسی دقیق تگ article
- بررسی دقیق تگ figure
- بررسی دقیق تگ figcaption
- بررسی دقیق دستورالعمل هایی که میتوانید از نسخه های قدیمی HTML به HTML5 مهاجرت نمایید
- بررسی دقیقتر استفاده از قوانین نام گذاری فایل ها در HTML5
- بررسی دقیقتر استفاده از تگ ها در HTML5
- بررسی بسیاری دیگر از قوانینی که باید در HTML5 مورد استفاده قرار بگیرد
برای استفاده از زبان HTML5 باید مقدماتی را فراهم نماییم. مخصوصا برای افراد و صاحبان وب سایت هایی که از قبل سایتشان ساخته شده است و حتی رتبه خوبی در موتورهای جستجو دارند و یا افرادی که قصد تغییر سایت خود را دارند و یا افرادی که قصد دارند تا تازه سایت خود را طراحی نمایند. البته نباید افرادی را هم که سایتشان در حال نزول در موتورهای جستجو میباشد و سرعت سایتشان نیز افت کرده است را هم در نظر گرفت.
درس امروز در مورد دستورالعمل هایی صحبت خواهد کرد که چگونه از زبان HTML5 استفاده کنیم و یا چگونه به صورت درست و بدون هیچ مشکلی به نسخه جدید HTML5 نقل مکان کنیم.
موارد هشداری درس امروز را فراموش نکنید …
-
درس بیستم : بررسی تگ های باقیمانده 17:55
سیلابس:
- بررسی دقیق تگ basefont و کاربرد آن
- بررسی دقیق تگ big و کاربرد آن
- بررسی دقیق تگ button و کاربرد آن
- بررسی دقیق تگ canvas و کاربرد آن
- بررسی دقیق تگ center و کاربرد آن
- بررسی دقیق تگ data و کاربرد آن
- بررسی دقیق تگ datalist و کاربرد آن
- بررسی دقیق تگ details و کاربرد آن
- بررسی دقیق تگ summary و کاربرد آن
- بررسی دقیق تگ embed و کاربرد آن
- بررسی دقیق تگ progress و کاربرد آن
- بررسی دقیق تگ u و کاربرد آن
در درس امروز قصد داریم تا شما را با تگ های باقیمانده که در درس های قبلی در مورد آنها صحبت نکردیم آشنا نماییم و دقیقا بر مبنای لیستی که سایت W3Schools آن را فراهم کرده است هدف آموزشی خود را به پیش ببریم.
بنابراین زمان را از دست ندهید و با تگ ها و خصوصیت های باقیمانده از آنها آشنا شوید.
-
آیا یادگرفتن زبان HTML کار سختی است؟
خیر به هیچ وجه. شما حتی اگه اصلا طراحی سایت و برنامه نویسی را نمیدانید میتوانید این زبان را خیلی راحت یاد بگیرید. در این آموزش به گونه ای ساده و حرفه ای مطالب توضیح داده شده است
-
این آموزش برای طراحان سایت هم مفید است؟
بله. به دلیل اینکه طراحان سایت هم نیاز است تا دانش خود را بروز نمایند. بنابراین آخرین متدهای HTML5 در این آموزش برای شما توضیح داده شده است.
-
این آموزش برای سئو هم مناسب است؟
بله حتما. به دلیل اینکه موتورهای جستجو مانند گوگل به کدهای HTML یک صفحه وب سایت بسیار اهمیت میدهند. بنابراین توصیه میشود برای افرادی که میخواهند سئو را خیلی حرفه ای بیاموزند, حتما این آموزش را مشاهده کنند
-
مدت زمان فراگرفتن زبان HTML با این آموزش چقدر است؟
البته این بستگی به تمرین ها و زمان هایی دارد که برای آموزش خود می گذارید. ولی در این آموزش شما کاملا با مهمترین قوانین نوشتن کدهای HTML آشنا شده و میتوانید در مدت زمان 1 ماه کاملا مسلط به کار شوید
-
آیا به صورت عمیق به مطالب نگاه شده است؟
بله. سعی نموده ایم تا از تجربیات خودمان که در سایت ها و پروژه های مختلف داشته ایم در این آموزش با شما صحبت کنیم. بنابراین میتوانیم بگوییم که مطالب را به صورت عمیق و ریشه ای در این آموزش فرا خواهید گرفت
-
مدت زمان این آموزش چقدر میباشد؟
این آموزش در 10 ساعت برای شما فراهم شده است که خیلی سریع و البته کاربردی بتوانید آن را فرا بگیرید
-
تعداد درس های این آموزش چقدر میباشد؟
ما در 20 درس سعی نمودیم کاملا شما را با دنیای HTML5 آشنا نماییم و کاربردهای اصلی این زبان را برای شما مشخص کنیم
-
معمولا بهترین روش برای یادگیری HTML چیست؟
شما باید در ابتدا به فکر این باشید که برای خود سایت آزمایشی هم بسازید. بنابراین حتما وب سایتی که عموما به آن علاقه دارید و هر روز به آن سر میزنید, میتواند گزینه خوبی برای پروژه آزمایشی شما باشد.
-
بهترین نسخه یادگیری زبان HTML چیست؟
مطمئنا HTML5. در حال حاضر (سال 2020) این نسخه بهترین و بروزرترین آن میباشد و شما می توانید کارهای سئویی زیادی را با آن انجام دهید. بنابراین یادگیری را در سایت آموشی الگوها آغاز نمایید.
-
چرا می گویند که HTML5 مفهومی است؟
به دلیل اینکه برخی از تگ ها به آن اضافه شده است که توضیحات بیشتری را در مورد ساختار صفحات سایتتان به موتورهای جستجو می دهد مانند تگ های header و footer و nav و article و غیره.
با سلام. بله حتما