مبانی توسعه Front End

Summarize this content to 400 words in Persian Lang
سلام، و به اولین پست من در این پلتفرم و همچنین اولین پست مجموعه خوش آمدید “مبانی توسعه Front End.”

در این مجموعه، مفاهیم ضروری برای شروع سفر توسعه Front End شما را پوشش خواهیم داد. موضوعات شامل اصول HTML، CSS، و جاوا اسکریپت. برای علاقه مندان به ساخت و ساز فلاسک برنامه های کاربردی، ما با یک پست اختصاص داده شده به آن پایان می دهیم. هنگامی که اصول اولیه را پوشش دادیم، یک وب سایت ساده با قابلیت های اصلی با استفاده از آن می سازیم HTML/CSS/JS و الف فلاسک کاربرد.

در این پست به این موضوع می پردازیم اصول HTML.

HTML چیست؟

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

بخش های یک وب سایت

یک سند HTML به دو بخش اصلی تقسیم می شود: head و body. هر دوی این بخش ها در قسمت بیرونی قرار دارند tag.

The head بخش متا اطلاعات مربوط به صفحه وب مانند صفحه را در خود دارد عنوان و پیوندهایی به منابع خارجی مانند شیوه نامه ها.
این body بخش شامل محتوای اصلی صفحه وب است که کاربران با آن تعامل خواهند داشت.

در اینجا یک مثال ساده است:

Page 1

Your main webpage content goes here

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یادداشت ها:

این declaration defines the document type and version of HTML being used.
The تگ برای تنظیم عنوان صفحه وب که در تب مرورگر ظاهر می شود استفاده می شود.

عناصر HTML

یک عنصر HTML متشکل از الف برچسب شروع، محتوا، و یک روز پایان. محتوا بین تگ ها قرار می گیرد. برای مثال، یک عنصر پاراگراف به شکل زیر است:

This is a paragraph.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

انواع عناصر HTML

1. سرصفحه ها

تگ های هدر عناوین بخش هایی از صفحه وب را تعریف می کنند. آنها از (the largest) to (کوچکترین). هدرها برای سازماندهی و ساختار محتوا استفاده می شوند. در اینجا یک مثال است:

Main Header
Subheader

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بسته به سطح اهمیت از تگ هدر مناسب استفاده کنید. به عنوان مثال، is typically used for the main title, while و بقیه برای زیربخش ها استفاده می شوند.

2. پاراگراف ها

این tag is used to define a paragraph of text. It helps group text into readable chunks and allows for easier styling.

This is a paragraph of text.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. لیست ها

HTML از دو نوع لیست پشتیبانی می کند:

لیست سفارش داده شده (): لیست هایی که ترتیب خاصی دارند (مثلاً مراحل یک آموزش).

لیست نامرتب (): Lists with no specific order (e.g., a shopping list).

Each list item is enclosed in an برچسب زدن

نمونه لیست سفارشی:

Step 1: Learn HTML
Step 2: Learn CSS
Step 3: Learn JavaScript

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال لیست نامرتب:

Eggs
Bread
Milk

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. ناحیه متن

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

Your text goes here

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شما همچنین می توانید ویژگی هایی مانند placeholder و id برای عملکرد اضافی:

id=”my_text_area” placeholder=”Enter your name”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. دکمه ها

برای ایجاد یک دکمه، می توانید از برچسب زدن دکمه‌ها معمولاً برای ارسال فرم یا اقدامات تعاملی استفاده می‌شوند.

Click Me!

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شما همچنین می توانید یک را اختصاص دهید id به دکمه استایل دادن یا تعامل با آن از طریق جاوا اسکریپت.

id=”my_button”>Click Me!

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. هایپرلینک ها

هایپرلینک ها ( برچسب ها) به کاربران اجازه می دهد بین صفحات یا سایت های خارجی حرکت کنند. این href ویژگی URL مقصد را مشخص می کند.

همچنین می‌توانید کنترل کنید که آیا پیوند در همان پنجره یا یک برگه جدید با استفاده از target ویژگی:

به طور پیش فرض، پیوند در همان تب باز می شود (_self) اما با استفاده از _blank پیوند را در یک برگه جدید باز می کند.

7. تصاویر

برای نمایش تصاویر از برچسب، با src ویژگی اشاره به منبع تصویر (URL یا مسیر فایل). این alt ویژگی توضیحی برای تصویر ارائه می دهد (مفید برای دسترسی).

src=”image.jpg” alt=”Description of image”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

8. دو

این tag is a container used to group elements. It’s useful for layout purposes, such as creating different sections on a webpage.

About Us
We are a company that…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

9. قالب بندی متن

HTML انواع تگ ها را برای قالب بندی متن ارائه می دهد. برخی از پرکاربردترین آنها عبارتند از:

: متن پررنگ

: متن مهم (از نظر معنایی قوی تر از )

: متن کج

: متن تاکید شده (از نظر معنایی قوی تر از )

: متن هایلایت شده

: متن کوچکتر

: متن خط خورده

: متن زیرنویس

: متن رونوشت

مثال ها:

This is bold text
This is important text
This is italic text
This is emphasized text
This text is highlighted
This is smaller text
This text is crossed out
Water is H2O
E = mc2

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید