آموزش مقدماتی HTML و CSS (جلسه 3: آشنایی با HTML - بخش ۱)
1398/02/08 12:52 , میلاد صاحب نظر

آموزش مقدماتی HTML و CSS (جلسه 3: آشنایی با HTML - بخش ۱)

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

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد 
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

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

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

استفاده از عنصر مناسب برای هدف خاص نیاز به تمرین و زمان زیادی دارد و همچنین به مرور زمان باید بتوانید تصمیمات عاقلانه‌ای در طول فرآیند اتخاذ کنید.

بررسی معنایی

بسیار خب، دقیقه منظور از معناشناسی(Semantics) چیست؟ معناشناسی در HTML عبارت است از معنا و ساختار بخشیدن به محتوا در صفحه وب، با استفاده از عنصر مناسب. کد معناشناسی، در واقع ارزش محتوا را در صفحه توضیح می‌دهد و هیچ کاری با استایل یا ظاهر آن محتوا ندارد.

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

علاوه بر این، مدیریت و کار با HTML معناشناسی (semantic HTML) ساده‌تر است، چون به وضوح نشان می‌دهد که هر قطعه از محتوا در چه موردی است.

چون عناصر جدید ارائه شده‌اند، در ادامه در مورد اینکه آن عناصر واقعاً چه معنایی دارند و اینکه برای ارائه چه نوع محتوایی مفید هستند، صحبت خواهیم کرد. قبل از اینکه به این مسائل بپردازیم، اجازه دهید دو عنصر <div> و <span> (که هیچ ارزش معنایی ندارند) را بررسی کنیم. تنها هدف وجودی آن‌ها، اعمال استایل است.

شناسایی Division و Span

Division یا <div>ها  <span>ها عناصر HTML هستند که فقط به عنوان ابزاری برای اعمال استایل مورد استفاده قرار می‌گیرند. این دو عنصر چون ابزارهای generic هستند، دارای هیچ معنا یا ارزش معناشناسی نیستند.

پاراگراف‌ها معناشناسی‌هایی هستند که در آن‌ها، محتوا درون عنصر <p> که به عنوان یک پاراگراف شناخته و درک شده است، قرار می‌گیرند. <div>ها و <span>ها چنین معنایی ندارند و صرفاً ابزار یا به نوعی ظرف هستند.

عنصرهای Block در برابر Inline

اکثر عنصرها یا عنصرهای سطح block هستند یا عنصرهای سطح inline. چه تفاوتی بین این دو وجود دارد؟

عنصرهای سطح block در یک خط جدید آغاز می‌شوند، به صورت پشته‌ای (یکی روی دیگری) عمل می‌کنند و می‌توانند هر طولی داشته باشند.

عنصرهای سطح block می‌توانند به صورت تو در تو درون یکدیگر قرار بگیرند و می‌توانند عنصرهای سطح inline را نیز در خود جای دهند در اکثر مواقع عنصرهای سطح block را می‌بینیم که برای قطعات محتوای بزرگ‌تر استفاده شده‌اند (مانند پاراگراف‌ها).

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

به هر حال، نمی‌توانند شامل عنصرهای سطح block باشند. معمولاً می‌بینیم که عنصرهای سطح inline در قطعات محتوای کوچک (مانند چند کلمه) استفاده می‌شوند.

ولی به هر حال، هر دو عنصر <div> و <span> در هنگام ساخت یک وبسایت بسیار با‌ارزش هستند، چون به ما این قابلیت را می‌دهند که استایل‌های مورد نظر را برای یک مجموعه از محتوای مشخص شده اعمال کنیم.

<div> یک عنصر سطح block است که معمولاً برای شناسایی دسته‌های بزرگ محتوا استفاده می‌شود و به ایجاد طرح یا layout و طراحی یک صفحه وب کمک می‌کند. از طرف دیگر، <span>یک عنصر سطح inline است که معمولاً برای شناسایی دسته‌های کوچک‌تر متن درون یک عنصر سطح block استفاده می‌شود.

