فصل دوم

Hyper Text Markup Language

HTML (زبان نشانه‌گذاری ابرمتن) پایه و اساس هر وب سایتی است. این یک زبان نشانه‌گذاری است که برای تعریف ساختار و محتوای یک صفحه وب استفاده می‌شود. با HTML می‌توانید متن را قالب‌بندی کنید، تصاویر و ویدیوها را درج کنید، لینک‌ها را ایجاد کنید و کارهای بسیار بیشتری انجام دهید. هر سند HTML با یک تگ <html> شروع می‌شود و با یک تگ </html> به پایان می‌رسد. محتوای وب سایت در داخل این تگ ها قرار می‌گیرد و به عناصر مختلف تقسیم می‌شود.

ساختار اصلی یک سند HTML

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

<!DOCTYPE html>: نوع سند و نسخه HTML (در این مورد HTML5) را اعلام می کند.

<html>: عنصر ریشه ای که کل سند HTML را در بر می گیرد.

<head>: حاوی ابرداده و پیوندهایی به منابع خارجی مانند فایل‌های CSS است. آنچه در <head> است معمولاً مستقیماً در وب سایت نمایش داده نمی شود.

<meta charset=”utf-8″> – این عنصر مجموعه نویسه‌هایی را که سند شما باید استفاده کند را روی UTF-8 تنظیم می‌کند.

<meta name=”viewport” content=”width=device-width”> — این عنصر viewport تضمین می‌کند که صفحه در عرض درگاه نمایش رندر می‌شود، و از باز کردن صفحه‌ها توسط مرورگرهای تلفن همراه و سپس کوچک کردن آنها جلوگیری می‌کند.

 <title>: عنوان صفحه وب را که در نوار عنوان مرورگر نمایش داده می شود را مشخص می کند.

<body></body> – عنصر <body>. این شامل تمام محتوایی است که می‌خواهید هنگام بازدید از صفحه شما به کاربران وب نشان دهید، خواه متن، عکس، ویدیو، بازی، آهنگ‌های صوتی قابل پخش یا هر چیز دیگری.

HTLM Elements

یک عنصر / HTLM Element از یک تگ شروع، محتوا و یک تگ پایان تشکیل شده است. تگ شروع و تگ پایان نام یکسانی دارند، با این تفاوت که تگ پایان یک اسلش قبل از نام دارد.

بخش های اصلی عنصر ما به شرح زیر است:

     تگ باز/ opening tag: این شامل نام عنصر (در این مورد p) است که در براکت های زاویه باز و بسته پیچیده شده است. این نشان می دهد که عنصر از کجا شروع می شود یا شروع به اثر می کند – در این مورد که پاراگراف شروع می شود.

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

     محتوا / content: این محتوای عنصر است که در این مورد فقط متن است.

     عنصر / element: تگ افتتاحیه، تگ بسته شدن و محتوا با هم عنصر را تشکیل می دهند.

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

ویژگی ها حاوی اطلاعات اضافی درباره عنصری هستند که نمی خواهید در محتوای واقعی ظاهر شوند. در اینجا، class نام ویژگی و “editor-note” مقدار ویژگی است. ویژگی class به شما امکان می دهد به عنصر یک شناسه غیر منحصر به فرد بدهید که می تواند برای هدف قرار دادن آن (و هر عنصر دیگر با مقدار کلاس مشابه) با اطلاعات سبک و چیزهای دیگر استفاده شود. برخی از ویژگی ها هیچ ارزشی ندارند، مانند مورد نیاز.

ویژگی هایی که یک مقدار را تعیین میکنند همیشه دارای:

    •      فاصله بین آن و نام عنصر (یا ویژگی قبلی، اگر عنصر قبلاً یک یا چند ویژگی داشته باشد).
    •      نام مشخصه که با علامت مساوی همراه است.
    •      مقدار مشخصه با علامت نقل قول باز و بسته می شود.

 

عناصر تودرتو / Nesting elements

شما می توانید عناصر را درون عناصر دیگر نیز قرار دهید – به این حالت تودرتو می گویند. اگر بخواهیم بگوییم که گربه ما بسیار بداخلاق است، می‌توانیم کلمه “بسیار” را در یک عنصر <strong> بپیچیم، به این معنی که این کلمه باید به شدت تاکید شود:

