HTML برای مبتدیان:

جدول زمانی فن آوری های وب


2009

2005

2002

2000

1998

1997

1996

1994

1991

HTML5

آژاکس

طراحی وب Tableless

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

HTML

Contents

مقدمه

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

این چیزی است که نمی توان از آن اجتناب کرد ، زیرا اکثریت قریب به اتفاق صفحات فرود وب سایت که بازدید می کنید با استفاده از عناصر HTML نوشته و ساخته شده اند. در واقع ، اکنون HTML است بیش از 74٪ از کل وب سایتهای شناخته شده استفاده می شود, در حالی که این زبان همچنین می تواند همه چیز را از طراحی سایت شما گرفته تا کیفیت محتوایی که در اختیار شما قرار دارد ، ارتقا بخشد.

در این راهنما ، ما قبل از اینکه به نمونه هایی از عناصر فردی که هنگام کدنویسی وب سایت خود استفاده می کنید ، به بررسی اصول اساسی HTML و برنامه های کاربردی بالقوه آن بپردازیم..

HTML چیست؟?

درصد وب سایت ها با استفاده از زیر شاخه های مختلف HTML

زیر شاخه های مختلف از درصد HTML

به زبان ساده, HTML زبان علامت گذاری استاندارد را نشان می دهد برای ایجاد صفحات وب به صورت آنلاین. این مخفف عبارت Hyper Text Markup Language است و اصلی ترین کار آن ایجاد ساختار ، چیدمان و ارائه صفحات فرود شخصی است. در حالی که مرورگرهای وب به طور مستقیم زبان HTML را نمایش نمی دهند ، نقش مهمی در کمک به ایجاد یک سایت قابل مشاهده ، قابل دسترسی و استفاده آسان دارد.

HTML همچنین توسط تعدادی از عناصر مجزا ، که بتدریج صفحات وب را ایجاد می کنند ، ساختار محتوا را ارائه می دهد و وب سایت شما زنده می شود ، پشتیبانی می شود. این عناصر در “برچسب ها” ایجاد شده و شامل می شوند ، که شامل مطالب متناوب مانند عناوین ، پاراگراف ها و مثال های مشابه است.

ما این عناصر و ساخت آنها را با جزئیات بیشتری در زیر بررسی خواهیم کرد ، در ضمن می خواهیم نحوه شخصی سازی آنها برای معرفی رنگ ، پیوندها و تایپوگرافی های متغیر را به وب سایت شما جستجو کنیم..


HTML از کجا استفاده می شود?

وب سایت های محبوب با استفاده از HTML

HTML از کجا استفاده می شود

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

  • عناصر قابل برنامه ریزی را در یک صفحه موجود ایجاد کنید

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

  • محتوای اضافی برای ایمیل ایجاد کنید

    ایمیل همچنین از HTML به عنوان زبان پیامهای متنی غنی ، پیوندها ، متن و سایر عناصر دیگر استفاده می کند که به تنهایی قابل نمایش نیستند. بنابراین ، اگر به دنبال به اشتراک گذاری کتاب الکترونیکی مربوط به وب سایت خود از طریق ایمیل هستید ، می توانید از HTML برای بهینه سازی تأثیر پیام خود استفاده کنید.

  • اسناد راهنما آفلاین را که در رایانه شما نصب شده اند درک کنید

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

HTML و CSS
مشاهده HTML و CSS [صفحه تقلب]

ساختار صفحه HTML

</strong><br/> <strong>
محتوای صفحه

عناصر html ، head و body بخشی از مشخصات HTML از اواسط دهه 1990 است و تا چند سال پیش آنها عناصر اصلی مورد استفاده برای دادن ساختار به اسناد HTML بودند..
با این حال ، اوضاع در چند سال گذشته به طرز چشمگیری تغییر کرده است زیرا HTML5 برچسب های جدیدی را به شما اضافه کرده است که می تواند برای اضافه کردن معنی معنایی غنی به ساختار یک سند HTML اضافه شود..