معمولاً می‌بینیم که <div>ها و <span>ها با اتریبیوت‌های class یا id (برای اهداف اعمال استایل) به کار‌ می‌روند. انتخاب یک مقدار یا نام از اتریبیوت class یا id به کمی دقت نیاز دارد. ما باید مقداری را انتخاب کنیم که محتوا را به عنوان یک عنصر در نظر بگیرد، نه اینکه حتماً فقط ظاهر یک عنصر را تحت تأثیر قرار دهد.

برای مثال، اگر یک <div> با یک background نارنجی داشته باشیم که حاوی لینک‌های رسانه اجتماعی است، اولین فکری که به ذهنمان می‌رسد این است که یک مقدار کلاس orange به <div> بدهیم.

حالا اگر آن background نارنجی بعداً قرار باشد به آبی تغییر رنگ دهد چه اتفاقی می‌افتد؟ داشتن یک مقدار کلاس orange دیگر منطقی نیست. یک انتخاب منطقی‌تر برای مقدار کلاس این است که آن مقدار را social در نظر بگیریم، چون این مقدار فقط به محتوای <div> مربوط می‌شود، نه به استایل آن.

<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>

کامنت‌ها در HTML و CSS

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

HTML و CSS به ما این امکان را می‌دهند که درون کدمان کامنت بگذاریم و هر محتوایی که به شکل کامنت نوشته شود، در صفحه وب نمایش داده نمی‌شود.

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

