آموزش HTML | آموزش کامل HTML و HTML5 | صفر تا صد
زبان HTML، پایه و اساس صفحات وب را تشکیل میدهد و اولین قدم برای شروع طراحی صفحات وب محسوب میشود که ما در این دوره آموزشی یعنی دوره آموزش html یا آموزش تصویری html5 به صورت جامع html و html5 رو مورد بررسی قرار خواهیم داد.
HTML مخفف کلمات Hyper Text Markup Language است که ترجمه فارسی آن برابر با زبان برچسبگذاری ابر متن خواهد بود. HTML یک زبان برنامهنویسی نیست بلکه یک زبان برای نشانهگذاری یا Markup است. تفاوت یک زبان برنامهنویسی و یک زبان نشانهگذاری در شکل محتوای آنهاست. زبانهای برنامهنویسی برای اجرای یک تابع، انجام کارکردی منطقی و… استفاده میشود اما HTML در واقع سنگ بنایی برای نمایش و تحویل محتوا است. در یک زبان برچسب یا نشانهگذاری ابزار اصلی ما تگها هستند، آنها به ما قدرت نمایش محتوا در قالبهای متفاوت را میدهند.توصیه میشود ( دوره آموزشی طراحی سایت ) را نیز مشاهده کنید
HTML با استفاده از تگ های (برچسب) مخصوصی که دارد ، یک صفحه وب را نشانه گذاری میکند و به این وسیله ساختار اصلی یک صفحه وب را تشکیل میدهد. هر یک از این تگ ها برای مرورگر معنا و مفهوم خاصی دارند و برای ایجاد یک عنصر خاص باید از یک تگ خاص استفاده کرد برای مثال تگ img برای تصاویر در آموزش html.
نسخههای مختلف HTML
تا به کنون برای HTML پنج نسخه به اضافه یک نسخه (XHTML) توسعه داده شده است.
- HTML در ابتدا در سال ۱۹۹۱ منتشر شد.
- HTML 2.0 در ۱۹۹۵ منتشر شد.
- HTML 3.2 در ۱۹۹۷ منتشر شد.
- HTML 4.01 در ۱۹۹۹-۲۰۰۰ منتشر شد.
- و HTML5 که آخرین و پیشرفتهترین نسخه از HTML است را در سال ۲۰۱۴ منتشر کردند.
هدف این دوره آموزش html در ابتدا آشنایی شما با مبانی HTML –که تقریبا در تمام نسخهها یکی است- و پس از آن آشنا کردن شما با مفاهیم پیشرفته در HTML5 است.
HTML5 چیست؟
HTML5 آخرین نسخه تکامل یافته و استاندارد HTML است. در واقع HTML5 نسخه جدیدی از زبان HTML است که دارای عناصر، ویژگی ها و رفتارهای جدید است و مجموعه ای بزرگ از فن آوری هایی که امکان ساخت وب سایت ها و برنامه های متنوع و قدرتمند را فراهم می کند را در خود جای داده است.
همانطور که گفته شد HTML5 با HTML تفاوت هایی دارد. هدف بسیاری از تغییرات عمیق در این زبان این بود که بسیاری از راه های جدیدی را که توسعه دهندگان از آن استفاده می کردند، استاندارد کند و همچنین مجموعه ای از بهترین روش ها در رابطه با توسعه وب را بهبود بخشد.
تفاوت های HTML5 با نسخه های قبلی HTML
به طور کلی تفاوت HTML5 با نسخه های قبلی را می توان در موارد جدید اضافه شده و موارد حذف شده در این نسخه خلاصه کرد. این حذف و اضافه عناصر همگی در راستای اهداف جدید زبان برنامه نویسی وب است و تجربه بهتری را برای کاربران اینترنت به همراه دارد که در این دوره آموزشی یعنی آموزش html به این تفاوت ها اشاره خواهیم داشت.
جزییات کامل دوره آموزش کامل html و html5:
قسمت اول : مقدمات کار آموزش html
- آشنایی با نحوه ساخت فایل های html
- آشنایی با ساختار html
- آشنایی با اعلان DOCTYPE
- آشنایی با تگ title
قسمت دوم : آشنایی با تگ های Heading و Paragraph
- آشنایی با تگ های h1,h2,h3,h4,h5,h6
- آشنایی با تگ p
- آشنایی با تگ pre
- آشنایی با تگ hr
- آشنایی با تگ br
قسمت سوم : آشنایی با Attribute ها و لینک ها در html
- آشنایی با صفت یا Attribute
- آشنایی با صفت title
- آشنایی با تگ a
- آشنایی با صفت href
- آشنایی با صفت target
- آشنایی با لینک های داخلی و خارجی
قسمت چهارم : آشنایی با تصاویر در آموزش html
- آشنایی با تگ img
- آشنایی با صفت src
- آشنایی با صفت width
- آشنایی با صفت height
- آشنایی با صفت alt
- آشنایی با نحوه لینک کردن یک تصویر
قسمت پنجم : آشنایی با صفت style در آموزش html
- آشنایی با صفت style
- آشنایی با خاصیت color
- آشنایی با خاصیت background-color
- آشنایی با خاصیت text-align
- آشنایی با خاصیت border
- آشنایی با خاصیت font-size
- آشنایی با خاصیت rgb
قسمت ششم : آشنایی با المنت های قالب بندی
- آشنایی با المنت b
- آشنایی با المنت strong
- آشنایی با المنت i
- آشنایی با المنت em
- آشنایی با المنت u
- آشنایی با المنت ins
- آشنایی با المنت big
- آشنایی با المنت small
- آشنایی با المنت sup
- آشنایی با المنت sub
- آشنایی با المنت del
- آشنایی با المنت mark
قسمت هفتم : آشنایی با جداول در آموزش کامل HTML
- آشنایی با تگ Table
- آشنایی با تگ tr
- آشنایی با تگ th
- آشنایی با تگ td
- آشنایی با صفت border
- آشنایی با صفت cellspacing
- آشنایی با صفت cellpadding
- آشنایی با صفت width
- آشنایی با صفت align
- آشنایی با صفت bgcolor
قسمت هشتم : آشنایی با لیست ها در آموزش کامل HTML
- آشنایی با تگ ul
- آشنایی با تگ li
- آشنایی با تگ ol
- آشنایی با صفت type
- آشنایی با خاصیت list-style-type و مقادیر مختلف آن
- آشنایی با تگ dl
- آشنایی با تگ dt
- آشنایی با تگ dd
- آشنایی با کامنت گذاری
قسمت نهم : آشنایی با تگ های div و span در آموزش html
- آشنایی با تگ های block و inline
- آشنایی با تگ div
- آشنایی با تگ span
قسمت دهم : آشنایی با صفات class و id
قسمت یازدهم : آشنایی با موجودیت ها
- آشنایی با کاراکترهای رزرو شده
- آشنایی با موجودیت lt&
- آشنایی با موجودیت gt&
- آشنایی با موجودیت nbsp&
- آشنایی با موجودیت amp&
- آشنایی با موجودیت quot&
- آشنایی با موجودیت copy&
- آشنایی با موجودیت pound&
- آشنایی با موجودیت cent&
قسمت دوازدهم : آشنایی با فرم ها در آموزش HTML
- آشنایی با تگ form
- آشنایی با تگ input
- آشنایی با صفت type و مقادیر آن
- آشنایی با تگ fieldset
- آشنایی با تگ legend
قسمت سیزدهم : آشنایی با تگ head
- آشنایی با تگ link
- آشنایی با favicon
- آشنایی با آدرس های نسبی و مطلق
- آشنایی با تگ base
- آشنایی با تگ script
قسمت چهاردهم: آشنایی با متاتگ ها در آموزش html
- آشنایی با تگ meta
- آشنایی با متاتگ charset
- آشنایی با متاتگ description
- آشنایی با متاتگ keywords
- آشنایی با متاتگ author
- آشنایی با متاتگ viewport
قسمت پانزدهم : آشنایی با تگ های اصلی html5
- آشنایی با مفهوم تگ های معنادار
- آشنایی با تگ header
- آشنایی با تگ aside
- آشنایی با تگ section
- آشنایی با تگ article
- آشنایی با تگ footer
- آشنایی با تگ nav
قسمت شانزدهم : آشنایی با تگ figure و details در آموزش تصویری html5
ویژگی های دوره
- تعداد جلسات 24
- امتحانات 0
- مدت 4 ساعت و 37 دقیقه
- سطح مهارت تمام سطوح
- زبان فارسی
- دانشجویان 10525
- ارزیابی ها بله
-
فهرست دروس
- مقدمات کار و آشنایی با HTML
- شروع کدنویسی با HTML
- آشنایی با تگ های عنوان و پاراگراف
- آشنایی با Attribute ها و لینک ها در html
- آشنایی با تصاویر در html
- آشنایی با صفت Style در html
- آشنایی با المنت های قالب بندی در html
- آشنایی با جداول در html
- آشنایی با لیست ها در html
- آشنایی با تگ های div و span در html
- آشنایی با صفات class و id در html
- آشنایی با موجودیت ها در html
- آشنایی با فرم ها در html
- آشنایی با تگ head در html
- آشنایی با متاتگ ها در html
- آشنایی با تگ های اصلی در html5
- آشنایی با تگ figure و details در html5
- رسم اشکال گرافیکی در html5 با SVG
- آشنایی با ویدیو و صدا در html5
- نحوه استفاده از GeoLocation در html5
- آشنایی با نحوه Drag and Drop در html5
- نحوه استفاده از WebStorage در html5
- نحوه استفاده از WebWorker در html5
-
ویدیو ها و فایل های دوره
-
nahid.a
آموزش با توضیحات کامل
عالی هست پیشنهاد میکنم
-
ali999
عااالی
با عرض سلام و خسته نباشید.مطالب خیلی کامل و واقعا قابل فهم جای سوال نمیذارید .ممنون از شما و سایت خوبتون
-
mohammadreza13
عالی بود
خیلی خوب بود هیچ جا با ایین کیفیت ندیده بودم
-
hanisoli
Hani
روان و قابل فهم.خیلی ممنون
-
hamid1346
اکستنشن ها
سلام و عرض ارادت و خداقوت واقعا زحمت کشیدین و نکات خوب و کلیدی در آموزش مطرح کردین خدا حفظتون کنه یه سوال داشتم در مورد اکستنش ها من اکثر اکستنشهای ضروری رو نصب کردم مثل emmet و یا lorem ipsum و بقیه ولی عمل نمی کنن و در extension manager نشون میده که با موفقیت نصب شدن ..میتونید کمک کنید مشکل رو رفع کنم ؟ ممنون
372 دیدگاه
سلام وقت بخیر همه جلسه ها رو نگاه کردم و واقعا عالی توضیح دادین.فقط جلسه 20 به بعد که کدهای script داره خیلی سخت شد فهمیدنشون،بازم خیلی ممنون
خیلی اموزش عالی است فقط قسمت اخرش مال جاوا اسکریپته
عالی خیلی از html رو بلد شدم
سلام چرا فیلم هایhtml5یه دونه است بقیش نیس
سلام و دورد
داخل دوره باید ثبت نام کنید
عالی
عالی بود
سلام و درود
استاد چرا ( آشنایی با Attribute ها و لینک ها در html )
دانلود نمیشه ، فیلمش ام در صفحه دیده نمیشه .
سلام و درود
با مرورگر های دیگه تست کردین؟
بسیار عالی
سلام شما داخل جلسه پنج شیش حرف از اموزش سی اس اس میزنید اما هیچ اموزش مستقیمی برای سی اس اس ندارید همشون بخش بخش
درواقعه اموزش جامعه ندارید
اون اموزش کجاست؟
سلام و درود
آموزش کامل CSS
سلام ممنون بابت اموزش عالیتون
ببخشید لینک های درس ۵.9.10.11.14.16.18
خراب هستن و من نمی تونم وارد صفحه بشم ….
چیکار کنم ؟
سلام و درود
دوره رو ثبت نام کنید
سلام چرا بقیه قسمت ها اپلود نمیشه
سلام استاد
میشه راهنمایی کنید چجوری اسکریپت های درس ۲۰ و ۲۱ رو بدست بیارم یا یک فایل آماده داخل این درس ها قرار بدید
با تشکر
سلام و درود
فایل های دوره داخل فهرست دروس قرار داده شده
چرا همه ی فیلم ها نمایش رایگان نداره html
دوره رو ثبت نام کنید
سلام استاد خسته نباشید من دوره رو دارم تموم می کنم اما هنوز هم یه مشکل دارم
من نمی تونم از live preview استفاده کنم چون یه کادر محو میاد که توش مینویسه not updating due to syntax error چطور میشه حلش کرد خسته شدم واقعا
لطفا جواب بدید ممنون
سلام
از ادیتور vsCode استفاده کنید
سلام وقت بخیر
در جلسه 2 داخل brackets متنی که نوشته بودید پاک کردید همزمان در مرورگر هم پاک شد. انجام دادم نشد مشکل تو چیه؟
سلام
میتونید از ادیتور vscode استفاده کنید
واقعا ممنون که رایگان قرار دادین
هیچ جا نتونستم کاملش رو رایگان پیدا کنم
واقعا ممنونم
تازه دارم دانلود میکنم دعا میکنم عالی باشه👍👍
به نام خدا
سلام خدمت استاد گرامی
ببخشید در آموزش قسمت id و class که گفتید حتما باید id ها متفاوت باشند، بنده دو تگ را با یک id مشترک قرار دادم و وقتی که در تگ استایل اون id مشترک رو قرار دادم، بر روی دو تگ تغییرات اعمال شد!
بالاخره تفاوت id و class را نفهمیدم، میشه کمک کنید :(؟؟
اگر می شد عکس بفرستم واضح تر براتون توضیح میدادم
سلام
در کل برای المنت های منحصر به فرد از id استفاده میکنیم و برای المنت های همگانی از class
سلام جلسه سوم در خصوص آشنایی با Attribute ها و لینک ها در html هست ولی لینکش مربوط به مباحث جلسه 5 هست.
سلام و درود
بررسی شد و مشکلی برای لینکها مشاهده نمیشه
با سلام و عرض ادب.
ببخشید،بعد یادگرفتنHTML،نیازی به یادگیری XMLاست؟
سلام و درود
خیر نیازی نیست میتونید بعد html دوره css رو یاد بگیرید
سلام استاد وقت بخیر.
به نظرتون برای یادگیری تهیه جزوه از مطالب و نکاتی که ذکر می کنید مفیده یا نه؟
سلام و درود
بله بسیار عالیه
خیلی خوبه مرسی واقعا. بعد از این دوره چی رو شروع کنیم که بتونیم یه سایت حرفه ای بسازیم؟
سلام و درود
با تشکر از نظر ارزشمند شما
بعد از دوره html به ترتیب زیر پیش برید
Css Javascript jquery Bootstrap php wordpress
عالی هست اموزش
چرا بیشتر دوره ها آموزش ویدیویی ندارد؟
سلام
لطفا فهرست دروس رو مشاهده کنید
عالی ممنون که رایگان قرار دادید سپاس فراوان من با آقای رضایی آموزش پایتون را نیز سپری کردم واقعا عالی
سپاس
سلام و درود
با تشکر از نظر ارزشمند شما
درود بر شما استاد عزیز واقعا ممنونم از آموزش دقیق و سخاوت مندانه تون.خیلی از مباحث html برام جا افتاد.امیدوارم هر روز موفق تر باشید.
سلام و درود
ممنون از نظر ارزشمند شما
خوشحالیم که دوره ها براتون مفید واقع بودن
موفق و پیروز باشید
سلام
مقاله مفیدی بود
خسته نباشید. ممنون
استاد این آموزش برای html کامله؟
کم و کسری نداره که؟
اگه این دوره رو کامل بگذرونیم html رو بصورت کامل یاد میگیریم؟
سلام و درود
بله به صورت کامل یاد میگیرید
سلام استاد من میخواستم یخرم ولی الان قیمتش خیلی افزایش پیدا کرده
سلام و درود
این دوره رایگانه
با درود یه سؤال دارم تو آموزش 0 تا 100 html و html5 چرا بعضی از سرفصلها لینک نشدن مثلا قسمتای 5-9-10-11-14-16 و 18 تا 22
سلام
داخل دوره ثبت نام کنید
سلام استاد جان من دوره رو کامل به پایان رسوندم ولی از قسمت بیست که به جاوا اسکریپت مربوط میشه رو درست متوجه نمیشم با اینکه چندبار دیدم نمیتونم درکش کنم
ایرادی نداره که این مباحث رو یاد نگیرم چون هنوز از جاوا اسکریپت و سینتکس هاش چیزی نمیدونم
😊😊😊😊😊😊
و در اخر ممنونم از دوره فوق العاده جامع و عالیتون
من دوره سی اس اس رو هم خریداری کردم و از فردا میخوام سی اس اس رو شروع کنم
😊😊😊🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻
سلام سپهر عزیز
خوشحالم که دوره ها برات مفید بودن
هیچ اشکالی نداره میتونی دوره های دیگه رو ادامه بدی
سلام من توی براکتس نمیتونم جدول بسازم کد هاش رو میزنم ولی چیزی نمیشه
سلام با نوتپد میشه فیلم یا عکس یا صدا وارد سایت کرد؟
سلام و درود
بله
و این که الان خود شما سایتتون رو با html یا css یاjava skript ساختید؟
بله درسته
سلام فیلم های دوره اموزش css رو چجوری میتونم ببینم؟
از طریق این لینک میتونید ببینید : آموزش css
عرض سلام و خسته نباشید.اسکریپت عکس یا فیلمی رو که در ادیتور مینویسم بعد از اینکه Run میکنم دستور اجرا میشه ولی عکس به صورت یه ایکون سبز رنگ نمایش داده میشه لطفا راهنماییم کنید تشکر
سلام ببخشید میشه چجوری میشه توی سایت فیلم بذارم؟
سلام
با تگ video میتونید قرار بدید
با سلام؛ به تصاویر آدرس داده شده و در پری ویو brackets و browser دیده میشوند. ولی گاهی که مجدداً browser یا پری ویو را باز میکنم، بجای تصاویر فقط آیکون دیده میشود. با کلیک بر روی نمایش تصویر، باز هم دیده نمیشود. علت و راه حل چیست؟ متشکرم.
ببخشید چرا بعضی فیلم ها فعال نیستند
سلام
باید دوره رو ثبت نام کنید
سایت خیلی خوبی دارید
امیدوارم موفق باشید
آموزش هاتون عالیه.خسته نباشید
ببخشید میشه سایت رو درنوت پد درست کرد بعد تو گوگل گذاشت؟
سلام و درود
بله میتونید با نوت پد کدنویسی کنید
میشه بگید چطوری؟
نسبت ب چیزای قبلی ک بلدبودم چن تاچیز جدیدیادگرفتم.ممنون ازسایت خوبتون
سلام و درود
با تشکر از نظر ارزشمند شما
سلام من خیلی از شما ممنونم واقعا کار من رو راه انداختین فقط یه سوال از شما دارم میشه به من بگین چطور در html یک مکان ارسال نظر و کیبورد در صفحه ام بذارم و یک کلید برای ارسال قرار بدم؟
و این هم بگین چطور باید یک چک باکس کامل برای ارسال با زدن کلید اینتر درست کنم؟
و این هم بگین که چطور یک صندوق دریافت پیام از همون کیبورد رو در صفحه ای قرار بدم که قراره اون پیام به اون ارسال بشه؟
واقعا ممنونم
همه رو در html میخوام
سلام و درود
برای این موارد باید سایتتون دابنامیک باشه که در این زمینه پیشنهاد میکنم دوره آموزش 0 تا 100 طراحی سایت رو مشاهده کنید
سلام داداش داداش من کلمه loremo مینویسم Tab رو میزنم فاصله میندازه چیکار کنم ممنون از کمکتون
سلام و درود
پیشنهاد میکنم از ادیتور VSCode استفاده کنید
سلام اگه میخوای از متن های فیک استفاده کنی بین تگ های نوشتاری html از lorem(عدد) استفاده کن مثلا :
lorem20
راه دیگش اینه که توی vscode دکمه F1 رو بزنی بعد تو کادر باز شده کلمه lorem رو بنویسی و اینتربزنی من به شخصه راه اول رو ترجیح میدم .
روی vscode جواب میده بقیه ادیتور هارو نمیدونم .
واسه من خیلی از آموزش هاتون باز نشد اصلا سایتتون اشکال داره
سلام
چه مشکلی وجود داره
شاید مشکلت از مرورگره
سلام چطور میتونم توی دوره ثبت نام کنم تا تمام فیلم ها برام باز باشه
سلام و درود
ثبت نام رایگان دوره رو بزنید
سلام آموزش ها خیلی خوب وبد ولی چرا برای من یا برای خودتان مثل قسمت 10 لایو به صورت زنده نیست و باید هر چند ثانیه سوی کنیم تا نتایج را ببینیم و راه حلی برای برطرف کردن این مشکل هست
سلام و درود
پیشنهاد میکنم از ادیتور VSCode استفاده کنید
سلام ببخشید کد رو نوشتیم،الان چجوری باید تبدیلش کنیم به وب سایت؟و اینکه من فایل اچ تی ام ال رو توی اندریدم باز کردم کلمات فارسی به صورت یه سری کد اومده بود ولی وقتی توی کامپیوتر باز میکنم درسته چرا؟
سلام و درود
شما باید داینامیک سازی صفحات وب رو یاد بگیرید که پیشنهاد میکنم دوره های آموزش 0 تا 100 طراحی سایت و آموزش PHP رو مشاهده بفرمایید
برای این مشکل باید متای charset utf8 رو داخل head قرار بدید
سلام من تازه این دوره رو تموم کردم واقعا لذت بردم با اینکه 14 سالمه تموم مفاهیم رو گرفتم به جز اون 4 تا قسمت اخر که جاوااسکریپت داخلش بود درست جا نیفتاد.خیلی ممنون از شما اقا کریم گل.
سلام و درود
خوشحالیم که دوره براتون مفید واقع شده
برای اینکه مباحث جاوا اسکریپت رو درک کنید پیشنهاد میکنم دوره جامع جاوا اسکریپت رو مشاهده کنید
موفق و پیروز باشید
سلام .من قبلا بسته css را قبلا خریداری کردم . الان چه جوری باید پیداش کنم
سلام و درود
وارد صفحه دوره آموزشی بشید و فهرست دروس رو مشاهده کنید
موفق و پیروز باشید
سلام و عرض خسته نباشید من ادیتور برکست رو نمیتونم نصب کنم اگه از نوت پد پلاس پلاس استفاده کنم مشکلی پیش نمیاد؟
سلام و درود
هیچ مشکلی وجود نداره
موفق و پیروز باشید
سلام و عرض خسته نباشید.
آموزش هاتون عالیه همه چیز رو مو به مو و ساده توضیح دادید.
خیلی خیلی ممنون
خسته نباشید
سلام و درود
ممنون بابت نظر ارزشمند شما ، خوشحالیم که دوره براتون مفید بوده
موفق و پیروز باشید
سلام
چطور میتونم دانلود کنم؟
هر کاری میکنم دانلود نمیشه..!
سلام و درود
داخل دوره ثبت نام کنید بعد فهرست دروس رو ببینید
موفق و پیروز باشید
سلام من میخواستم برنامه نویس شم ولی نقدر رشته های برنامه نویسی زیاد هستش که گیج شدم کدومو شروع کنم اگه راهنمایی کنید ممنون میشم
سلام.
برای ثبت نام تو سایتتون میگه باید پست الکترونیک رو وارد کنید..!
پست الکتروینک چیه دیگه؟
از کجا پست الکترونیکم رو بفهمم؟
سلام و درود
پست الکترونیک همون ایمیل تون هست که باید وارد کنید
موفق و پیروز باشید
سلام
ببخشید شما دارید سایت سازی رو یاد میدید بعد چرا سایت خودتون با وردپرس هست😐
سلام و درود
چون وردپرس یکی از بهترین سیستم های مدیریت محتوا هست و خودمون هم وردپرس رو آموزش میدیم
میتونید آموزش طراحی قالب وردپرس رو مشاهده کنید
موفق و پیروز باشید
درود بقیه ویدیو ها کجان
سلام و درود
دوره رو ثبت نام کنید و فهرست دروس رو مشاهده بفرمایید
موفق و پیروز باشید
عالی خیلی ممنون
ببخشید اون فایلی که گفته بودین نیست
سلام و درود
کدوم فایل؟
سلام ،می خواستم از آموزش عالی وبی نظیر استاد مصطفی زاده تشکر کنم،ممنون از زحماتتون
سلام و درود
ممنون بابت نظر ارزشمندتون
خوشحالم که دوره ها براتون مفید بودن
موفق و پیروز باشید