×
۴۰,۰۰۰ تومان
۲۰,۰۰۰ تومان

آموزش HTML اچ تی ام ال برای طراحی وب - مقدماتی

آموزش HTML اچ تی ام ال برای طراحی وب - مقدماتی

تخفیف ۵۰ درصدی


هزینه آموزش
۴۰,۰۰۰ تومان
۲۰,۰۰۰ تومان
(کسب اطلاعات بیشتر +)

تعداد دانشجو
۱۸,۸۲۹ نفر
مدت زمان
۲ ساعت و ۵۶ دقیقه
محتوای این آموزش
تضمین کیفیت
۱۹۱ بازخورد (مشاهده نظرات)
آموزش HTML اچ تی ام ال برای طراحی وب - مقدماتی

HTML یک زبان نشانه گذاری است، به این معنی که بخش های مختلف توسط اجزایی به نام تگ از هم جدا شده، که هر کدام دارای کاربرد و خواص مربوط خود هستند. این تگ‌ ها به مرورگر اعلام می‌ کنند، که هر بخش از صفحه چه نوع عنصری است و باید به چه صورت نمایش داده شود.

آموزش HTML اچ تی ام ال برای طراحی وب - مقدماتی

تعداد دانشجو
۱۸,۸۲۹ نفر
مدت زمان
۲ ساعت و ۵۶ دقیقه
هزینه عادی آموزش
۴۰,۰۰۰ تومان
در طرح تخفیف
۲۰,۰۰۰ تومان

(کسب اطلاعات بیشتر +)
محتوای این آموزش
۱۹۱ بازخورد (مشاهده نظرات)

محمد عبداللهی

کارشناس ارشد مهندسي فناوری اطلاعات (IT) - معماری سازمانی

زمينه‌های کاری و تخصصی ايشان در حوزه برنامه‌نويسی و طراحی وب، طراحی، توليد و توسعه نرم‌افزارهای سازمانی، مديريت پروژه‌های توليد نرم‌افزار بوسيه چارچوب‌های چابک مانند: اسکرام و معماری سازمانی طبق چارچوب TOGAF است.

توضیحات تکمیلی

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

HTML زبان بنیادی طراحی وب

وقتی حرف از طراحی وب‌ سایت به میان می‌ آید، ذهن تمامی افراد ناخواسته به سمت زبان HTML و CSS هدایت می‌ شود. واژه HTML (اچ‌ تی‌ ام‌ ال) مخفف Hyper Text Markup Language به معنی زبان نشانه‌ گذاری فوق متن است. این زبان، زبان استاندارد صفحات وب است و زبان نهایی است که توسط مرورگر ترجمه شده و به کاربر نمایش داده می‌ شود. به طور دقیق‌ تر، شما وب‌ سایتی را به زبان PHP و یا ASP.Net طراحی و برنامه نویسی می‌کنید، این وب‌ سایت بعد از اجرا بر روی سرور و همینطور سیستم کاربر، تبدیل به قطعه کدهای HTML شده و بر روی مرورگر ترجمه شده و به کاربر نمایش داده می‌ شود.

XHTML مخفف Extensible Hyper Text Markup Language است و تقریبا همانند HTML4 می باشد و این آموزش بر اساس XHTML 1.0 است. پس از مشاهده این آموزش برای تثبیت بهتر مطالب می توانید به آموزش پروژه محور HTML و CSS لینک (+) نیز مراجعه نمایید.