کامنت‌های HTML با  --!> شروع و با <-- پایان می‌یابند. کامنت‌های CSS با */ شروع و با  /*خاتمه می‌یابند.

استفاده از عنصرهای متن محور

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

فعلاً ما فقط روی عنصرهای معروف و مرسوم تمرکز می‌کنیم (برخی از آن‌ها عبارت‌اند از هدینگ‌ها، پاراگراف‌ها و متن bold برای نشان دادن اهمیت متن و italicها برای تاکید). بعداً در جلسات یازده و دوازده (کار با typogtaphyها) بررسی دقیق‌تری روی استایل متن خواهیم داشت.

هدینگ‌ها

هدینگ‌ها عنصرهای سطح block هستند و دارای رده‌های <h1> تا <h6> می‌باشند. هدینگ‌ها کمک می‌کنند تا خیلی سریع محتوا را تجزیه کرده و سلسله مراتب ایجاد کنیم. هدینگ‌ها همچنین شناساگرهای (identifier) کلیدی برای کاربرانی هستند که یک صفحه را مطالعه می‌کنند.

آن‌ها همچنین به موتورهای جستجو کمک می‌کنند تا محتوای یک صفحه را شاخص گذاری کرده  شناسایی کنند.

هدینگ‌ها باید به گونه‌ای استفاده شوند که به محتوای صفحه مرتبط باشند. هدینگ اصلی یک صفحه یا بخش باید با عنصر <h1> و هدینگ‌های زیرمجموعه (در صورت لزوم) باید از عنصرهای <h2> تا <h6> استفاده کنند.

هر سطح هدینگ باید در جایی استفاده شود که از لحاظ معناشناسی ارزش داشته باشد و نباید برای bold یا بزرگ کردن متن استفاده شوند. برای bold و بزرگ‌ کردن متن روش‌های بهتری وجود دارند.

در ادامه، یک نمونه کد HTML برای همه سطوح مختلف هدینگ را مشاهده می‌کنید.

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

پاراگراف‌ها

پس از هدینگ‌ها معمولاً پاراگراف‌ها قرار می‌گیرند. پاراگراف‌ها با استفاده از عنصر <p> که سطح block است، تعریف می‌شوند. پاراگراف‌ها می‌توانند یکی پس از دیگری قرار گیرند و به یک صفحه در صورت نیاز اطلاعات اضافه کنند. در زیر مثالی از چگونگی قرارگیری متون را مشاهده می‌کنید.

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

متن bold با strong

برای bold کردن یک متن و تاکید قوی بر اهمیت آن، می‌توانیم از عنصر سطح inline به نام <strong> استفاده کنیم. دو عنصر وجود دارند که متن را برای ما bold می‌کنند: عنصرهای <strong> و <b>. درک تفاوت معنایی این دو عنصر بسیار مهم است.

عنصر <strong> از لحاظ معنایی برای تاکید قوی روی متن استفاده می‌شود و در نتیجه یک گزینه مرسوم برای bold کردن متن است. از طرف دیگر، عنصر <b> از نظر معنایی یعنی تغییر نه چندان زیاد در استایل متن، که در نتیجه انتخاب چندان خوبی برای متنی که نیاز به توجه زیاد دارد نیست.

ما باید اهمیت متنی که می‌خواهیم bold کنیم را بدانیم و متناسب با اهمیت آن، یک عنصر انتخاب کنیم.

در زیر دو مورد کد HTML برای ایجاد متن bold مشاهده می‌کنید:

<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>

Italic کردن متن با Emphasis

برای Italic کردن متن و در نتیجه برای تاکید کردن بر آن متن، از عنصر سطح inline به نام <em> استفاده می‌کنیم. همانند عنصرهای bold کننده متن، دو عنصر مختلف وجود دارند که متن را Italic می‌کنند و هر کدام از لحاظ معناشناسی معانی متفاوتی دارند.

عنصر <em> از نظر معناشناسی برای تاکید مؤکد بر متن استفاده می‌شود. در نتیجه این عنصر برای italic کردن متن یک گزینه بسیار محبوب و مرسوم است. گزینه دیگر، عنصر <i> است که از نظر معناشناسی برای بیان متن با یک صدا یا گفتار متفاوت استفاده می‌شود، تقریباً شبیه به اینکه متن را درون کوتیشن قرار دهیم.

دوباره می‌گوییم، باید ابتدا اهمیت متنی که می‌خواهیم Italic کنیم را بسنجیم و بدانیم، سپس با توجه به آن اهمیت یک عنصر انتخاب کنیم.

در زیر یک کد HTML برای italic کردن متن مشاهده می‌کنید:

<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>

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

ایجاد ساختار

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

خوشبختانه، HTML5 عنصرهای ساختار محور را معرفی کرد (از جمله <header>، <nav>، <article>، <section>، <aside> و <footer>).

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

اجازه‌ دهید دقیق‌تر بررسی کنیم.

تصور ۱.۲: مثالی از عناصر ساختاری HTML5 که به سازماندهی صفحات معنا می‌بخشد.

تصویر ۳.۱: مثالی از عناصر ساختاری HTML5 که به سازماندهی صفحات معنا می‌بخشد.

هدر

عنصر <header>، همان‌طور که از نامش مشخص است، برای شناسایی قسمت بالای صفحه، article، بخش یا قسمتی از صفحه استفاده می‌شود. در کل، عنصر <header> می‌تواند شامل یک هدینگ، متن معرفی و حتی آدرس و جهتیابی باشد.

<header>...</header>

عنصرهای <header> در برابر <head> در برابر <h1> تا <h6>

معمولاً عنصر <header> با عنصر <head> یا عنصرهای هدینگ <h1> تا <h6> اشتباه گرفته می‌شود. آن‌ها همه معانی متفاوتی دارند و باید با توجه به معانی که دارند مورد استفاده قرار بگیرند.

عنصر <header> یک عنصر ساختاری است که هدینگ یک بخش از یک صفحه را مشخص می‌کند. این عنصر درون عنصر <body> قرار می‌گیرد.

عنصر <head> در صفحه وب نمایش داده نمی‌شود و فقط برای مشخص کردن متاداده (از جمله عنوان سند و لینک‌های خارجی یا اکسترنال) مورد استفاده قرار می‌گیرد. این عنصر مستقیماً درون عنصر <html> قرار می‌گیرد.

عنصرهای هدینگ (<h1> تا <h6>)، برای ایجاد چندین سطح هدینگ متن در یک صفحه مورد استفاده قرار می‌گیرند.

هدایت یا navigation

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

در اکثر مواقع، لینک‌هایی که درون عنصر <nav> قرار می‌گیرند، کاربر را به سمت صفحات دیگر درون همان وبسایت یا بخش‌های مشابه با آن صفحه وب هدایت می‌کنند. لینک‌های متفرقه نباید درون عنصر <nav> قرار بگیرند. بلکه فقط باید از عنصر anchor (یا <a>) برای آن‌ها استفاده کرد.

<nav>...</nav>

Article

عنصر <article> برای مشخص کردن یک محتوای مستقل و مجزا استفاده می‌شود که می‌توان آن را به صورت مجزا توزیع یا دوباره مورد استفاده قرار گیرد. معمولاً از عنصر <article> برای علامت‌گذاری پست‌های وبلاگی، مقاله‌های روزنامه‌ها، محتوای وارد شده توسط کاربر و غیره استفاده می‌شود.

وقتی می‌خواهید تصمیم بگیرید که از عنصر <article> استفاده کنید یا خیر، باید مشخص کنید که آیا محتوای درون عنصر را می‌توانید بدون گیج شدن در جای دیگری تکرار کنید یا خیر. برای مثال اگر محتوای درون عنصر <article> از ساختار صفحه حذف شود و درون یک ایمیل یا یک print قرار گیرد، آن محتوا همچنان باید منطقی باشد.

<article>...</article>

Section

عنصر <section> برای مشخص کردن یک دسته موضوعی از محتوا استفاده می‌شود که معمولاً (اما نه همیشه) شامل یک هدینگ هم هست. دسته محتوای درون عنصر <section> ممکن است که ذاتاً generic باشد، اما برای شناسایی تمام محتوا مرتبط به هم مفید است.

عنصر <section> معمولاً برای تجزیه محتوا و فراهم کردن سلسله مراتب در یک صفحه مورد استفاده قرار می‌گیرد.

<section>...</section>

تصمیم‌گیری بین عنصرهای <article>، <section> یا <div>

گاهی تصمیم‌گیری در مورد اینکه کدام عنصر (<article>، <section> یا <div>) از نظر معناشناسی برای هدف و کار ما بهترین است، بسیار مشکل می‌شود. نکته مهم در چنین مواقعی این است که به محتوا توجه کنید.

هر دو عنصرهای <article> و <section> مربوط به ساختار یک سند هستند و به طراحی یک سند کمک می‌کنند. اگر فقط قصد دارید در محتوا استایل‌گذاری کنید و این محتوا قرار نیست در طراحی متن هیچ تأثیری داشته باشد، پس باید از عنصر <div> استفاده کنید.

اگر محتوا در طراحی سند تأثیر داشته باشد و بتواند به صورت مجزا توزیع یا تکرار شود، باید از عنصر <article> استفاده کنید.

اگر محتوا در طراحی سند تأثیر دارد و یک محتوای موضوعی می‌باشد، باید از عنصر <section> استفاده کنید.

Aside

عنصر <aside> محتوایی (مانند sidebarها، insertها یا توضیحات مختصر) را در خود نگه می‌دارد که فقط و فقط به محتوای اطراف عنصر مرتبط باشند. وقتی عنصر <aside> برای مثال درون یک عنصر <article> قرار بگیرد، می‌تواند محتوای مرتبط با ناشر مقاله را مشخص کند.

ممکن است به طور غریزی، یک عنصر <aside> را به عنوان عنصری در نظر بگیریم که در سمت چپ یا راست یک صفحه ظاهر می‌شود.

اما باید به خاطر داشته باشیم که تمام عنصرهای ساختاری، از جمله عنصر <aside>، عنصرهای سطح block هستند و در نتیجه در یک خط جدید ظاهر می‌شوند و کل طول موجود در صفحه یا عنصری که درون آن قرار دارند (و آن عنصر به عنوان عنصر پدر شناخته می‌شود) را اشغال می‌کنند.

<aside>...</aside>

در جلسات نهم و دهم (تنظیم موقعیت محتوا) توضیح خواهیم داد که چگونه می‌توان موقعیت یک عنصر را تغییر داد و مثلاً آن را در سمت راست یا چپ گروه محتوا قرار داد.

Footer

عنصر <footer> بسته شدن یا انتهای یک صفحه، مقاله، بخش یا قسمت‌های دیگر یک صفحه را مشخص می‌کند. در کل، عنصر <footer> در پایین عنصر پدر خود قرار می‌گیرد. محتوای درون عنصر <footer> باید شامل اطلاعات مرتبط باشد و نباید با سند یا بخشی که در آن قرار گرفته است کاملاً متفاوت باشد.

<footer>...</footer>

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

تمرین

در حال حاضر، وبسایت Styles Confrence ما دچار کمبود ساختار است – و همچنین محتوا. اجازه دهید کمی روی آن وقت بگذاریم و صفحه اصلی سایت را کمی تزئین کنیم.

  1. فایل html را باز می‌کنیم و یک عنصر <header> به آن اضافه می‌کنیم. عنصر <header> ما باید شامل عنصر <h1> باشد. همچنین اجازه دهید یک عنصر <h3> نیز به عنوان یک خط اطلاعات پشتیبان برای عنصر <h1> اضافه کنیم.
<header>
  <h1>Styles Conference</h1>
  <h3>August 24&ndash;26th &mdash; Chicago, IL</h3>
</header>
  1. بعد از عنصر <header>، اجازه دهید یک گروه محتوای جدید نیز با استفاده از عنصر <section> اضافه کنیم که معرفی کننده کنفرانس باشد. این بخش را با یک عنصر <h2> جدید آغاز می‌کنیم و با پاراگراف موجود به پایان می‌بریم.
<section>
  <h2>Dedicated to the Craft of Building Websites</h2>
  <p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>
</section>
  1. در ادامه مقدمه و معرفی کنفرانس، یک گروه محتوای دیگر اضافه می‌کنیم که به چند مورد از صفحاتی که بعداً قرار است اضافه کنیم اشاره می‌کند (به خصوص به صفحات سخنگویان، برنامه‌ریزی زمانی و محل برگزاری). هر کدام از صفحاتی که به آن‌ها اشاره می‌کنیم نیز باید در بخش مخصوص به خودش قرار گیرد و متن پشتیبانی داشته باشد.

همه اشاره‌ به آن صفحات را در یک عنصر <section> کلی قرار می‌دهیم و هر کدام از آن‌ها نیز درون یک عنصر <section> مخصوص به خودشان قرار می‌گیرند که خیلی هم عالی است.

<section>

  <section>
    <h5>Speakers</h5>
    <h3>World-Class Speakers</h3>
    <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
  </section>

  ...

</section>
  1. در آخر، حق کپی‌رایت را درون عنصر <footer> در انتهای صفحه قرار می‌دهیم. برای این منظور از عنصر <small> استفاده می‌کنیم که از لحاظ معنایی بیان کننده کامنت‌های کنار صفحه و print کوچک است و برای درج حق کپی‌رایت عالی است.
    در کل، محتوای درون عنصر <small> به صورت کوچک (همانند اسمش) رندر می‌شود، اما CSS reset ما از وقوع این تغییر جلوگیری می‌کند.
<footer>
  <small>&copy; Styles Conference</small>
</footer>

مشاهده می‌کنید که کم‌کم صفحه اصلی ما دارد رنگ و لعاب می‌گیرد.

شکل ۲.۲. صفحه اصلی پس از اضافه کردن محتوای بیشتر و ساختار

تصویر ۳.۲. صفحه اصلی پس از اضافه کردن محتوای بیشتر و ساختار

انکد کردن یا رمزگذاری کاراکترهای خاص

عنصر <h3> درون عنصر <header> و همچنین عنصر <small> درون عنصر <footer> نکات جالبی برای گفتن دارند. چند کاراکتر درون این عنصرها رمزگذاری یا انکد شده‌اند.

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

هر کاراکتر رمزگذاری یا انکد شده با یک & شروع می‌شود و با یک سمی کالن (;) پایان می‌یابد. چیزی که بین این دو علامت قرار می‌گیرد، رمزگذاری یا انکدینگ منحصر به فرد یک کاراکتر است، که می‌تواند یک انکدینگ نام یا عددی باشد.

برای مثال، واژه “resume” به این شکل انکد می‌شود: ;resum&eacute. درون هدر مشاهده می‌کنیم که endash و emdash هر دو انکد شده‌اند و درون فوتر نیز علامت کپی‌رایت انکد شده را مشاهده می‌کنیم.

خلاصه

در این جلسه توانستید صفحه اصلی سایت را ساختار بندی کنید و رنگ و لعاب دهید. در جلسه بعدی به ایجاد هایپرلینک‌ها می‌پردازیم تا بتوانیم صفحات بیشتری اضافه کنیم و بقیه وبسایت را بسازیم. با MUG همراه باشید!

منبع: learn.shayhowe

جلسه بعد                                                     جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات