جشنواره ۵۰٪ تخفیف فرانش به مدت محدود

جشنواره ۵۰٪ تخفیف فرانش محدود

0 روز 0 ساعت 0 دقیقه 0 ثانیه

شروع یادگیری

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

آموزش HTML به زبان ساده

HTML یا زبان نشانه‌گذاری فوق متن (Hypertext Markup Language) کدی است که برای ساختن یک صفحه وب و محتوای آن استفاده می‌شود. به عنوان مثال، محتوای یک صفحه‌ی وب با استفاده از مجموعه‌ای از پاراگراف‌ها، تصاویر و جداول داده ساخته می‌شود. همان طور که از عنوان این مقاله پیدا است، مطلب پیش‌رو درک ساده‌ای از آموزش زبان HTML  و توابع آن به شما می‌دهد.

HTML چیست؟

اولین گام در آموزش HTML این است که بدانیم تعریف این زبان چیست؟ HTML یک زبان برنامه‌نویسی نیست؛ بلکه یک زبان نشانه‌گذاری است که ساختار محتوای شما را تعریف می‌کند. HTML شامل مجموعه‌ای از عناصر (elements) است که با استفاده از آنها می‌توانید بخش‌های مختلف محتوای یک صفحه وب را مشخص کرده و ظاهر آن را طراحی کنید. تگ‌ها می‌توانند یک لینک یا یک تصویر را در بخشی از صفحه ایجاد کنند، یا می‌توانند فونت کلمات را تغییر داده و آنها را بزرگ و کوچک کنند. برای مثال، خط زیر را در برنامه HTML خود وارد کنید:

اگر می‌خواهید این نوشته به شکل یک پاراگراف در صفحه وب شما نمایش داده شود، باید آن را با تگ پاراگراف محصور کنید. تگ پاراگراف در HTML با <p> باز و با </p> بسته می‌شود.

 

ساختار عناصر HTML

بیاید این پاراگراف را کمی بیشتر بررسی کنیم.

بخش اصلی عنصر ما عبارت است از:

۱- تگ باز: شامل نام عنصر است (در این مورد خاص، p) که درون < > قرار می‌گیرد. این علامت نشان دهنده آن است که تگ مورد نظر روی محتوای شما شروع به تاثیرگذاری می‌کند. (در این مورد خاص یعنی پاراگراف آغاز می‌شود).

۲- تگ بسته:‌ تگ بسته هم مانند تگ باز، شامل نام عنصر است با این تفاوت که قبل از نام عنصر یک اسلش قرار می‌گیرد. این تگ نشان‌دهنده پایان تاثیر عنصر روی محتوای شما است. (در این مورد خاص یعنی پاراگراف تمام می‌شود). نگذاشتن تگ بسته در پایان محتوا، اشتباهی است که معمولا مبتدیان مرتکب می‌شوند و این اتفاق منجر به بروز نتایج عجیب و غریبی شود.

۳- محتوا:‌ محتوا می‌تواند تصویر، متن یا لینک باشد. در این مورد، محتوای ما یک متن است.

۴- عنصر:‌ تگ باز، تگ بسته و محتوا با هم، عنصر را تشکیل می‌دهند.

عناصر می‌توانند ویژگی‌هایی (Attributes) هم داشته باشند:

ویژگی‌ها حاوی اطلاعات اضافی در مورد عنصر است که نمی‌خواهید در محتوای واقعی (روی صفحه وب) ظاهر شوند. در اینجا، class، نام ویژگی و editor-note، مقدار ویژگی است. ویژگی کلاس به شما اجازه می‌دهد تا عنصر را شناسایی کرده و گروه عنصر را تشخیص دهید.

یک ویژگی همیشه باید شامل موارد زیر باشد:

۱- باید یک فاصله (space) بین آن و نام عنصر وجود داشته باشد. (اگر عنصر شامل چند ویژگی باشد، باید بین هر کدام از ویژگی‌ها یک فاصله قرار دهید)

۲- بعد از نام ویژگی باید علامت مساوی (=) وجود داشته باشد.

۳- در دو طرف مقدار ویژگی باید علامت نقل قول (“) وجود داشته باشد.

دوره‌های مرتبط در فرانش

  • عناصر تو در تو

شما می‌توانید عناصر را در داخل یکدیگر استفاده کنید. به این کار تو در تویی (nesting) می‌گویند. در جمله‌ی “My cat is very grumpy” می‌توانیم برای تاکید روی خشن بودن گربه، کلمه very را داخل تگ <strong> قرار دهیم.