فهرست سرفصل ها و رئوس مطالب مطرح شده در این مجموعه آموزشی، در ادامه آمده است:
  • درس اول: مقدمات HTML
    • معرفی HTML
    • شروع کار با HTML
    • مفهوم تگ یا نشانه
    • تگ html
    • تگ head
    • تگ body
    • تگ meta و استفاده از آن برای تعیین Encoding صفحه
    • تگ title و مزایا و نقش آن در SEO
    • معرفی مفهوم SEO یا Search Engine Optimization
    • تگ p برای ایجاد پاراگراف
    • معرفی خصوصیت style و مفهوم آن
    • معرفی خصوصیات مهم موجود در Style از قبیل font-size, width, height, color, background-color, background-image, font-weight, text
    • align, direction و ...
    • معرفی تگ‌های Heading و نقش آن در SEO
    • معرفی تگ span
    • معرفی موجودیت (Entity) ها در HTML از جمله برای فاصله گذاری
    • معرفی تگ br
  • درس دوم: تگ های Text Formatting
    • تگ b
    • تگ i
    • تگ u
    • تگ strong و نقش آن در SEO
    • تگ em و مفهوم آن
    • اشاره ای به وب معنایی
    • تگ های big, small, del, ins, mark, sup, sub, blockquote, q , abbr, address, cite, samp, code, kbd, code, pre, var
  • درس سوم: Link Building
    • معرفی تگ a و خصوصیت href برای ایجاد لینک
    • انواع آدرس دهی و تفاوت آن ها
    • نکات مربوط به SEO
    • خصوصیت title
    • خصوصیت target
    • ایجاد Bookmark با استفاده از تگ a و خصوصیت name
  • درس چهارم: عکس ها در صفحه وب
    • معرفی تگ img و خصوصیت src
    • معرفی خصوصیات title و alt
    • گذاشتن عکس در لینک و استفاده از خصوصیات مربوط به border
    • استفاده از map به منظور ایجاد چند ناحیه قابل کلیک در یک عکس
  • درس پنجم: مروری بر CSS
    • بررسی اشکالات گذاشتن Style به صورت inline
    • معرفی تگ style
    • مفهوم انتخاب گر یا selector در CSS و بررسی چند selector از قبیل id و class
    • معرفی Style به صورت external و معرفی مفهوم CSS و تگ link
  • درس ششم: لیست ها
    • تگ ol و لیست مرتب
    • تگ ul و لیست نامرتب
    • معرفی خصوصیات type و start
    • تعیین عکس به عنوان bullet برای لیست
  • درس هفتم: جدول
    • معرفی تگ table
    • استفاده از تگ های tr و td در جدول
    • خصوصیات border, align, valign, width, colspan, row
    • تگ های colgroup, tfoot, thead, tbody
  • درس هشتم: تگ div
    • معرفی مفهوم و موارد استفاده تگ div
    • کنار هم چیدن div ها برای قالب بندی صفحه
    • مفهوم position و مختصات left و top
    • مفهوم float
    • قالب بندی یک صفحه با div
    • مفهوم clear
  • درس نهم: فرم در صفحه وب
    • تگ form
    • کنترل های فرم برای برنامه نویسی در html4 و html5
    • تگ های input با انواع button, text, checkbox, radio, submit , reset, password, number, color, date, range
    • تگ textarea
    • تگ select و option برای ایجاد Dropdown
    • تگ datalist
  • درس دهم: مدیا در صفحه وب
    • معرفی تگ video و source برای گذاشتن ویدیو در صفحه وب
    • معرفی تگ audio
    • تگ object
    • تگ embed
  • درس یازدهم: تگ های درون head و مفهوم DOCTYPE
    • معرفی انواع تگ های meta
    • تگ base
    • مفهوم DOCTYPE و معرفی انواع نسخه HTML
  • درس دوازدهم: مروری مختصر بر رنگ ها

آنچه در این آموزش خواهید دید:

آموزش ویدئویی مورد تائید فرادرس
فایل برنامه ها و پروژه های اجرا شده

نرم افزارهای مرتبط با آموزش

NotePad++ 6.9.2




پیش نمایش‌ها

۱. مقدمات HTML

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۹ مگابایت -- (کلیک کنید +))

۲. تگ های Text Formatting

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۷ مگابایت -- (کلیک کنید +))

۳. Link Building

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۵ مگابایت -- (کلیک کنید +))

۴. عکس ها در صفحه وب

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۸ مگابایت -- (کلیک کنید +))

۵. مروری بر CSS
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۶. لیست ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۷. جدول
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۸. تگ div
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۹. فرم در صفحه وب
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۰. مدیا در صفحه وب
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۱. تگ های درون head و مفهوم DOCTYPE
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۲. مروری مختصر بر رنگ ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
این آموزش شامل ۱۲ جلسه ویدئویی با مجموع ۲ ساعت و ۵۶ دقیقه است.
با تهیه این آموزش، می‌توانید به همه بخش‌ها و جلسات آن، دسترسی داشته باشید.

راهنمای سفارش آموزش‌ها

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

(راهنمایی بیشتر +)

در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
  • با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
  • با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه


اطلاعات تکمیلی

نام آموزش آموزش HTML اچ تی ام ال برای طراحی وب - مقدماتی
ناشر فرادرس
شناسه اثر ۸–۱۲۴۵۲–۰۵۱۷۷۶ (ثبت شده در مرکز رسانه‌های دیجیتال وزارت ارشاد)
کد آموزش FVH4C94062
مدت زمان ۲ ساعت و ۵۶ دقیقه
زبان فارسی
نوع آموزش آموزش ویدئویی (نمایش آنلاین + دانلود)
حجم دانلود ۲۸۲ مگابایت (کیفیت ویدئو HD با فشرده سازی انحصاری فرادرس)


تضمین کیفیت و گارانتی بازگشت هزینه
توجه: کیفیت این آموزش توسط فرادرس تضمین شده است. در صورت عدم رضایت از آموزش، به انتخاب شما:
  • ۱۰۰ درصد مبلغ پرداختی در حساب کاربری شما شارژ می‌شود.
  • و یا ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده می‌شود.




نظرات

تا کنون ۱۸,۸۲۹ نفر از این آموزش استفاده کرده اند و ۱۹۱ نظر ثبت شده است.
عبدالله
عبدالله
۱۴۰۰/۰۷/۲۵

با سلام
خیلی اموزش خوبی بود,
فقط در اخر یک پروژه کوچک هم یاد میداد خیلی خوب میشد.

محمد
محمد
۱۴۰۰/۰۷/۲۲

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

بهنام
بهنام
۱۴۰۰/۰۷/۰۶

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

محمدرضا
محمدرضا
۱۴۰۰/۰۶/۱۹

من دو جلسه اولش رو دیدم. فوق العاده بود نحوه تدریس

الهام
الهام
۱۴۰۰/۰۶/۰۹

بسیار بسیار عالی بود ممنون از لطفتون استاد عزیز خیلی روان و گویا بود من تازه شروع کردم و همه ی مباحث رو خیلی خوب و کامل متوجه شدم ممنونم از شما....در ضمن در مورد html5 هم توضیحات هست....سپاسگزارم از شما

کیارش
کیارش
۱۴۰۰/۰۶/۰۶

بسیار عالی

مجتبی
مجتبی
۱۴۰۰/۰۶/۰۶

جا داره تشکر کنم از آقای عبداللهی بابت زحماتی که برای این آموزش کشیدن!
عزیزانی که تازه وارد دنیای برنامه نویسی شدن و یه آشنایی کلی با کامپیوتر دارن این برنامه براشون برای شروع کاملن ایده آل و یه شروع خیلی خوبی رو میتونن باهاش تجربه کنن!

Zahra
Zahra
۱۴۰۰/۰۵/۳۱

عالی

abolfazl
abolfazl
۱۴۰۰/۰۵/۳۰

سلام

استاد کمه واقعا براتون استاد عبداللهی

خدا خیرتون بده

فقط استاد حرف بزنین شما

فقط خواهشاً آموزش های بیشتری قرار بدین استاد در سطح اینترنت

M .E
M .E
۱۴۰۰/۰۵/۳۰

آموزش بسيار خوب و شيوه بيان استاد عاليه
اما يه چيزی كه درمورد اين دوره هست و من يادم رفت قبل از تهيه اين آموزش به اون توجه كنم اينه كه اين آموزش HTML 4 هست ولی آخرين نسخه HTML 5 هست و بين دو نسخه تفاوت هايي وجود داره .