اسناد HTML لازم است تا با اعلامیه نوع اسناد (غیر رسمی ، “یک دکترین”) شروع شوند. در مرورگرها ، doctype به تعریف حالت رندر کمک می کند. HTML5 DTD را تعریف نمی کند. بنابراین ، در HTML5 اظهارنامه doctype ساده تر و کوتاهتر است.


قبل از ساختن یک صفحه html ، به اصول اولیه در محل نیاز دارید.

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

1. هدر: این هدر حاوی مطالب مربوط به تمام صفحات سایت شما ، مانند یک آرم یا نام وب سایت ، و یک سیستم ناوبری است. عنوان در هر صفحه مشاهده می شود.

2. بدن اصلی: این بزرگترین منطقه را در یک صفحه وب اشغال می کند. این محتویات خاص به صفحه در حال مشاهده است.

3. پاورقی: محتوای پاورقی معمولاً شامل اطلاعات تماس ، آدرس حمل و نقل یا اعلامیه های قانونی است. مانند هدر ، پاورقی در هر صفحه ظاهر می شود ، اما در پایین قرار دارد.

این عناصر ساختاری اساسی وقتی به هم می آیند به نظر می رسد:


می توانید متن یا کد را مانند یک در اینجا قرار دهید
کد رهگیری Google Analytics برای
مثال.

صفحه اصلی صفحه شما می رود
اینجا. آن را با متن و تصاویر پر کنید!

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


می توانید متن یا کد را مانند یک در اینجا قرار دهید
کد رهگیری Google Analytics برای
مثال.

عنوان اول من

به وبسایت من خوش آمدید!

اطلاعات تماس می توانند به اینجا بروند


برچسب های HTML

برچسب های HTML

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

برچسب های عنوان

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

,

,

,

,

یا
برچسب بسته به اندازه دلخواه.
سپس باید در انتهای عنوان ، یک برچسب بسته را اعمال کنید و متن را به صورت زیر چاپ کنید:

12 دسته از برچسب ها وجود دارد:


این قسمت 1 است

این قسمت 2 است

این قسمت 3 است

این قسمت 4 است

این قسمت 5 است

این قسمت 6 است

منجر به فن آوری های برچسب HTML
در وب به اشتراک بگذارید

0.27٪

HTML5
برچسب بوم

0.29٪

HTML5
برچسب صوتی

0.69٪

HTML5
برچسب ویدیو

3.1٪

HTML5
برچسب SVG

6.54٪

HTML5
قراردادن برچسب


پس از تأیید ، این مورد به زیبایی زیر در وب سایت شما ترجمه می شود’صفحه فرود:

این قسمت 1 است

این قسمت 2 است

این قسمت 3 است

این قسمت 4 است

این قسمت 5 است

این قسمت 6 است

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

برچسب های پاراگراف

پشتیبانی از فیلم و صدا
در مورد Flash Player و سایر پخش کننده های رسانه های شخص ثالث را فراموش کنید ، فیلم ها و صدا های خود را با HTML5 جدید در دسترس قرار دهید

یک اصل مشابه برای شروع برچسب های پاراگراف ، که توسط آنها به تصویر کشیده شده است ، اعمال می شود

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

قبل از تگ بسته شدن متناوب در انتها برای تکمیل اثر ، برچسب باید در ابتدای متن مربوطه قرار داده شود. با این حال ، بر خلاف برچسب های عنوان ، تفاوت های عددی وجود ندارد که می توانند اندازه متن ارائه شده در پاراگراف را تغییر دهند. مثلا:

بند اول شما

بند دوم شما

بند سوم شما

استفاده از برچسب های HTML5 توسط وب سایت های سراسر جهان

کشور
تعداد وب سایت ها
ایالات متحده
140،008
روسیه
87،508
آلمان
34،519
انگلستان
26،609
فرانسه
25،697
ژاپن
23،578
تایوان
19،798
اوکراین
19204
برزیل
16،773
چین
16،523
بقیه دنیا
265،371