دقت کنید در زمان استفاده از تگ‌های تو در تو، ترتیب باز و بسته کردن تگ‌ها رعایت کنید. مثلا در این مثال، ما ابتدا تگ <p> و سپس تگ <strong> را باز کردیم. بنابراین ابتدا باید تک <strong> و بعد تگ <p> را ببندیم.

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

  • عناصر خالی

برخی عناصر فاقد محتوا هستند و عناصر خالی نامیده می‌شوند. عنصر <img> در HTML یک عنصر خالی محسوب می‌شود.

این عنصر شامل ۲ ویژگی است. اما تگ بسته </img> و هیچ محتوایی در داخل آن وجود ندارد. به این دلیل که در عنصر تصویر، محتوا وجود ندارد و هدف از این عنصر، جاگذاری یک عکس در صفحه وب است.

 

ساختار سند (Document) در HTML

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

  • <!DOCTYPE html> چیست؟

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

  • تگ <html></html> چیست؟

تگ <html> یک عنصر است. تمام مطالب و کدهای موجود در مرورگر وب، درون این عنصر قرار می‌گیرد. <html> به عنوان عنصر ریشه شناخته می‌شود.

  • تگ <head></head> چیست؟

تگ <head> یک عنصر است. این عنصر به عنوان یک ظرف برای همه چیزهایی که می‌خواهید در صفحه HTML خود وارد کنید (و نمی‌خواهید این محتوا به بینندگان صفحه شما نشان داده شود)، عمل می‌کند. این تگ شامل مواردی مانند:‌ کلمات کلیدی و توصیف صفحه‌ای که می‌خواهید در نتایج جستجو ظاهر شود، استایل محتوای صفحه بر اساس کدهای CSS، تنظیم اعلان‌ها و… است.

  • چرا از <meta charset=”utf-8”> استفاده کنیم؟

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

  • تگ <title></title> چیست؟

تگ title یک عنصر است. این تگ، عنوان صفحه شما را تنظیم می‌کند. عنوانی که در تگ title قرار می‌دهید، در واقع همان عنوانی است که در تب (tab) مرورگر ظاهر شده و صفحه در آن بارگذاری می‌شود. زمانی که شما صفحه‌ای را نشانه‌گذاری (bookmark) می‌کنید نیز از این عنوان استفاده می‌شود.

  • کاربرد تگ <body></body> چیست؟

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

دوره‌های مرتبط در فرانش

 

تگ تصاویر در HTML

در این بخش می‌خواهیم تگ <img> را بررسی کنیم:

همان طور که پیش‌تر گفتیم، این تگ یک تصویر را در صفحه مرورگر ما نمایش می‌دهد. این کار از طریق ویژگی scr (source) انجام می‌شود. این ویژگی حاوی مسیری است که فایل تصویر ما در آن قرار دارد.

در این تگ، ویژگیalt (alternative) را نیز داریم. این ویژگی شامل یک متن توصیفی برای عکس است. وقتی کاربر نتواند عکس را ببیند، این متن به جای تصویر به او نشان داده می‌شود.

۱- این ویژگی به نابینایان و کسانی که دارای اختلالات بصری هستند، کمک می‌کند. معمولا این افراد از ابزارهایی برای خواندن صفحات وب استفاده می‌کنند. ویژگی alt این امکان را می‌دهد تا تصویر مورد نظر برای آنها خوانده شود.

۲- خاصیت دیگر این ویژگی، زمانی است که چیزی مانع از نمایش تصویر می‌شود. مثلا اگر عمدا مسیر فایل عکس را در scr تغییر دهید. اگر صفحه را ذخیره و بارگیری کنید، چیزی مانند تصویر زیر به جای عکس برای شما نمایش داده می‌شود.

کلمات کلیدی برای متن alt، باید یک متن توصیفی باشد. متنی که شما برای ویژگی alt می‌نویسید باید تصویر را به خوبی توصیف کرده و به اندازه کافی اطلاعات در اختیار کاربر قرار دهد. مثلا در این مثال، استفاده از متن “تصویر امتحانی من” توصیف خوبی برای تصویر لوگوی فایرفاکس نیست. بهتر از به جای آن از عبارت “لوگوی فایرفاکس: روباه آتشین حلقه زده روی زمین” استفاده کنید.

 

علامت‌گذاری متن

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

عنوان‌ها (Headings)

عنصر هدینگ به شما اجازه‌ می‌دهد تا عناوین و زیرعنوان‌های متن خود را مشخص کنید. یک سند HTML، درست مانند یک کتاب دارای عنوان اصلی، عنوان فصل، زیرنویس و… است. HTML دارای ۶ سطح عنوان است که از <1> تا <6> را پوشش می‌دهد. معمولا برای داخل متن از سطح ۳ و ۴ استفاده می‌شود.

پاراگراف‌ها (Paragraphs)

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

لیست‌ها (Lists)

بسیاری از محتواهای وب، لیست هستند و HTML عنصر مخصوصی برای آن دارد. لیست‎های علامت‌گذاری همیشه شامل حداقل دو عنصر هستند. دو نمونه از رایج‌ترین لیست‌ها، لیست‌های منظم (ordered) و نامنظم (unordered) هستند:

لیست‎های نامنظم لیست‎هایی هستند که ترتیب قرار گرفتن آیتم‎ها در آنها اهمیتی ندارد. مانند یک لیست خرید. این لیست‌ها درون تگ <ul> قرار می‌گیرند.

لیست‌های منظم لیست‌هایی هستند که ترتیب قرار گرفتن آیتم‌ها در آنها اهمیت دارد. مانند یک دستور آشپزی. این لیست‌ها درون تگ <ol> قرار می‌گیرند.

هر کدام از آیتم‌های لیست درون تگ <li> قرار می‌گیرید.

مثلا اگر می‌خواستیم بخشی از پاراگراف زیر را به یک لیست تبدیل کنیم:

می‌توانیم به صورت زیر نشانه‌گذاری کنیم:

آموزش html پاراگراف و لیست

لینک‌ها (Links)

لینک‌ها بسیار مهم هستند. آنها چیزهایی هستند که وب را به وجود می‌آورند. برای افزودن یک لینک، ما به عنصر <a> نیاز داریم. “a” کوتاه شده‌ی کلمه‌ی “anchor” است. برای تبدیل بخشی از پاراگراف متن خود به لینک، طبق دستور زیر عمل کنید:

۱- بخشی از متن را انتخاب کنید. ما در اینجا متن “Mozilla Manifesto” را انتخاب کردیم.

۲- بخش انتخاب شده را درون تگ <a> </a> قرار می‌دهیم. مانند تصویر زیر:

۳- در تگ <a> از ویژگی href استفاده کنید. مانند تصویر زیر:

۴- به جای مقدار این ویژگی، لینکی که می‌خواهید متن مورد نظر به آن پیوند داده شود را قرار دهید.

اگر بخشی از لینک را به درستی وارد نکنید (مثلا https:// یا http:// را کامل وارد نکنید) ممکن است نتایج عجیبی را مشاهده کنید. پس از ایجاد یک پیوند، حتما روی آن کلیک کنید تا مطمئن شوید که لینک را درست قرار داده‌اید.

نتیجه

اگر همه دستورات این مطلب را به درستی رعایت کرده باشید، باید صفحه‌ای مشابه تصویر زیر در مرورگرتان مشاهده کنید:

آموزش HTML

اگر مشکلی در نوشتن کدهای HTML دارید، از گوگل کمک بگیرید. هیچ مشکلی وجود ندارد که نتوانید روی اینترنت جوابی برای آن پیدا کنید.

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

تمرین، کلید موفقیت است. تمرین روزانه را فراموش کنید.

دوره‌های مرتبط در فرانش

– با سپاس از بانو سحر صاحبی برای برگردان این نوشته

مرتضی شایق

مرتضی شایق

مدیر دیجیتال مارکتینگ

فعال در دیجیتال مارکتینگ در تخصص‌های: SEO (بهینه‌سازی سایت برای موتورهای جستجوگر)، SEM (بازاریابی در موتورهای جستجوگر)، UX (تجربه کاربری)

33 دیدگاه

  • ببخشید ایا میشه کدنویسی html وcss5 در گوشی های اندروید انجام داد اگر بله با چه روشی و چه نزن افژارایی

    پاسخ

  • سلام
    من سوالی داشتم
    استفاده از لیست داخل جدول html
    میشه کدهاشو بگید ممنون میشم کمکم کنید

    پاسخ

  • ممنون

    عالی بود

    پاسخ

  • سلام وقت بخیر تشکر میکنم از ارائه مطالب مفیدتون .. من یک فیلد عنوان در بخش دسته بندی سایت میخواستم اضافه کنم .. این کارو کردم و در دیتابیس جای اون فیلد رو ساختم اما نتونستم فرمان بدم مطلبی اگر داخل این فلید نوشته بشه در دیتابیس محل خودش ذخیره بشه و در ادمین نمایش بده شاید جاش نبود اینجا این سوالو مطرح کنم ولی راهنماییم کنید خیلی ممنون میشم. پروژه لاراول هستش شرکت برام طراحی کرده
    Bank-agahi.com

    پاسخ

  • من کدنویسی رو کردم برنامه نوت پد هم دارم….کد ها آماده هستن…الآن بایذ چیکار کنم که صفحه وب باز بشه؟؟؟؟

    پاسخ

    • سلام
      فایل رو با فرمت .html ذخیره کنین و در مرورگر کروم ببینین

  • توضییحاتتون خیلی کامل هست و حرفه ای

    ممنون

    پاسخ

    • ممنون عسگر عزیز

  • سلام بر استاد عزیز. یه سوال داشتم. من چطور میتونم توی قسمت کنسول مرورگرم یه دستور بنویسم که دستوری که توش اجرا کردم راس اون ساعت اجرا بشه. میخوام یه دستور رو در قیمت کنسول مرور گرم بنویسم و بهش یه ساعت دقیق رو برای اجرا بدم. اون قسمت ساعتش رو بلد نیستم. از چه دستوری استفاده کنم؟

    پاسخ

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

    پاسخ

    • سلام احسان عزیز
      حتما
      لطفا به support @ faranesh.com ایمیل بفرستید.

  • سلام من چند دوره ار دوره های شما رو برای این خریدم چون با توجه به فصل اول فکر میکردم مدرس این دوره اقای حمید کاظمی هستند خواهشا رسیدگی کنین یا هزینه رو برگردونین یا ویدئو های اقای حمید کاظمی رو در اختیار من بگذارید
    با تشکر

    پاسخ

    • سلام دوست عزیز
      حتما،
      لطفا به support @ faranesh.com ایمیل بفرستید.

  • سلام
    این آموزش رو کجا میتونم ببینم

    پاسخ

    • سلام آرمین عزیز
      آموزش های معرفی شده در متن مقاله رو پیشنهاد میکنیم.

  • سلام ببخشید چرا فقط همین چند تا تگ رو آموزش دادید.

    پاسخ

    • سلام دوست عزیز
      آموزش رایگان کامل در دوره آموزشی معری شده وجود داره

  • سلام. ببخشید من وقتی که میخوام کدی که در نوت پد زدم رو بوسیله ی مرورگر ها اجرا کنم همه ی آن ها همان کد خام را نشان می دهند و نتیجه ی خروجی را نشان نمی دهند. به نظر شما مشکل کجاست؟

    پاسخ

    • سلام محمد عزیز
      پاسخ سوالی که پرسیدید در دوره آموزش HTML رایگانمون کامل توضیح داده شده

  • سلام . ممنون اموزش خوبی بود ولی من ی چیزی رو نفهمیدم .من خاسته باشم ی فیلمی رو داخل ی تگ بزارم چطوری باید تگ کنم میدونم پسوند خاستی داره ولی خود فیلم رو چطوری بزارم اونجا

    پاسخ

  • درود فراوان
    من میخوام اندروید کار کنم ولی گفتن که باید اول html , css , java یادبگیرم بعد برم سمت اندروید.
    شما چه پشنهادی دارین و چه منبعی توصیه میکنید؟

    پاسخ

    • سلام حسین عزیز
      دوره های آموزشی رایگان از http://www.faranesh.com

  • قسمت اول اموزشت که نوشتید در برنامه html خود بنویسید. خب چطوری بنویسیم اصلا برنامه html کجا دانلود کنیم که بنویسیم؟

    پاسخ

    • باید وارد نت پد بشین و کد بزنین و برای مشاهده نتیجه کد نت پد رو با پسوند htm سیو کنین .

    • سلام
      فکر کنم brackets و phpstorm خوب باشن

  • سلام
    اسم برنامه ای که با اون دارید html می نوسید (همونی که تو وب سایت هست ) چیه ؟

    پاسخ

    • محمدجان با سیستم مدیریت محتوای وردپرس و ادیتور TinyMCE کار می‌کنیم.

    • ممنون از کمکتون

  • سلام.
    خوب هستید؟
    استاد ممنون میشم ایمیلی یا ایدی تلگرامی یا یه شماره تماس بفرمایید؟؟
    نیاز دارم.

    پاسخ

    • سلام دوست عزیزم
      پیشنهاد می کنم سوالتون رو اینجا بپرسین که بقیه دوستان هم بتونن از جواب استفاده کنن
      اگر هم احساس می کنین سوالتون خیلی طولانیه، میتونین از دوره های رایگان یا پولی آموزش HTML در فرانش استفاده کنین

دیدگاهتان را بنویسید