HTML (زبان نشانه گذاری HyperText) زبان استانداردی است که برای ایجاد و طراحی وب سایت ها و برنامه های کاربردی وب استفاده می شود. محتوای موجود در وب را با استفاده از سیستمی از عناصر، برچسب ها و ویژگی ها ساختار می دهد.
1. تولد HTML HTML توسط تیم برنرز لی، دانشمند کامپیوتر بریتانیایی، در سال 1989 زمانی که در CERN (سازمان اروپایی تحقیقات هسته ای) کار می کرد، اختراع شد. او ایده یک “سیستم فرامتن” را پیشنهاد کرد که به محققان اجازه می دهد اسناد را از طریق اینترنت به اشتراک بگذارند و به آنها دسترسی داشته باشند.
در سال 1991، برنرز لی اولین نسخه HTML را ایجاد کرد که شامل تنها 18 برچسب بود. این تگها امکان ایجاد اسناد ساده با لینکها (به همین دلیل HyperText نامیده میشود) و قالببندی اولیه را میدادند. این نشان دهنده تولد شبکه جهانی وب بود. تیم برنرز لی HTML را به عنوان راهی برای قالببندی اسناد و لینکها در وب معرفی کرد.
2.HTML 2.0 (1995) همانطور که اینترنت به سرعت شروع به رشد کرد، نیاز به نسخه استاندارد HTML بوجود آمد. در سال 1995، کارگروه مهندسی اینترنت (IETF) یک گروه کاری برای استانداردسازی HTML تشکیل داد که منجر به انتشار HTML 2.0 شد. HTML 2.0 اولین نسخه ای بود که به طور رسمی استاندارد شد و شامل تمام عناصر اساسی لازم برای اسناد وب بود. از متن، تصاویر، جداول، فرمها و پیوندها پشتیبانی میکرد، اما هنوز از نظر قالببندی و قابلیتهای چیدمان کاملاً محدود بود.
3.HTML 3.2 و HTML 4.0 (1997 – 1999) در سال 1997، HTML بیشتر مورد استفاده قرار گرفت و کنسرسیوم جهانی وب (W3C) به رهبری تیم برنرز لی، توسعه و استانداردسازی HTML را بر عهده گرفت. HTML 3.2 (1997): این نسخه چیدمان مبتنی بر جدول، تگ و سایر عناصر ارائه را معرفی کرد. این یک گام بزرگ رو به جلو برای طراحی وب بود، اگرچه هنوز فاقد ویژگی های ظاهری پیشرفته است.
HTML 4.0 (1999): این نسخه یک ارتقاء قابل توجه بود که بر جداسازی محتوا و ارائه تأکید داشت. HTML 4.0 توسعه دهندگان وب را تشویق کرد تا از CSS (Cascading Style Sheets) برای چیدمان و طراحی استفاده کنند که دسترسی و قابلیت استفاده را بهبود بخشید. HTML 4.0 همچنین ویژگی هایی مانند: عناصر معنایی جدید مانند
، ، ، و (اگرچه در نسخه های بعدی مرتبط تر می شوند). پشتیبانی بین المللی (با پشتیبانی از زبان های مختلف). پشتیبانی از اسکریپت با برچسب ها برای جاوا اسکریپت
4.HTML 5 (2014) HTML5 مهمترین بهروزرسانی برای HTML است که برای پاسخگویی به نیازهای روزافزون برنامههای کاربردی وب مدرن، محتوای چند رسانهای و دستگاههای تلفن همراه معرفی شده است. ویژگی های کلیدی معرفی شده در HTML5:
عناصر معنایی جدید: HTML5 عناصر معنیداری بیشتری برای ساختار بهتر سند اضافه کرده است، مانند:
، ، ، ، ، ، و بیشتر.
پشتیبانی چند رسانه ای: HTML5 عناصر جدیدی را معرفی کرد مانند: و برای جاسازی چند رسانه ای مستقیماً در صفحات وب بدون نیاز به افزونه هایی مانند فلش. برای رندر پویا و قابل اسکریپت از اشکال دو بعدی و تصاویر بیت مپ.
قابلیت های آفلاین: HTML5 پشتیبانی از برنامه های وب آفلاین را با ویژگی هایی مانند: -ذخیره سازی محلی و IndexedDB برای ذخیره داده ها در سمت مشتری اضافه کرد.
کنترل های فرم: انواع ورودی جدید از جمله تاریخ، ایمیل، شماره و محدوده برای بهبود ورودی کاربر و اعتبارسنجی فرم معرفی شدند.
پشتیبانی API: HTML5 شامل بسیاری از APIهای جاوا اسکریپت برای مکان یابی جغرافیایی، ذخیره سازی محلی، کارگران وب و موارد دیگر بود.
پشتیبانی بهتر از موبایل: HTML5 به گونه ای طراحی شده است که سازگار با موبایل باشد و اطمینان حاصل کند که وب سایت ها می توانند به راحتی در تلفن های هوشمند و تبلت ها مشاهده شوند.
HTML5 انتقال به برنامههای وب و وبسایتهای تعاملی را مشخص کرد، زیرا ویژگیهایی را ارائه میکرد که نیاز به بسیاری از افزونههای شخص ثالث (مانند اپلتهای فلش و جاوا) را از بین میبرد.
5. HTML امروز پس از HTML5، هیچ “HTML 6” رسمی وجود نداشت. در عوض، HTML تحت نظارت وب به یک استاندارد زندگی تبدیل شده است کارگروه فناوری کاربردی فرامتن (WHATWG).این رویکرد استاندارد زندگی به این معنی است که HTML به طور مداوم با به روز رسانی و بهبودهای منظم در حال تکامل است. ویژگی های جدید بر اساس نیازهای برنامه های کاربردی وب مدرن و جامعه توسعه وب در صورت لزوم معرفی می شوند.
اسناد HTML به صورت سلسله مراتبی ساختار یافته اند و عناصر حاوی عناصر دیگر هستند. در اینجا یک تفکیک اساسی از ساختار سند HTML آمده است:
HTML Basics
This is a simple HTML document.
: Declares the document type and version of HTML.
: The root element that contains all the HTML content.
: Contains metadata such as the title, character set, and external links.
: Contains the visible content of the page like text, images, and links.
HTML Elements and Tags : HTML uses elements that are enclosed in tags. An element can contain other elements, text, or attributes.
Tags: Elements are wrapped in angle brackets, e.g., , , .
برچسب افتتاحیه: (start of an element).
Closing Tag: (end of an element).
Content: The content goes between the opening and closing tags.
Empty Tags: Some elements don’t have closing tags, such as و .
تگ های رایج HTML :
سرفصل ها: to برچسب ها نشان دهنده عناوین، با being the most important and کمترین
This is a lest important heading
پاراگراف ها: is used to define paragraphs.
This is a paragraph of text.
پیوندها: برای ایجاد هایپرلینک استفاده می شود.
Dev.to
این پیوندها برای هدایت کاربر به آدرسها / مراجع مختلف استفاده میشوند. این لینک ها توسط انکر تگ تولید می شوند. تگ anchor که با 'a' نشان داده می شود. حتی می توانیم یک عنصر را در یک عنصر دیگر به نام “عناصر تودرتو” نگه داریم.
for more content like,share and subsctibe fb
حتی میتوانیم با استفاده از «mailto:mailid» یا تلفن با استفاده از «tel:number» یا watsapp با استفاده از «wa.me/number» به نامهها برویم.
برای باز کردن پیوندهای لنگر در تب جدید، از ویژگی target و set value = “_blank” استفاده می کنیم. به عنوان مثال:
تصاویر: برای نمایش تصاویر استفاده می شود.اما img یک تگ بسته شدنی است. تگ های خود بسته شدن برچسب هایی هستند که برچسب بسته ندارند.
img دارای ویژگی های زیر است: src — برای نگه داشتن لینک ها/مسیر تصاویر منبع استفاده می شود. alt — متن جایگزین برای تصویر را توصیف می کند و فقط زمانی کار می کند src کار نمی کند. ارتفاع — برای ذکر ارتفاع تصویر استفاده می شود. عرض – برای ذکر عرض تصویر استفاده می شود.
لیست ها: لیست ها برای فهرست کردن موارد خاص یا مرتب یا نامرتب استفاده می شوند. به عنوان مثال: لیست مواد غذایی، لیست هزینه ها، فهرست کتاب ها، لیست دانش آموزان، لیست کارها، نتایج، لیست تماس برخی از لیست ها دارای نظم هستند و برخی دیگر ندارند. در HTML لیست ها به 3 نوع طبقه بندی می شوند:
1.لیست سفارش داده شده : لیست های مرتب شده برای فهرست کردن آیتم های خاص در یک ترتیب استفاده می شوند.HTML از تگ 'ol' برای لیست های مرتب شده استفاده می کند. در داخل ol، هر آیتم لیست با برچسب 'li' مشخص می شود.
Item 1
Item 2
2.لیست نامرتب: لیست های نامرتب برای فهرست کردن مواردی هستند که ترتیب آنها ضروری نیست. لیست های نامرتب از برچسب 'ul' استفاده می کنند و هر آیتم لیست 'li' است. نوع لیست نامرتب را می توان به صورت سفارشی انجام داد اما توصیه نمی شود.
3.لیست تعریف: از این لیست ها برای تعریف عبارات یا رویدادهای خاص، تغییرات، خط زمان و غیره استفاده می شود، آنها از تگ 'dl' استفاده می کنند. هر مورد 2 خاصیت خواهد داشت dt- اصطلاح تعریف dd – داده های تعریف
جداول: جداول برای نمایش داده ها در ردیف ها و ستون ها استفاده می شود. به عنوان مثال: crickbuzz، نمایشگر، جدول زمانی مدرسه/دانشگاه… و غیره. خطوط افقی اطلاعات را ردیف و خطوط عمودی اطلاعات را ستون می نامند. جداول با تگ “table” ایجاد می شوند. هر جدول دارای ردیف هایی است که با برچسب “tr” ایجاد می شود.
قالب بندی برچسب ها:
اینجا را کلیک کنید
عنصر : یک عنصر چیزی نیست جز محتوای با برچسب های باز و بسته. — h1 element Elements are two types: i. block element: block element will not allow any other element beside. blocks element also have height and width Eg: h1 to h6, p, div etc.., ii. in-line element: inline element will allow other elements beside. inline elements also not have height and width Eg: a, img, span
div and span are container elements, they are used to wrap certain elements as a group.
div is a general block container element. span is a genral inline container element.
** Class and id’s** : we can specify a class name or id name to any element to identify the element.class names can be multiple and multiple elements can have same class name.id names will be always unique or singular.
عناصر معنایی : عناصر معنایی برای ایجاد HTML معنی دار معرفی شده اند که به راحتی توسط موتورهای جستجو قابل درک است. این تمرین برای SEO بهتر (بهینه سازی موتور جستجو) خوب است. عناصر معنایی هیچ رابط کاربری را تغییر نمی دهند. پرکاربردترین عناصر معنایی عبارتند از: سرصفحه، اصلی، پاورقی، ناوبری، کنار، بخش، مقاله، عنوان، tbody، tfoot، آدرس، شکل، تصویر و غیره…
رسانه:
صوتی–audio برای نگه داشتن فایل های آهنگ صوتی در صفحه وب استفاده می شود. از تگ صوتی و برای منبع از تگ منبع استفاده می کند. میتوانیم از پرچمهایی مانند پخش خودکار، کنترلها برای پخش خودکار صدا و شامل کنترلها استفاده کنیم.
ویدئو–ویدئوها برای نشان دادن رسانه به کاربر استفاده می شوند. برای نگه داشتن ویدیو در صفحه وب، میتوانیم از ویدیو و برای منبع، از تگ منبع استفاده کنیم.
آی فریم –Iframe برای جاسازی رسانه های شخص ثالث در وب سایت شما استفاده می شود.
شکل–شکل برای نمایش تصاویر همراه با زیرنویس آن استفاده می شود.
caption
تصویر : Picture برای افزودن تصاویر پاسخگو به صفحه وب (به معنی تصاویر مختلف برای دستگاه های مختلف) استفاده می شود. با برچسب منبع حاوی پرس و جوهای رسانه کار می کند.
فرم ها:
فرم ها برای جمع آوری داده های کاربر مانند نام، ایمیل، شماره_تلفن و غیره استفاده می شوند. به عنوان مثال: ورود، ثبت نام، بازخورد، تماس، پذیرش، فرم حضور، پیام ها، اشتراک، جستجو، رمز عبور فراموش شده و غیره…، برای گرفتن اطلاعات کاربر میتوانیم از یک عنصر خود بستهشونده به نام «ورودی» استفاده کنیم، هر ورودی دارای ویژگیهای زیر خواهد بود: نوع: نوع ورودی را که می تواند دریافت کند را مشخص می کند. نگهدارنده مکان: متن ساختگی برای نگه داشتن مکان تا زمانی که مقدار واقعی برسد. شناسه : برای شناسایی منحصر به فرد ورودی استفاده می شود. نام : name متغیری است که توسط آن مقدار به سرور ارسال می شود. برچسب برچسب: برچسب برای انتخاب عناصر خاص استفاده می شود و لازم است با تگ فرم id ورودی (برای ویژگی) متصل شود همچنین دارای ویژگی هایی مانند: — اقدام: شامل مسیر سرور (جایی که فرم باید ارسال شود). — روش: راه ارسال مقادیر را مشخص می کند. — دریافت کنید: get تمام مقادیر موجود در URL را نشان می دهد. — ارسال کنید: پست مقادیر موجود در URL را نشان نمی دهد.
انواع ورودی: ورودی ها انواع مختلفی دارند مانند من متن: متن برای ورودی های الفبایی استفاده می شود. ii ایمیل: ایمیل برای ورودی ایمیل استفاده می شود. III. رمز عبور: رمز عبور برای کلیدهای مخفی، پین ها، رمز عبور و غیره استفاده می شود، IV url: url برای وارد کردن لینک های http/https استفاده می شود. v. number: عدد برای وارد کردن تنها مقادیر عددی استفاده می شود. vi. date: تاریخ برای وارد کردن تاریخ با استفاده از تقویم پیش فرض استفاده می شود. vii. زمان: زمان برای وارد کردن زمان با استفاده از تایمر پیش فرض استفاده می شود. viii. datetime-local: برای وارد کردن تاریخ و زمان در یک زمان استفاده می شود. ix week : برای ورودی هفته سال استفاده می شود. x ماه: برای وارد کردن ماه سال استفاده می شود. xi file: فایل برای آپلود فایل های خاص استفاده می شود. xii. hidden: hidden برای مخفی کردن ورودی استفاده می شود. xiii. دکمه: دکمه برای گنجاندن دکمه هایی با انواع مختلف استفاده می شود. ارسال: ارسال برای ارسال فرم استفاده می شود. reset: reset برای تنظیم مجدد فرم استفاده می شود. xiv.color: رنگ برای انتخاب رنگ های خاص استفاده می شود. xv. range: محدوده برای دریافت نوار لغزنده محدوده استفاده می شود.
دکمه های رادیویی: از دکمه های رادیویی برای انتخاب تنها یکی از گزینه ها استفاده می شود. در دکمههای رادیویی، همه دکمههای رادیویی یک منظور باید یک نام داشته باشند.
چک باکس ها: چک باکس ها برای انتخاب یک یا چند مقدار استفاده می شوند.
همه نام های چک باکس های یک هدف باید یکسان باشند.
کشویی: از کشویی برای انتخاب یک یا چند مقدار استفاده می شود. از تگ “انتخاب” استفاده می کند که در آن هر گزینه یک تگ “گزینه” است
اعتبار سنجی HTML
اعتبارسنجی HTML فرآیندی است برای بررسی اینکه آیا یک سند HTML از نحو و قوانین تعریف شده توسط مشخصات HTML (مانند HTML5، HTML4 یا XHTML) پیروی می کند یا خیر. این کمک می کند تا اطمینان حاصل شود که یک صفحه وب به درستی ساختار یافته است و می تواند به درستی توسط مرورگرها ارائه شود. اعتبار سنجی همچنین نقش مهمی در بهبود دسترسی، بهینه سازی موتور جستجو (SEO) و عملکرد وب دارد.
روش های اعتبار سنجی HTML5: با HTML5، اعتبارسنجی به لطف عناصر فرم جدید و انواع ورودی که امکان اعتبارسنجی بهتر سمت مشتری را فراهم می کند، آسان تر شده است.
فیلدهای مورد نیاز : HTML5 را معرفی می کند مورد نیاز است ویژگی، که تضمین می کند کاربر قبل از ارسال یک فیلد فرم را پر می کند.
اعتبار سنجی الگو : با استفاده از عبارت می توانید یک الگو برای ورودی های فرم تعریف کنید الگو ویژگی، که تضمین می کند ورودی کاربر با یک قالب خاص مطابقت دارد (با استفاده از عبارات منظم).
انواع ورودی برای اعتبارسنجی : HTML5 انواع ورودی های جدیدی مانند ایمیل، آدرس اینترنتی، تاریخ، شماره و تلفن را معرفی می کند که اعتبار داخلی را برای فرمت های داده خاص ارائه می کند.
HTML ستون فقرات توسعه وب است. محتوای موجود در وب را با استفاده از برچسب ها، عناصر و ویژگی ها ساختار می دهد و پایه و اساس ساخت صفحات وب را تشکیل می دهد. همانطور که پیشروی می کنید، HTML را با CSS (برای یک ظاهر طراحی) و جاوا اسکریپت (برای تعامل) ترکیب می کنید تا وب سایت هایی کاملاً کارآمد ایجاد کنید.