خارج از قالب HTML ، این متن را به صورت زیر در صفحه وب تمام شده شما خراب می کند:

بند اول شما

بند دوم شما

بند سوم شما

برچسب های خط شکست

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

عنصر.

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

عناصر برای تجزیه متن و به طور بالقوه برجسته کردن قسمتهای مهم از اطلاعات. فضای واحد بین کاراکتر br و slash رو به جلو بسیار مهم است ، زیرا در غیر این صورت برچسب در قالب HTML قابل تشخیص نیست.

به عنوان مثال:

برچسب ترسیم HTML5 طراحی شده است که به شما امکان می دهد تا از امکانات سیستم تعاملی وب و انیمیشن وب حتی بیشتر از سیستم عامل های ثروتمند اینترنت قبلی مانند Flash استفاده کنید..
حتی می توانید بازی ها را با استفاده از HTML5 توسعه دهید برچسب زدن HTML5 راهی عالی و دوستانه برای موبایل برای توسعه بازی سرگرم کننده و تعاملی فراهم می کند

صبح بخیر

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

با احترام

آقای جونز

پس از اعمال ، این متن را به شرح زیر تقسیم می کند:

صبح بخیر,

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

با احترام

آقای جونز

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

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

خطوط افقی

دسته های وب سایت که در آن از برچسب بوم HTML5 استفاده می شود

دسته های وب سایت که در آن از برچسب بوم HTML5 استفاده می شود

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

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


برچسب ، کمک می کند تا یک عنصر خالی ایجاد شود که خط بصری و افقی را بین بخش های متضاد یک سند آنلاین ترسیم می کند. به عنوان مثال ممکن است شما بخواهید خطی را بین دو متن متن قرار دهید تا بتوانید خواننده را مجدداً متمرکز کنید یا به سادگی عنصر بصری جدید را معرفی کنید. بدین ترتیب است که چنین شکافی را در HTML ایجاد می کنید:

بند اول شما


بند دوم شما

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

بند اول شما
________________________________________

بند دوم شما

بند اول شما
_______________________

بند دوم شما

مرورگرهای موبایل HTML5 را به طور کامل پذیرفته اند ، بنابراین ایجاد پروژه های آماده موبایل به راحتی طراحی و ساخت نمایشگرهای لمسی کوچکتر است – از این رو محبوبیت طراحی پاسخگو. چندین برچسب عالی متا وجود دارد که به شما امکان می دهد برای موبایل بهینه شوید
78٪ از توسعه دهندگان محتوا موافقند كه این ساختار برای ایجاد برنامه های تلفن همراه مناسب است ، و 68٪ می گویند برای طراحی هر نوع برنامه و انواع مختلف مناسب است


برچسب های تصویر

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

برخی از متن

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

 HTML5 Icon

عناصر HTML

عناصر html

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

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

تعریف عناصر HTML

HTML5 به هر جایی نمی رود و هرچه تعداد عناصر بیشتر و بیشتر پذیرفته می شوند شرکت های بیشتری در HTML5 شروع به توسعه می کنند

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

یا

) که عنصر مورد نظر را برای مثال تعریف می کند ، در حالی که برچسب بسته شدن تضمین می کند که این عنصر در قسمت باقیمانده صفحه وب ادامه پیدا نکند. در صورت عدم استفاده از بسته شدن در انتهای یک پاراگراف مورد نظر ، برچسب بزنید ، برای مثال ، متن در یک بلوک واحد ظاهر می شود که خواندن آن ناخوشایند و بسیار دشوار است.

تمام برچسب های بسته شده با شروع برچسب ها یکسان هستند از این واقعیت که ویژگی های قبلی از شخصیت های مربوطه بریدگی جلو را نشان می دهند. بنابراین به عنوان مثال

