مقدمه ای بر اچ تی ام ال (HTML)

HTML چیست؟

HTML مخفف Hypertext Markup Language است و یک زبان نشانه گذاری استاندارد است که برای ایجاد صفحات وب استفاده می شود. HTM; ساختار اولیه صفحات وب را فراهم می کند. در HTML از مجموعه‌ای از عناصر و تگها برای توصیف ساختار یک صفحه وب و محتوای آن، از جمله سرفصل‌ها، پاراگراف‌ها، پیوندها، تصاویر، ویدیوها و موارد دیگر استفاده می‌کنیم. HTML یک زبان نسبتاً ساده برای یادگیری است و برای هر کسی که می خواهد کد نویسی وب را یاد بگیرد HTML اولین گام و ضروری است.

HTML چه کاربردی دارد؟

برای درک بهتر یک وب سایت را تشبیه می کنیم به بدن انسان HTML ساختار اولیه یا چهارجوب و اسکلت وب سایت شما را تشکیل می دهد پس در نتجه HTML به تنهایی برای ساخت یک وب سایت کافی نیست در کنار HTML زبان های دیگری همچون CSS , JS برای ما در ساخت یک وب سایت کامل و چیزی که کاربر می بیند کمک می کنند مثلا CSS به وب سایت رنگ و استایل می دهد عین لباس و پوست و مو در بدن انسان و در همین حال JS نقش هوشمند سازی و هدایت وب سایت را بر عهده دارد عین مغز و عصاب در انسان

حال برای یادگیری طراحی سایت زبان HTML اولین گام می باشد.

موارد مورد نیاز و شروع کار

ویرایشگر متن: اولین چیزی که به آن نیاز دارید یک ویرایشگر متن خوب است. نمونه هایی از ویرایشگرهای متن محبوب عبارتند از Visual Studio Code، Atom، Sublime Text یا Notepad++. یکی را انتخاب کنید که متناسب با نیاز شما باشد. البته از ویرایشگر متن سیستم عامل خود نیز می توانید استفاده کنید اما بهتر است از ویرایش گر های دیگر که بالا نیز برخی لیست شدند استفاده کنید.
مرورگر وب: در مرحله بعد، باید به یک مرورگر وب مانند Google Chrome، Mozilla Firefox یا Microsoft Edge دسترسی داشته باشد. شما از مرورگر وب خود برای پیش نمایش صفحات وب HTML استفاده خواهید کرد.
ایجاد فایل index.html در ویرایشگر و شروع کار....

تگ html چیست؟

تگ‌های HTML (HyperText Markup Language) برای نشان دادن ساختار و محتوای صفحات وب استفاده می‌شوند. این تگ‌ها دارای دو بخش می‌باشند: بخش باز شدن تگ که با یک علامت "<" شروع می‌شود و نام تگ را دنبال می‌کند، و بخش بستن تگ که با یک علامت "</" شروع می‌شود و نام تگ را دنبال می‌کند. بین این دو بخش محتوایی که باید به عنوان محتوای تگ نمایش داده شود، قرار می‌گیرد.

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

ساختار اصلی HTML

کد نویسی html در چهارچوب بالا انجام خواهد شد کد های بالا در تمامی اسناد HTML وجود دارند و چهارچوب اصلی را تشکیل می دهند که تگ ها اضافه بین این ها اضافه می شود. حالا با دقت به کد بالا نگاه کنید تا تک تک برسی کنیم:

<!DOCTYPE html> به مروگر مشخص می کند که این سند یک سند HTML5 است.

تگ <html>عنصر اصلی یک صفحه HTML است. و در ابتدای صفحه باز و در انتها بسته می شود.

این <head>تگ حاوی اطلاعات متا در مورد صفحه HTML است.

این <body>نگ بدنه سند را تعریف می کند و کد های تمامی محتویات قابل مشاهده در این بخش است، مانند سرفصل ها، پاراگراف ها، تصاویر، لینک ها، جداول، لیست ها و غیره.

ایجاد عنوان و قالب بندی متن در HTML