با این حال، باید مطمئن شوید که عناصر شما به درستی تو در تو قرار گرفته اند. در مثال بالا ابتدا عنصر <p> و سپس عنصر <strong> را باز کردیم. بنابراین، ابتدا باید عنصر <strong> و سپس عنصر <p> را ببندیم. موارد زیر نادرست است:

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

عناصر خالی / Void elements

برخی از عناصر محتوایی ندارند و عناصر خالی نامیده می شوند. عنصر <img> را که قبلاً در صفحه HTML خود داریم، در نظر بگیرید:

این شامل دو ویژگی است، اما هیچ برچسب </img> بسته و محتوای داخلی وجود ندارد. این به این دلیل است که یک عنصر تصویر محتوا را نمی‌پوشاند تا بر آن تأثیر بگذارد. هدف آن قرار دادن یک تصویر در صفحه HTML در مکانی است که ظاهر می شود.

برخی از عناصر اولیه

تصاویر / Images

همانطور که قبلاً گفتیم، یک تصویر را در صفحه ما در موقعیتی که ظاهر می شود تعبیه می کند. این کار را از طریق ویژگی src (source) انجام می دهد که حاوی مسیر فایل تصویری ما است.

ما همچنین یک ویژگی alt (جایگزین) قرار داده ایم. در ویژگی alt، متن توصیفی را برای کاربرانی که نمی توانند تصویر را ببینند، مشخص می کنید، احتمالاً به دلایل زیر:

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

کلمات کلیدی متن جایگزین “descriptive text” هستند. متن جایگزینی که می نویسید باید اطلاعات کافی را در اختیار خواننده قرار دهد تا ایده خوبی از آنچه که تصویر منتقل می کند داشته باشد. در این مثال، متن فعلی ما “My test image” اصلا خوب نیست. یک جایگزین بسیار بهتر برای لوگوی فایرفاکس ما “آرم فایرفاکس: روباهی شعله ور زمین را احاطه کرده است.”

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

سرفصل ها / Heading 

عناصر عنوان به شما این امکان را می دهند که مشخص کنید که قسمت های خاصی از محتوای شما عنوان یا عنوان فرعی باشد. همانطور که یک کتاب دارای عنوان اصلی، عنوان فصل و زیرنویس است، یک سند HTML نیز می تواند. HTML شامل 6 سطح عنوان، <h1> – <h6> است، اگرچه معمولاً حداکثر از 3 تا 4 استفاده می کنید:

توجه: هر چیزی که در HTML بین <!– و –> باشد یک Comment HTML است. مرورگر توضیحات را در هنگام ارائه کد نادیده می گیرد. به عبارت دیگر، آنها در صفحه قابل مشاهده نیستند – تنها در کد. توضیحات HTML راهی برای نوشتن یادداشت های مفید در مورد کد یا منطق خود است.

اکنون سعی کنید یک عنوان مناسب به صفحه HTML خود درست بالای عنصر <img> خود اضافه کنید.

توجه: خواهید دید که عنوان سطح 1 شما دارای سبک ضمنی است. از عناصر عنوان برای بزرگ‌تر یا پررنگ‌تر کردن متن استفاده نکنید، زیرا برای دسترسی و دلایل دیگری مانند SEO استفاده می‌شوند. سعی کنید دنباله ای معنادار از سرفصل ها در صفحات خود بدون رد شدن از سطوح ایجاد کنید.

پاراگراف ها / Paragraphs

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

لیست ها

بسیاری از محتوای وب لیست است و HTML عناصر ویژه ای برای آنها دارد. علامت گذاری لیست ها همیشه از حداقل 2 عنصر تشکیل شده است. رایج ترین انواع لیست لیست های مرتب و نامرتب هستند:

    1.      لیست های نامرتب برای لیست هایی هستند که ترتیب اقلام در آنها مهم نیست، مانند لیست خرید. اینها در یک عنصر <ul> پیچیده شده اند.
    1.      لیست های مرتب شده برای لیست هایی هستند که ترتیب اقلام مهم است، مانند دستور پخت. اینها در یک عنصر <ol> پیچیده شده اند.

هر آیتم داخل لیست ها داخل یک عنصر <li> (مورد لیست) قرار می گیرد.

به عنوان مثال، اگر بخواهیم بخشی از پاراگراف زیر را به لیست تبدیل کنیم:

ما می توانیم نشانه گذاری را به این تغییر دهیم:

پیوندها / Links