عنوان ، برچسب بسته شدن خواهد بود , در حالی که برای پاراگرافها همیشه از آنها استفاده خواهید کرد برای تعریف شکست در متن. این کار هنگام کدنویسی به جزئیات نیاز دارد و توجه به این نکته در هنگام برنامه نویسی مهم است که عددی را که استفاده می کنید (مانند h1 یا h2) در برچسب های شروع و بسته شدن استفاده کنید..

فرکانس استفاده از عناصر HTML مختلف

نام عنصر XHTML
سر
عنوان
html
بدن
آ
متا
تصویر
جدول
td
TR
br
پ
فیلمنامه
قلم
دیو
ب
ارتباط دادن
مرکز
طول
فرم
ورودی
سبک
ساعت
قوی
من
حیله
لی
نوشتن متن
نقشه
حوزه
اول
انتخاب کنید
گزینه
ساعت 3
ساعت2
قاب
فریم
پارامتر
تعبیه کردن
ام
تو
هدف – شی
مسابقه
نه
قابها
شخص
iframe
کم اهمیت
H4
پایه
نورد





























0
10
20
30
40
50
60
70
80
90
100

با استفاده از عناصر HTML Nested

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

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

متن پررنگ ، ایتالیایی و تأکید شده در HTML

اجازه دهید’می گویند که شما می خواهید کلمه ای را در یک عنصر پاراگراف موجود برجسته کنید. شما می توانید با استفاده از برچسب های ساده در استاندارد ، این مسئله را جسورانه تر کنید

عنصر با استفاده از HTML ، این کار را به شرح زیر برنامه ریزی می کنید:

من می خواهم این کلمه ای جسورانه باشد.


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

من می خواهم این کلمه ای جسورانه باشد.

حالا ، بگذار’می گویند که شما نیز دوست دارید تایپوگرافی این کلمه را تغییر دهید تا آن را به صورت مضطرب نیز تغییر دهید. این می تواند با اضافه کردن یک عنصر دیگر تو در تو ، که باید مانند این کدگذاری شود حاصل می شود:

من می خواهم این کلمه ای جسورانه باشد.

همانطور که مشاهده می کنید ، برچسب های شروع و بسته آن به سادگی در این فهرست گنجانده شده اند

عنصر اکنون محتوا را درون عنصر تبدیل می کند تا به صورت زیر ظاهر شود:

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

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

عنصر ، به صورت زیر در HTML ظاهر می شود:

من می خواهم این کلمه ای که باید مورد تأکید قرار گیرد.

در این مثال ، متن به شرح زیر در صفحه سند یا صفحه شما ظاهر می شود:

عناصر معنایی جدیدی که HTML5 معرفی کرده است ، خواندن آن را برای توسعه دهندگان جوانه بسیار آسان خواهد کرد. به جای دیدن خط بعد از خط
و عناصر ، برچسب های تعریف شده تر مانند
,
و
من می خواهم این کلمه ای که باید مورد تأکید قرار گیرد.

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

ویژگی های HTML

صفات جهانی صفاتی است که برای همه عناصر HTML مشترک است. آنها می توانند در همه عناصر مورد استفاده قرار گیرند ، اگرچه این ویژگی ها در بعضی از عناصر هیچ تاثیری ندارند. ویژگیهای جهانی ممکن است در تمام عناصر HTML مشخص شود ، حتی آنهایی که در استاندارد مشخص نشده اند