لHTML چندین گزینه برای اضافه کردن عنوان و قالب بندی متن ارائه می دهد. تگ های Headings برای ایجاد سرفصل ها و عنوان ها در صفحه وب استفاده می شوند تگ <p> برای پاراگراف ها و...

1. تگ های عنوان ( <h1>به <h6>): HTML شش سطح از تیتر را ایجاد می کنند <h1>که مهم ترین و <h6>کم اهمیت ترین هستند. می توانید از این تگ ها برای ایجاد عنوان و عنوان فرعی برای صفحات وب خود استفاده کنید.

2. تگ پاراگراف ( <p>): از تگ<p> برای ایجاد پاراگراف های متن استفاده می شود. می توانید از آن برای گروه بندی چندین جمله یا کلمه با هم استفاده کنید تا یک بلوک متن ایجاد کنید.

3. تگ پررنگ ( <b>): از <b>تگ برای پررنگ کردن متن استفاده می شود. اغلب برای برجسته کردن کلمات یا عبارات مهم استفاده می شود.

4. تگ کج ( <i>): از <i>تگ برای ایتالیک کردن متن استفاده می شود. اغلب برای تأکید یا تأکید بر کلمات یا عبارات خاص استفاده می شود.

5. تگ Underline ( <u>): از این <u>تگ برای خط کشیدن زیر متن استفاده می شود. اغلب برای برجسته کردن یا تأکید بر کلمات یا عبارات استفاده می شود.

6. تگ Strikethrough ( <s>یا <strike>): از تگ <s>یا <strike>برای ایجاد افکت متن خطی استفاده می شود. اغلب برای نشان دادن اینکه متن حذف شده یا دیگر معتبر نیست استفاده می شود.

کامنت در html

در HTML، می‌توانید از کامنت‌ها برای اضافه کردن یادداشت‌ها و توضیحاتی که قابل مشاهده برای کاربران نیستند، استفاده کنید. کامنت‌ها در HTML با علامت "" پایان می‌یابند و محتوای آن‌ها به عنوان توضیح برای کد می‌توانند استفاده شوند.

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

افزودن تصاویر و فایل های رسانه ای به کد HTML

افزودن تصاویر و رسانه در HTML یک فرآیند ساده است. در اینجا مراحل آن را برسی می کنیم:

1. از تگ <img> برای افزودن تصویر استفاده کنید. تگ <img>یک باز است و یعنی تگ بسته ندارد. بخش srcURL مسیر فایل تصویر را مشخص می کند. altویژگی یک توصیف متنی جایگزین از تصویر ارائه می‌کند که در صورت بارگیری نشدن تصویر، نمایش داده می شود.

2. برای افزودن صدا یا ویدیو می توانید به ترتیب از تگ <audio>و <video> استفاده کنید . صفت srcURL مسیر فایل را مشخص می کند. تگ <source> را در داخل تگ ها <audio>و <video>برای ارائه انواع فایل های قرار می دهیم

ایجاد لینک در صفحه وب HTML

ایجاد لینک در HTML یک فرآیند ساده است. جلوتر برسی می کنیم

1.از تگ<a> برای ایجاد لینک استفاده کنید . صفتhrefنشانی اینترنتی مقصد را مشخص می کند که کاربر با کلیک بر روی پیوند به آن هدایت می شود.

2. برای ایجاد یک لینک داخلی در وب سایت خود، می توانید از یک URL نسبی استفاده کنید. به عنوان مثال، اگر می خواهید به صفحه ای به نام "about.html" که در همان پوشه فایل HTML فعلی شما قرار دارد پیوند دهید، می توانید از کد زیر استفاده کنید:

فرم های در HTML

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

در اینجا مثالی از یک فرم اصلی آورده شده است:

جمع بندی

در این مقاله سعی بر این شد که به چیستی و مقدمه ایی از html بپردازیم و سپس به یکسری از تگ های اولیه و مهم html پرداختیم. ممنون که تا اینجا همراهی کردید.

دوره آموزش رایگان html

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

https://jooyalearn.com/product/html/

تهیه شده در سایت جویا لرن