با طی کردن روند صحیح برنامه نویسی وب می توانید در مدت کوتاهی تبدیل به یک طراح وب شوید و لازمه ی این کار یادگیری زبان HTML می باشد. در صورتی که علاقه مند به یادگیری HTML هستید و اطلاعاتی در این زمینه ندارید یا تازه شروع کرده‌اید، برای شروع یادگیری و رسیدن به بالاترین سطوح، شما می توانید همین حالا کتاب آموزش کامل، قدم به قدم و در عین حال ساده ای که توسط وب سایت مهندس 360 ارائه شده را تهیه کنید. لازم به ذکر است که این آموزش، ترجمه آموزش HTML وب سایت w3schools بوده و همه مفاهیم مندرج در این سایت را در بر می گیرد. امیدواریم این آموزش‌‌، بتواند به شما در فراگیری اصول طراحی وب یاری کند.

مترجم: حمید رضا ارزبین

تعداد صفحات: 526

فرمت فایل: PDF

فهرست مطالب

بخش اول

آموزش HTML
مثالهای هر فصل
مثال های HTML
تمرینات HTML و آزمون تستی
مقدمه ای بر HTML
HTML چیست؟
یک سند HTML ساده
تگ های HTML
مرورگرهای وب
ساختار صفحه HTML
تگ
نسخه های HTML
ویرایشگرهای HTML
نوشتن کدهای HTML با استفاده از برنامه Notepad و TextEdit
مثالهای ساده HTML
فایل های HTML
عنوان ها در HTML
پاراگراف ها در HTML
لینک ها در HTML
تصاویر در HTML
عناصر HTML
عناصر تو در توی HTML
عناصر خالی HTML
استفاده از تگ ها با حروف کوچک
ویژگی های تگ های HTML
ویژگی های تگ های HTML
ویژگی href
ویژگی src
ویژگی عرض و ارتفاع
ویژگی alt
ویژگی استایل
ویژگی lang
مشخصه title
سینگل کوتیشن یا دابل کوتیشن؟
خلاصه فصل
عناوین در HTML
تگ های عنوان در HTML
عناوین بزرگتر
جدا کننده افقی HTML
عنصردر HTML
چگونه سورس کد یک صفحه HTML را نشان دهیم؟
مشاهده سورس کد HTML
بازبینی یک عنصر HTML
مرجع تگ HTML
پاراگراف های HTML
تگ پاراگراف HTML
نمایش HTML
شکستن خط HTML
مشکل نوشتن اشعار
تگ

در HTML

مرجع تگ HTML
استایل های HTML
ویژگی Style در HTML
رنگ پس زمینه HTML
رنگ متن در HTML
فونت ها در HTML
اندازه متن در HTML
تراز متن در HTML
خلاصه فصل
قالب بندی متن در HTML
عناصر قالب بندی در HTML
المان های و در HTML
تگ های و در HTML
تگ در HTML
تگ در HTML
تگ در HTML
تگ در HTML
تگ _{در HTML}
تگ ^{در HTML}
تگ های قالب بندی در HTML
تگ های نقل قول و استناد کننده در HTML
تگ برای نقل قول های کوتاه
تگ

برای نقل قول ها

تگ برای مخفف کردن کلمات
تگ

تگ برای عنوان کار
تگ برای تعریف جهت نوشتار در HTML
تگ های نقل قول و استناد در HTML
کامنت ها در HTML
تگ های کامنت در HTML
رنگ های HTML
نام رنگ ها
رنگ پس زمینه
رنگ متن
رنگ حاشیه
مقادیر رنگ ها
مقدار RGB
مقدار HEX
مقدار HSL
Saturation (اشباع)
Lightness
مقدار RGBA
مقدار HSLA
استایل های HTML – CSS
ساخت ظاهر گرافیکی HTML با استفاده از CSS
Inline CSS
Internal CSS
External CSS
فونت ها در CSS
حاشیه در CSS
CSS Padding
CSS Margin
ویژگی id
ویژگی Class
منابع خارجی
خلاصه فصل
لینک ها در HTML
لینک های HTML – هایپر لینک ها
لینک های HTML – روش نوشتن
لینک های محلی
رنگ لینک های HTML
لینک های HTML – خصوصیت target
لینک های HTML – تصویر به عنوان لینک
عناوین لینک ها
لینک های HTML – ایجاد یک Bookmark
مسیرهای خارجی
خلاصه فصل
تگ های لینک در HTML
تصاویر در HTML
نحوه نوشتن دستور درج تصویر در HTML
ویژگی alt
اندازه تصویر – عرض و ارتفاع
Width و Height یا Style؟
تصاویر در پوشه دیگر
تصاویر در یک سرور دیگر
تصاویر متحرک
استفاده از یک تصویر به عنوان یک لینک
شناور کردن تصویر
Image map
تصویر پس زمینه
عنصر
خوانندگان صفحه HTML
خلاصه فصل
تگ های تصویر در HTML
جداول HTML
تعریف جدول در HTML
جدول در HTML – اضافه کردن Border
جدول HTML – ادغام حاشیه ها
جدول HTML – اضافه کردن padding به سلول
جدول HTML – چپ چین کردن عناوین
جدول HTML – اضافه کردن Border Spacing
جدول HTML – سلول هایی که چند ستون را اشغال می کنند
جدول HTML – سلول هایی که چند ردیف را اشغال می کنند
جدول HTML – اضافه کردن Caption جدول
یک استایل خاص برای یک جدول
خلاصه فصل
تگ های جدول در HTML
لیست ها در HTML
لیست نامرتب در HTML
لیست نامرتب در HTML – انتخاب نشانگر آیتم
لیست مرتب در HTML
لیست مرتب HTML – نوع ویژگی
لیست های توصیفی در HTML
لیست های تو در تو در HTML
کنترل شمارش لیست
لیست های افقی
خلاصه فصل
تگ های لیست
تگ های بلاک و درون خطی در HTML
تگ های block-level
تگ های درون خطی در HTML
تگ های درون خطی
تگ های درون خطی در HTML
تگ

تگ
تگ های گروه بندی در HTML
ویژگی class در HTML
استفاده از ویژگی CLASS
استفاده از ویژگی class در جاوا اسکریپت
کلاس های چندگانه
همان کلاس، تگ متفاوت
ویژگی id در HTML
استفاده از ویژگی id
My Header
تفاوت بین class و id
استفاده از ویژگی id در جاوا اسکریپت
Iframe در HTML
نحوه نوشتن Iframe
Iframe – تنظیم height و width
Iframe – حذف حاشیه (Border)
Iframe – هدف برای یک لینک
تگ iframe در HTML
جاوا اسکریپت در HTML
تگ// <![CDATA[
در HTML</span>
نمونه هایی از جاوا اسکریپت
تگ در HTML
تگ های اسکریپت در HTML
آدرس فایل ها در HTML
آدرس فایل ها در HTML
آدرس دهی کامل (مطلق)
آدرس دهی نسبی
بهترین تمرین
عنوان در HTML
تگ در HTML
تگ در HTML
تگ
تگ در HTML
تگ در HTML
تگ در HTML
تنظیم نمایش صفحه
تگ در HTML
تگ در HTML
حذف تگ های ، و ؟
تگ های head در HTML
قالب بندی در HTML
تگ های صفحه آرایی HTML
تکنیک‌ های صفحه آرایی در HTML
جداول HTML
فریم ورک های CSS
خصوصیت float در CSS
Flexbox در CSS
طراحی سایت واکنشگرا در HTML
طراحی واکنش گرا چیست؟
تنظیم viewport
تصاویر واکنش گرا
استفاده از خصوصیت width
استفاده از خصوصیت max-width
نمایش تصاویر مختلف با توجه به عرض مرورگر
اندازه متن واکنش گرا
Hello World
مدیا کوئری
صفحه وب واکنشگرا – مثال کامل
طراحی وب واکنشگرا – Frameworks
استفاده از W.CSS
استفاده از بوت استرپ
کدهای کامپیوتری در HTML
تگ در HTML برای ورودی کیبورد
تگ برای خروجی برنامه
عنصر در HTML برای کد کامپیوتر
تگ برای متغیرها
تگ های کد در HTML
HTML Entities
کاراکترهای خاص HTML
فاصله بدون شکست
برخی از کاراکترهای خاص مفید در HTML
ترکیب علائم تفکیک کننده در HTML
نمادها در HTML
سمبل های خاص در HTML
برخی از نمادهای ریاضی پشتیبانی شده در HTML
برخی از حروف یونانی پشتیبانی شده در HTML
برخی از سمبل های خاص پشتیبانی شده در HTML
کد گذاری HTML (مجموعه های کارکتری)
رمزگذاری کاراکتر چیست؟
خصوصیت charset در HTML
تفاوت بین مجموعه های کاراکتری
مجموعه کاراکتر ASCII
مجموعه کاراکتر ISO–
مجموعه کاراکتر UTF-
رمزگذاری URL
HTML Uniform Resource Locators
URL – Uniform Resource Locators
انواع Scheme در URL
رمزگذاری URL
خودتان امتحان کنید
نمونه هایی از رمزگذاری ASCII
HTML و XHTML
XHTML چیست؟
چرا XHTML؟
تفاوت های مهم HTML و XHTML
عبارت <…DOCTYPE!> اجباری است
تگ های تو در توی XHTML باید به درستی به کار روند
تگ های XHTML باید همیشه بسته شوند
تگ های خالی نیز باید بسته شوند
تگ های XHTML باید با حروف کوچک نوشته شوند
نام ویژگی ها باید با حروف کوچک نوشته شوند
مقادیر ویژگی ها باید در علامت نقل قول قرار داده شوند
کوچک سازی ویژگی ها در XHTML ممنوع است
چگونگی تبدیل سند HTML به XHTML

بخش دوم

فرم های HTML
عنصر
عنصر
Text Input
Radio Button Input
Submit Button
ویژگی Action
ویژگی Target
ویژگی Method
زمان استفاده از متد GET؟
نکاتی در مورد متد GET
زمان استفاده از متد POST؟
نکاتی در مورد متد POST
ویژگی Name
گروه بندی داده‌ های فرم با
عناصر فرم در HTML
عنصر
عنصر
مقادیر قابل مشاهده
امکان انتخاب چندتایی
عنصر
عنصر
عناصر فرم در HTML
عنصر در HTML
عنصر در HTML
تگ های فرم در HTML
انواع ورودی در HTML
ورودی متنی
ورودی Password
ورودی submit
ورودی Reset
ورودی Radio
ورودی Checkbox
ورودی Button
انواع ورودی در HTML
ورودی Color
ورودی Date
ورودی Datetime-local
ورودی Email
ورودی Month
ورودی Number
محدودیت ورودی
ورودی Range
ورودی Search
ورودی Tel
ورودی Time
ورودی Url
ورودی week
ویژگی type ورودی در HTML
ویژگی های ورودی در HTML
ویژگی value
ویژگی readonly
ویژگی disabled
ویژگی size
ویژگی maxlength
ویژگی های HTML
ویژگی autocomplete
ویژگی novalidate
ویژگی autofocus
ویژگی form
ویژگی formaction
ویژگی formenctype
ویژگی formmethod
ویژگی formnovalidate
ویژگی formtarget
ویژگی های width و height
ویژگی list
ویژگی های min و max
ویژگی multiple
ویژگی pattern
ویژگی placeholder
ویژگی required
ویژگی step
عناصر Input و Form در HTML

بخش سوم