اگر برچسب ها بلوک های ساختاری هستند که عناصر را ایجاد و تعریف می کنند ، می توان از ویژگی های HTML برای سفارشی کردن خصوصیات آنها استفاده کرد (مانند سبک ، رنگ و زبان. کلیه عناصر HTML دارای خصوصیات اصلی هستند که اطلاعات اصلی را ارائه می دهند و همیشه در تگ stat مشخص می شوند. آنها معمولاً به صورت جفت به هم می آیند ، بنابراین اغلب در قالب زیر ظاهر می شوند: name =”مقدار.“

به زبان ساده ، نام نمایانگر خاصیتی است که می خواهید تنظیم کنید ، در حالی که مقدار مربوط به معیارهای خاصی است که می خواهید ترکیب کنید.

تعداد زیادی از ویژگیهایی که می توانند در مورد عناصر HTML شما اعمال شوند وجود دارد ، اما مواردی که بیشتر مربوط به وب مسترهای تازه کار هستند عبارتند از:

ویژگی “لنگ”

تنها اساسی ترین ویژگی ، این زبان زبان سند و عناصر آن را تعریف می کند. با استفاده از ‘زنگ’ این ویژگی ، و با وجودی که به راحتی از آن غافل می شویم ، این مزیت را دارد که محتوا را برای خوانندگان صفحه نمایش و موتورهای جستجو قابل دسترسی تر کند. معمولاً در ابتدای سند به شکل زیر ارائه می شود:

چندین نوع ویژگی اصلی شناخته شده است ، از جمله:

ویژگی های مورد نیاز, مورد نیاز یک نوع عنصر خاص برای آن نوع عنصر برای عملکرد صحیح

ویژگیهای اختیاری, مورد استفاده برای اصلاح عملکرد پیش فرض از یک نوع عنصر

ویژگی های استاندارد, تعداد زیادی از انواع عناصر پشتیبانی می شوند

ویژگی های رویداد, استفاده می شود برای ایجاد انواع عناصر برای مشخص کردن اسکریپت ها تحت شرایط خاص


به دنبال صفت lang ، دو حرف اول زبان را مشخص می کند (که در این مثال انگلیسی است). بعد از گلچین ، دو حرف بعدی لهجه را برقرار می کنند ، اگرچه این برای هر زبان وجود نخواهد داشت. مهم این است که اگر قصد موفقیت مخاطبان خود را دارید ، این ویژگی را به درستی دریافت کنید.

ویژگی “تراز”

قبلاً ما روی قالب ویژگیهای HTML لمس کرده ایم (name =)”ارزش) ، و بهترین تجسم این زمانی اتفاق می افتد که می خواهید محتوای درون عناصر خود را تراز کنید. شما ممکن است تصمیم بگیرید که همه پاراگرافها را در یک صفحه خاص قرار دهید ، به عنوان مثال ، با تراز بودن خاصیتی که می خواهید تنظیم کنید. متعاقبا, ’مرکز’ مقدار صفت است ، اگرچه شما ترجیح می دهید متن خود را به سمت چپ یا راست تراز کنید. مثلا:

این متن تراز وسط قرار دارد

انواع برنامه های ساخته شده با HTML5

بهره وری
54٪
نرم افزار
38٪
مصرف کننده
35٪
LOB
22٪
شبکه اجتماعی
18٪
سرگرمی
17٪
سبک زندگی
12٪
مسافرت رفتن
بازی ها
دیگر
13٪

این شما را تراز می کند

عناصر موجود در مرکز صفحه ، و یک طرح یکنواخت متناسب با ماهیت خاص وب سایت خود ایجاد کنید (به تصویر زیر مراجعه کنید):

این متن تراز وسط قرار دارد
این متن تراز وسط قرار دارد
این متن تراز وسط قرار دارد

ویژگی “Href”

HTML5 همچنین دارای تعدادی API عالی است که به شما امکان می دهد یک تجربه کاربری بهتر و یک برنامه وب پویاتر و پویاتر ایجاد کنید – در اینجا لیستی سریع از API های بومی وجود دارد:
  • کشیدن و رها کردن (DnD)
  • بانک اطلاعاتی ذخیره سازی آفلاین
  • مدیریت تاریخچه مرورگر
  • ویرایش اسناد
  • پخش به موقع رسانه

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

پیوندهای HTML با برچسب ، که شامل لینک مقصد به همراه متن لنگر وابسته است که URL را در خود جای می دهد. آن است ‘Href ’ ویژگی ای که آدرس سایت را مشخص می کند ، با این حال ، این بخشی از برچسب شروع است. در HTML به شرح زیر کدگذاری شده است:

گوگل