دسته‌بندی موضوعی طراحی سایت
برچسب‌ها:
class در HTML5 | Encoding برای نمایش درست متن‌ها | HTML در مقابل XHTML | HTML5 syntax | آشنایی با DOCTYPE و ضرورت استفاده از آن | آشنایی با Headerها | آشنایی با Server-Side Programming | آشنایی با XHTML | آشنایی با انواع لیست‌ها | آشنایی با انواع لینک‌ها | آشنایی با جداول و کاربردهای آن در صفحات وب • ساخت اولین جدول | آشنایی با دستور Save for Web | آشنایی با دکمه Tab در کیبورد و نقش آن در لینک‌ها | آشنایی با دکمه‌های Submit و Reset | آشنایی با فناوری های مشارکتی و استفاده از آن ها در HTML5 | آشنایی با لینک‌های Anchor و HASHها | آشنایی با متن جایگزین عکس | آشنایی با مرورگر وب و انواع آن | آشنایی با ناسازگاری‌های مرورگرهای مختلف | آشنایی با نحوه لود شدن تصاویر در وب | آشنایی با نرم‌افزارهای ساخت صفحات وب نظیر Dreamweaver | آشنایی با نرم‌افزارهای کار با تصاویر | آموزش در رابطه با Encoding Video | اساس HTML5 | استانداردهای موجود | استایل فرم و ایجاد پیغام های خطا | استفاده از div در HTML5 | استفاده از heading به درستی | استفاده از hgroup برای تحت الشعاع قرار دادن section ها | استفاده از transformes | استفاده از المنت address | استفاده از المنت mark | استفاده از المنت small | استفاده از بانک های SQL | استفاده از پیکسل ها | استفاده از جاوا اسکریپت در فرم | استفاده از صفات id | استفاده از فونت‌های Monospaced | استفاده از متن‌های Preformatted | استفاده ویدیو در وب | استناد به کار بصورت semantically معنایی | اسم فایل‌های صفحات وب | اضافه كردن ویدیو | اضافه کردن پشتیبانی برای عناصر در مرورگرهای قدیمی تر | اطمینان از بلوک در سطح صفحه نمایش | المان جدید کادر متنی | المان، تگ، خاصیت و مقدار | المان‌های DIV و Span | امکانات چت در HTML5 | امکانات ذخیره اطلاعات در HTML5 | انتخاب نوع بولت برای لیست‌ها | انواع نسخه‌های HTML | انیمیشن در بوم نقاشی | ایجاد اسناد section | ایجاد لینک در سطح بلوک | ایجاد و تغییر در تنظیمات DRAG AND DROP | بازگشت به صفحه پیشین | بازنگری video | بازنگری مدل محتوا | بوم نقاشی | پردازش اطلاعات وارد شده توسط کاربر | پسوندهای رایج تصاویر در وب | پشتیبانی API HTML5 | پشتیبانی از مرورگر کنونی | تراز متن در صفحه وب | ترکیب CSS 3 با HTML5 | تصاویر در وب | تعریف اسناد HTML5 | تعیین حاشیه کنار جدول | تعیین شماره شروع برای لیست‌ها | تعیین فاصله درونی و بیرونی سلول جدول | تغییر سایز تصاویر توسط HTML | تغییر سایز نوشته یک متن | تقسیم کردن جدول به قسمت‌های عمودی | تقسیم کردن جدول به گروه‌های افقی | تقسیم کردن یک صفحه وب به قسمت‌های مختلف | جداول | جنگ مرورگرهای وب | چرا به HTML5 نیاز است | چرا ما نیاز به عناصر جدید ساختاری داریم | چگونگی ذخیره داده در لوکال Local | چگونه می توان یک المان را DRAG AND DROP نمود | چه خصوصیاتی در html5 وجود دارد | درك الگوریتم outline | درک مفهوم HTML | دسترسی به مالتی مدیا | دسته بندی محتوا در HTML5 | دسته‌بندی المان‌های موجود در فرم | ذخیره اطلاعات در وب | ذخیره داده در وب | ذخیره سازی اطلاعات | رسم مسیرها | ساخت اولین برنامه دینامیک فوق ساده | ساخت اولین صفحه وب | ساخت اولین فرم | ساخت پاراگراف‌ها | ساخت جدول‌های حرفه‌ای‌تر | ساخت دکمه‌های رادیویی و چک‌باکس‌ها (Checkbox) | ساخت لیست‌های ترتیبی و غیرترتیبی | ساخت لیست‌های توضیحی | ساخت لینک‌ها در صفحه وب | ساخت منوهای Drop Down | ساختار HTML5 معنایی برای دنیای واقعی | ساختار اساسی HTML | ساختار اسناد HTML5 | ساختار مناسب تودرتو | ساختار یک صفحه وب | شفافیت (Transparency) در تصاویر | شفافیت، تصاویر PNG و ناسازگاری‌های مرورگرها | شناورکردن تصاویر در صفحه وب | صفت های جدید | عناصر سازنده صفحات وب | عنصر article | عنصر aside | عنصر footer | عنصر Header | عنصر nav | عنصر Section | عنوان یک صفحه وب | غیرفعال کردن المان‌های موجود در فرم | فرمت کردن متن در HTML | فرم‌ها | فهمیدن رابطه لینكها | فیلدهای آپلود فایل | فیلدهای فقط خواندنی | فیلدهای مخفی و کاربردهای آن | قراردادن عکس به جای دکمه تایید فرم | كاركردن با تاریخ و زمان | كاركردن با لیستها در HTML5 | کار با کنترلر های اشیاء ویدیو | کار کردن با فرم های HTML5 | کار کردن باشكل figure و figcaption | کاراکترهای خاص در HTML | کنترل حرفه‌ای حاشیه‌های کناری و داخلی یک جدول | کنترل داده به کمک HTML5 | گروه بندی محتوا با aside | لیست‌ها | لیست‌های تودرتو و مدیریت آن‌ها | لینک‌ها | لینک‌ها، تصاویر و محتوای غیرمتنی | لینک‌ها: فرامتن بودن HTML | مارک‌آپ (Markup) | مالتی مدیا در وب | مبانی طراحی در وب | متن‌های Superscript و Subscript | متن‌های نقل قول | محتوای متنی یک صفحه وب | مروری بر API مکان یابی جغرافیایی | مروری بر Web Storage API | مروری بر امکان Drag and Drop API | مشاهده صفحه وب ساخته شده در مرورگرهای مختلف | معرفی Canvas | معرفی HTML5 | مفهوم DRAG AND DROP | مفهوم مالتی مدیا در وب | مقدمه‌ای بر اینترنت، وب و HTML | نامگذاری المان‌ها | نحوه آدرس‌دهی به لینک‌ها | نقاشی در محیط canvas | نقش CSS در ساخت صفحات وب | نقش دکمه Tab در فیلدهای یک فرم | نقش فرم‌ها در صفحات وب | نکات مهم در مرور گر ها برای فرم | نمایش داده به کمک HTML5 | نوشتن متن به صورت bold و italic | وارد کردن تصاویر درون یک صفحه وب
مشاهده بیشتر مشاهده کمتر
×
فهرست جلسات ۱۲ جلسه ویدئویی