معرفی HTML
ویژگی های جدید HTML
عناصر HTML
رابط برنامه نویسی اپلیکیشن جدید در HTML
عناصر حذف شده در HTML
تاریخچه HTML
پشتیبانی مرورگر‌ ها از HTML
پشتیبانی مرورگر‌ ها از HTML
تعریف عناصر معنایی به عنوان عناصر Block
اضافه کردن عناصر جدید به HTML
مشکل با IE
نحوه کدنویسی برای HTMLShiv
مثالی از HTMLShiv
عناصر جدید HTML
عناصر فرم جدید
انواع ورودی جدید
HTML – نحوه کدنویسی ویژگی های جدید
گرافیک در HTML
تگ های مدیا
عناصر معنایی در HTML
عناصر معنایی چه هستند؟
مرورگرهای پشتیبان
عناصر معنایی جدید در HTML
تگ در HTM
تگ در HTML
قرار دادن در یا بالعکس؟
عنصر در HTML
عنصر در HTML
عنصر در HTML
عنصر در HTML
عناصر و در HTML
چرا عناصر معنایی؟
عناصر معنایی در HTML
مهاجرت به HTML
مهاجرت از HTML به HTML
یک صفحه معمولی HTML
تغییر به HTML Doctype
تغییر به رمزگذاری HTML
اضافه کردن HTMLShiv
تغییر به عناصر معنایی HTML
تفاوت ، و
راهنمای استایل دادن و قواعد کدنویسی در HTML
قواعد کدنویسی در HTML
کدنویسی هوشمند آینده نگر
استفاده از Document Type صحیح
استفاده از کاراکترهای کوچک در نام عناصر
بستن همه تگ های HTML
بستن تگ های خالی در HTML
استفاده از کاراکترهای کوچک در نام ویژگی ها
مقدار ویژگی ها در کوتیشن
ویژگی های تصویر
فضاهای خالی و علامت مساوی
اجتناب از خطوط طولانی کد
خطوط خالی و تو رفتگی
حذف تگ های و
حذف تگ ؟
Meta Data
تنظیم Viewport
کامنت های HTML
استایل شیت ها
بارگذاری جاوا اسکریپت در HTML
دسترسی به عناصر HTML با جاوا اسکریپت
استفاده از حروف کوچک در نام فایل ها
پسوند فایل
تفاوت های میان .htm و .html
تفاوت های فنی

بخش چهارم

Canvas در HTML
Canvas در HTML چیست؟
پشتیبانی مرورگر
مثال هایی از canvas
رسم خط
رسم دایره
نوشتن متن
نوشتن متن توخالی
رسم رنگ با گرادیان خطی
رسم رنگ با گرادیان مدور
رسم تصویر
آموزش Canvas در HTML
SVG در HTML
SVG چیست؟
عنصر در HTML
پشتیبانی مرورگرها
دایره SVG
مستطیل SVG
مستطیل SVG با گوشی های گرد
ستاره SVG
لوگوی SVG
تفاوت میان SVG و Canvas
مقایسه Convas و SVG
آموزش SVG

بخش پنجم

چند رسانه ای (Multimedia) در HTML
چند رسانه ای چیست؟
پشتیبانی مرورگرها
فرمت های چند رسانه ای
قالب های ویدئو رایج
فرمت های صوتی
ویدئو در HTML
پخش ویدئو در HTML
پشتیبانی مرورگر
تگ در HTML
عملکرد کدها
پخش خودکار در HTML
پشتیبانی مرورگر – ویدئو
ویدئو در HTML – انواع مدیا
متدها، خواص و رویدادهای ویدئو در HTML
تگ های ویدئو در HTML
صوت در HTML
صوت در وب
پشتیبانی مرورگر
تگ در HTML
صوت در HTML – نحوه عملکرد
صوت در HTML – پشتیبانی مرورگر
صوت در HTML – نوع مدیا
صوت در HTML – متدها، خواص و رویدادها
تگ های صوتی در HTML
افزونه (پلاگین) های در html
افزونه های HTML
تگ
تگ
فیلم های یوتیوب در HTML
تقابل با فرمت های ویدئویی؟
شناسه ویدئوی YouTube
اجرای ویدئوی یوتیوب در HTML
پخش خودکار ویدئو
لیست پخش یوتیوب
چرخه یوتیوب
کنترل های یوتیوب
یوتیوب – استفاده از تگ های و