این امر به وضوح تمایز بین برچسب شروع و بسته را برجسته می کند و به صورت زیر در صفحه فرود شما ترجمه می شود:

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


ویژگی “رنگ”

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

بوم HTML5
مشاهده بوم HTML5 [ورق تقلب]

این یک ویژگی سبک است ، با انتخاب رنگ شما مقداری را که می خواهید تنظیم کنید نشان می دهد. به عنوان مثال ، هنگام استفاده از رنگ قرمز در عنوان اصلی ، اینگونه خواهد بود:

پس زمینه رنگ با استفاده از رنگ قرمز تنظیم شده است

پس از اعمال ، این عنصر به شرح زیر در وب سایت شما ظاهر می شود:

پس زمینه رنگ با استفاده از رنگ قرمز تنظیم شده است
در مقایسه با سایر مرورگرها ، هر بروزرسانی Google Chrome اطمینان حاصل می کند که پشتیبانی از HTML5 را در بر می گیرد. علاوه بر این ، پخش کننده پیش فرض YouTube اکنون HTML5 است و تبلیغات Flash Google اکنون به HTML5 تبدیل شده است


یک بار دیگر ، بین برچسب های شروع و بسته شدن این عنصر ، تمایز روشنی وجود دارد ، در حالی که این یکی از ساده ترین ویژگی هایی است که در HTML اعمال می شود. همچنین بیشتر نام = = را برجسته می کند”فرمت ارزش از ویژگی های HTML ، باعث می شود روند یادگیری و استفاده از این موارد به مراتب آسانتر در وب سایت شما انجام شود.

خودت را بیازمای

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

برنامه های مبتنی بر مرورگر که HTML5 را اجرا می کنند مشکلی در استفاده از جغرافیایی ندارند

در تمرین مفصل زیر ، ما متنی به جز ارائه کرده ایم و خواسته ایم جنبه های مختلفی را با استفاده از HTML قالب بندی کنیم. از راهنمای و آنچه تاکنون آموخته اید استفاده کنید تا هنگام تهیه کد برای وب سایت خود ، چالش را تکمیل کنید.
________________________________________

هدر اصلی

به وب سایت ما ، مثال.com خوش آمدید! امیدواریم که از خواندن مطالب ما لذت ببرید ، در صورت تمایل به ما دسترسی پیدا کنید.

ممنون از بازدید شما!

بیشتر بدانید.

استفاده از HTML5 توسط توسعه دهندگان
(براساس منطقه)

آمریکای شمالی و لاتین
70٪
آمریکای جنوبی
61٪
ASPAC
60٪
استرالیا
60٪
اروپا
59٪
آفریقا
50٪

________________________________________

سوالات:

  1. عنصر سربرگ را با برچسب بستن صحیح تکمیل کنید.
  2. هدر را پررنگ تر کنید.
  3. یک خط افقی را در زیر هدر قرار دهید.
  4. از ویژگی و سایه رنگ استفاده کنید ‘ممنون از بازدید شما’ به رنگ سبز
  5. این پیوند را وارد کنید (https://www.w3schools.com/html/) در متن لنگر “فرا گرفتن
    بیشتر.”
  6. در قسمت بالای صفحه ، از name = استفاده کنید”قالب ارزش برای تراز کردن پاراگراف ها در سمت چپ


نتیجه

در حالی که HTML به تازگی در سال 1991 ایجاد شده است (با اولین نسخه از زبان برنامه نویسی که متعاقباً در 1995 راه اندازی شد) ، به سرعت تبدیل به ابزاری مهم در طراحی وب سایت های کاربردی و بصری جذاب شد. سطح تأثیر HTML همچنان در حال تکامل است ، با آخرین تکرار (HTML5) توسط تعداد فزاینده ای از وب سایت ها در سراسر جهان به تصویب رسید..

در این راستا ، یادگیری عناصر اصلی HTML و نحوه بکارگیری آنها مهمترین قدم شما در ایجاد یک وب سایت موفق ، قابل مشاهده و در نهایت رقابتی است..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map