پیوندها بسیار مهم هستند – آنها چیزی هستند که وب را به یک وب تبدیل می کنند! برای افزودن یک پیوند، باید از یک عنصر ساده استفاده کنیم –  <a>  شکل کوتاه “anchor” است. برای تبدیل متن داخل پاراگراف به پیوند، مراحل زیر را دنبال کنید:

    1.      متنی را انتخاب کنید ما متن “Mozilla Manifesto” را انتخاب کردیم.
    1.      متن را در یک عنصر <a> بپیچید، همانطور که در زیر نشان داده شده است:
    1. مطابق شکل زیر به عنصر <a> یک ویژگی href بدهید:
    1. مقدار/ Value این ویژگی را با آدرس وب که می‌خواهید پیوند به آن اشاره کند پر کنید:
    1. اگر قسمت https یا http به نام پروتکل را در ابتدای آدرس وب حذف کنید، ممکن است نتایج غیرمنتظره ای دریافت کنید. پس از ایجاد یک پیوند، روی آن کلیک کنید تا مطمئن شوید که آن را به جایی که می خواهید ارسال می کند.

توجه: href ممکن است در ابتدا مانند یک انتخاب نسبتا مبهم برای نام یک ویژگی به نظر برسد. اگر در به خاطر سپردن آن مشکل دارید، به یاد داشته باشید که مخفف مرجع فرامتن است.

برای شروع کار با HTML، می توانید به سادگی از یک ویرایشگر متن مانند Notepad (ویندوز)، (TextEdit (Mac یا یک ویرایشگر کد مانند Visual Studio Code یا Sublime Text استفاده کنید. فایل خود را با پسوند html. ذخیره کنید و آن را در یک مرورگر وب باز کنید تا نتیجه را ببینید.

اکنون فایل را به صورت .html ذخیره کنید، به عنوان مثال “index.html” و سپس فایل را با مرورگری مانند Firefox یا Google Chrome باز کنید.

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

index.html

مثال دوم:

یک ویرایشگر باز کنید و کد زیر را قرار دهید. سپس فایل را به عنوان index.html ذخیره کنید.

 

سپس index.html را با دوبار کلیک در مرورگر خود باز کنید.

یادگیری HTML نسبتاً آسان است، اما زمانی که با CSS برای چیدمان (Style) و طراحی وب سایت شما ترکیب شود، بسیار قدرتمند است. هنگامی که با اصول HTML آشنا شدید، می توانید شروع به کاوش در CSS برای اضافه کردن سبک و قالب بندی به وب سایت خود کنید.

HTML5 چیست؟ درک روش صحیح چیدمان صفحه با HTML5

HTML5 آخرین نسخه از زبان نشانه‌گذاری ابرمتنی است، زبان استاندارد برای ساختاربندی محتوا در وب. این نسخه به طور رسمی در اکتبر 2014 منتشر شد و تعدادی بهبود و ویژگی‌های جدید را در مقایسه با پیشینیان خود به ارمغان آورد. HTML5 با هدف ساخت وبی مدرن‌تر، دسترس‌پذیرتر و همکاری‌پذیرتر توسعه یافت. این نسخه عناصر و APIهای جدیدی را معرفی می‌کند که به توسعه‌دهندگان امکان می‌دهد صفحات وب و برنامه‌های وب قدرتمندتر و تعاملی‌تری را ایجاد کنند.

HTML5 ستون فقرات وب است که مسئولیت ساختار و ارائه محتوا را بر عهده دارد. مجموعه‌ای از عناصر و ویژگی‌های جدید HTML5 را می توان با تمرکز بر موارد زیر معرفی کرد:

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

تکنیک‌های چیدمان در HTML5

بزرگترین بهبود چیدمان HTML5 معرفی عناصر معنایی بود. این موارد به توسعه‌دهندگان * و * مرورگرها کمک می‌کنند تا محتوا را به روشی معنادارتر درک کنند:

    • <header>: نشان‌دهنده محتوای مقدماتی برای یک صفحه یا بخش، که معمولاً شامل عناوین، ناوبری یا لوگوها می‌شود.
    • <nav>: مجموعه‌ای از لینک‌های ناوبری را در بر می‌گیرد.
    • <main>: محتوای اصلی یک سند. در هر صفحه فقط باید یک <main> وجود داشته باشد.
    • <section>: یک بخش کلی از محتوا، مانند مقاله، بلوک خبری و غیره.
    • <article>: محتوای مستقل و خودکفا مانند پست وبلاگ، مقاله خبری یا ورودی انجمن.
    • <aside>: محتوایی که به طور مماس با محتوای اطراف مرتبط است (به عنوان مثال، نوارهای کناری، کادرهای فراخوان یا لینک‌های مرتبط).
    • <footer>: ناحیه پایین یک صفحه یا بخش، که معمولاً حاوی اطلاعات حق نسخه‌برداری، لینک‌های تماس و غیره است.

مثالی از یک چیدمان HTML5

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

در این مثال، ما از عناصر HTML5 استفاده کردیم تا بخش‌های مختلف صفحه را تعریف کنیم، که خوانایی و دسترس‌پذیری را بهبود می‌بخشد. استفاده از <main>, <section>, <article>, <aside>, و دیگر تگ‌های معنایی به سازماندهی منطقی محتوا کمک کرده و بهینه‌سازی موتور جستجو (SEO) را بهبود می‌بخشد.

HTML5 امکانات ایجاد فرم‌ها و عناصر تعاملی در صفحات وب را گسترش می‌دهد. این نسخه انواع ورودی جدیدی مانند email، date، time، range و color را معرفی می‌کند که ورودی‌های کاربرپسندانه‌تری برای انواع داده‌های خاص فراهم می‌آورد. علاوه بر این، APIهای جدید برای کانواس، کشیدن و رها کردن، و چندرسانه‌ای (صوتی و تصویری) امکانات گسترده‌تری برای ایجاد محتوای تعاملی و چندرسانه‌ای بدون نیاز به پلاگین‌های خارجی را فراهم می‌کنند.

مزایای چیدمان معنایی HTML5

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

به خاطر داشته باشید که HTML5 عمدتا ساختار صفحه شما را مدیریت می کند. در اینجا CSS وارد عمل می شود تا به آن سبک دهد:

    • Grid یا شبکه CSS: سیستمی قدرتمند برای ایجاد چیدمان‌های چند ستونی و پیچیده.
    • Flexbox: مناسب برای تراز کردن عناصر درون کانتینرها و پاسخگو کردن چیدمان‌ها به اندازه‌های مختلف صفحه نمایش.

شما می توانید تمام دستورات HTML را با جزئیات در وب سایت زیر یاد بگیرید.

https://www.w3schools.com/html/default.asp

Online Editor:

https://www.programiz.com/html/online-compiler

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

1. CSS را یاد بگیرید

هنگامی که با HTML احساس راحتی کردید، باید شروع به یادگیری (CSS (Cascading Style Sheets کنید. از CSS برای طراحی ظاهر و چیدمان صفحات وب استفاده می شود. CSS به شما امکان می دهد رنگ ها، فونت ها، فاصله گذاری، موقعیت و موارد دیگر را کنترل کنید. تسلط بر CSS برای ایجاد وب سایت هایی با ظاهر حرفه ای بسیار مهم است.

2. طراحی وب سایت واکنش گرا / Responsives Webdesign

یاد بگیرید که چگونه طراحی وب ریسپانسیو را پیاده سازی کنید تا وب سایت شما در دستگاه ها و اندازه های مختلف صفحه نمایش عالی به نظر برسد. این شامل درک پرسش‌های رسانه در CSS، طرح‌بندی‌های انعطاف‌پذیر و سایر تکنیک‌ها برای تطبیق وب‌سایت شما با دستگاه‌های تلفن همراه و تبلت‌ها می‌شود.

3. جاوا اسکریپت

جاوا اسکریپت یک زبان برنامه نویسی است که برای تعاملی کردن وب سایت ها استفاده می شود. با یادگیری جاوا اسکریپت می‌توانید ویژگی‌های پویا مانند گالری‌های تصاویر، اعتبارسنجی فرم‌ها، تغییرات محتوای پویا و غیره را به صفحات وب خود اضافه کنید. جاوا اسکریپت همچنین پایه ای برای فناوری ها و چارچوب های پیشرفته وب مانند React، Angular و Vue است.

4. ابزار توسعه وب / Webentwicklungs-Tools

با ابزارها و فناوری‌های مورد استفاده در توسعه وب مدرن آشنا شوید، مانند ابزارهای نسخه‌سازی (مانند Git)، ابزارهای توسعه مرورگر (ابزارهای توسعه‌دهنده)، و چارچوب‌ها/کتابخانه‌ها برای هر دو CSS (مانند Bootstrap، Tailwind) و جاوا اسکریپت (مانند React، Angular، Vue).

5. ساخت پروژه ها

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

6. به طور مداوم یاد بگیرید

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