بخش ششم

مکان یابی جغرافیایی در HTML
تعیین مکان کاربر
پشتیبانی مرورگرها
استفاده از مکان یابی در HTML
بررسی خطا ها و عدم پذیرش
نمایش نتیجه در نقشه
اطلاعات مکان خاص
متد getCurrentPosition( ) – داده های برگشتی
دیگر اطلاعات مفید در خصوص داده های مکانی
کشیدن و رها کردن در HTML
Drag and Drop
پشتیبانی مرورگرها
مثالی از Drag and Drop
ساخت یک عنصر قابل درگ
چه چیزی درگ شود – ondragstart و setData( )
کجا رها شود – ondragover
انجام رها سازی – ondrop
مثال های بیشتر
ذخیره سازی وب در HTML
ذخیره سازی وب چیست؟
پشتیبانی مرورگر
آبجکت های ذخیره سازی وب در HTML
آبجکت localStorage
آبجکت sessionStorage
کارگران وب در HTML
web worker چیست؟
پشتیبانی مرورگر ها
مثال Web Worker ها در HTML
بررسی پشتیبانی web worker
ایجاد یک فایل web worker
ایجاد یک آبجکت Web Worker
توقف Web Worker
استفاده مجدد از کارگر وب
نمونه کد کامل کارگر وب
کارگران وب و DOM
رویداد های Server-Sent در HTML
رویدادهای Server-Sent- ارسال پیام یک طرفه
پشتیبانی مرورگر ها
دریافت هشدارهای رویداد Server-Sent
بررسی پشتیبانی رویدادهای Server-Sent
نمونه کد Server-Side
آبجکت EventSource

بخش هفتم

اصول اولیه HTML
سند HTML
هدینگ های HTML
پاراگراف های HTML
لینک های HTML
تصاویر HTML
دکمه های HTML
لیست های HTML
ویژگی ها در HTML
ویژگی title
ویژگی href
ویژگی های width and height
ویژگی alt
ویژگی بدون کوتیشن
ویژگی بدون کوتیشنی که کار نمی کند
هدینگ های HTML
هدینگ های HTML
قوانین افقی HTML
سر تیتر HTML
پاراگراف ها در HTML
پاراگراف ها در HTML
پاراگراف های بیشتر در HTML
استفاده از شکستن خطوط در HTML
مشکلات شعرنویسی (برخی از مشکلات قالب بندی HTML)
نحوه کنترل شکستگی خطوط و فضاهای خالی با تگ
استایل های HTML
استایل های HTML
رنگ پس زمینه در HTML
رنگ متن در HTML
فونت متن در HTML
سایز متن در HTML
ترازبندی متن در HTML
فرمت متن در HTML
فرمت bold با استفاده از تگ
فرمت برجسته با استفاده از تگ
فرمت italic با استفاده از تگ
فرمت مهم با استفاده از تگ
فرمت small با استفاده از تگ
فرمت علامت گذاری شده با استفاده از تگ
حذف شده با استفاده از تگ
درج شده با استفاده از تگ
حذف و درج شده با استفاده از تگ های و
فرمت زیر نویس با استفاده از تگ
فرمت بالا نویس (توان) با استفاده از تگ
نقل قول های HTML
قالب بندی نقل قول های کوتاه با تگ
قالب بندی نقل قول ها با تگ
قالب بندی اطلاعات سازنده / مالک سند با تگ
قالب بندی سرنام ها و مخفف ها با تگ
قالب بندی عنوان کار با تگ
قالب بندی جهت متن با تگ
کامنت های HTML