استاندارد HTML5 زبانی برای ساختاردهی و ارائه مطالب در اینترنت است که در سال 2014 معرفی و برای استفاده توصیه شد. در حال حاضر، تقریباً همه مرورگرها از بیشتر نوآوری‌های HTML5 پشتیبانی می‌کنند، اما فراموش نکنید که توسعه این زبان ادامه دارد و کنسرسیوم جهانی وب به تغییر و بهبود نسخه پنجم ادامه می‌دهد.
لطفا توجه داشته باشید که از نسخه پنجم شروع می شود زبان HTML 5 نه تنها به عنوان یک زبان ساختارمند، بلکه به عنوان یک زبان ارائه ارائه می شود که در طرح معنایی منعکس می شود، یعنی. HTML اکنون به روشی جدید استفاده می شود.
پذیرش استاندارد HTML5 به کاهش تنوع منجر شده است فن آوری های موجودطرح بندی ها بنابراین، قبل از این استاندارد، نسخه‌های 4.01 HTML و استانداردهای XHTML 1.0 و 1.1 به طور گسترده مورد استفاده قرار می‌گرفتند، در نتیجه صفحات با مخلوطی از این فناوری‌ها نشان داده می‌شدند که کار مرورگر در تفسیر صفحات را پیچیده می‌کرد. برای استاندارد HTML5 معرفی شد:
بیایید به تغییرات اصلی که ابتدا باید در نظر گرفته شوند نگاه کنیم:
بنابراین و
بنابراین و
سپس در استاندارد html5 املای صحیحاست:
فهرست کردن همه تغییرات در برچسب ها در یک درس غیرممکن است، زیرا تغییرات استاندارد بر تعداد زیادی از برچسب ها تأثیر گذاشته است، بنابراین بیایید به تغییرات اصلی که در کار خود نیاز داریم نگاه کنیم.
هایپرلینکمثال
که در استانداردهای قبلی باعث خطا می شد زیرا عنصر کوچکدر قالب بلوک پیچیده شده، در HTML5 معتبر است.
یکی از مهمترین سوالات رایجطراحان چیدمان مبتدی عبارتند از: «چگونه یک هایپرلینک به بلوک div? " و رایج ترین پاسخ این بود: "از JS استفاده کنید." همانطور که از مثال مشاهده می کنید، در HTML5 می توانید به سادگی بلوک های لازم را در داخل یک هایپرلینک قرار دهید.
برچسب ها وHTML 5 تگ ها را برگرداند (فونت را پررنگ می کند) و (مورب). در تعبیر مدرن، این برچسب ها فقط برای طراحی بصری کاربرد دارند و هیچ معنای معنایی ندارند.
کوچک را تگ کنیداین تگ در نسخه های قبلی برای تنظیم اندازه قلم کوچکتر از متن اصلی استفاده می شد (برعکس آن تگ بزرگ بود - که اندازه فونت را افزایش می داد). نمایشگرهای مختلف در مرورگرهای مختلفمنجر به جابجایی این عنصر شد با تگ span، که استفاده از آن بسیار راحت تر است.
در HTML5، تگ برگردانده شد، اما تفسیر آن تغییر کرد، اکنون از آن برای بسته بندی متنی استفاده می شود که باید در صفحه باشد، اما نباید توجه را از محتوای اصلی منحرف کند و باید تا حد امکان نامحسوس باشد. آنالوگ - متن مبتنی بر پاورقی، یا شرایط مختلفسهام بصری همچنین اندازه فونت متنی را که بسته می شود کاهش می دهد.
تگ آدرسبر خلاف نسخه های قبلی HTML در ویرایش پنجم فقط برای نشان دادن اطلاعات تماس نویسنده مطالب استفاده می شود. از برچسب برای نشان دادن اطلاعات تماس در وب سایت سازمان استفاده نکنید (برای این کار باید از میکروفرمت ها و میکرو دیتا استفاده شود).
همانطور که قبلا ذکر شد، در داخل این درسدر نظر گرفتن تمام تغییرات در برچسب ها غیرممکن است، در بالا به برچسب های تطبیقی نگاه کردیم، اکنون موارد قدیمی را لیست می کنیم:
- ، با یک برچسب (برای جاسازی اشیاء استفاده می شود) جایگزین شده است.
- - با یک برچسب (برای اختصارات استفاده می شود) جایگزین شده است.
- - با یک برچسب (برای جاسازی بازیکن در صفحه) جایگزین شده است.
- - جایگزین توسط ؛
- ، - با برچسب های AND جایگزین شد (برای درج لیست برنامه ها و کدها).
- - جایگزین توسط
خواص قالب بندی متن , , - حذف شده اند، به جای آن باید از CSS برای یک ظاهر طراحی استفاده شود.
به عنوان یادآوری، بسیاری از تگ‌های قدیمی توسط مرورگرها پشتیبانی می‌شوند، اما صفحات دارای برچسب‌های قدیمی از اعتبارسنجی عبور نمی‌کنند. به همین دلیل است که پس از اتمام صفحه آرایی، باید آن را با یک اعتبارسنجی بررسی کنید.
HTML 5 و CSS 3 تعداد زیادی تگ و ویژگی های جدید را به طرح اضافه کردند. امکانات انیمیشن با ویژگی های جدید CSS 3 را ببینید.
سلام به مهمانان این وبلاگ و مشترکین وفادارم. با پیشرفت سریع فناوری، علم و برنامه نویسی همانطور که امروزه شاهد آن هستیم، تعجب آور نیست که تقاضای مصرف کنندگان در حال افزایش است. این بدان معنی است که دیر یا زود نسخه های بهبود یافته برنامه ها، تجهیزات و مهمتر از همه زبان ها ظاهر می شوند.
خواندن مقاله به شما می دهد درک روشنمرزهای بین html و html 5. علاوه بر این، شما قادر خواهید بود با دانش به دست آمده کار کنید و تمام سایت های خود را با استفاده از تگ های html 5 چیدمان کنید.
من می خواهم تقدیم کنم این نشریهبحث در مورد html 5. ویژگی های اصلی پلتفرم، عناصر جدید زبان و تفاوت آن ها با قدیمی ها را با شما مورد بحث قرار می دهیم و همچنین در نظر خواهیم گرفت. نمونه های خاصکد حالا بریم سراغ خود آب میوه!
فرمانده کل نشانه گذاری وب سایت، html معروفپس از خواندن، و همچنین سایر منابع مرتبط با فناوری اطلاعات، فکر می‌کنم با اطمینان می‌توانم شما را «استادان گورو» خطاب کنم. از این گذشته، تشخیص زبان html و دلیل ایجاد آن برای شما دشوار نخواهد بود. آفرین!
مبتدیان در این زمینه دانش نباید نگران باشند. من به طور خاص تعاریف اصلی را تکرار می کنم.
بنابراین، اول از همه، شایان ذکر است که html یک زبان نشانه گذاری فرامتن است، یعنی. متنی که حاوی عناصر به هم پیوسته متن، ویدئو، صدا و فرمت های گرافیکی. این ابزاربرای طراحی ساختار سایت ها، قالب بندی ظاهر صفحات و نشان دادن محل اشیاء روی آن ضروری است.
از تگ های زبان برای مدیریت محتوای سایت استفاده می شود. "تگ" به چه معناست و برای چیست؟
تگ واحدی از زبان نشانه گذاری است که به تنظیم یک نمایش خاص در صفحه وب سایت کمک می کند. شی خاصو همچنین نشانی از نوع آن (پیوند، تصویر و غیره).
عناصر زبان می توانند تک یا کانتینری باشند (معمولاً به آنها جفت نیز می گویند). تفاوت آنها فقط در این است که جفت شده ها می توانند عناصر دیگری را در خود داشته باشند: برچسب ها یا متن.
هر عنصر از زبان وب مورد بحث مجموعه ای از ویژگی های خاص خود را دارد. «یک اصطلاح دیگر؟ این برای چیست؟ - تو پرسیدی. افسوس که هیچ راهی بدون اصطلاحات وجود ندارد.
ویژگی‌ها برای گسترش دامنه قابلیت‌های یک برچسب واحد و همچنین برای مدیریت انعطاف‌پذیرتر مورد نیاز هستند. ظاهرظروف البته، عناصر زبان نشانه گذاری به راحتی می توانند بدون تعریف ویژگی ها وجود داشته باشند. سپس به آنها قالب بندی پیش فرض می دهد.
در زیر جدولی با نمونه‌هایی از تگ‌های متداول جفتی و تکی html با ویژگی‌های پرکاربردشان پیوست کرده‌ام. متأسفانه، ارائه یک لیست کامل از ویژگی ها دشوار است؛ تعداد آنها بسیار زیاد است. برای این کار بهتر است به مشخصات زبان مراجعه کنید.
| تگ های تکی | |
| که در در این مثالتک ارائه شده است متا تگ، که حاوی اطلاعاتی است که در مرورگر نمایش داده نمی شود. مجموعه نویسه، نام و محتوا ویژگی های عنصری هستند که به ترتیب مسئول رمزگذاری سند، نام متا تگ و تنظیم مقداری هستند که قبلاً در نام مشخص شده است. | |
|
تگ وظیفه نمایش را بر عهده دارد فایل های گرافیکیدر صفحات منابع وب با استفاده از ویژگی src، مسیر خود تصویر مشخص می‌شود، عرض عرض شی را مشخص می‌کند، و ارتفاع - ارتفاع، alt برای نمایش متن جایگزین در صورت غیرممکن بودن بارگذاری تصویر در نظر گرفته شده است. |
| برچسب های جفت شده | |
| چگونه یک کاسرول را به درستی بپزیم؟ | تگ یک لنگر (یعنی پیوند) ایجاد می کند. href آدرس فایلی را که انتقال به آن انجام می شود مشخص می کند، target دقیقاً نحوه بارگذاری آن را مشخص می کند. لینک باز(در این مثال در یک برگه جدید باز می شود)، عنوان مسئول راهنمای ابزار هنگام قرار گرفتن روی لنگر است. |
همانطور که قبلاً در مقالات قبلی من توضیح داده شد، نباید html و html 5 را با هم اشتباه بگیرید. اگرچه Html 5 به نوعی "نسبی" html است، اما کاملاً پلت فرم جدید، که وظیفه اصلی آن پشتیبانی از فایل های صوتی و تصویری، انیمیشن ها، نمایش موقعیت های جغرافیایی و موارد دیگر است.
این مشخصات صفحات وب را با ویژگی های جدید ارائه می کند و به DOM ( مدل شیسند) در مورد وجود اشیاء جدید روی آن. این امر سرعت بارگذاری صفحه را افزایش می دهد و کار را برای مرورگرها آسان می کند.
یک مزیت بزرگ برای توسعه دهندگان این است که با ظهور HTML 5 دیگر نیازی به یادگیری مجدد چیزی نیست. از تمام تگ های html 4 پشتیبانی می کند و آنها را با تگ های مدرن تکمیل می کند. من یک واقعیت مثبت دیگر را نیز به این موضوع اضافه می کنم. با ظهور عناصری مانند و، دیگر نیازی به استفاده از برچسب های پشتیبانی رسانه های قدیمی نیست. اینها عبارتند از: , , و دیگران.
و اکنون می‌خواهم تگ‌های مشخصات اصلی را فهرست کنم که شامل مقاله، aside و موارد دیگر می‌شود و همچنین توضیح می‌دهد که برای چه چیزی ایجاد شده‌اند.
برچسب های معناییبا ظهور پلتفرم HTML 5، برچسب های معنایی. اکنون به زبان سادهتوضیح می دهم که چیست.
قبلاً هنگام نوشتن خدمات وب با رابط کاربر پسندو برجسته کردن هدر سایت، قسمت اصلی آن و پاورقی (جایی در پایین صفحه برای اطلاعات بیشتر یا انتساب) استفاده شد. طرح بلوکبا استفاده از divs
شاید از یک طرف این برای توسعه دهندگان راحت بود، اما موتورهای جستجو و همچنین مرورگرها کار سختی داشتند. بنابراین راه حلی در قالب تگ های معنایی پیدا شد.
این عناصر به سادگی واحدهای اصلی سایت را با نام تگ هایی که در همه منابع مشترک است استاندارد می کنند. اینها عبارتند از، و. مسئول تعیین عنوان سایت یا عنوان متن، "پانویس" در پایین صفحه اینترنت و ناوبری سایت است.
برای یادگیری مطالب از شما می خواهم امتحان کنید مثال عملی:
وبلاگ وب سایت شما برای افراد IT
- آیتم منو 1
- آیتم منو 2
متن مقاله اول
وبلاگ نویس مورد علاقه حق چاپ
این مثال راحتی ساختار کد زمانی را نشان می دهد کمک html 5. می خواهم توجه داشته باشم که امروزه توسعه دهندگانی که به خود احترام می گذارند از مشخصات html 5 و css3 در منابع وب خود استفاده می کنند. آنها تعامل مرورگر با
در HTML5 چندین تگ جدید برای ساختار کد معرفی شده است: , , , , , که در برخی موارد جایگزین معمول می شود. اگرچه به نظر می رسد که تفاوت زیادی بین برچسب ها وجود ندارد، اما فاصله زیادی بین آنها وجود دارد. برچسب‌ها نه افرادی که دلیلی برای نگاه کردن به کد منبع یک صفحه ندارند، بلکه ماشین‌هایی هستند که کد را تفسیر می‌کنند. ماشین‌ها یا روبات‌ها نمی‌فهمند، برای آنها این یک برچسب نشانه‌گذاری معمولی است - آن را جایگزین کنید و معنی آن تغییر نخواهد کرد. نکته دیگر این است که ربات با شناسایی این برچسب، آن را دقیقاً به عنوان سربرگ یک سایت یا بخش درک می کند.
این در نهایت چه می دهد؟ موتورهای جستجوآنها شروع به فهرست بندی بهتر سایت می کنند زیرا محتوای صفحه را به وضوح از عناصر کمکی جدا می کنند. مرورگرهای گفتاری که برای افراد نابینا طراحی شده اند، از هدر رد می شوند و مستقیماً به محتوا می روند. سایت ها ممکن است به طور خودکار محتوا و سایر اطلاعات را با یکدیگر به اشتراک بگذارند. همه این قابلیت ها معنایی نامیده می شوند و به شما امکان می دهند داده ها را به شکلی مناسب برای روبات ها ارائه دهید.
اجازه دهید ابتدا هدر سایت را با استفاده از یک تگ بسازیم (مثال 6.2).
مثال 6.2. استفاده
تلاش برای افزودن پس‌زمینه به برچسب در استایل‌ها به چیزی منجر نشد؛ پس‌زمینه نمی‌خواهد در برخی از مرورگرها نمایش داده شود. تمام تگ های جدید باید ابتدا از طریق ویژگی display در سطح بلوک قرار گیرند، سپس به درستی نمایش داده شوند (مثال 6.3).
مثال 6.3. سربرگ سایت
HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx
هدر (نمایش: بلوک؛ پس‌زمینه: #00B0D8 url (images/header-gradient.png) repeat-x؛ )
این مثال در همه مرورگرها به جز IE7 و IE8 کار خواهد کرد. اینترنت اکسپلوررسبکی را به عناصری که درک نمی کند اضافه نمی کند. این سوء تفاهم را می توان با ایجاد یک عنصر ساختگی با با استفاده از جاوا اسکریپت. برای انجام این کار، این را در کد قرار می دهیم.
document.createElement("header");
اگر یک برچسب در صفحه وجود داشته باشد، این اسکریپت برای این کار کاملاً مناسب است. اما من نمی خواهم این خط را ده بار برای ده بار تکرار کنم برچسب های مختلف، بنابراین ما این فرآیند را از طریق یک حلقه خودکار می کنیم. خود تگ ها در یک لیست مشخص می شوند که با کاما از هم جدا شده اند (مثال 6.4).
مثال 6.4. اسکریپت برای اینترنت اکسپلورر
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(","); برای (var i = 0; i< e.length; i++) { document.createElement(e[i]); }
خود فیلمنامه شامل نظرات مشروط، به طوری که فقط برای IE نسخه 8.0 و پایین تر اجرا می شود. IE9 از جدید پشتیبانی می کند تگ های HTML 5 قبلاً فعال شده است.
لازم نیست مثال بالا را در وب سایت خود جاسازی کنید؛ می توانید از یک اسکریپت در دسترس عموم استفاده کنید که توسط رمی شارپ نوشته شده و تحت مجوز MIT توزیع شده است. برای انجام این کار، همانطور که در مثال 6.5 نشان داده شده است، کافی است پیوندی به آن ارائه دهید.
مثال 6.5. اسکریپت برای اینترنت اکسپلورر
همه اسکریپت های مشخص شده باید در کد قبل از CSS قرار داشته باشند.
بنابراین، برای استفاده کاملتگ های HTML5 در همه مرورگرها فقط باید سه شرط را رعایت کنند:
اکنون اجازه دهید برخی از تگ های HTML5 را با جزئیات بیشتری بررسی کنیم تا دامنه آنها را درک کنیم.
مثال 6.6. استفاده از تگ
HTML5 IE Cr Op Sa Fx
مقاله ردپای حیوانات بی سابقه داستان چگونه ردپای صورتی مرموز با شش انگشت در نزدیکی اتاق غذاخوری ظاهر شد و چرا این اتفاق افتاد.
بلوکی را تعریف می کند که به محتوای اصلی برای قرار دادن دسته ها، پیوندهای بایگانی، برچسب ها و سایر اطلاعات مرتبط نیست (مثال 6.7). چنین بلوکی، اگر در کنار قرار داشته باشد، معمولا "نوار کناری" یا "نوار کناری" نامیده می شود.
مثال 6.7. استفاده
HTML5 IE Cr Op Sa Fx
aside document.createElement("aside"); document.createElement("مقاله"); کنار ( پس‌زمینه: #f0f0f0؛ /* رنگ پس‌زمینه */ بالشتک: 10 پیکسل؛ /* حاشیه‌ها */ عرض: 200 پیکسل؛ /* عرض نوار کناری */ شناور: راست؛ /* پیچیدن به چپ */ ) مقاله ( حاشیه-راست: 240 پیکسل ؛ /* تورفتگی سمت راست */ نمایشگر: بلوک؛ /* عنصر بلوک */ )
صرفه جویی در مصرف برق
چوب کی بزرگتره
داستان درباره این است که چگونه برق باید صرفه جویی شود، چه اقداماتی برای این کار انجام شد و واقعاً به کجا رسید.برای گروه بندی هر عنصر، به عنوان مثال، تصاویر و شرح ها (مثال 6.8) استفاده می شود.
مثال 6.8. استفاده
HTML5 IE Cr Op Sa Fx
شکل document.createElement("شکل"); document.createElement("figcaption"); شکل ( پس‌زمینه: #5f6a72؛ /* رنگ پس‌زمینه */ بالشتک: 10 پیکسل؛ /* حاشیه‌های اطراف */ نمایش: بلوک؛ /* عنصر بلوک */ عرض: 150 پیکسل؛ /* عرض */ شناور: سمت چپ؛ /* بلوک‌ها هستند ردیف شده افقی */ حاشیه: 0 10px 10px 0؛ /* Padding */ text-align: مرکز؛ /* تراز وسط */ ) figcaption ( رنگ: #fff; /* رنگ متن */ )
حاوی توضیحاتی برای برچسب تگ باید اول باشد یا آخرین عنصردر گروه.
«پانویس» یک سایت یا بخش را مشخص می کند؛ معمولاً حاوی نام نویسنده، تاریخ سند، تماس و اطلاعات حقوقی(مثال 6.9).
مثال 6.9. استفاده
HTML5 IE Cr Op Sa Fx
فوتر وب سایت شخصی کریستینا وتروا خوش آمدید!
خوشحالم که به وب سایتم خوش آمد می گویم.
حق چاپ کریستینا وتروا"هدر" یک سایت یا بخش را تعریف می کند.
برای گروه بندی صفحه وب یا عناوین بخش استفاده می شود (مثال 6.10).
مثال 6.10. استفاده
HTML5 IE Cr Op Sa Fx
hgroup کریستینا وتروا وب سایت شخصی
ناوبری سایت را تنظیم می کند (مثال 6.11). اگر چندین بلوک لینک در یک صفحه وجود داشته باشد، معمولاً پیوندهای اولویت در آنها قرار می گیرند. همچنین استفاده از چندین تگ در یک سند قابل قبول است. داخل نگذارید.
مثال 6.11. استفاده
HTML5 IE Cr Op Sa Fx
nav Cheburashka و کروکودیل Gena Cheburashka | ژن | شاپوکلیاک | Lariska خوش آمدید!
بخشی از یک سند را تعریف می کند که ممکن است شامل سرفصل، سرصفحه، پاورقی و متن باشد (مثال 6.12). لانه سازی یک تگ در داخل تگ دیگر مجاز است.
مثال 6.12. استفاده
HTML5 IE Cr Op Sa Fx
بخش فیلمبرداری پلی پروپیلن
داستان درباره این است که چگونه آنها فیلمی ساختند که در آن قهرمانان در ساحل در حال استراحت بودند، سپس آنتاگونیست آمد، قهرمانان داستان را کتک زد، آنها را به داخل استخر انداخت و چه اتفاقی افتاد.
زبان خوبداستان درباره این است که چگونه یک استودیو برای مطالعه زبان اسپرانتو شکل گرفت، در حالی که بالای آن، در ایوان، یک استودیوی شوخی وجود داشت که در آن جوک می گفتند و چه نتیجه ای از آن حاصل شد.
متن درون یک برچسب را به عنوان تاریخ، زمان یا هر دو تاریخ و زمان علامت گذاری می کند. می تواند مستقیماً در داخل ظرف مشخص شود، یا از طریق ویژگی datetime مشخص شود (مثال 6.13).
تاریخ و زمان تنظیم شده است فرمت بین المللی ISO 8601. نمونه هایی از طراحی در جدول آورده شده است. 6.1.
هر واحد شکل و محدودیت های خاص خود را دارد.
- سال در چهار رقم مشخص شده است (1860).
- ماه - دو رقمی (01 - ژانویه، 02 - فوریه، 12 - دسامبر).
- روز - دو عدد از 01 تا 31.
- ساعت - دو رقمی از 00 تا 23.
- دقیقه ها دو رقمی از 00 تا 59 هستند.
- ثانیه ها دو رقمی از 00 تا 59 هستند.
- منطقه زمانی - ساعت و دقیقه با علامت مثبت یا منفی نشان داده شده است.
تاریخ و زمان با یک حرف لاتین بزرگ از هم جدا می شوند. منطقه زمانی در صورت لزوم بعد از زمان با علامت مثبت یا منفی نوشته می شود. به عنوان مثال، برای مسکو منطقه زمانی +03:00 خواهد بود.
مثال 6.13. استفاده
HTML5 IE Cr Op Sa Fx
زمان
04/10/1957 اولین ماهواره مصنوعی زمین پرتاب شد.
19-08-1960 اولین پرواز سگ ها به فضا.
12/04/1961 اولین پرواز فضایی سرنشین دار.
16-06-1963 اولین پرواز یک فضانورد زن.
21/07/1969 فرود آمدن مرد روی ماه.
همه می دانند که برچسب ها، ، ، ارائهی هستند و بنابراین بر اساس پارادایم "ساختار، ارائه، رفتار" استفاده از آنها تشویق نمی شود. عناصر , , , بسیار آشناتر به نظر می رسند. این مورد برای چندین سال تمرین توسعه بوده است. با این حال، با ظهور HTML5، تغییرات زیادی در معنای این عناصر ایجاد شده است. اکنون 4 تگ جدید با معنی و آشفتگی در سر داریم.
در مقابل اگر قبلاً همه کتاب‌های درسی چیدمان مملو از عباراتی مانند «به جای استفاده کنید» بودند، و این نیمه درست بود، امروزه چنین عادتی می‌تواند یک شوخی معنایی بی‌رحمانه باشد. نکته این است که نویسندگان HTML5 پیشنهاد می‌کنند از آن برای برجسته کردن قسمت‌های متن استفاده کنند تا توجه خواننده را جلب کنند، اما بدون افزایش اهمیت متن یا لحن. مشخصات نمونه هایی از استفاده برای نشانه گذاری را ارائه می دهد کلید واژه هادر سند
اجزای فروبونیتور و باربیناتور سرخ می شوند.
و منجر می شود (بند اول مقاله در روزنامه نگاری)
بچه گربه هایی که توسط خرگوش خانگی "پذیرفته شده اند".
شش بچه گربه رها شده یک مادر جدید غیرمنتظره پیدا کردند - یک خرگوش خانگی.
پرستار دامپزشکی ملانی هامبل بچه گربه های سه هفته ای را به خانه خود در آبردین برد.
به نوبه خود، مانند قبل، به معنای افزایش اهمیت محتوای آن است.
vs از این به بعد حاوی متنی است که از محیط عمومی متمایز است، اما هیچ رنگ احساسی ندارد. به نظر من، منطقی است که از جایی استفاده شود که سنت تایپوگرافی حروف کج را پیشنهاد می کند (به عنوان مثال، کلمات در زبان خارجی، شرایط و غیره)برای آسپرا آگهی Astra- ترجمه از لاتین، این ضرب المثل به معنای "از خارها به ستاره ها" است.
این به معنای استرس تأکیدی، تأکید عاطفی بر یک قسمت معین از متن است. این مورد زمانی است که در گفتار کلمات را با صدا برجسته می کنیم (لحن، صدا و غیره)
شما نمی توانید اعدام کنید، می توانید رحم کنید.
قرارداد را با دقت بخوانید! "نسخه ظریف" (اطلاعاتی که یک تشریفات قانونی است، مانند مجوز کسب و کار یا آدرس قانونیو غیره) ما، به عنوان یک قاعده، یک عنصر را با کلاسی علامت گذاری می کنیم که بیشتر در عوامل کاربر بصری تعریف می کند فونت کوچک. اکنون یک عنصر معنایی قدیمی جدید در زرادخانه ما ظاهر شده است - .Holivar o قبلا چیزی بیش از یک متن خط خورده نبود. Now نشان دهنده اطلاعاتی است که ارتباط خود را از دست داده اند.ما همچنین عنصری داریم که نتیجه پیش‌فرض آن در عامل‌های کاربر بصری، متن خطی است. این به معنای تغییرات در یک سند است و در نگاه اول ممکن است هدف آنها یکسان به نظر برسد. با این حال، یک نکته ظریف در اینجا وجود دارد. بیایید به نمونه ای از صفحه محصول در یک فروشگاه آنلاین نگاه کنیم.
ممکن است دو قیمت را نشان دهد که یکی از آنها خط خورده است. آن را با عنصر علامت گذاری می کنیم. این به آن معنا است قیمت قدیمیارتباط خود را از دست داده است (مهم نیست چه زمانی بوده است، خود واقعیت مهم است). چگونه بررسی کنیم که اینطور نیست؟ دلالت دارد تغییرات ایجاد شده در سند(مهم این است که در مقطعی از زمان سند تغییر کرد). در مورد ما، سند جدید قبلاً حاوی اطلاعات نامربوط است.معناشناسی جدید و doctype قدیمی اگر به دلایل نامعلومی نمی توانید doctype را با یک مورد جدید جایگزین کنید و به طور رسمی آن را در HTML 4.01 چیدمان کنید، ناامید نشوید. از عناصر جدید قدیمی با معنای جدید استفاده کنید و به مرور زمان از خود تشکر خواهید کرد. شاید کسی بگوید که این نادرست است، اما این عناصر حتی بی اعتبار نیستند. علاوه بر این، HTML5 با طراحی شده است سازگار با عقب، همین امر در مورد معناشناسی جدید عناصر قدیمی نیز صدق می کند. هیچ چیز به طور اساسی تغییر نکرده است، اما فقط یک چاشنی معنایی اضافه شده است.
که به شما امکان می دهد بلوک های محتوا را به وضوح توصیف کنید
HTML5 چیست؟HTML5 است جدیدترین نسخهزبان نشانه گذاری فرامتن (HTML)، که نشان دهنده ریشه ای ترین تجدید نظر این زبان در کل تاریخ آن است. این نسخه دارای بسیاری از ویژگی های جدید است مناطق مختلف. مهمترین آنها شامل موارد زیر است.
- برچسب های رسانه ای داخلی برای پشتیبانی از محتوای صوتی و تصویری
- برچسب بوم برای ترسیم محتوا به طور مستقیم در مرورگر
- فرم های هوشمندی که با استفاده از یک ویژگی مورد نیاز، عملیاتی مانند اعتبار سنجی را امکان پذیر می کند
این مقاله بخشی از برنامه «مسیری به سوی دانش» برای بهبود مهارت‌های صلاحیت (مسیر دانش) است. سانتی متر. .
مجموعه جدیدی از عناصر ساختاری (برچسب ها) در HTML5 نحوه ساختار اسناد HTML را تغییر می دهد. جدید برچسب های ساختاربر تقسیم یک سند HTML به بخش های منطقی متمرکز هستند. نام هر تگ ساختار، نوع محتوایی را که تگ برای ذخیره سازی در نظر گرفته شده است، توصیف می کند. این مقاله به توصیف همراه با جزئیاتاین تگ های جدید
زمینهدر سال 1989، تیم برنرز لی اولین نسخه از زبان HTML را برای غلبه بر محدودیت های روش های موجود در آن زمان برای دسترسی به اطلاعات در اینترنت ایجاد کرد. بر مرحله اولیهوجود اینترنت، ناوبری در آن بود وظیفه چالش برانگیز. محتوای اینترنت مجموعه‌ای از اسناد فردی بود و هیچ راه آسانی برای پیمایش در آن اسناد وجود نداشت. در واقع، کاربر باید می دانست آدرس دقیقسندی که به دنبال آن هستید و این آدرس را به صورت دستی وارد کنید. برای حل این مشکل، برنرز لی دو فناوری ایجاد کرد: پروتکل HTTP(فوق متن پروتکل انتقال) و HTML (زبان نشانه گذاری فرامتن).
HTTP یک پروتکل سرویس است که سرورهای وب برای ارائه محتوا از آن استفاده می کنند. نگاه کنید نوار آدرسمرورگر وب شما اگر مرورگر شما یک URL کامل را نمایش می دهد، به احتمال زیاد با کاراکترهای "http://" شروع می شود. این قسمت از URL به مرورگر می گوید که از چه نوع پروتکلی هنگام درخواست به سرور وب استفاده کند. هنگامی که یک وب سرور درخواستی برای یک سند دریافت می کند، در بیشتر موارد این سند در آن ارائه می شود فرمت HTMLیا به این فرمت تبدیل می شود. این سند HTML است که به مرورگر ارسال می شود که این درخواست را ارسال کرده است.
HTML یک زبان برنامه نویسی است که به مرورگر وب می گوید چگونه محتوا را ارائه کند. محتوا ممکن است حاوی پیوندهایی به اسناد دیگر باشد که روشی کاربرپسند برای پیمایش بین اسناد در اینترنت ارائه می دهد.
این ترکیب از فناوری‌های HTTP و HTML، ناوبری سریع و آسان محتوای اینترنت را تضمین می‌کند - برای پیمایش بین اسناد، فقط باید روی پیوندهای موجود در متن کلیک کنید. پس از ایجاد دو فناوری ذکر شده در بالا، برنرز لی سازمانی به نام W3C (World) تأسیس کرد وب گستردهکنسرسیوم). W3C توسعه چهار مورد اول را رهبری کرد نسخه های HTML.
هدف اصلی اینترنت ارائه خدمات ساده بود اسناد متنی. اولین مرورگرها فقط متنی بودند (به عبارت دیگر، آنها هیچ پنجره شیک نداشتند - فقط متن روی صفحه نمایش داده می شد). حتی اضافه کردن تصاویر زمانی که برای اولین بار ظاهر شدند، دستاورد بسیار مهمی بود. امروزه مردم کارهای مختلفی را در اینترنت انجام می دهند، از ارسال ایمیل گرفته تا مرور برنامه های تلویزیونی. اینترنت در حال حاضر بسیار بیشتر از مکانیزمی برای انتقال اسناد متنی ساده شده است. ویژگی های جدید و استفاده های جدید مشکلات و مشکلات جدیدی را ایجاد کرده است که HTML هرگز برای حل آنها طراحی نشده است.
W3C سعی کرد مشکلات اینترنت امروزی را با استاندارد XHTML 2.0 (Extensible Hypertext Markup Language) حل کند. با این حال، این استاندارد به طور گسترده مورد پذیرش قرار نگرفته است و اکنون عملاً کنار گذاشته شده است. در سال 2004، در حالی که W3C تلاش‌های خود را بر روی استاندارد XHMTL 2.0 متمرکز می‌کرد، سازمان دیگری به نام WHATWG (گروه کاری فناوری کاربرد فرامتن وب) شروع به توسعه استاندارد HTML5 کرد که بسیار مطلوب‌تر از استاندارد XHTML 2.0 مورد استقبال جامعه قرار گرفت. W3C کار بر روی XHTML 2.0 را متوقف کرده است و در حال حاضر با WHATWG برای توسعه مشخصات HTML5 کار می کند.
مرورگرهای پشتیبانی شدهدر زمان نگارش این مقاله، استاندارد HTML5 هنوز به طور رسمی منتشر نشده است. اکثر مطالب موجود در وب همچنان بر اساس مشخصات HTML 4 ایجاد می شوند، اما برخی از مرورگرها از مشخصات HTML5 پشتیبانی می کنند. این می تواند مشکل باشد زیرا هر یک از این مرورگرها فقط می توانند زیر مجموعه ای از ویژگی های HTML5 را پشتیبانی کنند. قبل از ایجاد یک وب سایت مبتنی بر HTML5، هر یک از مرورگرهای هدف خود را آزمایش کنید تا مطمئن شوید که از ویژگی هایی که قصد دارید در سایت خود استفاده کنید پشتیبانی می کنند.
اعلامیه doctype به روز شدصرف نظر از قابلیت های مرورگرهای مورد نظر خود، باید به هر مرورگر بگویید که می خواهید محتوای خود را با استفاده از مشخصات HTML5 نمایش دهید. این را می توان با استفاده از اعلان doctype انجام داد.
اعلان doctype به مرورگر می گوید که در چه نسخه ای از زبان نشانه گذاری نوشته شده است صفحه فعلی. این کار را با استفاده از یک الگوی DTD (تعریف نوع سند) انجام می دهد. یک DTD قوانینی را مشخص می کند که یک زبان نشانه گذاری برای کمک به مرورگرها برای نمایش صحیح محتوا استفاده می کند.
مفهوم اعلان‌های doctype می‌تواند کاملاً گیج‌کننده باشد. مشخصات HTML فعلی دارای اعلان‌های doctype زیادی است که تفاوت‌های بین آنها کاملاً مشخص نیست. جدول 1 در دسترس را نشان می دهد این لحظهاعلامیه های doctype و قابلیت های آنها
جدول 1. اعلامیه های Doctype و قابلیت های آنها| HTML 4.01 سختگیرانه | به همه عناصر و ویژگی‌های HTML اجازه می‌دهد، اما برچسب‌های ارائه مانند فونت را مجاز نمی‌داند. عناصر Frameset مجاز نیستند. | |
| HTML 4.01 انتقالی | شبیه به اعلان سخت HTML است، اما اجازه استفاده از برچسب هایی مانند فونت را می دهد. عناصر Frameset مجاز نیستند. | |
| مجموعه فریم HTML 4.01 | شبیه به اعلان انتقالی HTML است، اما اجازه استفاده از عناصر مجموعه فریم را می دهد. | |
| XHTML 1.0 سختگیرانه | مشابه اعلان سخت HTML، اما تمام محتوا باید در قالب XML باشد. به عنوان مثال، هر عنصر باز کننده باید یک عنصر بسته کننده مربوطه داشته باشد. عناصر Frameset مجاز نیستند. | |
| XHTML 1.0 انتقالی | مشابه اعلان انتقالی HTML، اما تمام محتوا باید در قالب XML باشد. عناصر Frameset مجاز نیستند. | |
| مجموعه فریم XHTML 1.0 | شبیه به اعلان انتقالی XHTML، اما به عناصر مجموعه فریم اجازه می دهد. | |
| XHTML 1.1 | مشابه اعلان سخت XHTML، به علاوه قابلیت‌های ماژول مانند پشتیبانی Ruby برای زبان‌های آسیای شرقی را فراهم می‌کند. |
خوشبختانه، مشخصات HTML5 اعلان doctype را بسیار ساده می کند. در واقع، تنها یک چنین اعلان در HTML5 وجود دارد. برای اینکه مرورگر شما با استفاده از مشخصات HTML5 رندر شود، اعلان doctype را که در نشان داده شده است اضافه کنید.
فهرست 1. اعلان نوع doctype HTML5اعلان باید در ابتدای سند HTML، قبل از .
برچسب های ساختار جدیدفرض پشت ایجاد تگ‌های ساختاری جدید، تمایل به تقسیم صفحات وب به بخش‌های منطقی با استفاده از عناصری است که نام‌های توصیفی آنها با محتوای آنها مطابقت دارد. از نظر مفهومی، یک صفحه وب را می توان به عنوان یک سند در نظر گرفت. اسناد شامل سرصفحه ها، پاورقی ها، فصل ها و موارد دیگر هستند نمادها، تقسیم اسناد به بخش های منطقی.
که در این بخشبا استفاده از یک مثال، روش های فعلی تقسیم یک سند HTML مورد بحث قرار می گیرد. در بخش‌های بعدی مقاله، کد اصلی را با استفاده از تگ‌های ساختاری HTML5 و حالت گام به گامبیایید ایجاد یک ساختار سند منطقی را در نظر بگیریم.
رویکرد HTML 4حتی اگر قبلا فقط اسناد اولیه HTML ایجاد کرده باشید، همچنان با تگ div آشنا هستید. در دوران قبل از HTML5، تگ div مکانیزم اصلی برای ایجاد بلوک‌های محتوا در یک سند HTML بود. به عنوان مثال، استفاده از تگ‌های div را برای ایجاد یک صفحه ساده با هدر، ناحیه محتوا و پاورقی نشان می‌دهد.
فهرست 2. صفحه HTML ساده با استفاده از تگ های div A Simple صفحه HTMLاستفاده از Divs Header Content Footerاین رویکرد عالی کار می کند. تگ div یک عنصر عالی است همه منظوره. با این حال، بدون نگاه کردن به ویژگی id هر تگ div، تشخیص اینکه هر تگ div کدام بخش از سند را نشان می دهد دشوار است. می توان استدلال کرد که اگر ویژگی id به درستی نامگذاری شود، قابلیت های آن به عنوان یک شاخص کافی است، اما استفاده از ویژگی های id اجباری نیست. طعم های زیادی از ویژگی id وجود دارد که می توان آنها را به همان اندازه معتبر دانست. تگ div به خودی خود هیچ نشانی از نوع محتوایی که وظیفه نمایش آن را بر عهده گرفته است ندارد.
رویکرد HTML5HTML5 این مشکل را با ارائه مجموعه‌ای از برچسب‌ها حل می‌کند که بلوک‌های اصلی محتوایی را که یک سند HTML را تشکیل می‌دهند، با دقت بیشتری تعریف می‌کنند. صرف نظر از محتوای حاصل که یک صفحه وب نمایش می دهد، اکثر صفحات وب از آن تشکیل شده اند ترکیبات مختلفبخش های معمولی و عناصر صفحه
فهرست 4. افزودن یک بخش تگ هدر صفحه ساده HTMLاین بخش مهمی از صفحه است.
مقاله تگ پاورقیبرچسب مقاله بخش های مهمی از محتوای یک صفحه وب را نشان می دهد. به عنوان مثال، در یک وبلاگ، هر پست فردی یک محتوای معنادار است. پس از افزودن تگ مقاله به مثال کد، کد نشان داده شده در .
فهرست 5. افزودن برچسب های مقاله یک سرصفحه ساده HTML صفحهاین بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
تگ پاورقی کنارتگ کنار نشان می دهد که محتوای موجود در این عنصر به محتوای اصلی آن صفحه مرتبط است، اما بخشی از آن نیست. استفاده از آن به نوعی شبیه به جاسازی یک نظر در متن متن است (مانند این نظر). محتوا در پرانتزفراهم می کند اطلاعات تکمیلیدر مورد عنصر حاوی این محتوا پس از افزودن تگ aside به کد مثال، کد نشان داده شده در آن را دریافت می کنیم.
فهرست 6. افزودن یک تگ کناری یک سرصفحه صفحه HTML سادهاین بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
برچسب پاورقیتگ پاورقی محتوایی را که در آن موجود است به عنوان پاورقی سند جاری مشخص می کند. پس از افزودن تگ فوتر به کد مثال، کدی را دریافت می کنیم که در .
فهرست 7. افزودن تگ پاورقی یک سرصفحه صفحه HTML سادهاین بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
این یک نکته برای اولین پست وبلاگ است.
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
پاورقیدر این مرحله، همه تگ های div از نمونه اصلیبا تگ های ساختار HTML5 جایگزین شده اند.
فهرست ناوبری 8. افزودن یک تگ ناوبری یک سرصفحه صفحه HTML ساده مقداری پیوند ناو برخی دیگر از پیوندهای ناو یک پیوند ناو سوماین بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
این یک نکته برای اولین پست وبلاگ است.
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
پاورقی نسخه نهایی نمونهدر اینجا نشان داده شده نتیجه جایگزینی تگ های div اصلی با تگ های ساختار HTML5 جدید است.
فهرست 9. نسخه نهایی مثال سرصفحه صفحه ساده HTML مقداری پیوند ناو برخی دیگر از پیوندهای ناو یک پیوند ناو سوماین بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
این یک نکته برای اولین پست وبلاگ است.
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
پاورقیاگرچه این مثال تا حد امکان برای اهداف نمایشی ساده شده است، اما مقایسه نمونه اصلی بر اساس عناصر div() با نوع حاصل () به وضوح هدف تگ های ساختار جدید را نشان می دهد.
نتیجهتگهای ساختاری جدید HTML5 محتوایی را که شامل می‌شوند توصیف می‌کنند و به تقسیم یک سند به بخش‌های منطقی کمک می‌کنند. مانند نویسنده ای که یک کتاب می نویسد، نویسنده سند همچنان می تواند تصمیم بگیرد که چه زمانی و کجا از این عناصر جدید در سند خود استفاده کند. اگرچه دو نویسنده که یک کتاب را می نویسند ممکن است انتخاب کنند راه های مختلفبرای تقسیم این کتاب به فصل، استفاده از فصل ها هنوز یک رویکرد ثابت برای تقسیم کتاب ها به بخش است. به همین ترتیب، اگرچه دو نویسنده یک صفحه وب معین ممکن است انتخاب کنند ساختارهای مختلف، جدید عناصر ساختاری HTML5 به توسعه دهندگان صفحات وب یک تجربه جدید و ثابت را ارائه می دهد که در گذشته ارائه نشده بود. تگ های div.
